附：「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」
重点标签
1. a 标签
属性
（1）href 超链接（写一个网页链接）
（2）target 目标（在哪个窗口打开网页）
- 中国人喜欢在新窗口打开，外国人喜欢在当前页面打开。
a 的 href 的取值
网址
- google.com（https协议，加密）
- google.com (http协议)
- //google.com （无协议的网址，浏览器到时会自己添加）推荐写法
路径
- /a/b/c 和 a/b/c 是一个意思
- index.html 和 ./index.html 是一个意思
伪协议
（1）javascript:代码 （用于点击链接不做任何反应，如果有这种需求，只有这一种方式可以，其他的都不可以，亲测）
（2）mailto: 邮箱
<a href="mailto:1296522554@qq.com">发邮件给小何</a>
（3）tel: 手机号
<a href="tel:17674949994">打电话给小何</a>
锚点
- 跳转指定位置
<div id="tushu">图书馆</div>
<a href="#tushu">去图书</a>
a 的 target 的取值
- _blank （新的窗口打开）
- _top
- _parent
- _self （在当前页面打开网页）
作用
（1）跳转外部页面
（2）跳转内部锚点
（3）跳转到邮箱或者打电话
2. table 标签 （多练习这个标签）
标签
- table
- thead
- tbody
- tfoot
- tr
- td
- th
样式
（1）table-layout 值：auto fixed （设置单元格宽度）
（2）border-collapse （决定表格的边框是分开的还是合并的）
（3）border-spacing（调整单元格与单元格的距离）
用表格做一个颜色表（1）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table>
<thead>
<tr>
<th>英语</th>
<th>翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>color</td>
<td>颜色</td>
</tr>
<tr>
<td>background-color</td>
<td>背景颜色</td>
</tr>
<tr>
<td>skyblue</td>
<td>天蓝色</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
</body>
</html>
输出结果：
用表格做一个学生成绩表（2）
使用 table 做一个这样的表格，这个是两个表头。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生成绩表</title>
</head>
<body>
<table>
<!-- 表头 -->
<thead>
<tr>
<th></th>
<th>小红</th>
<th>小明</th>
<th>小强</th>
</tr>
</thead>
<tbody>
<tr>
<td>数学</td>
<td>61</td>
<td>91</td>
<td>85</td>
</tr>
<tr>
<td>语文</td>
<td>79</td>
<td>82</td>
<td>92</td>
</tr>
<tr>
<td>英语</td>
<td>100</td>
<td>97</td>
<td>87</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分</td>
<td>240</td>
<td>270</td>
<td>264</td>
</tr>
</tfoot>
</table>
</body>
</html>
输出结果：
注意事项
（1）通常情况
下的这三个标签都不能少（2）在写 table 时，一定要写 tbody 或者 tfoot 、tr，一个 table 里不写这个，是错误的写法而且不规范，就算我们不写也不会报错，因为浏览器有纠错功能，你没有加，浏览器会给你加，而你却一错再错！！个人认为写 table 时 必须要加 thead 和 tbody、tr标签。
举一个错误的例子：
<table>
<th>12</th>
</table>
可以看到我们在浏览器调试代码时，浏览器自动给加上了
和 标签3. img 标签
作用
先发出 get 请求，然后展示一张图片
属性
（1） src
全称：source，它是一个图片路径，接受（相对路径、绝对路径、图片链接）
（2）alt
alt 可以理解为图片的替身。当图片没有找到路径，访问不到时。这个属性就会显示一段文字，用于告诉用户这张图具体描述的是什么？
（3）height
设置图片的高度（注：设置图片宽高时，只用设置一边就可以，另外一边会自适应。如果两边都设置会出现图片变形的问题。）
（4）width
设置图片的宽度（注：设置图片宽高时，只用设置一边就可以，另外一边会自适应。如果两边都设置会出现图片变形的问题。）
事件
（1）onload 图片加载成功时触发
（2）onerror 图片加载失败后触发
补充知识点：onload 用于加载图片成功触发，onerror 是加载失败后触发。我们可以在图片加载失败后，做这样一件事情，就是当图片加载失败后，我们可以利用这个函数，把 404 图片 或者 稍等一下 的图片代替，这样整个网页的用户体验就不一样了！
响应式
- max-width：100%
当我们给图片设置 最大宽度后，无论你在手机还是电脑访问网页，都可以看到图片的本身，而不是图片的一部分。
注意事项
（1）设置图片宽高时，只用设置一边就可以，另外一边会自适应。如果两边都设置会出现图片变形的问题。
4. form 标签
表单
作用
发 get 或 post 请求，然后刷新页面
属性
（1）action
这个是提交给后端的。也就是将表单的数据提交给后端那边，后端收到数据后，会做相应的数据处理。
（2） autocomplete
浏览器自动补全条目，就是我们点击输入框后，下面会有一些我们历史输入的账号什么的。
（3） method
用于控制是 get 还是 post 请求
（4）target
和 a 链接使用方法是一样的。这个在 form 中是告诉浏览器我要提交到哪个页面，哪个页面刷新。
事件
（1） onsubmit
当用户点击提交后会触发这个事件
注意事项
（1）一个 form 表单里必须要有一个 type=submit，不然没有办法提交操作的。正常你写一个input不写type=submit，浏览器会自动给你加上，但是这样做是错的！！
补充
（1）input 和 button 的 type="submit" 有什么区别？
答案：button里可以加其他标签（字体加粗）的，但是input不可以
5. input 标签
作用
让用户输入内容
属性
type
- text 纯文本
- color 一个颜色板
- password 密码框
- radio 单选
要想实现二选一，给他们设定一样的name就可以了 。 要是有 gender 不要使用
- checkbox 复选框 （要想是同一组的复选框，给他们设定一样的name就可以了）
- file 上传头像
（1）默认单次只能选择一个
（2）单次选择多个文件，可以在 file 后加一个 multiple 属性，这样一次就可以多选很多文件了
- textarea 双行输入框，默认右下角有个扩大的。我们可以添加样式 style="resize: none"来关闭右边小角的扩大
- select 选择
（1）value是真正的值，星期一是给用户看的
name
事件
（1）onchange
输入框发生内容改变时触发
（2） onfocus
鼠标点击输入框时触发
（3） onblur
鼠标移出输入框后触发
验证器
- HTML5新增功能 （后续补充）
（1）比如这个，加了这个属性后，输入框里面必须有值才可以提交
注意事项
（1）一般不监听 input 的 click 事件
（2）form 里面的 input 都要有 name
（3）form 里要放一个 type="submit" 才能触发 submit 事件（不放的话用户点提交没有反应）
其他标签
video 视频
audio 音频
canvas 画布
svg 可缩放矢量图
总结
- 每个标签都可能会有兼容性问题，出现兼容性问题一定要查看文档。
