1.Doctype作用？标准模式与兼容模式各有什么区别?
Doctype 是html的格式声明，位于HTML文档的第一行，处于<html>标签之前，告诉浏览器的解析器，这个html文件要用什么文档标准解析，如果没有写Doctype声明，或者写错了，浏览器会按照兼容模式进行解析。
标准模式：排版和js运作模式都以该浏览器支持的最高标准运行
兼容模式：模拟老式浏览器的模式进行解析，宽松向后的方式显示。
严格模式需要用 "use strict"，而混杂模式则不需要
严格模式对语法要求更加严格，对代码的书写要求更加规范
严格模式下：
变量声明必须要用 var
数字不能以0开头
不能修改系统自带的左值，如 this
函数evil（）内部声明的变量有作用域
2.HTML5 为什么只需要写 <!DOCTYPE HTML>？
因为HTML5 不基于 SGML，所以不需要对 DTD 进行引用，但是需要用Doctype告诉浏览器需要按照什么标准进行解析。
而HTML4.01 是基于SGML，所以需要对 DTD 进行引用，才能告诉浏览器该文档所使用的文档标准。
标准通用置标语言（Standard Generalized Markup Language,SGML）
即语法定义、文件类型定义(简称DTD--Definition Type Document)和文件实例。
3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
css规范规定，每个元素都有默认display属性，以确定该元素的类型
行内 inline ：span i u s b a img input select...
块元素 block ： div ul ol lo dl dd dt h1~h6 p
常见的空元素 void: br hr img input link meta；
鲜为人知的空元素：base command Keygen source track
4.页面导入样式时，使用link和@import有什么区别？
link属于XHTML标签，除了加载CSS外，还能用于定义RSS，rel连接属性。
@import 是css提供的，只能识别css格式的文件。
页面加载时，link会同时被加载，而@import引用的css则需要等到页面加载完后再加载。
import是css2.1提出的，ie5以上才能被兼容。而link是XHTML标签 不存在兼容性问题；
5.介绍一下你对浏览器内核的理解？
浏览器内核：主要分为渲染引擎和js引擎
渲染引擎：负责获取网页的内容（HTML 、XML 、图像等），整理信息（加入css），计算显示方式等
js引擎：解析和执行js代码，实现网页动态效果。
现在的内核一般指渲染引擎；
常见的浏览器内核：
Trident内核：IE、360、搜狗等等
Gecko内核：Netscape6以上
Presto内核：Opera7及以上；
Webkit内核：Safari，Chrome等；
6.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
html5 新特性 ：HTML5已经不是SGML的子集了，主要是关于图像，位置，储存，多任务等功能的添加。
绘画 canvas；
媒体标签 video 、audio
本地离线存储 localStorage 长期储存数据，浏览器关闭后不丢失，sessionStorage 浏览器关闭后自动删除。
新的语义化标签，如：header article section aside footer nav 等
表单控件 date、time、email、url、search等
新技术 webworker、websocket、Geolocation
移除的元素 basefont、big、center、font、s、u等
frame、frameset、noframes
支持HTML5新标签
可以用创建元素的方式创建新标签
document.createElement
也可以使用html5shim；
如何区分HTML5？
Doctype声明、新增的结构元素、功能元素
添加了新的属性：translate animation
7.html语义化：
用正确的标签做正确的事。
使html结构更加清晰，便于浏览器、搜索引擎解析；
便于阅读；
便于维护；
便于网络爬虫计算权重，利于SEO；
8.HTML5离线存储
用户在没有连网时，可以正常的访问站点或者应用，连网后更新缓存。
原理：基于一个新建的.appcache文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源被当做cookie一样存储下来，离线状态是浏览器会解析这些缓存。
使用：
1.在页面头部加入一个manifest属性；
2.在cache.manifest文件编写离线存储资源。
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3.在离线状态时，操作window.applicationCache进行需求实现。
详细的使用请参考：
浏览器怎么对HTML5的离线存储资源进行管理和加载？
在线时，浏览器发现html头部有manifest属性，就会请求manifest文件，如果是第一次访问，则下载文件进行离线存储，如果不是第一次则比较文件内容，相同则不操作，不同则重新下载。
离线时，浏览器直接使用离线存储的资源。
9.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标识用户身份而储存在本地终端（Client Side）上的数据（通常会加密）。
cookie数据始终在同源的http请求中携带，会在浏览器和服务器中来回传递；
什么是Cookies（“小甜饼”）呢？简单来说，Cookies就是服务器暂时存放在你的电脑里的资料（.txt格式的文本文件），好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，Cookies 会帮你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookies资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。
sessionStorage和localStorage的数据则仅仅保存在本地，不会主动发给服务器。
存储大小：
cookie数据不能超过4k
sessionStorage和localStorage虽然也有限制，但比cookie大得多，能达到5M
保存期限：
localStorage 永久保存，除非手动删掉，浏览器关闭也不影响。
sessionStorage 数据在浏览器关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，浏览器关闭也不影响。
10.iframe有那些缺点？
iframe会阻塞主页面的onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO（搜索引擎优化）；
iframe和主页面共享连接池，而浏览器对相同域的连接都有限制，所以会影响页面的并行加载。
使用iframe最好通过JavaScript动态给iframe添加src属性，可以绕开上述问题。
11.Label的作用是什么？是怎么用的？（label：标注）
label标签是用来定义表单控件之间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
//第一种用法，label标签中添加for = ‘表单的id’
<label for="Name">Number:</label>
<input type=“text“ name="Name" id="Name"/>
//第二种用法，直接包裹表单控件
<label>Date:<input type="text" name="B"/></label>
12.HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或者某个input设置为 autocomplete = off ；
13.网页验证是干嘛的，是为了解决什么安全问题
网页验证是区分用户是计算机还是人的公共安全自动程序。
可以防止恶意破解密码，刷票，论坛灌水；
能有效防止黑客对某一指定注册用户使用程序暴力破解的方式不断进行登录尝试。
14.title与h1的区别，b与strong的区别、i与em的区别？
title属性没有明确的意义，只表示是个标题
h1则表示层次明确的标题；
b加粗字体，但是没有语义，strong有语气加强的意思，使用阅读器自动播放时会加重语气。
i为斜体，没有语义，em斜体表示强调文本。
自然样式标签：b、i、u、s、pre
语义样式标签：strong、em、ins、del、code
网友评论