写在前面：本文是本人的html5学习笔记，基于黑马程序员《从0到1学前端-HTML+CSS+移动web》课程和学校开设的前端开发课程。可能有不完善的地方，望指出。后续我也会在学习的过程中不断完善本文^-^
1 html骨架
快捷键：! + Enter/Tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
</body>
</html>html：整个网页
head：网页头部（给浏览器看的代码，如css）
body：给用户看的代码
2 标签
快捷键：标签名+Enter
2.1 格式化标签
2.1.1 标题
<h1~6></h1~6>
注意：
（1）h1~h6 字体逐渐减小
（2）h1只能使用一次
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
</body>运行结果：
2.1.2 格式化输出
段落：<p></p>
换行：<br>
水平线：<hr>
加粗：<strong></strong>
倾斜： <em></em>
下划线：<ins></ins>
删除线：<del></del>
<body>
<p>这是一个段落</p>
这是<br>换行
<hr>
<strong>加粗</strong>
<em>倾斜</em>
<ins>下划线</ins>
<del>删除线</del>
</body>运行结果：
2.2 图像
<img src="" >
| 属性 | 描述 |
| src | 路径 |
| alt | 图片无法显示时，显示的文字 |
| title | 鼠标悬停在图片上时，显示的文字 |
| width | 宽 |
| height | 高 |
- src
注：/ 表示进入某个文件里
. 表示当前文件所在的文件夹
绝对路径：鼠标右键点击图片->复制文件地址
- alt
<img src="" alt="无法显示图片"> 
- title
<img src="C:\Users\28614\OneDrive\图片\97ba905a0a2898d71c265df3e735e18c.jpg" title="悬停时显示">
2.3 超链接
2.3.1 链接
<a href=""></a>
| 属性 | 描述 |
| herf | 网址 |
| target="_blank" | 在新窗口打开 |
- herf
注：# 空连接
<a href="https://www.csdn.net/" >这是一个超链接</a> 
点击后：
- target="_blank"
<a href="https://www.csdn.net/" target="_blank">这是一个超链接</a> 点击后：
2.3.2 锚点
通过href属性中的“#”与id属性配合。实现点击链接即可跳转到同一页面具有该id属性的元素处。
注：要保证id的唯一性
<a href="#maodian1">跳转到第一部分</a><br>
<div id="maodian1">第一部分</div>2.4 多媒体标签
2.4.1 音频
<audio src=""></audio>
| 属性 | 描述 | 特殊说明 |
| src（必须属性） | 音频URL | 格式：MP3\Ogg\Wav |
| controls | 显示音频控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 一般会禁用自动播放功能 |
音频控制面板：
2.4.2 视频
<video src=""></video>
| 属性 | 描述 | 特殊说明 |
| src（必须属性） | 视频URL | 格式：MP4\WwbM\Ogg |
| controls | 显示视频控制面板 | |
| loop | 循环播放 | |
| muted | 静音播放 | |
| autoplay | 自动播放 | 一般在静音状态下自动播放 |
视频控制面板：
2.5 列表
2.5.1 无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>运行结果：
2.5.2 有序列表
<ol>
<li>项目</li>
<li>项目</li>
</ol>运行结果：
2.5.3 定义列表
<dl>
<dt>项目1</dt>
<dd>描述</dd>
<dt>项目2</dt>
<dd>描述</dd>
</dl>运行结果：
2.5.4 列表的嵌套
有序和无序列表可以嵌套使用，实现多级列表的效果
<body>
<h3>一个嵌套列表：</h3>
<ul>
<li>咖啡</li>
<li>茶</li>
<ul>
<li>红茶</li>
<li>绿茶</li>
<ul>
<li>中国茶</li>
<li>印度茶</li>
</ul>
</ul>
<li>牛奶</li>
</ul>
</body>运行结果：
2.6 表格
table嵌套tr，tr嵌套 th/td
| 属性 | 描述 | |
| table | border | 边框 |
| td | rowspan="合并行数" | 跨行合并，保留最上单元格 |
| colspan="合并列数" | 跨列合并，保留最左单元格 |
- border
<table>
<!-- <table border="1"> -->
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>未使用border：
使用border：
- 单元格合并
2.7 表单
2.7.1 表单控件
（1）input标签
<input type="...">
| type属性值 | 说明 |
| text | 文本框 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 上传文件 |
<input type="text"><br>
<input type="password"><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="file"><br> 
（2）文本域
<textarea>默认提示文字</textarea>
注：
- 使用CSS设置文本域的尺寸
- 一般禁用右下角的拖拽功能
2.8.2 表单控件属性
（1）input标签占位文本
<input type="text" placeholder="提示信息"> 
（2）单选框radio
| 属性名 | 作用 | 特殊说明 |
| name | 控件名称 | 控件分组，同组只能选中一个 |
| checked | 默认选中 | / |
代码：
性别：<input type="radio" name="gender" checked>女
<input type="radio" name="gender" >男运行结果：
说明：默认选中女，且男女无法同时选中
（3）多选框
添加checked属性，默认选中
（4）多选文件
添加multiple属性
<input type="file" multiple>（5）下拉菜单
select嵌套option
select是下拉菜单整体，option是每一个选项
代码：
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<!-- selected 显示为第一项 -->
<option selected>重庆</option>
</select>运行结果：
（6）label标签
用label标签绑定文字和表单控件的关系，增大表单控件的点击范围
支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等
1.包裹表单控件
<label><input type="radio">女</label>2.不包裹表单控件
设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man"><label for="man">男</label>2.7.3 按钮
<button type=""></button>
| type属性值 | 说明 |
| submit | 提交，点击后可以提交数据到后台（默认功能） |
| reset | 重置，点击后将表单控件恢复到默认值 |
| button | 普通按钮，默认没有功能，一般配合JS使用 |
提示：按钮需配合form标签（表单区域）才能实现对应的功能。
2.8 布局标签
2.8.1 无语义
div：独占一行，块级元素
span：不独占一行，行内元素
2.8.2 有语义
| 标签名 | 语义 |
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
2.9 常用字符实体
| 显示 | 实体名称 |
| 半角空格 |   |
| 全角空格 |   |
| < | < |
| > | > |
| & | & |
| " | " |
