每日五道前端面试题--day12

以下题目来自掘金等其它博客，但是问题的答案都是根据笔者自己的理解做出的。如果你最近想要换工作或者巩固一下自己的前端知识基础，不妨和我一起参与到每日刷题的过程中来，如何？

第12天要刷的面试题如下：

请叙述html中src和href属性之间的区别？
谈一谈对html语义化的理解
叙述DOCTYPE的作用
script标签中的defer属性和async属性的区别是什么？
常见的meta标签有哪些？

1. 请叙述html中的src和href属性之间的区别

回答思路：从三个方面对比两者：语义、应用的标签、相对于页面的行为
答案：
- src属性是source的简写，其语义为source；用于指定外部资源，通常是媒体文件或者脚本文件的来源。它通常在img script iframe标签上使用。src属性会告诉浏览器从指定的URL加载资源，并将其嵌入到当前的页面中；
- href属性是hypertext reference的简写，用于指定链接目标的URL。它通常在a link area等标签中使用。href属性定义了链接目标地址，可以是一个外部的网页，内部页面的锚点，资源文件等。
- 总之，src指向的资源通常是要插入/嵌入到页面中去的；而href表示引用资源位置或者导航的目标位置。

2. 谈一谈对html语义化的理解

这个问题问的太宽泛了，回答难度很大，而且说太多内容的话会导致语言失去逻辑性，因此退而求其次，按照下面的思路进行回答即可：

语义化是什么
为什么要进行语义化，即语义化的优点
常见的语义化标签，即如何体现出语义化
答案：
- 语义化通常来讲就是用正确的标签做正确的事情。根据内容的结构化，选择合适的标签，即保持diamagnetic和内容语义的一致性；
- 语义化的优势在于：1.对机器友好，表现在：SEO 爬虫读屏软件或者便于生成网站的内容大纲上； 2.对开发友好，表现在：可读性强结构更加清晰便于开发和维护
- 常见的语义化标签有 header section article footer aside nav main此外还有 figure figcaption blockquote em strong

3. 叙述DOCTYPE的作用

回答思路：是什么-作用-重要性-位置-两种渲染模式

答案： - DOCTYPE是html5中一种标准通用标记语言的文档类型声明；其作用是为了告诉浏览器应该以何种方式(html xhtml)来解析文档； - 选择不同的解析方式会影响到文档的渲染模式，进而会影响对css代码或者脚本的解析结果； - DOCTYPE文档类型声明必须放在文档的第一行 - 使用document.compatMode可以查看当前文档的渲染模式：Css1Compat或者BackCompat - 其中Css1Compat又称为是标准模式，它使用W3C标准解析和渲染页面，要求浏览器以最大支持的规范对文档进行解析；而BackCompat又称为是怪异模式，它是以向后兼容的宽松模式对文档进行解析和渲染的。

4. script标签中的defer属性和async属性的区别是什么？

回答思路：先说两个的共同点，再从执行顺序和阻塞两个方面对比其不同

async和defer都是异步加载脚本的解决方案，他们都不会阻塞页面的加载；反之如果一个script不使用async和defer方式加载，则当文档执行到此script解析的时候就会阻塞后面文档的继续加载。
它们的不同表现在：1.使用异步加载的方式加载脚本，虽然不会立即阻塞文档的解析，但是当目标脚本下载完成之后会立即执行，也就是此时仍然会阻塞后面的文档解析过程；正是因为此，不同的脚本的大小是不一样的，所以多个async方式加载的脚本不能保证执行的顺序；2.使用defer加载的多个脚本文件都会等到文档解析完成之后依次执行，所以全程不会阻塞文档解析也能够保证执行的顺序。

附加题：如果使用多个script标签加载多个脚本文件：a.js b.js c.jd，并且每个脚本都是用defer延迟加载；但是b.js文件很大，需要下载的时间远大于a和c，甚至在文档解析完之后还没有下载完成，那么浏览器是如何保证a b c的顺序的呢？

在b下载完成之前不会发起对c.js的请求，所以它们三个的执行顺序仍是可以保证的！

5. 常见的meta标签有哪些？

常见的meta单标签中的内容组合有三种： 1.name<->content 2.http-equiv<->concent 3. charset

html 复制代码

<!-- 设置编码类型 -->
<meta charset="UTF-8" />
<!-- 设置关键词 -->
<meta name="keywords" content="关键词" />
<!-- 设置页面描述 -->
<meta name="description" content="这是一段描述" />
<!-- 设置视口大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<!-- 设置搜索引擎 -->
<meta name="robots" content="index,follow" />
<!-- 设置重定向 -->
<meta http-equiv="refresh" content="0;url=''" />