HTML-CSS
HTML快速入门
新鲜看点
标题
排版
样式
方式一
方式二和方式三
颜色表示形式
CSS选择器
超链接
正文
排版
页面
实验过程及结果记录
源代码
实验结果
标签
表格标签
表单标签
表单项
HTML快速入门
1.新建文本文件，后缀名改为.html
2.编写 HTML 结构标签
3.在<body>中填写内容
1.HTML结构标签
<html>
<head>
<title>标题</title></head>
<body>
</body>
</html>2.特点
HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散
新鲜看点
标题
排版
图片标签:<img>
src:指定图像的url(绝对路径/相对路径)width:图像的宽度(像素/相对于父元素的百分比)
height:图像的高度(像素/相对于父元素的百分比)
标题标签:<h1>-<h6>
水平线标签:<hr>
每次修改完页面都要ctrl+s保存，才可刷新网页
样式
方式一
行内样式
<hl style="color: red;">努力学习编程</h1>
直接写在body标签范围内
方式二和方式三
其中方式三需要创建一个css文件
颜色表示形式
CSS选择器
用来选取需要设置样式的元素(标签)
以下三个优先级依次增高
元素选择器
span {
color: red;
}
类选择器
.cls {
color: green;
}
ID选择器
#time{
color: #968D92;
}
要先给想变颜色的字用span标签标记，并命名class和id
例如：
超链接
1.超链接
标签:<a>
属性:
href:指定资源访问的url
target:指定在何处打开资源链接
self:默认值，在当前页面打开blank:在空白页面打开
2.CSS属性
text-decoration:规定添加到文本的修饰，none表示定义标准的文本color:定义文本的颜色
正文
排版
1.音频、视频标签
<audio> <video>
2.换行、段落标签
换行:<br>;段落:<p>
3.文本加粗标签
<strong>
CSS样式4.line-height:设置行高
text-indent:定义第一个行内容的缩进text-align:规定元素中的文本的水平对齐方式
5.注意
在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符:
页面
布局标签:实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签
标签:<div><span>
特点:
div标签:
一行只显示一个(独占一行)
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高(width、height)span标签:
一行可以显示多个
宽度和高度默认由内容撑开.
不可以设置宽高(width、height)
marge:0 auto; 0代表上下，auto浏览器自动计算左右
CSS盒子模型
组成:内容(content)、内边距(padding)、边框(border)、外边距(margin)
CSS属性
width:设置宽度
height:设置高度
border:设置边框的属性，如:1px solid #000;
padding:内边距
margin:外边距
注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如:padding-top、padding-left、padding-right ...
实验过程及结果记录
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1 { color: #4d4f53; } #time { color: #968d92; font-size: 13px; } a { color: black; text-decoration: none; } p { text-indent: 35px; line-height: 40px; } #plast { text-align: right; } #center { width: 65%; margin: 0 auto; } </style> </head> <body> <div id="center"> <img src="img\news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪新闻</a>>正文 <h1>吃得饱饭</h1> <hr> <span id="time">2023年03月02日 21：50</span> <span><a href="https://news.cctv.com/" target="_blank">央视网</a></span> <hr> <video src="video\1.mp4" controls width="950px"></video> <P> <strong>重磅消息消息</strong>(焦点访谈):****** </p> <P> 人勤春来早，春耕农事忙。立春之后，由南到北，春天的田野处处生机盎然。 </P> <img src="img\1.jpg"> <p> ****** </p> <img src="img\2.jpg"> <p> ****** </p> <p id="plast"> 责任编辑:****** </p> </div> </body> </html>
实验结果
说明以下，提交的代码用******代替了很多文字是为了审核通过，这里懂得都懂！
标签
表格标签
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1px" cellspacing="0" width="600px"> <tr> <th>序号</th> <th>品牌Logo</th> <th>品牌名称</th> <th>企业名称</th> </tr> <tr> <td>1</td> <td> <img src="img\huawei.jpg" width="100px"></td> <td>华为</td> <td>华为技术有限公司</td> </tr> <tr> <td>2</td> <td> <img src="img\alibaba.jpg" width="100px"></td> <td>阿里</td> <td>阿里巴巴集团控股有限公司</td> </tr> </table> </body> </html>
刷新网页
表单标签
表单标签:<form>
表单属性:
action:表单数据提交的url地址
method:表单提交方式
get:表单数据拼接在url后面，?username=java,大小有限制post:表单数据在请求体中携带，大小没有限制
注意:表单项必须有name属性才可以提交
表单项
