HTML很简单？不！

1.Doctype的作用是什么？

Doctype声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老实浏览器的行为，以保证一些老的网站的正确访问。

2.行内元素与块级元素

块级元素	行内元素
独占一行，默认情况下，其宽度自动填满其父元素宽度	相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
可以设置width，height属性	行内元素设置width，height属性无效
可以设置margin和padding属性	行内元素起边距作用的只有margin-left、margin-rigth、padding-left、padding-right，其他属性不会起边距效果
对应于display：block	对应于display：inline

3.替换元素与非替换元素

替换元素
浏览器根据元素的标签和属性来决定元素的具体显示的内容，例如：img标签，只写一个标签，不添加属性，页面上是显示不出来你要的图片的，但是我们在标签里添加src，这时在页面上就显示出你要的图片。同样为替换元素的还有input等

非替换元素：只要将内容直接告诉浏览器，将其显示出来，如p元素

4.meta标签

可以定义页面编码语言，搜索引擎优化、自动刷新并指向新的页面，控制页面缓冲，响应式视窗
常见的meta标签
1.chartset，用于描述HTML文档的编码形式
2.http-equiv，顾名思议，相当于http的文件头作用，可以设置http的缓存过期日期等。

5.的title和Alt的区别？

title:通常当鼠标滑动到元素上的时候显示
Alt：是img的特有属性，是图片内容的等价描述，用于图片无法加载时显示，读屏器阅读图片。可提高图片可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

6.script标签的defer和async作用以及区别？

1.脚本没有defer或async，浏览器会立即加载并执行指定的脚本，也就是说不等后续载入的文档元素，读到就加载并执行。
2.defer属性表示延迟执行引入的JavaScript，脚本会被延迟到整个页面都解析完毕之后再执行
3.async：只适用于外部文件，不让页面等待脚本下载和执行，从而异步加载页面的其他内容，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞，多个脚本的执行顺序无法保证。

7.空标签定义

标签内没有内容的HTML标签被称为空元素，空元素是在开始标签中关闭的。
常见的空元素有：br、hr、img、input、link、meta

8.link和@import的区别？

从属关系区别：@import是css提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载css文件，还可以定义rel连接属性、引入网站目标等。

加载顺序执行区别：加载页面时，link标签引入的css被同时加载；@import引入的css将在页面加载完毕后被加载。

兼容性区别：@import是css2.1才有的语法，故只可在IE5+才能识别，link标签作为HTML元素，不存在兼容性问题。

DOM可控性区别：可以通过js操作dom，插入link标签来改变样式；由于dom方法是基于文档的，无法使用@import的方式插入样式。

9.HTML5有哪些新特性？移除了哪些元素？

新增:
绘画canvas、媒体回放的video、audio元素
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除
语义化更好的内容元素：article、footer、header、nav、section
表单控件：calendar、data、time、email、URL、search
新的技术：webwork、websocket
新的文档属性：document、visibilityState

移除：
纯表现的元素：basefont、big、center、font
对可用性产生负面影响的元素：frame、frameset

10.iframe有哪些缺点？

iframe会创建包含另外一个文档的内联框架

1.iframe会阻塞主页面的onload事件。window的onload事件需要在所有iframe加载完毕后（包含里面的元素）才会触发。在Safari和Chrome里，通过js动态设置iframe的src可以避免这种阻塞情况
2.搜索引擎的检索程序无法解读这种页面，不利于网页的SEO
3.iframe和主页面共享连接池，而浏览器对相同的域的连接有限制，所以会影响页面的并行加载。
4.浏览器的后退按钮失效
5.小型的移动设备无法完全显示框架

11.attribute和property的区别是什么？

attribute是dom元素在文档中作为HTML标签拥有的属性，property是dom元素在js中作为对象拥有的属性。对于HTML的标准属性来说，attribute和property是同步的，是自动更新的，但是对于自定义的属性来说，他们是不同步的。

12.文档的不同注释方式？

HTML的注释方法：<!--注释内容-->
css的注释方法 /*注释内容*/
js的注释方法/*多行注释方式*/ //单行注释方式

13.说说你对语义化的理解？

1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2.有利于SEO，和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重
3.方便其他设备解析（如屏幕阅读器、移动设备）以意义的方式来渲染网页
4.便于团队开发和维护，语义化更具有可读性。

14.HTML与XHTML的区别？

1.所有标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须小写
3.所有的XML标记都必须合理嵌套
4.所有的属性必须用引号""括起来
5.把所有<和&特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使“--”
8.图片必须有说明文字

15.IE8以下版本的浏览器中盒模型有什么不同？

IE8以下的浏览器的盒模型中定义的元素的宽高不包括内边距和边框

16.DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

（1）创建新节点

      createDocumentFragment()    //创建一个DOM片段

      createElement()   //创建一个具体的元素

      createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

      getElementsByTagName()    //通过标签名称

      getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

      getElementById()    //通过元素Id，唯一性

17.渲染页面时常见哪些不良现象？

FOUC：主要是指样式闪烁的问题，由于浏览器渲染机制在css加载之前，先呈现了HTML就会导致展现出无样式内容，然后样式突然呈现的现象。会出现这个的问题的原因主要是css加载时间过长，或者css被放在了文档底部。
白屏:有些浏览器渲染机制要先构建dom树和cssom树，构建完成之后再进行渲染，如果css部分放在HTML尾部，由于css未加载完成，浏览器迟迟未渲染，从而导致白屏，也可能是把js文件放在了头部，脚本的加载会阻碍后面文档内容的解析，从而页面迟迟未渲染出来，出现白屏的问题。

18.documen.write和 innerHTML的区别

document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

19.什么叫优雅降级和渐进增强？

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强:从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

20.disabled 和 readonly 的区别？

disabled指当input元素加载时禁用此元素，input内容不会随着表单提交。
readonly规定输入字段为只读，input内容会随着表单提交
无论设置readonly还是disabled，通过js脚本就能更改input的value

21.主流浏览器内核私有属性css前缀？

mozilla 内核 （Firefox，flock 等） -moz
webkit 内核 （Safari、Chrome 等）-webkit
Opera 内核 （Opera 浏览器） -o
trident 内核 （ie 浏览器） -ms