前端面试题——html(常见)

一：< !doctype>作用?标准模式与兼容式各有什么区别？

作用：< !doctype>声明位于html文档中的第一行，处于< html >标签之前。告知浏览器的解析器用什么文档标准解析这个文档。doctype不存在或格式不正确会导致文档以兼容模式呈现。
区别：
1、标准模式：排版和js运作模式都是以该浏览器支持的最高标准运行。
2、兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

二：html5为什么只需要写？

1、html5不再是SGML的子集，所以不需要DTD引用，但需要< !doctype >来规范行为。
2、html5只是一种< !doctype >,而html4.01有三种，分别是strict(不包含展示性和弃用元素，不允许框架集)、transitional（包含展示性和弃用元素，不允许框架集）、frameset（允许框架集），所以需要DTD引用，来告诉浏览器文档所使用的文档类型。

三：行内元素有哪些？块级元素有哪些？空（void）元素有哪些?

1、行内元素有：a、 b 、span、 img 、input 、select、 strong等；
2、块级元素有：div 、ul 、ol 、li、 dl 、dt 、dd、 h1~h6、p等；
3、常见的空元素（自闭和标签）：img 、input、 hr、 br 、meta、 link、 script等；
少见的空元素：embed、 base、 command、 keygen、 param 、track、 wbr 、col 、area source、等
注意：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

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

本质上：link属于Xhtml标签，除了加载css之外，还能定义rel连接属性等作用。而@impot是css提供的，只能用于加载CSS
解析上：页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
兼容上：link 是 XHML标签不存在兼容问题，而@import是css2.1提出的，IE5以上才支持
使用上：link 加载的样式可以通过JS更改，而@import加载的样式不可以被JS更改

五：介绍一下你对浏览器内核的理解？

浏览器内核一般被分为两个部分：渲染引擎和JS引擎
1、渲染引擎：负责取得网页的内容(HTML,XML,图像等等)，整理讯息(引入CSS等)，通过计算来显示出网页(这个过程也称为回流)，然后输出至显卡器或者打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同(这个过程称为重绘)。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
2、JS引擎：获取网页的JS部分用来解析和执行javascript以实现网页的动态效果
最开始渲染引擎和JS引擎没有区分很明确，但是随着JS的发展并独立，内核就倾向于只指渲染引擎了

六：常见的浏览器内核有哪些？

