1.什么是<!DOCTYPE>

DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档。

2.为什么HTML5只需要写就可以？

• 因为 HTML5 与 HTML4 基于的基准不同。HTML4 基于 SGML 因此需要除了 DOCTYPE 外还需要引入 DTD 来告诉浏览器用什么标准进行渲染。DTD 还分为标准模式、严格模式。如果什么都不写，就完全让浏览器自我发挥，会变成怪异模式。
• HTML5 不基于 SGML，因此后面就不要跟 DTD，但是需要 DOCTYPE 来规范浏览器的渲染行为。
• 注：SGML 是通用标记语言的集合。其中有 HTML、XML，因此需要用 DTD 来指定使用那种规范。

3.页面导入样式时，使用link和@import有什么区别？

区别：

1. link是HTML标签，@import是css提供的。
2. link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
3. link没有兼容性问题，@import不兼容ie5以下。
4. link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。

4.html的元素有哪些（包含H5）

• 行内元素：a、b、span、strong、i、em、button、input、label、br、textarea、select
• 块元素：div、p、h1-h6、ol、ul、li、table、tbody、td、tr、thead、dl、dt、dd
• H5新增元素：section、article、audio、video、hearder、footer、small

5.HTML全局属性(global attribute)有哪些（包含H5）？

全局属性：用于任何HTML5元素的属性

• accesskey:设置快捷键
• class:为元素设置类标识
• contenteditable:指定元素内容是否可编辑
• contextmenu:自定义鼠标右键弹出上下文菜单内容（仅firefox支持）
• data-*:为元素增加自定义属性
• dir：设置元素文本方向（默认ltr；rtl）
• draggable:设置元素是否可拖拽
• dropzone:设置元素拖放类型（copy|move|link,H5新属性，主流均不支持）
• hidden:规定元素仍未或不在相关
• id:元素id，文档内唯一
• lang:元素内容的语言
• spellcheck:是否启动拼写和语法检查
• style:行内css样式
• tabindex:设置元素可以获得焦点，通过tab导航
• title:规定元素有关的额外信息
• translate:元素和子孙节点内容是否需要本地化（均不支持）

by qingleizhang123 (github)

6.HTML5的文件离线储存怎么使用，工作原理是什么？

优点:
没有网络时可以浏览,加快资源的加载速度,减少服务器负载
使用:

• 只需要在页面头部加入,然后创建manifest.appcache文件
• manifest.appcache文件配置:

1. CACHE MANIFEST放在第一行
2. CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要列出来
3. NETWORK:表示在线才能访问的资源列表,如果CACHE列表里也存在,则CACHE优先级更高
4. FALLBACK:表示如果访问第一个资源是吧,那么使用第二个资源来替换它

• 浏览器如何解析manifest

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

与传统浏览器的区别

1. 离线缓存是针对整个应用,浏览器缓存是单个文件
2. 离线缓存可以主动通知浏览器更新资源

状态 window.applicationCache对象的status属性

• 0:无缓存
• 1:闲置
• 2.检查中,正在下载描述文件并检查更新
• 3:下载中
• 4:更新完成
• 5:废弃,应用缓存的描述文件已经不存在了,因此页面无法再访问应用缓存

事件 window.applicationCache对象的相关事件

1. oncached:当离线资源存储完成之后就触发这个事件
2. onchecking:当浏览器对离线存储资源进行更新检查的时候触发
3. ondounloading:当浏览器开始下载离线资源的时候会触发
4. onprogress:当浏览器在下载每一个资源的时候会触发
5. onupdateready:当浏览器对离线资源更新完成之后触发
6. onnoupdate:当浏览器检查更新之后发现没有这个资源时触发

注意事项

• 站点离线存储的容量限制是5M
• 如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存
• 引用manifest的html必须与manifest文件同源,在同一个域下
• 在manifest中使用的相对路径,相对参照物为manifest文件
• CACHE MANIFEST字符串硬在第一行,且必不可少
• 系统会自动缓存引用清单文件的HTML文件
• manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
• FALLBACK中的资源必须和manifest文件同源
• 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
• 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
• 当manifest文件发生改变时，资源请求本身也会触发更新

by wsb260 (github)

7.简述超链接target属性的取值和作用

a 标签的 target 属性一共有四个值。

• _self
  默认属性。在当前窗口或者框架中加载目标文档。
