前端八股之HTML

1. src和href的区别

• src: 表示对资源的引用，它指向的内容会嵌入到当前标签所在位置。src会将其指向的资源下载并应用到文档内，如js脚本、图片等。当浏览器解析到该元素时，会暂停其它资源的下载和处理，直到将该资源加载、编译、执行完毕。
• href: 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。浏览器识别到它指向的文件时，会并行下载资源。常用在a、link标签上。

2. 对HTML语义化的理解

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

• 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录。
• 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。 常见的语义化标签:

<header></header> 头部
<nav></nav> 导航
<section></section> 区块(相当于有语义化的div)
<main></main> 主要区域
<article></article> 主要内容/文章
<aside></aside> 侧边栏
<footer></footer> 底部

3. script标签中defer和async的区别

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本，这样就阻塞了后续文档的加载。 defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：

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

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

• 行内元素有: a b span img input select strong
• 块级元素有: div ul ol li h1 h2 h3 h4 h5 h6 p 空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
• 常见的有: br hr img input link meta

5. iframe 有那些优点和缺点？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
优点:

• 用来加载速度较慢的内容（如广告）
• 可以使脚本可以并行下载
• 可以实现跨子域通信

缺点:

• iframe 会阻塞主页面的 onload 事件
• 无法被一些搜索引擎索识别
• 会产生很多页面，不容易管理