a标签
<a href="https://google.com" target="_blank">超链接</a>
这里我们对a标签的两个属性进行重点讲解， href 和 target 。
href是点击访问的地址。
target决定在什么窗口打开。
href的几种取值方式
- 网址
1. <a href="https://www.google.com" target="_blank">超链接</a>
2. <a href="http://www.google.com" target="_blank">超链接</a>
3. <a href="//www.google.com" target="_blank">超链接</a>
前两种都是一个完整的URL访问，最后一个前面只有两个// , 这个的意思就是，根据你当前页面的协议来，
如果你当前页面的协议是http，那么跳转过去就是使用http协议，如果是https也是同理。
- 路径
/a/b/c 以及 a/b/c
index.html 以及 ./index.html
上面的写法和文件路径中的绝对路径和相对路径是同一种意思，只是这里绝对和相对的地方有所不同，
例如 https://www.google.com , 如果在这里面的a标签里写上 /a/b/c 这种绝对路径的链接，点击这个a标签以后，
形成的路径就是 https://www.google.com/a/b/c ，这个绝对路径以服务器地址为根目录的链接，
再例如当前页面的地址是 https://www.google.com/wiki/index.html , 在这里面的a标签链接地址是 a/b/c ，
那么这个相对路径就是相对于当前URL的目录，也就是https://www.google.com/wiki/ ， 这个时候点击链接形成的地址就是，
https://www.google.com/wiki/a/b/c 。
理解了这里的相对路径和绝对路径， index.html 以及 ./index.html 或者是 ../index.html ，相信你也可以举一反三了。
-
伪协议
伪协议就是让a标签的点击事件并非跳转到其他页面，而执行一些其他动作。
<a href="javascript:alert(1);">连接</a> 这种写法就是触发一段js的代码。
<a href="javascript:;">连接</a> 这种写法点击后就什么事情都没有。
<a href="#xxx">连接</a> 这种写法是点击后页面定位到一个id为xxx元素的位置上。
<a href="#">连接</a> 这种写法就是点击后网页重新定位到内容的最上方。
<a href="mailto: 222@qq.com">发邮件</a> 这种写法点击后会触发选择当前系统发送邮件的程序。
<a href="tel: 1565512xxxx">打电话</a> 这种写法是在手机上点击后触发拨打电话的功能。
- target的用法
_blank
<a href="//baidu.com" target=" _blank">baidu</a> 在一个新的浏览器标签中打开链接
_top
<a href="//baidu.com" target="_top">baidu</a> 在最顶层页面的窗口打开链接，配合iframe可以看到效果，在ifame里有这样的a标签，那么新页面就是在最外面的浏览器页面打开的。
_parent
<a href="//baidu.com" target=" _parent">baidu</a> 在当前页面的父窗口打开链接 ，如果有两个嵌套iframe，最里面的iframe有这个标签，就是在父级iframe中打开点击的页面。
_self
<a href="//baidu.com" target=" _self">baidu</a> 再当前页面的窗口打开链接
img 标签
<img src="" alt="" >
作用：发出 get 请求，展示一张图片
属性：alt / height / width / src
alt 是图片加载失败的时候，显示的文字
<img height="" width="" /> 高宽宽是元素自带的属性，可以直接设置，
只写高度，宽度会自适应，只写宽度，高度会自适应。
高宽度都写，图片可能会变形，要根据实际情况来设置。
src是图片的请求地址。
完整写法：<img height="100px" width="100px" alt="没加载成功" src="//www.baidu.com/xxx.jpg" />
事件：onload / onerror
onload 在图片加载成功的时候执行的函数
onerror 在图片加载失败的时候执行的函数
<img id=xxx />
xxx.onload = function () {alert("加载成功")}
xxx.onerror = function() {
alert("加载失败")
xxx.src = '404.png' //加载失败，重新加载一个404的图片
}
将图片设置成为响应式的方法
img {
max-width: 100%
}
如此设置，在任何网页里都是响应式的了，图片在手机端或者PC端显示的都是正常的。
table标签
下面来看一个完整的table写法
<table>
<thead> <!-- 表头 -->
<tr> <!-- table里的row -->
<th> <!-- table里的表头内容 -->
英语
</th>
<th>
翻译
</th>
</tr>
</thead>
<tbody> <!-- 表格内容 -->
<tr>
<td> <!-- table里的data 也是一列的内容 -->
hyper
</td>
<td>
超级
</td>
</tr>
</tbody>
<tfoot> <!-- 表格脚部内容 -->
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
下面写一个完整的table示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>小红</th>
<th>小明</th>
<th>小颖</th>
</tr>
</thead>
<tbody>
<tr>
<th>数学</th>
<td>89</td>
<td>79</td>
<td>100</td>
</tr>
<tr>
<th>语文</th>
<td>89</td>
<td>79</td>
<td>100</td>
</tr>
<tr>
<th>英语</th>
<td>89</td>
<td>79</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td>89</td>
<td>79</td>
<td>100</td>
</tr>
</tfoot>
</table>
</body>
</html>
注意事项
当你的table里不写tbody的时候,那你写的内容都会被浏览器自动加到tbody里去。
tfooter thead tbody 和顺序无关,浏览器会默认将他们排好顺序，按照头 身体 脚。
相关的样式
table-layout
table-layout: auto; 自动计算行列之间的距离，某行内容多一点就更宽一点。
table-layout: fixed; 让每列的宽度都更平均差不多宽。
border-collapse
border-collapse: collapse; 让每列的border之间合并。
border-spacing
border-spacing: 20px; 控制每列的border之间的距离。
一些感想
学习HTML一定要多练习，多关注每个标签的含义，以及他拥有的属性，和每个属性值代表的含义，方便在合适的时候进行使用。
可以通过MDN查看HTML的规范和使用：https://developer.mozilla.org/en-US/docs/Web/HTML
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
