# HTML 语义化

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

// 代码一
<div>
    <div>标题</div>
    <div>文字内容</div>
    <div>列表
    	<div>列表项1</div>
    	<div>列表项2</div>
    </div>    
</div>
------
// 代码二
<div>
    <h2>标题</h2>
    <p>文字内容</p>
    <ul>列表
    	<li>列表项1</li>
    	<li>列表项2</li>
    </ul>   
</div>

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

  • 增加代码可读性,方便开发人员阅读
  • 利于 SEO,方便搜索引擎匹配

# HTML 常用标签

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

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

常见内联元素:img、input、button、label、span、textarea...

# src 和 href 的区别

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

  • src: 表示对资源的引用,它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应⽤到⽂档内,如请求 js 脚本。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执⾏完毕,所以⼀般 js 脚本会放在页面底部。
  • href: 表示超文本引用,它指向一些网络资源,建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时,就会并⾏下载资源,不会停⽌对当前⽂档的处理。 常用在 a、link 等标签上。

# script 标签中 defer 和 async 的区别

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

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

image.png

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

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

  • ** 执行顺序:** 多个带 async 属性的标签,不能保证加载的顺序;多个带 defer 属性的标签,按照加载顺序执行;
  • 脚本是否并行执行:async 属性,表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的,即异步执行;defer 属性,加载后续文档的过程和 js 脚本的加载 (此时仅加载不执行) 是并行进行的 (异步),js 脚本需要等到文档所有元素解析完成之后才执行,DOMContentLoaded 事件触发执行之前。