HTML知识点整理

src和href的区别

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

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

• href： 表示超文本引用，它指向一些网络资源，建立起和当前元素或者本文档的链接关系。当浏览器识别到它指向的文件时，会并行下载资源，不会停止对当前文档的处理，一般使用在a，link标签上

对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

• 对机器友好，带有语义化的文字表现力丰富，更适合搜索引擎的爬虫爬取有用的信息，有利于SEO。除此之外，对于一些读屏软件，会根据文章自动生成目录；
• 对开发者友好，使用语义化标签增强了代码的可读性，结构更清晰，有利于开发和维护。

常见的语义化标签：

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

script标签中defer和async的区别

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

• 执行顺序：

1. 多个带defer属性的标签，会按照顺序来加载；

2. 多个带async属性的标签，不能保证加载的顺序；

• 脚本是否并行执行：

1. defer属性，加载后续文档的过程和JS脚本的加载（此时仅加载不执行）是并行进行的，JS脚本需要等到文档所有元素解析完成之后才执行；

2. async属性，后续文档的加载和JS脚本的加载执行是并行进行的。

当脚本代码依赖于页面中的DOM元素时，或者被其他脚本依赖，则选择使用defer属性，反之使用async属性。

HTML5有哪些更新

（1）新增语义化标签：header、nav、aside、section、article、footer

（2）音频、视频标签：audio、video

（3）DOM查询操作：document.quertSelector()、document.querySelectAll()

（4）进度条、度量器

（5）数据存储：localStorage、sessionStorage

（6）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）

（7）input标签新增属性：paceholder、autocomplete、autofocus、required

（8）history API：go、forward、back、pushstate

行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

• 行内元素：span、a、b、input、img、strong
• 块级元素：div、ul、ol、li、dl、dd、dt、h1-h6、p

空元素，即没有内容的HTML元素。空标签是在开始标签中关闭，也就是空元素没有闭合标签；

• 常见的有：br、hr、img、input、link
• 鲜见的有：area、base、col、command、embed等