【青训营】- 不一样的HTML-一一网

报名了第一届字节前端青训营，第一天重新学了一下 HTML 。

之前总觉得 HTML 就那些标签，HTML 在三件套中是最简单的，但其实听了青训营的课之后，才发现自己对 HTML 了解的并不全面，有很多东西自己了解的并不清楚；

比如说<script>标签，我之前知道里面的 JS 会阻塞 DOM 结构的解析，所以将它放在<body>中的最后面，但是我不知道它其实还有属性 (defer) 可以让 JS 下载和 DOM 解析并行执行；

然后还有语义化标签，虽然知道语义化标签，语义化标签有益于适配千奇百怪的设备和SEO ，但是我几乎没有用过它们~~ ，可能是我还太 low ，还没进到那个境界?。

为了加深记忆和促进学习，记笔记肯定是必不可少的，既然有这个发文章的活动，那我就把我的笔记发出来了，以此共勉~，大家加油?。

HTML是超文本标记语言的缩写；超文本指的是文本中包含指向其他文本的链接；其属于标记语言；由博纳斯-李提出，并现由W3C维护；

HTML5在2015年推出；改善了以前文档结构过于依赖div的缺点；

<!DOCTYP html>

<!DOCTYP>用来声明使用的 HTML 版本，<!DOCTYP html>用来声明使用的是 HTML5。
<meta>标签

源数据标签，描述数据的数据；
- 常用属性
  - charset：定义字符编码方式；
  - name：页面信息的简要说明；常用值有keywords、description、viewport（主要用于移动端，定义设备屏幕上用来显示网页的区域）；
  - http-equiv：给http头部添加一些信息，如设置网页到期时间、设置cookie
  - 其它自定义meta信息；
<title>

页面标题
<link>
- 常用属性
  - shortcut icon：指定页面标题旁的logo
  - stylesheet：链接到样式表
  - alternate stylesheet：可替换的样式表，不是所有浏览器都支持（如果用的是火狐浏览器体验一下）
<script>

用来引入外部脚本文件；
- 分类
  - <script>：立即下载脚本文件，下载完后立即执行，其会阻塞dom解析；
  - <script defer>：立即下载脚本文件，这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded (en-US) 事件前执行。；
  - <script async>：对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。