• _blank
  打开新的窗口或者新的标签页。在使用这个属性时，最好添加 rel=“noopener norefferrer” 属性，防止打开的新窗口对原窗口进行篡改。防止 window.opener API 的恶意行为。
• _parent
  在 frame 或者 iframe 中使用较多。在父级框架中载入目标文档，当 a 标签本身在顶层时，与 _self 相同。
• _top
  在 frame 或者 iframe 中使用较多。直接在顶层的框架中载入目标文档，加载整个窗口。

by Konata9 (github)

8.label都有哪些作用？并举相应的例子说明

Label标签通常是写在表单（form）内，它通常关联一个控件;

属性：Label标签有两个属性，一个是for，一个是 accesskey。

• for功能：表示这个Lable是为哪个控件服务的，Label标签要绑定了for指定HTML元素的ID或name属性，你点击这个标签的时候，所绑定的元素将获取焦点 ，点击label所包裹内容，自动指向for指定的id或name
• accesskey则定义了访问这个控件的热键( 所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键)

用法

1. <label for="username">姓名</label><input id="username" type="text">
2. <label for="username" accesskey＝"N">姓名</label><input id="username" type="text">

注意：
单选钮、复选框都要点击控件才能选中控件，而如果使用标识就可以实现点击文字选取。

具体实例：

1. 利用label"模拟"button来解决不同浏览器原生button样式不同的问题

   <input type="button" id="btn">
   <label for="btn">Button</label>
   <style>
   input[type='button'] {
     display: none;
   }
   
   label {
     display: inline-block;
     padding: 10px 20px;
     background: #456;
     color: #fff;
     cursor: pointer;
     box-shadow: 2px 2px 4px 0 rgba(0,0,0,.3);
     border-radius: 2px;
   }
   </style>
   

2. 结合checkbox、radio表单元素实现纯CSS状态切换，这样的实例就太多了。比如控制CSS动画播放和停止。下面是一部分代码，详细实例地址

   <input type="checkbox" id="controller">
   <label class="icon" for="controller">
     <div class="play"></div>
     <div class="pause"></div>
   </label>
   <div class="animation"></div>
   
   <style>
   ...
   #controller:checked ~ .animation {
     animation-play-state: paused;
   }
   ...
   </style>
   

3. input的focus事件会触发锚点定位，我们可以利用label当触发器实现选项卡切换效果。下面代码选自张鑫旭《CSS世界》。实际效果链接

   <div class="box">
     <div class="list"><input id="one" readonly>1</div>
     <div class="list"><input id="two" readonly>2</div>
     <div class="list"><input id="three" readonly>3</div>
     <div class="list"><input id="four" readonly>4</div>
   </div>
   <div class="link">
     <label class="click" for="one">1</label>
     <label class="click" for="two">2</label>
     <label class="click" for="three">3</label>
     <label class="click" for="four">4</label>
   </div>
   
   <style>
   .box {
     width: 20em;
     height: 10em;
     border: 1px solid #ddd;
     overflow: hidden;
   }
   .list {
     height: 100%;
     background: #ddd;
     text-align: center;
     position: relative;
   }
   .list > input { 
     position: absolute; top:0; 
     height: 100%; width: 1px;
     border:0; padding: 0; margin: 0;
     clip: rect(0 0 0 0);
   }
   </style>
   

by MartinsYong (github)

9.iframe框架都有哪些优缺点？

优点

• 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页
• 技术易于掌握，使用方便，可主要应用于不需搜索引擎来搜索的页面
• 方便制作导航栏

缺点

• 会产生很多页面，不容易管理，不容易打印
• 对浏览器搜索引擎不友好
• 多框架的页面会增加服务器的http请求

10.浏览器内多个标签页之间的通信方式有哪些？

• WebSocket （可跨域）
• postMessage（可跨域）
• Worker之SharedWorker
• Server-Sent Events
• localStorage
• BroadcastChannel
• Cookies

详细答案+demo

11.viewport常见设置都有哪些？

在移动端做开发时，必须要搞清楚 viewport 这一设置。

viewport 就是视区窗口，也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域，但在移动端上 viewport 会超出设备的显示区域（即会有横向滚动条出现）。设备默认的 viewport 在 980 - 1024 之间。

为了让移动端可以很好地显示页面，因此需要对 viewport 进行设置。相关的设置值如下：

• width 布局视口宽度
• initial-scale 初始化缩放比例
• minimum-scale 最小缩放比例
  这里通过微信来浏览器演示 苹果内置的和很多安卓的浏览器不可用 itools 实时屏幕
