前端小白的笔记，继续深入探讨学习html的标签。
本次列举一些最常用的标签，相关的一些属性和用法，注意事项。
提纲
- a 标签的用法
- img 标签的用法
- table 标签的用法
- 其他感想
正文
a标签的用法
a, 也即anchor，是最常用，也是直指互联网本质的一种超链接标签。
属性
- href
- target
- download
- rel=noopener
作用
- 跳转外部页面
- 跳转本页面内的锚点
- 跳转到邮箱或电话等
href相关
href就是链接地址(Hypertext Reference)了，它可以指向的目标有上文a的作用里列出的几种。
外部网址可以http或者https打头，也可以不写而是用//开头，比如//baidu.com
这样写的好处是让浏览器自己去匹配合适的前缀是http还是https，浏览器会尝试先访问http再访问https，避免因前缀不对而访问出错的问题。但这样可能会发起多次访问请求，加重服务器负担，有明确的前缀考虑写清前缀。
文件路径也可以用href来指向。访问自己项目内的其他html文件，路径又分绝对和相对路径。
- /a/index.html
绝对路径，注意通过网页打开，根目录在该页面所在的文件夹。如果是直接点击文件打开，根目录在你保存html文档的所在硬盘盘符
- ./index.html 和 index.html
同一目录下可以加前缀，也可直接加文件名来访问
伪协议
-
javascript:; 执行空代码
-
mailto: mail address 邮箱地址
-
tel: cellphone number 电话
-
页内锚点 页内锚点用id去做标记abc，使用#abc来跳转。如果单独#表示跳转页面顶部。
target的取值
内置名字
- _blank
- _self
- _parent
- _top
_blank 是国内最常见的打开新窗口，国外一般不用开新页，而是让用户自己选择（鼠标中键），习惯问题。
_self 就是默认的本窗口或框架内打开
_parent 是在父级框架或窗口内打开
_top 是在顶级窗口打开
一个页面可以套内嵌窗口，iframe，内嵌还能再套内嵌。parent和top是针对这个说的。
除了内置名字，程序猿也可自行命名
- 窗口window的name
- iframe的name
其他
a的download属性表示不是打开页面而是下载页面，存在最大问题是浏览器兼容问题，尤其手机浏览器可能不支持。
iframe 内嵌窗口标签其实已经很少用了，还有老系统在用。想做嵌套结构更推荐用下文的标签。
注意！
在使用_blank打开新窗口，最好要使用rel=noopener属性进行配合。
告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，这样就提高了用户安全性。
rel=noopener可能不支持一些浏览器，为了兼容需要加上rel="noopener norefferrer"
table标签用法
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
上文演示了一个结构比较清晰的table元素。一级标签是table，二级分为thead，tbody，tfoot，都是简单英文无需多解释。
再下级是tr (table row)，表示一行。
再下一级th (table header) 表头，td (table data) 内容。
表格相关样式
- table-layout
- border-collapse
- border-spacing
其中border-collapse和border-spacing是最常见声明清除默认样式css时候要规定的属性。
border-collapse = collapse 让表格分割线重合时进行合并成单线。不合并双线宽奇丑无比。
border-spacing 一般单元格间距为0就可以，好看
table-layout 布局，列宽控制 auto（根据单元格内容填充）/fixed（尽量平均）
img标签
插入图片，发出get请求，展示一张图片。
img是行内元素，但它可以设置宽高和对齐性质，是比较特殊的行内可替换元素。我理解是近似行内块元素。
属性
- alt （alternative）图片显示不了时代替显示的文字
- height
- width
- src (source) 图片的源链接地址
事件
- onload/ onerror
判定图片是否成功加载，来进行替换弥补等操作。
做响应式页面，加入样式声明
max-width:100%
一些碎碎念
标签的用法，其实是要在实战中去练习使用的。只是死记是很难的且无意义，自己去做网页，多用多练。
建立一个标签，考虑一下你要这个标签实现什么功能，有哪些需求，再查一下对应的属性名称，天然的就明白标签这些属性的用法了。
而事件就是javascipt脚本监听这些元素的动作用到的。
