超文本标记语言(Hypertext Markup Language)
超文本是链接，标记是标签
1. 标签属性
| 双标签 | 用法 | 备注/快捷键 |
|---|---|---|
| html | 整个网页 | ctrl+enter |
| head | 头部 | 给浏览器看的 |
| title | 网页标题 | |
| body | 内容主题 | 给用户看的 |
| h1-h6 | 标题 | h1只能用一次 |
| p | 段落 | 换行且段落之间有空隙 |
| <img src='url'> | 图像 | 不换行,可以直接填在线图片 |
| <a href='url'> | 跳转到本地文件或超链接 | href="#"表示空链接 |
| <audio src="url"> | 音频 | |
| <video src='url'> | 视频 |
| 属性 | 作用 | 备注 |
|---|---|---|
| alt | 替换文本 | 图片无法显示时显示的文字 |
| title | 提示文本 | 鼠标停在图片上的显示 |
| width | 宽度 | 默认等比例缩放 |
| height | 高度 | |
| target="_blank" | 在新窗口打开 | |
| src | url | |
| controls | 显示控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 浏览器一般禁用 |
| muted | 静音播放 | 视频属性，浏览器支持静音播放 |
| 文本格式化 | 备注 |
|---|---|
| strong/b | 加粗 |
| em/i | 倾斜 |
| ins/u | 下划线 |
| del/s | 删除线 |
| 单标签 | 备注 | 快捷键 |
|---|---|---|
| br | 换行 | |
| hr | 水平线 | |
| ＜!--注释--＞ | 注释 | ctrl+/ |
Tips
- 快捷生成双标签方法 关键字回车
- 以./开头有提示
- .表示当前文件所在文件夹，/表示进入某个文件夹，..表示上一级文件夹
- 在html5中，属性名和属性值一致可以简写为一个单词
2. 列表，表格，表单
2.1.1 无序列表
布局排列整齐不需要规定顺序，ul嵌套li,独占一行，
ul只能包含li标签，li可以包含任意内容
<ul>
<li>1</li>
<li>2</li>
</ul>
2.1.2 有序列表
ol嵌套li
<ol>
<li>1</li>
<li>2</li>
</ol>
2.1.3 定义列表
dl嵌套dt和dd,dl是定义列表，dt是标题，dd是描述
<dl>
<dt>head</dt>
<dd>1</dd>
<dd>2</dd>
</dl>
2.2 表格
table嵌套tr行，tr嵌套th表头、td内容
border='1' 添加边框
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
</tr>
</tbody>
</table>
内容划分：thead头部，tbody主体，tfoot底部，包裹住tr内容即可。
合并单元格方法：保留最左最上的单元格并td中添加属性（需要合并的单元格数量）
行合并rowspan='2'，列合并colspan='2'
2.3 表单
2.3.1 input标签
<input type="text" placeholder="提示信息"> type属性值不同功能不同,placeholder为占位文本显示提示信息
性别：
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
<input type="file" multiple>
| type属性值 | 说明 | 属性 |
|---|---|---|
| text | 文本框 | 单行文本 |
| password | 密码框 | |
| radio | 单选框 | name单选功能，checked默认 |
| checkbox | 多选框 | checked默认选中 |
| file | 上传文件 | multiple多文件上传 |
2.3.2 下拉菜单
select嵌套option，默认选择第一个option，selected默认选择
城市：
<select>
<option>江西</option>
<option selected>北京</option>
</select>
2.3.3 文本域标签
多行输入文本的表单控件
<textarea>请输入文本</textarea>
属性：name，id，cols，raws
2.3.4 label标签
绑定文字和控件关系，增大点击范围
方法一：label只包裹内容，设置for属性值与控件的id值相同
方法二：label直接包裹控件，不需要属性
<input type="radio" name="gender" id="man"><label for="man">男</label>
<label><input type="radio" name="gender">女</label>
2.3.5 按钮button
submit 提交（默认），reset重置，button无功能配合js使用
需要在form表单区域内
<form action="">
用户名：<input type="text"><br>
密码：<input type="text"><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
2.4 无语义的布局标签
布局网页，划分网页区域，摆放内容
div独占一行 大盒子
span不换行 小盒子
2.5 字符实体
代码中空格只识别一个
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | | |
| < | 小于 | < |
| > | 大于 | > |
