HTML&&CSS超精炼面试题
1.doctype(文档类型) 的作用是什么？
声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。有以下两个值：
- 怪异模式，浏览器使用自己的怪异模式解析渲染页面。
- 标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明,浏览器按照自己的方式解析渲染页面（怪异模式），在不同的浏览器就会显示不同的样式。
注意以下几点：
- 声明不是 HTML 标签；
- 声明必须是 HTML 文档的第一行，位于 标签之前。
- 不区分大小写
- HTML 5的doctype声明是
在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML，所以不需要引用 DTD。
2.浏览器标准模式和怪异模式有什么区别？
两者的区别：
- 盒模型的解析上：
在strict mode（标准模式）中 ：width是内容宽度
在quirks mode（怪异模式）中 ：width则是元素的实际宽度 ，而内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width) - 图片元素垂直对齐方式
在strict mode中 ：vertical-align 属性默认取值为 baseline
在quirks mode中 ：vertical align 属性默认为 bottom，因此，在图片底部会有几像素的空间。 - < table >元素中的字体
Quirks Mode 下，对于 table 元素，字体的某些属性将不会从 body 或其他封闭元素继承到 table 中，特别是 font-size 属性。 - 内联元素的尺寸
在 Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 Quirks Mode 下，定义这些元素的 width 和 height 属性，能够影响该元素显示的大小尺寸。
- 元素的百分比高度
当一个元素使用百分比高度时，在 Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。
- 元素溢出的处理
在 Standard Mode 下，overflow 取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展 box 来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容
3.请解释
通过script标签加载js文件时，如果加载过慢，或者出错，有可能会阻塞整个页面的加载，这时就需要js的异步加载，两个属性可支持异步加载：
- defer 和 async 的**共同点:**都是可以并行加载JS文件，不会阻塞页面的加载，
- defer 和 async 的**不同点:**defer的加载完成之后， JS会等待整个页面全部加载完成了再执行， 而async是加载完成之后，会马上执行JS， 所以假如对JS的执行有严格顺序的话，那么建议用 defer加载。
4.为什么通常推荐将 CSS 放置在 之间，而将 JS
css放在head中：
- css放在head中， 是因为浏览器解析html文档是自上而下的，如果放底部的话，页面结构出来了，css还没开始渲染，可能会看到只有结构的页面。
- CSS 应当写在 head 中，以避免页面元素由于样式确实造成瞬间的白页或者给用户闪烁感。
js放在/body之前：
- JS可能会改变DOM树，也可能依赖css样式。如果放在前面，那么DOM和css可能还未加载，这样容易报错。
- 性能：js放前面，页面会先去加载他，拖慢了时间，使用户在一定时间内看不到网页内容。
**例外：**js如果需要先加载后运行可以写在头里（当脚本使用 defer 方式加载的时候可以不用约束放置的位置。）
5.什么是渐进式渲染 (progressive rendering)？
渐进式渲染是指浏览器不用等待所有页面资源都渲染好之后再呈现给用户看，而是边下载边渲染，所以用户打开一个网页的时候往往不能第一时间看到所有的内容，但是能够看到一个大概的样子，后续的内容浏览器会慢慢补上形成一个完整的页面。这个有点像 bigpipe。
6.请解释下什么是语义化的HTML？
语义化的好处：
- 去掉或样式丢失的时候能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如
是粗体，字体大小2em，加粗；< strong > 是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
- 屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
- PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.
- 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
- 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
- 便于团队开发和维护
语义化的HTML就是：标题用h1-h6，文字段落用p，列表用ul li，大致如此
##7. 标签上title属性与alt属性的区别是什么？
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
##8.分别写出以下几个HTML标签：文字加粗、下标、居中、字体
加粗：、
下标：
居中：
字体：、
##9.请写出至少5个html5新增的标签，并说明其语义和应用场景
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
##10. 请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
11. 简述一下src与href的区别
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
12.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1） 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
13.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，
比如div默认display属性值为“block”，成为“块级”元素；
span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
14.CSS盒子模型是什么？
盒子模型分为标准模型和IE盒子模型，其中
标准模型「默认：box-sizing: content-box」由四部分组成，从内到外依次是：
内容区域「content」：可以放置元素的区域如文本，图像等，一般设置宽高度指的是这个内容的宽高；
内边距区域「padding」：内容与边框之间的距离
边框区域「border」：就是边框
外边距区域「margin」：由外边边距限制，用空白区域扩展边框区域，来分开相邻的元素。
标准模型指的是设置box-sizing为content-box的盒子模型，一般width，height 指的是content的宽高。
而IE模型指的是box-sizing为border-box的盒子模型。宽高的计算是content+padding+border；
15.link 和@import 的区别是?
（1）link属于HTML标签，而@import是CSS提供的;
（2）页面被加载的时，link会同时被加载，而@import会等CSS被加载完再加载;
（3）import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
（4）link方式的样式的权重 高于@import的权重.
16.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li: nth - child）
可继承： font-size font-family color, UL LI DL DD DT;
不可继承 ：border padding margin width height ;
优先级就近原则，样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比内联优先级高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
17.如何居中div,如何居中一个浮动元素?,
给div设置一个宽度，然后添加margin:0 auto属性
div{width:200px;margin:0 auto;}
居中一个浮动元素
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
18.浏览器的内核分别是什么? 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ?
1. IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；
2.浏览器默认的margin和padding不同。解决方案是加一个全局的 *{margin:0;padding:0;}来统一。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin 比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 — —_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)渐进识别的方式，从总体中逐渐排除局部。
3.首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+background-color:#a200ff;/IE6、7识别/
_background-color:#1e0bd1;/IE6识别/
}
4.IE下,可以使用获取常规属性的方法来获取自定义属性,
解决方法:统一通过getAttribute()获取自定义属性.
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover 和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
19.css属性那些有继承性？哪些没有？
有继承性的属性：color ,font-size,font-weight
没有继承性的属性：border,width,height
20.如果盒子都为浮动，父类会没有高度，如何解决
解决方法：
(1)给父类设置相应的高度
(2)创建一个孩子对象，设置清除浮动
(3) 设置父类为overflow：hidden
(4)用before和after动态添加
21.visibility和display 的隐藏有什么区别？
display隐藏对象，会清空面积；visibility隐藏对象还会占有以前的面积
22.伪类的写作顺序？
hover必须在link、visited之后，active必须在hover之后
Link,visited,hover,active
23.border和outline的区别
1.outlinte显示在border之外
2.border会占像素，outline没有面积
3.outline低版本浏览器不支持
24.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计？
1.首先划分成头部、body、脚部…
实现效果图是最基本的工作，精确到2px；
与设计师，产品经理的沟通和项目的参与
做好的页面结构，页面重构和用户体验
处理hack，兼容、写出优美的代码格式
针对服务器的优化、支持 HTML5标签。
25.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
1.block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
2.absolute生成绝对定位的元素，相对于static以外的父元素进行定位。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，忽略top, bottom, left, right声明。
inherit 规定从父元素继承 position 属性的值。
26.H5新特性了解多少？
新增语义化标签:
标签语义化含义：
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构。另外有利于SEO，和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重；最后是便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
Input新增的type:
url
number
range
Date picker：
Date —— 选取日、月、年
Month —— 选取月、年
Week —— 选取周和年
Time —— 选取时间（小时和分钟）
Datetime —— 选取时间、日、月、年（UTC 时间）
Datetime-local —— 选取时间、日、月、年（本地时间）
表单新增的属性：
autocomplete：自动完成，适用于 标签，以及以下类型的 标签：text, search, url, telephone, email, password, datepickers, range, color。用法：