番外04：前端面试八股文-HTML

1：src和href的区别

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

（1）src

表示对资源的引用，其指向的内容会嵌入当前标签所在的位置 🔜 src会将其指向的资源下载并引用到文档内，如请求js脚本 🔜 浏览器解析该元素时，会暂停其余资源的下载和处理，直到将该资源加载、编译、执行完毕。

（2）href

表示超文本引用，其指向一些网络资源，建立和当前元素或文本文档的链接关系 🔜 浏览器识别到其指向的文件时，就会并行下载资源，常用在a,link等标签上。

2：对HTML语义化的理解

语义化是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

语义化的优点如下：

（1）对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。

（2）对开发者友好，使用语义类标签增强了可读性，结构更加清晰

<header></header>  头部
<nav></nav>  导航栏
<section></section>  区块（有语义化的div）
<main></main>  主要区域
<article></article>  主要内容
<aside></aside>  侧边栏
<footer></footer>  底部

3：DOCTYPE（文档类型）的作用

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明 🔜 目的是告诉浏览器应该以什么样的文档类型定义来解析文档 🔜 不同的渲染模式会影响浏览器对CSS代码甚至JavaScript脚本的解析。

（1）CSS1Compat：标准模式（Strick mode）,默认模式，浏览器使用W3C的标准解析渲染页面。

（2）BackCompat：怪异模式（Quick mode）,浏览器使用自己的怪异模式解析渲染页面

4：script标签中defer和async的区别

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

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

（1）执行顺序

多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行。

（2）脚本是否并行执行

async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行。

defer属性，加载后续文档的过程和js脚本的加载是并行进行的 🔜 js脚本需要等到文档所有元素解析完成之后才执行

5：常用的meta标签有哪些

meta标签由name和content属性定义，用来描述网页文档的属性

常用的meta标签

（1）charset，用来描述HTML文档的编码类型

<meta charset="UTF-8" >

（2）keywords，页面关键词

<meta name="keywords" content="关键词" />

（3）description，页面描述

<meta name="description" content="页面描述内容" />

（4）refresh，页面重定向和刷新

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，适配移动端，可以控制视口的大小和比例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

（6）搜索引擎索引方式

<meta name="robots" content="index,follow" />

6：HTML5有哪些更新

（1）语义化标签

header：定义文档的页眉（头部）；
nav：定义导航链接的部分；
footer：定义文档或节的页脚（底部）；
article：定义文章内容；
section：定义文档中的节（section、区段）；
aside：定义其所处内容之外的内容（侧边）；

（2）媒体标签

1）audio：音频

2）video：视频

3）source标签

（3）表单

email ：能够验证当前输入的邮箱地址是否合法
url ：验证URL
number ：只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
search ：输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
range ：可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
color ：提供了一个颜色拾取器
time ：时分秒
data ：日期选择年月日
datatime ：时间和日期(目前只有Safari支持)
datatime-local ：日期时间控件
week ：周控件
month：月控件

（4）进度条、度量器

progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少
meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）
- high/low：规定被视作高/低的范围
- max/min：规定最大/小值
- value：规定当前度量值

设置规则：min < low < high < max

（5）DOM查询操作

document.querySelector()

document.querySelectorAll()

其选择的对象可以是标签，可以是类

（6）Web存储

HTML5提供了两种在客户端存储数据的新方法

localStorage：没有时间限制的数据存储

sessionStorage：针对一个session的数据存储

（7）其他

拖放、画布、svg

7：行内元素有哪些？块级元素有哪些？空（void）元素有哪些

行内元素：a b span img input select strong

块级元素：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6

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

常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。