1、Trident：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]；
2、Gecko：Firefox Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等等；
3、Presto：Opera7及以上。 [Opera内核原为：Presto，现为：Blink]；
4、Webkit：Chrome，safari(现Chrome使用blink内核)， [ Chrome的：Blink（WebKit的分支）；
5、blink：Chrome , opera(blink内核由谷歌和opera公司共同研发，是Webkit分支)；

七：html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

1、新特性
（1）HTML5已经不是SGML的子集；
（2）新增关于图像，地理位置，缓存，多任务等多个功能；
（3）用于媒体回放的Video和Audio元素；
（4）语义化更好的标签，利于SEO优化，比如：article、footer、header、nav、section；
（5）新的表单控件：calendar、date、time、email、url、search；
（6）本地离线存储localStorage，长期存储数据，浏览器关闭之后数据不丢失。sessionStorage的数据在浏览器关闭后自动删除
（7） 语意化更好的内容元素，比如 ：article、footer、header、nav、section;
（8）表单控件：calendar、date、time、email、url、search;
2、新的技术：webworker、websocket、 Geolocation;
3、移除的元素
（1）纯表现的元素：basefont、big、center、font、s、strike、tt、u;
（2）影响页面的元素： frame、 frameset 、noframe；
4、如何处理HTML5新标签的浏览器兼容问题
（1）对于浏览器不支持的标签可以使用document.createElement方法产生标签，但是需要自己填写默认样式；
（2）使用成熟的技术框架比如html5shim，IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。也可以使用html5shim，可以让IE9或更低版本能支持html5< script src=" http://html5shim.googlecode.com/svn/trunk/html5.js">< /script>
5、如何区分html和HTML5？
（1）根据文档DOCTYPE申明；
（2）查看有无新增元素；
（3）功能元素；

八：简述一下你对HTML语义化的理解？

1、正确的标签做正确的事情;
2、搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
3、在无网络情况下不至于排版过于混乱;
4、结构化代码便于开发人员的开发和维护;
5、html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
6、在没有样式CSS情况下也以一种文档格式显示;

九：浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

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

十：HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：
HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

十一：iframe有那些缺点？

1、iframe里的域名的资源也会同时并行下载，影响浏览器加载速度
2、iframe里面的内容搜索引擎的检索程序无法解读这种页面，不利于SEO优化
3、会阻塞页面的Onload事件
4、使用iframe之前需要考虑以上缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

十二：label的作用是什么？是怎么用的？

1、label标签用来定义表单控制间的关系，当用户点击label标签时候，浏览器焦点会自动跳转到对应的表单控件上,也可以是button上
2、给label的for属性设置表单控件的id属性即可

Number:Date:

十三：.htm 和 .html 的区别

1、区别在于：
.htm 应用在早期 DOS 系统，系统现在或者只能有三个字符。
在 Unix 系统中后缀没有特别限制，一般用 .html。
2、技术上区别：如果一个 URL 没有指定文件名 (如 http://www.runoob.com/css/), 服务器会返回默认的文件名。通常默认文件名为 index.html, index.htm, default.html, 和 default.htm。
如果服务器只配置了 “index.html” 作为默认文件，你必须将文件命名为 “index.html”, 而不是 “index.htm”。
但是，通常服务器可以设置多个默认文件，你可以根据需要设置默认文件名。
不管怎样，HTML 完整的后缀是 “.html”。

十四：HTML5的form如何关闭自动完成功能？

1、使用LocalStorage，cookies等存储方式
2、WebSocket、SharedWorker；LocalStorage另一个浏览上下文里被添加、修改或删除时，都会触发一个事件，通过监听该事件来进行页面之间的通信
注意，在safari浏览器无痕模式使用LocalStorage会出现QuotaExceededError 异常
3、自动完成：当你给输入框输入内容时，浏览器会从之前同名输入框的历史记录中查找出类似的内容并列在输入框下面。
给form或者该input设置autocomplete=off。
经过实验，提交之后，历史记录才会存储，当然，必须是name相同的input才会共享历史记录

十五：webSocket如何兼容低浏览器？

1、Adobe Flash Socket；
2、ActiveX HTMLFile(IE)；
3、基于Multipart编码发送XHR；
4、基于长轮询的XHR；

十六：页面可见性（Page Visibility API） 可以有哪些用途？

页面可见性：该网页是否处于可见状态。比如网页最小化，或是一个非前置的网页卡，那么visibilityState 的值就是hidden，如果是可见状态，则是visible。
用途：
1、通过visibilityState 的值检测页面当前是否可见，以及打开页面的时间等
2、在页面被切换到后台的时候，自动暂停音乐或者视频的播放

十七：如何在页面上实现一个圆形的可点击区域？

1、svg或Canvas；
2、border-radius属性；
3、map+area；
4、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等；

十八：实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

十九：网页验证码是什么的，是为了解决什么安全问题？

1、用于区分用户是人还是机器人，可以防止论坛灌水，恶意破解密码，刷票等
2、有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
简单的归总，就是为了分清楚操作者是人还是恶意程序

二十:title与h1的区别、b与strong的区别、i与em的区别？

1、title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，主要影响的页面爬虫与SEO；
2、strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：< strong >会重读，而< b >是展示强调内容；
3、i表示文本斜体没有强调效果，em表示文本斜体有强调效果。
Physical Style Elements – 自然样式标签b, i, u, s, pre；Semantic Style Elements – 语义样式标签strong, em, ins, del, code应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。因为这个问题涉及到语义化的问题

二十一：如何实现浏览器内多个标签页之间的通信?

WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；
localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常