编写Html的小Tips

type

status

date

slug

summary

所谓html语义化就是用语义化标签去搭建网页结构。我们可以看如下两段代码体会语义化：

通过css的控制，上面两种代码我们可以实现同一效果。对比这两种代码我们可以明显感觉出代码二更加符合人的阅读习惯，利于后期维护。同时语义化的代码可以更好的让搜索引擎抓取，有利于让搜索引擎分清网页内容主次，利于SEO。由此我们可以总结出HTML语义化的优点：

HTML标签按照其特性我们可以将其大致划分为两类，分别是块级元素和内联元素。块级元素的特点是无论其内容的多少都会独占一行，块级元素内部可以继续嵌套其它行内元素和块级元素。而内联元素的大小通常根据其内容来决定，一般情况下内联元素内部只能包含数据以及其它内联元素。

常见块级元素：h1(所有标题标签)、div、p、form、header、footer、ul、ol…

常见内联元素：img、input、button、label、span、textarea…

src 和 href 都是用来引用外部的资源，它们的区别如下：

src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应⽤到⽂档内，如请求 js 脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。

href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。常用在 a、link 等标签上。

如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

下图可以直观的看出三者之间的区别:

image.png

其中蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析。

defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：

脚本是否并行执行：async 属性，表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行；defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。