HTML面试题（常问）

请说出XHTML和HTML的区别

1、文档顶部doctype声明不同，xhtml的doctype顶部声明中明确规定了xhtml DTD的写法；
2、html元素必须正确嵌套，不能乱；
3、属性必须是小写的；
4、属性值必须加引号；
5、标签必须有结束，单标签也应该用 “/” 来结束掉；

HTML和HTML5的区别

1、文档声明区别

HTML：超文本标记语言，一种纯文本类型的语言。

HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。

2、结构语义区别

html：没有体现结构语义化的标签，如：<div id="nav"></div>

html5：添加了许多具有语义化的标签，如：

<article>、<aside>、<audio>、<bdi>...

3、绘图区别

HTML：指可伸缩矢量图形，用于定义网络的基于矢量的图形。

HTML5：HTML5的canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素。

元素的alt和title有什么异同

在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

很多网站不常用table iframe这两个元素，知道原因吗？

因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

iframe有那些缺点

1.会产生很多页面，不容易管理。

2.代码复杂，无法被一些搜索引擎解读。

3.小型的移动设备无法完全显示框架，设备兼容性差。

4.如果框架个数多的话，可能会出现上下、左右滚动条导致用户体验度差。

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

a标签在新窗口打开链接怎么加属性？

<a target="_blank">链接</a>

HTML5有哪些新特性

1.绘画canvas

2.用于媒介回放的video 和audio 元素

3.本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失

4.sessionStorage 的数据在浏览器关闭后自动删除

5.语意化更好的内容元素，比如：article、footer、header、nav、section

6.表单控件：calendar、date、time、email、url、search

7.新的技术：webworker,websockt, Geolocation

HTML语义化优点

1.易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。

2.有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。

3.方便其他设备解析，如盲人阅读器根据语义渲染网页

4.有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

请描述一下 cookies，sessionStorage 和 localStorage 的区别

存储大小

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有效时间

sessionStorage：数据在当前浏览器窗口关闭后自动删除。

cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

如何实现浏览器内多个标签页之间的通信

方法1：使用localStorage

方法2：调用cookie+setInterval()
将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

盒子模型有几种

标准模型 box-sizing:content-box

content-box;

wideth=content width

height=content heght

IE盒模型:box-sizing:border-box

border-box;

wideth=border+padding+content width

heigth=border+padding+content heigth