携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
VSCode注释快捷键：crtl+/
VSCode生成骨架快捷键：！+回车
VSCode打开网页快捷键：alt+B
1、HTML标签的结构
结构说明：
1.标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
2.常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
3.少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
2、HTML标签与标签之间的关系
3、标题标签
代码：h系列标签
1级标题
2级标题
3级标题
4级标题
5级标题
6级标题
语义：1~6级标题，重要程度依次递减
特点：文字都有加粗
文字都有变大，并且从h1→h6文字逐渐减小
独占一行
4、段落标签
如：
<p>我是一段文字</p>
5、换行标签
<br>//在文本后直接插入<br>即可
6、分割线标签
<hr>
7、文本格式化标签
8、媒体标签
8.1、图片标签
8.1.1代码：
<img src="" alt="">
8.1.2特点：
单标签
img标签需要展示对应的效果需要借助标签的属性进行设置
PS:
1、当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可
2、路径的情况很多
如：
<img src="./1.jpg" alt="" title="">
8.1.3属性注意点：
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.|标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分
8.1.4alt属性
属性名：alt
属性值：替换文本，当图片不显示时显示的文字
8.1.5title属性
鼠标悬停时显示的文字
ps：title属性不仅仅可以用于图片标签，还可以用于其他标签
8.1.6width和height属性
属性名：width和height|
属性值：宽度和高度（数字）
注意点：
如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当此时图片可能会变形
8.1.7绝对路径和相对路径
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如：
盘符开头：D:\day01\images\1.jpg
相对路径：
同级目录
当前文件和目标文件在同一目录中
代码步骤：直接写目标文件名即可
如：
方法一：<img src=“目标图片.gif">
方法二：< img src="./目标图片.gif" >
下级目录
目标文件在下级目录中
步骤：
文件夹名/文件名
如：
<img src=images/目标图片.gif">
上级目录
../目标文件名
或../目标文件夹/目标文件名
8.2音频标签
代码：
ps：音频标签是双标签
音频标签目前支持三种格式：MP3、WAV、OGG
8.3视频标签
代码：
\
8.4超链接（a标签/锚链接）
代码： < a href="./目标网页.html" >< /a >
特点：
双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
属性：target
属性值：目标网页的打开形式
9、列表标签
9.1无序列表
标签组成：
显示特点：列表的每一项前默认显示圆点标识
ps：ul标签中只允许包含li标签
li标签可以包含任意内容
9.2有序列表
标签组成:
特点：
列表的每一项前默认显示序号
ps：ol标签中只允许包含li标签
li标签可以包含任意内容
9.3自定义列表
标签组成：
显示特点：dd前会默认显示缩进效果
ps：
dl标签中只允许包含dt/dd标签
dt/dd标签可以放任意内容
10、表格
场景：在网页中以行+列的单元格的方式整齐战士数据，如学生成绩表
基本标签：
ps：标签的嵌套关系：table>tr>td
table相关属性：
其他标签：
caption：表格大标签 表示表格整体大标题，默认在表格整体顶部居中位置显示
th：表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
ps：caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
10.1表格的结构标签
使用场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
结构标签：
注意点：
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
使用结构化的标签可能视觉上没有太大改变，但可以提高浏览器的效率
10.2表格合并
跨行合并：垂直合并成一个
跨列合并：水平合并成一个
ps：
只有同一个结构标签的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
如：
<tbody>
<tr>
<td>小哥哥</td>
<td rowspan="2"> 100</td>
<td>不错</td>
</tr>
<tr>
<td>郭德纲</td>
<td>不错</td>
</tr>
</tbody>
10.3表单标签
应用场景：登录、注册、搜索等
10.4input系列
input标签可以通过type属性值的不同，展示不同效果
type属性值
<body>
文本框：<input type = "text">
<br>
密码框：<input type = "password">
<br>
单选框：<input type = "radio">
...以此类推
</body>
10.4.1文本框
type属性值：text
常用属性：
placeholder （占位符。提示用户输入内容的文本）
如：
<input type = "text" placeholder = "请输入用户名">
<br>
<input type = "password" placeholder = "请输入密码">
10.4.2 单选框
type属性值：radio
常用属性：
name 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked 默认选中
ps：name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
如：
性别：<input type = "radio" name="sex">男
<br>
<input type = "radio" name = "sex" checked>女
<br>
<input type = "checkbox" checked>
10.4.3 文件选择框
type属性值：file
常用属性：
multiple 多文件选择
如：
<input type = "file" multiple>
10.4.4 按钮
type属性值：
标签名 type属性值 说明
input submit 提交按钮。点击之后提交数据给后端服务器
input reset 重置按钮。点击之后恢复表单默认值
input button 普通按钮。默认无功能，之后配合js添加功能
注意点：
·如果需要实现以上按钮功能，需要配合form标签使用
·form使用方法：用form标签把表单标签一起包裹起来即可
用value = “”可以给按钮添加或改变文本
<form action=""> 数据要发送到哪里引号里面就写哪里
用户名：<input type = "text">
<br>
<br>
密码：<input type = "password">
<br>
<br>
<！--按钮-->
<input type = "submit">
<input type = "reset">
<input type = "button" value = "普通按钮">
</form>
10.5button按钮标签
场景：在网页中显示用户点击的按钮
标签名 button
type属性值（同input的按钮系列）：
标签名 type属性值 说明
button submit 提交按钮。点击之后提交数据给后端服务器
button reset 重置按钮。点击之后恢复表单默认值
button button 普通按钮。默认无功能，之后配合js添加功能
注意点：
·谷歌浏览器中button默认是提交按钮
·button标签是双标签，更便于包裹其他内容：文字、图片等
10.6下拉菜单标签
场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
select标签：下拉菜单的整体
·option标签：下拉菜单的每一项
与 之间的值是浏览器显示在**下拉列表中的内容**，而 value 属性中的值是表单被提交时被发送到服务器的值。注意：如果没有指定 value 属性，选项的值将设置为 标签中的内容。
常见属性：
·selected：下拉菜单的默认选中
<body>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>深圳</option>
</select>
</body>
10.7textarea文本域标签
场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
·cols：规定了文本域内可见宽度
·rows：规定了文本域内可见行数
注意点：
·右下角可以拖拽改变大小
·实际开发时针对于样式效果推荐用CSS设置
10.8lable标签
常用于绑定内容与表单标签之间的关系
使用方法1：
1.使用label标签把内容（如：文本）包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值
使用方法2：
1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2.需要把label标签的for属性删除即可
性别：
<input type="radio"name="sex"><label for="">男</label>
<input type="radio"name="sex">女
10.9语义化标签
10.9.1没有语义的布局标签
场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
10.9.2有语义的布局标签
场景：H5新版本中推出，可用于手机网页的制作
ps:
以上标签显示特点和div一致，但是比div多了不同的语义
10.10字符实体
在网页中展示特殊符号效果时，需要使用字符实体代替
结构：&英文；
