1.初识HTML
（1）. 概念
- hyper text markup language(超文本标记语言)
（2）. HTML页面固定结构
<html>
<!-- 头部标签 -->
<head>
<!-- 标题标签 -->
<title></title>
</head>
<!-- 文档的主体 -->
<body>
</body>
</html>
（3）. 标签说明：
- html标签：网页的整体
- head 标签：网页的头部，就是网页上面的名字
- body标签：网页的身体，就是网页具体的内容
- title 标签：网页的标题
（4）. vscode快速生成骨架代码
输入一个感叹号然后回车即可--------- ** ！**
2.HTML基础语法
（1）——注释
<!--> 注释内容<-->
vscode中 CTRL+/ 进行快捷注释
（2）标签
标签结构图
<strong>文字变粗</strong>
结构说明 标签由<，>，/，英文单词或字母组成，并且把标签中包括起来的英文单词或字母称为标签名 标签分为双标签和单标签 多数标签由两部分组成，称之为双标签，前面为开始标签，后面为结束标签，两部分之间包裹内容 少数标签由一部分组成，称之为单标签，自成一体，无法包括内容 标签可以进行嵌套，可以称为父子关系 标签也可以进行并列关系，可以称为兄弟关系
3.HTML认知标签
（1）标题标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>2级标题</h3>
<h4>2级标题</h4>
<h5>2级标题</h5>
<h6>2级标题</h6>
</body>
1级标题
2级标题
2级标题
2级标题
2级标题
2级标题
（2）段落标签
<p style="text-indent: 2em;">这是一个段落标</p>
<p style="text-indent:2em;">这是第二个段落标签</p>
</body>
段落标签独占一行
| 标签 | 说明 |
|---|---|
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
（3）媒体标签
图片标签
场景：在网页中显示图片
<img src="转存失败，建议直接上传图片文件 " alt="转存失败，建议直接上传图片文件">
alt：替换文本
只有图片加载失败时候才会显示的文本
title：提示文本
当鼠标悬停的时候，才显示文本 title文本不仅仅用于图片标签，还可以用于其他标签 width和height：宽度和高度（数字）
如果只设置width和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形） 如果同时设置了width和height两个，若设置不当此时图片可能会变形 3.3.2 音频标签 场景：页面中插入音频
<audio src="./周杰伦-告白气球.mp3" controls></audio>
常见属性
属性说明
src 路径
controls 显示播放的控件
autoplay 自动播放(部分浏览器不支持)
loop 循环播放 注意
音频标签目前支持三种格式：mp3、Wav、Ogg 3.3.3 视频标签 场景：
页面中插入视频
<video src="./mv.mp4" controls autoplay muted></video>
（4）链接标签
基本使用
场景：点击之后，从一个页面跳转到另一个页面
称呼：a标签、超链接、锚链接
代码：
<a href="目标网页.html">这是一个超链接</a>
<a href="https://www.baidu.com" >跳转到百度</a>
特点：
双标签，内部可以包裹内容 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
（5）基础标签
无序列表
场景：在网页中表示一组无顺序之分的列表
标签组成：
ul 表示无序序列的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一行的内容
<body> <ul> <li>这是一个无序列表</li> </ul> </body>
有序列表
场景：在网页中表示一组有顺序之分的列表
标签组成：
ol 表示有序序列的整体，用于包裹li标签
li 表示有序列表的每一项，用于包含每一行的内容
<body> <ol><li>这是一个有序列表</li></ol>/body>
（6）表格标签
在网页中以行+列的单元格方式整齐展示 数据
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
<body>
<table>
<tr>
<td>姓名</td><td>学科</td><td>成绩</td>
</tr>
<tr>
<td>小明</td><td>数学</td><td>142</td>
</tr>
<tr>
<td>小风</td><td>英语</td><td>144</td>
</tr>
</table>
</body>
| 姓名 | 学科 | 成绩 |
| 小明 | 数学 | 142 |
| 小风 | 英语 | 144 |
表格基本标签的相关属性
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
（7） 表单标签
一般是在做登陆界面的时候做
input text 文本框，用于输入单行文本
input password 密码框，用于输入密码
input radio 单选框，用于多选一
input checkbox 多选框，用于多选多
input file 文件选择，用于多选多
input submit 提交按钮，用于提交
input reset 重置按钮，用于重置
input button 普通按钮，默认无功能，需要配合js添加功能
4.有语义的布局标签
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
