1. 什么是 *DOCTYPE***， 有何作用？**

Doctype是 HTML5 的文档声明，通过它可以告诉浏览器，使用哪一个 HTML 版本标准解析文档。在浏览器发展的过程中，HTML 出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。

2. 说说对 html 语义化的理解

HTML 标签的语义化，简单来说，就是用正确的标签做正确的事情，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，无论是谁都能看懂这块内容是什么。

语义化的优点如下：

• 在没有 CSS 样式情况下也能够让页面呈现出清晰的结构
• 有利于 SEO 和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
• 方便团队开发和维护，语义化更具可读性，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化

3. src 和 href 的区别

src 和 href 都是 HTML 中特定元素的属性，都可以用来引入外部的资源。两者区别如下：

• src：全称*source*，它通常用于 img、video、audio、script 元素，通过 src 指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求 src 资源时，它会将资源下载并应用到文档内，比如说：js 脚本、img 图片、frame 等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将 js 脚本放在底部而不是头部的原因。
• href：全称*hyper reference*，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于 a、link 元素。

4. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

• title 属性表示网页的标题，h1 元素则表示层次明确的页面内容标题，对页面信息的抓取也有很大的影响
• strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong 会重读，而b是展示强调内容
• i 是*italic**_(斜体)的简写，是早期的斜体元素，表示内容展示为斜体，而 _em 是*emphasize**（强调）的简写，表示强调的文本**

5. 什么是严格模式与混杂模式？

• 严格模式：是以浏览器支持的最高标准运行
• 混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

6. 前端页面有哪三层构成，分别是什么？

**构成：结构层、表示层、**行为层

1. **结构层（structural layer）**结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由 HTML 超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等
2. **表示层（presentation layer）**表示层是由 CSS 负责创建，它的作用是如何显示有关内容，学名：层叠样式表，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之 CSS 都能办妥
3. 行为层（behaviorlayer）行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是 JavaScript 和DOM主宰的领域

7. iframe 的作用以及优缺点

iframe 也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入到现有的网页中。

优点：

• 可以用来处理加载缓慢的内容，比如：广告

缺点：

• iframe 会阻塞主页面的 Onload 事件
• iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过 JS 动态给 ifame 添加 src 属性值来解决这个问题，当然也可以解决 iframe 会阻塞主页面的 Onload 事件的问题
• 会产生很多页面，不易管理
• 浏览器的后退按钮没有作用
• 无法被一些搜索引擎识别

8.meta viewport 是做什么用的，怎么写？

目的 是为了在移动端不让用户缩放页面使用的

解释每个单词的含义

• with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度
• initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
• maximum-scale=1 指定用户能够放大的最大比例
• minimum-scale=1 指定用户能够缩小的最大比例

9.浏览器乱码的原因是什么?如何解决?

编码格式不匹配

浏览器打开网页时,需要根据网页源代码的编码格式来解码。如果网页的编码格式与浏览器的编码格式不匹配,就会出现乱码。比如,网页的编码格式为 UTF-8,而浏览器的编码格式是 GB2312,那么就会出现乱码。

网页编码错误

在编写网页的时候,如果编码出现错误,也会导致浏览器打开网页时出现乱码。比如,在写 HTML 代码时,如果忘记给中文字符指定编码格式,就会出现乱码。

字体缺失

有些网页会使用比较特殊的字体,如果浏览器中没有这个字体,就会找不到对应的字符,从而出现乱码。

10.iframe 有那些优点和缺点?

优点

• 可以在页面上独立显示一个页面或者内容,不会与页面其他元素产生冲突。
• 可以在多个页面中重用同一个页面或者内容,可以减少代码的冗余。
• 加载是异步的,页面可以在不等待 iframe 加载完成的情况下进行展示。
• 方便地实现跨域访问

缺点

• 搜索引擎可能无法正确解析 iframe 中的内容
• 会阻塞主页面的 onload 事件
• 和主页面共享连接池,影响页面并行加载

11.HTML5 新特性

• 语义化标签
• 增强型表单(如可以通过 input 的 type 属性指定类型是 color 还是 date 或者 url 等)
• 媒体元素标签(video,audio)
• canvas,svg
• svg 绘图
• 地理等位(navigator.geolocation.getCurrentPosition(callback))
• 拖放 API(给标签元素设置属性 draggable 值为 true,能够实现对目标元素的拖动)
• Web Worker(可以开启一个子线程运行脚本)
• Web Storage(即 sessionStorage 与 localStorage)
• Websocket(双向通信协议,可以让浏览器接收服务端的请求)
• dom 查询(document.querySelector()和 document.querySelectorAll())

12.如何使用 HTML5 中的 Canvas 元素绘制图形？

Canvas 元素允许在网页上使用 JavaScript 绘制图形和动画。以下是一个简单的绘制矩形的示例：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas")
  var ctx = canvas.getContext("2d")
  ctx.fillStyle = "red"
  ctx.fillRect(50, 50, 100, 100)
