前端面试题之一HTML

一、doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）<!doctype>声明位于文档中的最前面的第一行，其作用告知浏览器用什么标准解析这个文档，并以浏览器支持的最高标准以“严格模式”进行页面渲染。

（2）无<!doctype>声明时，浏览器将以“混杂模式”宽松的向后兼容的方式进行页面渲染，模拟老式浏览器的行为以使站点正常工作。

二、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

（1）每个元素都有默认的 display值，比如display属性值为“block”为“块级”元素；display属性值为“inline”为“行内”元素。

（2）行内元素有：a b span img input select strong。块级元素有：div ul ol li dl dt dd h1…p。

（3）知名的空元素： <br> <hr>

三、link 和@import 的区别是？href 和src的区别是？

（1）link 和@import 的区别

a、link属于xhtml标签，当页面被加载的时，link会同时被加载。

b、@import是css提供的，而@import引用的css文件会等到页面被加载完再加载，并且import只在ie5以上才能识别，而且多次请求文件影响性能。

（2）href 和src的区别

a、href用于在当前文档和引用资源之间确立联系。

b、src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

四、什么是bom 、dom? 浏览器的内核分别是什么?有哪些排版引擎？

（1）什么是bom 、dom

①、bom是browser object model（浏览器对象模型）,即把「浏览器」当做一个「对象」来看待。而 bom 除了可以访问文档中的组件之外，还可以访问浏览器的组件，比如问题描述中的 navigator（导航条）、history（历史记录）等等。

②、dom是document object model（文档对象模型），就是把「文档」当做一个「对象」来看待。在 dom 中，文档中的各个组件（component），可以通过 object.attribute 这种形式来访问。一个 dom 会有一个根对象，这个对象通常就是 document。

（2）Trident(IE内核)、Gecko(Firefox内核)、Opera现已改用Google Chrome的Blink内核（这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。）、Webkit(Safari内核,Chrome内核原型,开源)

（3）WebCore是苹果公司开发的排版引擎，它是在另外一个排版引擎“KHTML”的基础上而来的。使用WebCore的主要有Safari，此外还有OmniWeb、Shiira、Swift等。Safari现支持Windows，但效果不如iOS上的

（4）KHTML，是HTML网页排版引擎之一，由KDE所开发。

五、常见兼容性问题？

（1）png24位的图片在ie6浏览器上出现背景，解决方案是做成png8 位.

（2）浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

（3）ie6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 10px;} 这种情况之下ie会产生20px的距离，解决方案是在float的标签样式控制中加入 _display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)。

（4）渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将ie游览器从所有情况中分离出来。 接着，再次使用“+”将ie8和ie7、ie6分离开来，这样ie8已经独立识别。

* {
       background-color:#f1ee18;/*所有识别*/
      .background-color:#00deff\9; /*ie6、7、8识别*/
      +background-color:#a200ff;/*ie6、7识别*/
      _background-color:#1e0bd1;/*ie6识别*/
} 

（5）ie下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getattribute()获取自定义属性;firefox下,只能使用getattribute()获取自定义属性. 解决方法:统一通过getattribute()获取自定义属性.

（6）ie下,even对象有x,y属性,但是没有pagex,pagey属性; firefox下,event对象有pagex,pagey属性,但是没有x,y属性.解决方法：（条件注释）缺点是在ie浏览器下可能会增加额外的http请求数。

（7）chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 css 属性 -webkit-text-size-adjust: none; 解决.

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变css属性的排列顺序:a:link {} a:visited {} a:hover {} a:active {}

六、hack

（1）这种方式是ie浏览器专有的hack方式，微软官方推荐使用的hack方式。

①、条件注释法：<!--[if IE]>这段文字只在ie浏览器显示<![endif]-->

②、类内属性前缀法：属性前缀法是在css样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

（2）ie浏览器各版本 css hack 对照表：

（3）说明：在标准模式中

“-″减号是ie6专有的hack

“\9″ ie6/ie7/ie8/ie9/ie10都生效

“\0″ ie8/ie9/ie10都生效，是ie8/9/10的hack

“\9\0″ 只对ie9/ie10生效，是ie9/10的hack

七、简述一下你对html语义化的理解？
（1）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析。

（2）即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的。

（3）搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重，利于seo。

（4）使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

八、html5有哪些新特性？如何处理html5新标签的浏览器兼容问题？如何区分 html 和 html5？

（1）html5 现在已经不是 sgml 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
a、绘画 canvas;
b、用于媒介回放的 video 和 audio 元素;
c、本地离线存储 localstorage 长期存储数据，浏览器关闭后数据不丢失;
d、sessionstorage 的数据在浏览器关闭后自动删除;
e、语意化更好的内容元素，比如 article、footer、header、nav、section;
f、表单控件，calendar、date、time、email、url、search;
g、新的技术webworker, websocket, geolocation;
（2）h5兼容性：ie8/ie7/ie6支持通过document.createelement方法产生的标签，可以利用这一特性让这些浏览器支持html5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt ie 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

九、iframe有那些缺点？
iframe会阻塞主页面的onload事件。搜索引擎的检索程序无法解读这种页面，不利于seo。iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上问题。

十、如何在页面上实现一个圆形的可点击区域？
（1）map+area或者svg
（2）border-radius
（3）纯js实现：需要求一个点在不在圆上简单算法、获取鼠标坐标
十一、介绍一下标准的css的盒子模型？低版本ie的盒子模型有什么不同的？ie 8以下版本的浏览器中的盒模型有什么不同？
css的盒子模型是内容(content)、填充(padding)、边框(border)、边界(margin)。ie 盒子模型的 content 部分包含了 border 和 pading。ie8以下浏览器的盒模型中定义的元素的宽高（width/height）不包括内边距(padding)和边框(border)。
十二、css优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准，载入样式以最后载入的定位为准。优先级为: !important (优先级最高)>  id > class > elem
十三、为什么要使用css sprites（图片精灵）

虽然请求可以并发，但是当请求过多时可以减小服务器压力和请求时耗。
十四、display:none和visibility:hidden的区别？
display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。
十五、position的absolute与fixed区别
absolute浮动定位是相对于父级中设置position为relative或者absolute最近的父级元素。
fixed浮动定位是相对于浏览器视窗的。