HTML5
0 通用知识
html5中属性名与属性值相同时可以简写只写属性名
例如：
<audio src="【音频的url】" controls="controls" loop="loop"></audio>
等于
<audio src="【音频的url】" controls loop></audio>
1 html基本格式
<html>
<head>
<title>【窗口标签内容】</title>
</head>
<body>
【窗口页面内容】
</body>
</html>
2 标题标签
- 独占一行（该标签中间的内容浏览器展示时会单独占据一行）
- 加粗
- 数字越小字体大小越大
- h4标签与普通字体大小皆为16px
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
3 段落标签
- 根据页面大小自动换行
- 独占一行或多行（段落开始另起一行，段落结束的结束行未使用空间其他不得占用）
- 段落前后有大约一行空行
<p></p>
4 文字样式标签
<!--加粗标签-->
<strong></strong>
<b></b>
<!--倾斜标签-->
<em></em>
<i></i>
<!--下划线标签-->
<ins></ins>
<u></u>
<!--删除线标签-->
<del></del>
<s></s>
5 资源链接标签
<!--超链接标签-->
<!--有target="_blank"表示跳转到新窗口打开，没有target="_blank"表示在当前窗口打开-->
<a href="【链接的url】" target="_blank">【展示内容】</a>
<!--图片标签-->
<img src="图片的url" alt="【图片显示失败时的显示内容】" title="【鼠标悬停时显示的内容】" width="【图宽】" heigth="【图高】">
<!--音频标签-->
<!--支持mp3、ogg、wav格式-->
<!--controls="controls"表示显示音频控制面板，loop="loop"表示循环播放-->
<audio src="【音频的url】" controls="controls" loop="loop"></audio>
<!--视频标签-->
<!--controls="controls"表示显示视频控制面板，loop="loop"表示循环播放，muted="muted"表示默认静音，autoplay="autoplay"表示自动播放且必须与muted="muted"配合才起效-->
<video src="【视频的url】" controls="controls" loop="loop" muted="muted" autoplay="autoplay"></video>
6 列表标签
- 每条内容或标题独占一行
- 每条内容前有缩进
<!--无序列表-->
<!--每条内容前无序号-->
<ul>
<li>【一条内容】</li>
<li>【一条内容】</li>
...
</ul>
<!--有序列表-->
<!--每条内容前有序号-->
<ol>
<li>【一条内容】</li>
<li>【一条内容】</li>
<li>【一条内容】</li>
</ol>
<!--定义列表-->
<!--每条内容前有缩进，每条标题前无缩进-->
<dl>
<dt>【列表标题】</dt>
<dd>【一条内容】</dd>
<dd>【一条内容】</dd>
...
<dt>【列表标题】</dt>
<dd>【一条内容】</dd>
<dd>【一条内容】</dd>
...
......
</dl>
7 表格标签
<!--th标签中的内容默认加粗显示，border="1"表示表格边框为1px（默认为0px即不显示边框）-->
<!--合并单元格：https://www.bilibili.com/video/BV1kM4y127Li/?p=20&spm_id_from=pageDriver&vd_source=8ccf8a94b825cf913871ee06a8956a5c-->
<!--表格标签可配合thead、tbody、tfoot标签使用（用来描述表格结构给搜索引擎看的，一般不用）-->
<table border="1">
<tr>
<th>【第一行第一列内容（一般表示该列标题）】</th>
<th>【第一行第二列内容（一般表示该列标题）】</th>
...
</tr>
<tr>
<td>【第二行第一列内容】</td>
<td>【第二行第二列内容】</td>
...
</tr>
<tr>
<td>【第三行第一列内容】</td>
<td>【第三行第二列内容】</td>
...
</tr>
......
</table>
8 表单系列标签
<!--表单-->
<!--method="get"表示发送get请求，method="post"表示发送post请求-->
<form action="【后端接口地址】" [method="get"]>
......
</form>
<!--单行输入框-->
<!--value="【默认值（初始值）】"用来可指定文本输入框的默认值（初始值）"表示-->
<input type="text" value="【默认值（初始值）】" placeholder="文本提示内容">
<!--密码输入框-->
<input type="password" value="【默认值（初始值）】" placeholder="文本提示内容">
<!--单选框-->
<!--相同name属性值的单选框分为同组（同组内单选框互斥），checked="checked"表示默认当前单选框选中-->
<input type="radio" name="【随便起】" checked="checked">
<input type="radio" name="【随便起】">
...
<!--多选框-->
<!--checked="checked"表示默认当前多选框选中-->
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="checkbox" checked="checked">
...
<!--文件选择框-->
<!--有multiple="multiple"表示可同时选择多个文件，无multiple="multiple"表示可选择单个文件-->
<input type="file" multiple="multiple">
<!--下拉输入框-->
<!--默认第一个选项选中，可通过selected="selected"修改默认选中项-->
<select>
<option>选项一内容</option>
<option>选项二内容</option>
<option selected="selected">选项三内容</option>
...
</select>
<!--文本域/多行输入框-->
<!--textarea标签中的内容为文本域的默认值（初始值）-->
<textarea placeholder="文本提示内容">默认值（初始值）</textarea>
<!--增大选中区域-->
<!--方式一（需要保证id属性的值和for属性的值一致）-->
<label for="【随便起】">【增大区域内容】</label>
<input type="text" id="【随便起】">
<!--方式二（无需id属性和for属性）-->
<label>【增大区域内容】<input type="text"></label>
<!--提交按钮-->
<!--需要与form标签配合使用，点击后将form标签中的内容提交-->
<button type="submint">【按钮名称】</button>
<!--重置按钮-->
<!--需要与form标签配合使用，点击后还原<form>标签中的内容数据为默认值（初始值）-->
<button type="reset">【按钮名称】</button>
<!--普通按钮-->
<!--无需与form标签配合使用，点击后的动作通过js指定-->
<button type="button">【按钮名称】</button>
8 布局标签
- 方便使用css ？
<!--独占一行-->
<div></div>
<!--无特殊效果-->
<span></span>
9 特殊符号
<!--空格-->
<!--左尖括号 < -->
<
<!--右尖括号 > -->
>
