a 标签
href 取值
网址
//google.com
建议写 //google.com，它会自动选择网站本身的协议
路径
/a/b/c 以及 a/b/c
index.html 以及 ./index.html
当开启了http服务时，此时的根目录指的并不是硬盘的根目录，而是默认为开启http服务的目录，
所以以上两者的写法效果是一样的。
伪协议
javascript;代码;
点击后什么都不做
mailto:邮箱
弹出用户设备上的邮箱功能，进行邮箱发送
tel:手机号
如果是移动端，会弹出电话功能进行拨号
id
href=#xxx
焦点移动至 id 为xxx的标签
javascript:; 与 # 之间用前者，javascript:;不会跳转页面且点击后不会跳转至页面顶部
target的取值
内置名字
_blank 在新标签页打开页面
_top 在顶部窗口打开页面
_parent 在父级窗口打开页面
_self 在当前窗口打开页面
自定义名字
window的name
iframe的name
download
点击下载文件，很多浏览器不兼容，不建议使用
table 标签
常用标签
thead 表格头部
tbody 表格内容
tfoot 表格尾部
table 代码示例1(一个表头)
<table>
<thead>
</thead>
<tbody>
<tr> // table row
<th>英语</th> // table head
<th>翻译</th>
</tr>
<tr>
<td>hyper</td> // table data
<td>超级</td>
</tr>
<tr>
<td>target</td> // table data
<td>目标</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>null</td>
<td>null</td>
</tr>
</tfoot>
</table>
| 英语 | 翻译 |
|---|---|
| hyper | 超级 |
| target | 目标 |
| null | null |
table 代码示例1(两个表头)
<table>
<thead>
<tr>
<th></th>
<th>小明</th>
<th>小红</th>
<th>小兰</th>
</tr>
</thead>
<tbody>
<tr>
<th>语文</th>
<td>44</td>
<td>88</td>
<td>35</td>
</tr>
<tr>
<th>数学</th>
<td>45</td>
<td>67</td>
<td>87</td>
</tr>
<tr>
<th>英语</th>
<td>24</td>
<td>57</td>
<td>99</td>
</tr>
</tbody>
</table>
| 小明 | 小红 | 小兰 | |
|---|---|---|---|
| 语文 | 44 | 88 | 35 |
| 数学 | 45 | 67 | 87 |
| 英语 | 24 | 57 | 99 |
table CSS
建议使用以下样式修改table默认样式
table-layout: auto; /*table自动布局*/
border-collapse: collapse; /*table边框合并*/
border-spacing: 0; /*table边框边距为0*/
img 标签
作用
发出 get 请求，展示一张图片
属性
- src 路径
- alt 说明
- width 图片宽度
- height 图片高度
记住，永远不要让图片变形
事件
onload
监听图片是否加载成功
xxx.onload = function() {
console.log("图片加载成功")
}
onerror
监听图片是否加载失败
xxx.onerror = function() {
console.log("图片加载失败")
/* 如果图片加载失败，那么显示404图片*/
xxx.src = '/404.png'
}
响应式
通常用在移动端
max-width:100%;
form 标签
属性
- action 请求路径
- method 请求格式 GET或者POST请求
- autocomplate 自动填充表单
- target 选择提交到哪个页面
事件
onsubmit
想要触发事件，必须含有带submit属性的标签
input 标签
属性
hidden
隐藏input标签，无需自己输入，让js去填写内容
required
不填写input内容无法提交请求，并且带有提示
事件
onchange
input内容发生修改时监听
onfocus
鼠标聚焦input时监听
onblur
鼠标失焦input时监听
注意事项
一般不监听input的click事件
form里面的input要有name
form里面要放入type=submit才能触发submit事件
一点感想
看似简单的标签其实有很多可以挖掘的细节，这需要保持空杯心态和利用好奇心不断进行深入，否则容易沾点皮毛便沾沾自喜，原地打转。