• maximum-scale 最大缩放比例
• user-scalable 设置是否允许用户缩放
  苹果内置的浏览器不好使， 但是微信浏览器好使
• viewport-fit auto/contain/cover

详细答案传送门

12.你对标签语义化的理解是什么？

1. 由于语义化更具有可读性，便于团队开发维护
2. 在没有css的情况下，页面也可以呈现出也很好的内容结构和代码结构
3. 关于SEO，搜索引擎能更好的理解页面中各部分的关系，可更快更准确的搜索到信息

13.常见的浏览器内核都有哪些？并介绍下你对内核的理解

浏览器内核即浏览器的核心部分，分为渲染引擎和JS引擎，前者负责渲染页面，后者负责解析JavaScript。

百度T5、腾讯X5，UC U3等内核都基于Blink优化，Blink由Webkit中的WebCore元件衍生而来

• Trident: IE
• Webkit：Chrome<28、Safari
• Gecko：Firefox
• Blink：Chrome>=28、Opera>12.18、Edge新版
• Presto：Opera<=12.18

14.html5中的form怎么关闭自动完成？

• h5新增的补全功能，菜鸟教程上写的比较含糊比较难懂；
• 解释： 在部分浏览器上，foucs输入框可以把之前输入过的值自动填入，如果不想自动填入，可以关掉它；
• autocomplete=“off”,默认是"on" 开启状态
• 一般业务下不会调整这个自动完成，因为对产品来说简化用户操作，建议打开

具体实例：

<form action="" id="formDom">
        <label for="in1">请输入</label><input id="in1" type="text" >
        <input type="submit" value="提交"  autocomplete='off'>
</form>

let formDom=document.querySelector('#formDom')
    formDom.onclick=function(e){
         e.preventDefault(); //阻止默认事件，防止自动提交
 }

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

title与h1的区别
定义：

• title是网站标题，一个页面只能有一个
• h1是文章主题

作用：

• title概括网站信息，可以直接告诉搜索引擎和用户这 个网站是关于什么主题和内容的，是显示在网页Tab栏里的；
• h1突出文章主题，面对用户，更突出其视觉效果，指向 页面主体信息，是显示在网页中的。

注意：
如果title为空，但是页面存在h1,b,strong标签，搜索引擎会默认页面title为h1内的内容，所以 得出结论h1是在没有外界干扰下除title以外第二个能强调页面主旨的标记，在一个页面中应该使用且只使用一次h1标记。

b与strong的区别
定义：

• b(bold)是实体标签，用来给文字加粗
• strong是逻辑标签，作用是加强字符语气

区别：

• b标签只是加粗的样式，没有实际含义，常用来表达无强调或着中意味的粗体文字
• strong表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通过css添加样式，使用别的样式强调

建议:
为了符合css3的规范语义化，b应尽量少用而改用strong

i与em的区别

定义：

• i(italic)是实体标签，用来使字符倾斜
• em(emphasis)是逻辑标签，作用是强调文本内容

区别：

• i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语；
• em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。

建议：
为了符合CSS3的规 范，i应尽量少用而改用em

tootip:
物理元素是告诉浏览器我应该以何种格式显示文字，逻辑元素告诉浏览器这些文字有怎么样的重要性。
对于搜索引擎来说em和strong比i和b要重视的多。

16.元素的alt和title有什么区别？

alt是html标签的属性，而title既是html标签，又是html属性。

• title标签，网页的标题就是写在这对标签之内的。
• title作为属性时，可以为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
• 而alt属性只能用在img、area和input元素中，用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。alt是替代图像作用而不是提供额外说明文字的。
• 此外，使用alt属性还具有搜索引擎优化效果，因为搜素引擎是无法直接读取图像的信息的，alt可以为其提供文字信息所以对搜索引擎比较友好。
• 通常人们容易搞错的是title和alt这两个属性同时用于img标签的时候。在旧版本的IE浏览器中，鼠标经过图像时显示的提示文字是alt的内容，而忽略了title属性，这个曾经误导了很多人。因此，如果想在IE中显示title的内容，要么title属性和alt一致，要么alt内容为空（“”，空格也不能有）。不过，在新版的IE（IE8及以上）中，已不会出现这种情况了。
• 另外，当a标签内嵌套img标签时，起作用的是img的title属性。