Html
Doctype作用
- <!DOCTYPE>声明位于HTML文档中的第一行，处于<html>标签之前，用于告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
- 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
- 如果HTML文档包含形式完整的DOCTYPE，那么他一般以标准模式呈现。对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面已标准模式呈现。DOCTYPE不存在或者格式不正确会导致文档已混杂模式呈现。
HTML5 为什么只需要写 <!DOCTYPE HTML>？
- HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
- HTML4.01基于SGML，所以需要对DTD进行引用，才能让浏览器知道该文档所使用的文档类型。
严格模式与混杂模式如何区分?有何区别？
Quirks模式（怪癖模式，诡异模式，怪异模式)：传入新参数，可以控制使用新功能或者旧功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。
Standards模式:从IE6开始，引入了Standards模式,对CSS提供更好的支持。
区别：总体会有布局、样式解析和脚本执行三个方面的区别;
(1) 在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
(2)设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置width和height都不会生效，而在quirks模式下，则会生效。
(3)设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?
行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素
块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素。img行内元素
行元素转换为块级元素方式：display：block；
怪异盒模型box-sizing？弹性盒模型|盒布局?
在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下：盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另一个是border-box
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。
href和src区别?
href用于在当前文档和引用资源之间确立联系。
href: 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加< link href="common.css" rel="stylesheet"/>,那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式src用于替换当前元素
src :指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素，< script src ="js.js"> < /script>解释：当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
title和alt区别
title：既是html标签，又是html属性，title作为属性时，用来为元素提供额外说明信息.
alt：alt是html标签的属性，alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息.
viewport 所有属性 ？
(1)width :设置layout viewport的宽度，为一个正整数，或字符串'device-width';
(2)initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
(3)minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。
(4)maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。
(5)height:设置layout viewport的高度，这个属性对我们并不重要，很少使用
(6)user-scalable:是否允许用户进行缩放，值为‘no’或者‘yes’。
(7)target-densitydpi: 表示目标设备的密度等级，作用是决定css中的1px 代表多少物理像素。值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
如何理解HTML结构的语义化？
所谓标签语义化，就是指标签的含义。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，
- 用正确的标签做正确的事情
- HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
- 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
- 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
html5有哪些新特性？
- HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
- 拖拽释放 (Drag and drop) API
- 画布 (Canvas) API
- 地理 (Geolocation) API
- 语义化更好的内容标签 (header,nav,footer,aside,article,section)
- 本地离线存储 (localStorage、sessionStorage)
- 表单控件（calendar、date、time、email、url、search ）
- 新的技术（ webworker, websocket, Geolocation）
html5移除了那些元素？
- 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
- 对可用性产生负面影响的元素：frame，frameset，noframes；
如何处理HTML5新标签的浏览器兼容问题？
- IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式:
- 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]> <script> src="[http://html5shim.googlecode.com/svn/trunk/html5.js](https://link.zhihu.com/?target=http%3A//html5shim.googlecode.com/svn/trunk/html5.js)"</script> <![endif]-->
如何区分 HTML 和 HTML5？
- DOCTYPE声明
- 新增的结构元素\功能元素
HTML5有哪些全局属性
class:为元素设置类标识
id: 元素id，文档内唯一
lang: 元素内容的的语言
style: 行内css样式
title: 元素相关的建议信息
data-*: 为元素增加自定义属性
draggable: 设置元素是否可拖拽
meta标签的name属性值
name 属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式 是：＜meta name="参数" content="具体的参数值"
其中name属性主要有以下几种参数：
A 、Keywords(关键字)说明：keywords用来告诉搜索引擎你网页的关键字是什么。
B 、description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要内容.
C 、robots(机器人向导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow,默认是all。
举例：＜meta name="robots" content="none"＞
D 、author(作者)
<b> 、<strong>、<em> 、<mark>元素粗体的区别
<b>吸引读者的注意，没有强调的含义
<strong>表示文本十分重要，一般用粗体显示
<em>标记出需要用户着重阅读的内容，可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读
<mark>标记关键词或短语
Canvas和SVG有什么区别？
svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿
<meta> 中 http-equiv 常用配置
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
http-equiv 相当于http的文件头作用，可以向浏览器传回一些有用的信息，以帮助正确和精确的显示网页内容，常与content属性对应
常用参数
- Expires(期限)：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 注意：必须使用GMT的时间格式。用法：
＜meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"＞- Pragma(cache模式) 说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出, 注意：这样设定，访问者将无法脱机浏览。用法：
＜meta http-equiv="Pragma" content="no-cache"＞- Refresh(刷新) 自动刷新并指向新页面。 其中的2是指停留2秒钟后自动刷新到URL网址。用法:
＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞- Set-Cookie(cookie设定) 如果网页过期，那么存盘的cookie将被删除。 必须使用GMT的时间格式。用法：
＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞- Window-target(显示窗口的设定) 强制页面在当前窗口以独立页面显示
＜meta http-equiv="Window-targete"＞
iframe缺点
iframe就是HTML中，用于网页嵌套网页的。一个网页可以嵌套到另一个网页中，可以嵌套很多层。
- iframe会阻塞主页面的Onload事件
- 搜索引擎的检索程序无法解读这种页面，不利于SEO
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
- 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题.
