引言
web标准：结构：HTML(页面元素和内容)；表现：CSS（页面样式）；行为：JS（页面交互）。本文主要介绍第一个。
HTML结构：
HTML(页面元素和内容)；表现：CSS（页面样式）；行为：JS（页面交互）。这篇文章仅限于HTML和CSS的基础介绍。
HTML是超文本标记语言（Hyper Text Markup Language）是用来描述网页的一种语言。它相当于内容的骨架。但是注意：HTML不是一种编程语言，而是一种标记语言。
标签：双标签（有两段开始结束，中间包裹内容），单标签（自成一体，不包括内容）。
标签关系：嵌套关系，并列关系。
HTML标签骨架
在VS Code中输入！按回车就可以生成HTML的骨架。其骨架为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><!DOCTYPE html> ：向浏览器声明当前的⽂档类型是 html
<html></html> ：是⽹⻚当中最⼤的标签，我们称之为根标签
<head></head> ：为⽹⻚的头部，它⾥⾯的内容主要⽤来定义⽹⻚标签及给浏览器查看的
⼀些信息
<meta charset="UTF-8"> ： 定义⽹⻚的编码为UTF- 8
<meta name="viewport" content="width=device-width, initial-scale=1.0">：:可视区域。
比较详细的解释。如：每30秒钟刷新当前页面:<meta http-equiv="refresh" content="30">
<title></title> ：为⽹⻚标题标签，它⾥的内容会显示在浏览器的标签⻚上
<body></body> ：为⽹⻚主体标签，它⾥⾯的内容都会显示在浏览器的⽩⾊窗⼝区域
标题标签
书写程序时可以根据内容的重要级去选择标签。
<h1>⼀号标题</h1>
<h2>⼆号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>段落标签
HTML的段落标签为<p></p>。特点：独占一行，段落间存在间隙。
<p>我是文字</p>换行标签<br>单标签，在内容中强制换行。
水平线标签
<hr>在页面中显示一条水平线，用于主题分割。（单标签）
文本格式化标签
右边更突出语境的重要性。
媒体标签
再介绍相关标签前面，这里先介绍绝对路径和相对路径。
绝对路径：绝对路径（从盘符开始的路径）。相对路径：从当前文件开始出发找目标文件的过程。
相同路径的分类：同级目录（在同一个目录中）<img src=”目标.jpg”or src=”./目标.jpg”>；
下级目录(目标文件在下级目录中)<img src=””文件夹/目标图片.jpg>；
上级目录（目标文件在上级目录中）<img src=”../目标.jpg”。
5.1图片标签
<img scr="" alt="" width="" height="" title="">（单标签）（设置图片大小，只设置一个时，图片等比例缩放）属性注意点：标签名与属性之间是用空格隔开。可以有多个属性。
（1）src:表示资源,图⽚加载的名字。
（2）width(宽),height(⾼):设置图⽚的⼤⼩。
（3）title:⿏标悬停在图⽚上的提示⽂字。
（4）alt:图⽚没有被正常加载时显示，⽹⻚阅读器读取此内容。
5.2音频标签
5.3视频标签
controls autoplay muted（静音可以自动播）
链接标签
一般跳转为目标网址或者相对路径。不知道跳转地址就跳转#。空链接：在href中指定为#号即可；
作用：（1）暂时不知道点击之后跳转到哪里，使用空链接占位；（2）刷新界面；
<a href="#"></a>列表标签
7.1无序列表
可以用css去消除掉li的小点点。
<ul>
<li>python</li>
<li>java</li>
<li>go</li>
</ul>7.2有序列表
7.3自定义列表
表格标签
8.1表格的基本标签
8.2表格标签的相关属性
注意：需要写在table标签里。
其他属性（1）align：表格对齐方式。如：left，center，right；
（2）border：表格边框。如：1；
（3）width：设置表格宽度；
8.3表格标题和表头单元格标签
<table border=”1” width="2px">
<caption>学生成绩单</caption>
<tr>
<th>名字</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
</table>8.4表格结构标签
表格结构标签：表格头部和表格主体两大部分；
（1）表格头部区域：<thead>标签；
（2）表格主体区域：<tbody>标签；
作用：结构就更加清晰，让表格有更好的语义；
8.5合并单元格
合并单元格步骤： 1.先确定是跨行还是跨列合并；2.找到目标单元格； 3.删除多余单元格。
<td rowspan=”2”>100分</td>
<!-- //注释：跨行合并两个单元格，合并表格内容为右上表格。 -->表单标签
主要用于网页的登陆，注册，搜索。
9.1 HTML 表单
表单是一个包含表单元素的区域。表单一般使用form标签包裹，其中：
action="url地址" | 数据要传送到的地方 |
method="提交方式" | 有get和post可以选择。 get：请求参数会在地址栏中显示，会封装在请求体中；请求参数的大小有限制；不太安全 post：请求参数在地址栏中不显示；请求参数的大小没有限制；比较安全 |
name="表单域名称" | 定义一个名字 |
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。我们可以使用 <form> 标签来创建表单:
<form action="www.baidu.com" method="get" name="biaodan">
</form>9.2input系列（单标签）
9.2.1input文本框
输入框标签（input标签）：<input type="text">
（1）type：属性指定输入框内容；
（2）type="text"：则是最普通的文本输入框。为单行；
（3）type="password"：则为密码输入框。为单行；
placeholder：给用户提示（提升用户体验感的属性），并且在为本域中都可以使用；
（4）type="radio"：单选框；
（5）type="checkbox"：为多选框；
<!-- 填写用户名及密码 -->
<span>用户名：</span>
<input type="text" placeholder="请输入用户名">
<br>
<span>密码：</span>
<input type="password" placeholder="请输入密码">
<br>
<!-- 选择信息：选择 性别 爱好 -->
<!-- 单选按钮 -->
<!-- 一组按钮：他们俩都是来控制性别的,添加name属性 -->
<span>性别：</span>
<input type="radio" name="gender">
<span>男</span>
<input type="radio" name="gender">
<span>女</span>
<br>
<!-- 多选按钮 -->
<span>兴趣爱好：</span>
<!-- <input type="checkbox"> 睡觉
<input type="checkbox"> 打游戏
<input type="checkbox"> 女
<input type="checkbox"> 羽毛球 -->
<!-- 优化:点击文字也可以选中多选框 -->
<input type="checkbox" id="sleep">
<label for="sleep">睡觉</label>
<input type="checkbox" id="playgame">
<label for="playgame">打游戏</label>
<input type="checkbox" id="liangnv">
<label for="liangnv">女</label>
<input type="checkbox" id="yumaoqiu">
<label for="yumaoqiu">羽毛球</label>
<br>其中：password(在里面输入显示***)。
单选，一个点了就点不灭，多选的可以灭掉。
9.2.2input按钮
（1）普通按钮：
标签：input指定type="button"；
通过value属性，指定按钮的文字；
普通按钮：
<input type="button" value="按钮">（2）重置按钮：点击重置按钮就会将数据恢复到默认状态；
标签：input指定type="reset";
注意：重置按钮自动会有重置的文字；
如果指定为value属性，则显示什么；
<input type="reset" value="重置按钮">3）提交按钮：点击提交按钮可以让表单提交给指定后台处理；
标签：input指定type="submit";
注意：提交按钮自动会有提交的文字；
<input type="submit" value="我是提交">9.2.3 上传文件
9.3 button按钮标签
9.4 select下拉菜单标签
使用标签：select为下拉框的标签，嵌套若干个option标签。其中每一个option为下拉框中的一个选项。selected="selected"。表示默认选中状态；
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">⼴州</option>
<option value="" selected="selected">深圳</option>
</select> <br>9.5 文本域标签
使用标签：<textarea name="", cols="30" rows="10"></textarea>（设置大小一般通过css）
（1）cols：列；（2）rows：行；生成的大小可以被拖拽。
9.6 label标签
我们用鼠标点中其他文字也可以选中我们的选项。
一种方法：<input type=”radio” name=”sex” id=”nan”><label for=”nan”>男</label>
第二种方法：<label><input type=”radio” name=”sex”>女</label>布局标签
10.1没有语义的布局标签
10.2 有语义的布局标签
