type
status
date
slug
summary
tags
category
icon
password

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超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等
  1. 表示层（presentation layer）表示层是由CSS负责创建，它的作用是如何显示有关内容，学名：层叠样式表，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之CSS都能办妥
  1. 行为层（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绘制图形和动画。以下是一个简单的绘制矩形的示例：
在这个示例中，使用 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 标签：浏览器会立即加载并执行指定的脚本，"立即"指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。这会阻塞 HTML 解析。
  • script async：加载和渲染后续文档元素的过程将和 script 的加载与执行并行进行（异步）。async 脚本一定会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 事件触发之前或之后执行。
  • script defer：加载后续文档元素的过程将和 script 的加载并行进行（异步），但是 script 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。多个带 defer 属性的脚本会按照它们在文档中的顺序执行。
简而言之：
  • 普通 script：阻塞 HTML 解析，立即加载并执行
  • async script：异步加载，加载完成后立即执行，不保证执行顺序
  • defer script：异步加载，等到 HTML 解析完成后按顺序执行
  • <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> ：
举例：展示了一些产品名称，而且每个名称都和一个产品编码相关联。
<time> ：
表示日期和时间值，机器读取通过 datetime 属性指定。
举例：
<mark> ：用于高亮文本

嵌入内容

<video> ：
  • controls：展示视频自带的控件
  • autoplay：视频马上自动播放
  • poster：海报帧的URL
  • height、width：视频显示区域的宽和高
  • loop：视频结尾自动回到视频开始的地方
<audio> ：
大部分同 <vedio>
  • controls：展示音频自带的控件
  • autoplay：音频马上自动播放
  • muted：是否静音
  • loop：音频结尾自动回到开始的地方
<canvas> ：
通过JavaScript 和 HTML的 <canvas> 元素来绘制图形

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

Step 1：使用目的

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

Step 2：怎么写

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

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

4.H5是什么

简单粗暴：就是一种移动端页面
深入点：微信上的一种移动营销页面
总之不是HTML5