前端之HTML面试题集锦

由于最近要准备找实习工作，所以不得不海量搜集关于前端的各种面试题，今天先为大家奉献上小编所找到的前端之HTML相关面试题。

1.Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的html文档。Doctype是document type（文档类型）的简写，是用来说明所用的XHTML或html是什么版本的。DOCTYPE声明位于文档中的最前面，处于 html 标签之前。告知浏览器以何种模式来渲染文档。 
所谓的标准模式是指，浏览器按W3C标准解析代码；混杂模式则是使用浏览器自己的方式执行代码，因为不同的浏览器解析执行的方式不一样，所以我们称之为混杂模式。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.HTML5 为什么只需要写 !DOCTYPE HTML？ 
html4.01中的doctype需要对DTD进行引用，因为html4.01基于SGML。而html5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。
3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
常用的行内元素（也称内联元素）有<a>、<span>、<br>、<i>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的块级元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
知名的空元素： <br/> <hr/> <img/> <input/> <link/> <meta/> 
鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
4.页面导入样式时，使用link和@import有什么区别？
（1）link是xhtml标签，除了加载css外，还可以定义rss等其他事务；@import属于css范畴，只能加载css.
(2)link引用css时，在页面载入时同时加载；@import需要页面网页完全载入之后加载。
（3）link是Xhtml标签，无兼容问题；@import是css2.1提出的，低版本的浏览器不支持。
（4）link支持使用javascript控制dom去改变样式；而@import不支持。
5.介绍一下你对浏览器内核的理解？
浏览器内核主要分为两部分：渲染引擎和js引擎
渲染引擎：负责取得网页的内容、整理讯息，以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。
js引擎：解析和执行javascript来实现网页的动态效果。
6.常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。
7.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
拖拽释放(Drag and drop) API 
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search  
新的技术webworker, websocket, Geolocation
* 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
8.简述一下你对HTML语义化的理解？
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
9.HTML5的离线储存怎么使用，工作原理能不能解释一下？
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
3、在离线状态时，操作window.applicationCache进行需求实现。
10.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
11.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。
12.iframe有那些缺点？
（1）在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面。当“蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而无法找到链接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。
（2）框架结构有时会让人感到迷惑，特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么网站的其他部分也许更不值得浏览。
（3）链接导航问题。使用框架结构时，你必须保证正确设置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地方可去。
13.Label的作用是什么？是怎么用的？（加 for 或 包裹）
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B" /></label>
14.HTML5的form如何关闭自动完成功能？
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
15.如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式。
方法一：
localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。
方法二：
使用cookie+setInterval，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
16.webSocket如何兼容低浏览器？
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
17.页面可见性（Page Visibility）API 可以有哪些用途 
页面可见性： 就是对于用户来说，页面是显示还是隐藏, 所谓显示的页面，就是我们正在看的页面；隐藏的页面，就是我们没有看的页面。
18.如何在页面上实现一个圆形的可点击区域？
（1） map+area
<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" />  
<map name="Map" id="Map">  
 <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" />  
</map>  
（2）border-radius（H5）
<style>  
 .disc{  
     width:100px;  
     height:100px;  
     background-color:dimgray;  
     border-radius: 50%;  
     cursor: pointer;  
     position: absolute;  
     left:50px;  
     top:50px;    
     line-height: 100px;  
     text-align: center;  
     color: white;  
 }  
</style>  
<div class="disc">点击</div>  
19.验证码的用途？
验证码是为了防止一些人使用软件恶意注册、发帖等行为而设的。 它的存在是为了确保登陆网站的是一个坐在电脑面前的真人，而不是一个自动登陆的软件。
20.tite与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题， H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响； 
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时： 会重读，而 是展示强调内容。 
i内容展示为斜体， em 表示强调的文本；