</script>

在这个示例中，使用 document.getElementById() 方法获取 Canvas 元素，并通过 getContext(“2d”) 获取 2D 绘图上下文。 然后，使用 fillStyle 属性设置填充颜色，fillRect() 方法绘制一个矩形。

13.什么是 data-属性？

在 JavaScript 框架变得流行之前，前端开发者经常使用 data- 属性，把额外数据存储在 DOM 自身中。当时没有其他 Hack 手段（比如使用非标准属性或 DOM 上额外属性）。这样做是为了将自定义数据存储到页面或应用中，对此没有其他更适当的属性或元素。

而现在，不鼓励使用 data- 属性。原因之一是，用户可以通过在浏览器中利用检查元素，轻松地修改属性值，借此修改数据。数据模型最好存储在 JavaScript 本身中，并利用框架提供的数据绑定，使之与 DOM 保持更新。

14.请描述 cookie、sessionStorage 和 localStorage 的区别。

	cookie	localStorage	sessionStorage
由谁初始化	客户端或服务器，服务器可以使用 Set-Cookie请求头。	客户端	客户端
过期时间	手动设置*****	永不过期	当前页面关闭时
在当前浏览器会话（browser sessions）中是否保持不变	取决于是否设置了过期时间	是	否
是否随着每个 HTTP 请求发送给服务器	是，Cookies 会通过 Cookie请求头，自动发送给服务器	否	否
容量（每个域名）	4kb	5MB	5MB
访问权限	任意窗口	任意窗口	当前页面窗口

15.请描述 script、script async 和 script defer 的区别。

• <script> - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
• <script async> - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时，可以使用 async，比如用作页面统计分析。
• <script defer> - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果有多个含 defer 的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。

注意：没有 src 属性的脚本，async 和 defer 属性会被忽略。

16.为什么最好把 CSS 的 link 标签放在 head 之间？为什么最好把 JS 的 script 标签恰好放在 body 之前，有例外情况吗？

把 <link> 标签放在 <head></head> 之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

把 <script> 标签恰好放在 </body> 之前

脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。

例外情况是当你的脚本里包含 document.write() 时。但是现在，document.write() 不推荐使用。同时，将 <script> 标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档 （document） 被解析。也许，对此比较好的做法是，<script> 使用 defer 属性，放在 <head> 中。

17. 你用过哪些 HTML5 标签

表示结构的标签

<header> <nav> <main> <article> <section> <aside> <footer>

表示文字形式

<data> ：

**举例：展示了一些产品名称，而且每个名称都和一个****产品编码**相关联。

<p>新产品</p>
<ul>
  <li><data value="398">迷你番茄酱</data></li>
  <li><data value="399">巨无霸番茄酱</data></li>
  <li><data value="400">超级巨无霸番茄酱</data></li>
</ul>

<time> ：

表示日期和时间值，机器读取通过 datetime 属性指定。

举例：

<p>
  The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.
</p>

<mark> ：用于高亮文本

嵌入内容

<video> ：

• controls：展示视频自带的控件
• autoplay：视频马上自动播放
• poster：海报帧的 URL
• height、width：视频显示区域的宽和高
• loop：视频结尾自动回到视频开始的地方

<video controls>
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML5 video. Here is a
    <a href="myVideo.mp4">link to the video</a> instead.
  </p>
</video>

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以
  <a href="videofile.ogg">下载</a>
  并用你喜欢的播放器观看!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English" />
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska" />
</video>

<audio> ：

**大部分同 **<vedio>

• controls：展示音频自带的控件
• autoplay：音频马上自动播放
• muted：是否静音
• loop：音频结尾自动回到开始的地方

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support HTML5 audio. Here is a
    <a href="myAudio.mp4">link to the audio</a> instead.
  </p>
</audio>

<!-- Simple audio playback -->
<audio src="AudioTest.ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
</audio>

<canvas> ：

通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形

<canvas id="canvas" width="300" height="300"></canvas>

//获取HTML <canvas> 元素的引用
const canvas = document.getElementById("canvas")
//获得一个绘图上下文
const ctx = canvas.getContext("2d")

//让长方形变成绿色
ctx.fillStyle = "green"
//将它的左上角放在(10, 10)，把它的大小设置成宽150高100
ctx.fillRect(10, 10, 150, 100)

3. meta viewport 是做什么用的，怎么写？

Step 1：使用目的

是为了在移动端不让用户缩放页面使用的

Step 2：怎么写

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

Step 3：解释每个单词的含义

• with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度
• initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
• maximum-scale=1 指定用户能够放大的最大比例
• minimum-scale=1 指定用户能够缩小的最大比例

4.H5 是什么

简单粗暴：就是一种移动端页面

深入点：微信上的一种移动营销页面 总之不是 HTML5