前端面试HTML1.对HTML语义化的理解语义化是指用正确的标签的做正确的事情语义化的有点下： 2. DOCTYPE

1.对HTML语义化的理解

语义化是指用正确的标签的做正确的事情

语义化的有点下：

对机器友好： 
1.更适合搜索引擎的爬虫取有效信息，有利于SEO
2.语义类支持读屏软件

对开发者友好：增强可读性

常见的语义化标签
  <header></header> 头部
  <nav></nav> 导航栏
  <section></section> 区块
  <article></article> 主要内容
  <aside></aside> 侧边栏
  <footer> </footer> 底部

2. DOCTYPE(文档类型)的作用

标准通用的标记语言的文档类型声明，目的是告诉浏览器应该以什么文档类型定义来解析文档，不同的渲染会影响浏览器对css,js的解析。

浏览器渲染的两种模式
  CSS1Compat: 标准模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准策划给你先页面。
  BackCompat: 混杂模式，浏览器使用自己的盖伊模式解析渲染页面，以一个比较宽松的向后兼容的方式显示。

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

没有defer或async属性，浏览器会立即加载并执行相应的脚本，读到会开始加载和执行，这样阻塞后续文档的加载。

 defer属性：js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前

4. 常用的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">
     其中，`content` 参数有以下几种：
    -   `width viewport` ：宽度(数值/device-width)
    -   `height viewport` ：高度(数值/device-height)
    -   `initial-scale` ：初始缩放比例
    -   `maximum-scale` ：最大缩放比例
    -   `minimum-scale` ：最小缩放比例
    -   `user-scalable` ：是否允许用户缩放(yes/no）
    （6） 搜索引擎索引方式：
     <meta name="robots" content="index,follow" />
  其中，`content` 参数有以下几种：

    -   `all`：文件将被检索，且页面上的链接可以被查询；
    -   `none`：文件将不被检索，且页面上的链接不可以被查询；
    -   `index`：文件将被检索；
    -   `follow`：页面上的链接可以被查询；
    -   `noindex`：文件将不被检索；
    -   `nofollow`：页面上的链接不可以被查询。

5. HTML5有哪些更新

6. HTML5有哪些更新

1. 语义化标签

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

2. 媒体标签

（1） audio：音频

<audio src='' controls autoplay loop='true'></audio>

属性：

controls 控制面板
autoplay 自动播放
loop=‘true’ 循环播放

（2）video视频

<video src='' poster='imgs/aa.jpg' controls></video>

属性：

poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
controls 控制面板
width
height

（3） source标签浏览器对视频格式支持成都不一样，为了能够兼容不同的浏览器。

  <source src='aa.flv' type='video/flv'></source>
  <source src='aa.mp4' type='video/mp4'></source>
  </video>

表单类型自动按一定规则匹配：

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

表单属性： - placeholder ：提示信息 - autofocus ：自动获取焦点 - autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：

    <!---->

    -   -   表单必须提交过
        -   必须有name属性。

    <!---->

    -   required：要求输入框不能为空，必须有值才能够提交。
    -   pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$"
    -   multiple：可以选择多个文件或者多个邮箱
    -   form=" form表单的ID"

表单事件：
oninput 输入框内容发生变化出发此事件
onivalid当验证不通过时触发此事件

7. DOM查询操作

 document.querySelector()
 document.querySelectorAll()

类需要加点，ID需要加#

8. img的srcset属性的作⽤？

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片，加载就会很慢。所以就有了新的srcset标准。代码如下：

<img src="image-128.png"
     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
     sizes="(max-width: 360px) 340px, 128px" />

其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。

sizes语法如下：

sizes="[media query] [length], [media query] [length] ... "

sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。

9. 空(void)元素有那些？

空标签在开始标签中关闭的，没有闭合标签。

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

10. 对 web worker 的理解

在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

如何创建 web worker：

1.  检测浏览器对于 web worker 的支持性
2.  创建 web worker 文件（js，回传函数等）
3.  创建 web worker 对象

11. HTML5的离线储存怎么使用，它的工作原理是什么

离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理： HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

使用方法：

（1）创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：

<html lang="en" manifest="index.manifest">

（2）在 cache.manifest 文件中编写需要离线存储的资源：

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。

（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。

12. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器会直接使用离线存储的资源。

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

strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响
i内容展示为斜体，em表示强调的文本

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

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

优点：

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么只需要修改iframe的内容，就可以实现调用每一个页面的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容，如图标或广告，这些问题可以由iframe来解决。

5.iframe会堵塞主页面的Onload事件。

6.iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

缺点：

iframe 会阻塞主页面的 onload 事件 - 在典型方式下（）使用iframe时，会阻塞onload事件。

解决方法：1、使用js动态设置iframe的src属性。只对chrome、Safari有效

         2、在onload事件后，设置iframe的src

一般情况下，iframe和主页面中的资源并行下载（如使用iframe进行脚本的延迟加载），但是有些情况下，主页面会阻塞iframe的加载。

以下情况：1、外部脚本在iframe之前，脚本会阻塞iframe

         2、IE和FF中，主页面中的样式表会阻塞iframe的下载。

无法被一些搜索引擎索识别
多移动设备无法完全显示框架，设备兼容性差

5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的

14. head标签有什么作用

定义文档头部，可以引用脚本，指示浏览器在哪里找到样式表，提供元信息等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：, , ,

其中定义文档的标题，它是 head 部分中唯一必需的元素。

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

产生乱码的原因：

网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码；
html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
浏览器不能自动检测网页编码，造成网页乱码。

解决办法：

使用软件编辑HTML网页内容；
如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；
如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

16. 渐进增强和优雅降级之间的区别

（1）渐进增强：主要时针对低版本的浏览器进行页面的重构，保证基本的功能情况下，对高级浏览器改进和追加功能。（2）优雅降级：一开始构建完整功能，然后在低版本的浏览器进行兼容。

17. 说下HTML5 drag API

-   dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
-   darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
-   dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
-   dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
-   dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
-   drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
-   dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。