H5前段面试html，css部分

html部分：

1.行内元素，块元素，空元素都有哪些？

1）行内元素：span,b,img,strong,input,a

2）块元素：p,div,h1...h3,ul,dl,

3）空元素：br,hr,col,command,link

2.link和@import的区别是什么？

1）link是XHTML标签，@import是css提供的；

2）页面加载时，link会被加载，@import引用的css会等到页面加载完被加载；

3）import在IE5以上才可以兼容，而link是xhtml标签，无兼容问题；

4）link方式的样式权重高于@import的权重

3.常见的兼容问题

1）浏览器默认的padding和margin不同。解决方法是加一个全局的{margin：0；padding：0}来统一

2）

4.H5新特性，移除了哪些元素？

新特性：

1）绘画canvas

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

3）本地离线存储的localstorage，浏览器关闭后数据不会丢失。

sessionstorage的数据在浏览器关闭后自动删除。

4）语义化的标签：nav，header，footer，section，artical

5）表单控件：URL，email，search，data，time

6）新技术：webworker，websockt，geolocation

移除元素：

big，center，font，s，strike，tt，u

5.html5的离线缓存？

localstorage：长期存储数据，浏览器关闭后不会丢失

sessionstorage：浏览器关闭后数据会自动删除

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

localstorage和cookies

css部分

1.css的盒子模型？

1）内容（content),填充（padding），边界（margin），边框（border）

2.css选择符有哪些？优先级算法？新增伪类？

选择符：

1）id选择器（#hai）

2 )类选择器（.hai)

3 )标签选择器（div，li，p)

4 )相邻选择器（h1+p）

5 ）子选择器（ul>li)

6 )后代选择器（li a）

7）通配符选择器（*）

8 ) 属性选择器(a[rel="extemal"]）

9)伪类选择器（a:hover,li:nth-child）

权重：

！important>id>>class>标签

新增伪类：

p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素

p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素

p:only-of-type 选择属于其父元素的唯一一个<p>元素的每个<p>元素

p:only-child 选择属于其父元素的唯一子元素的每个<p>元素

p:nth-child（2） 选择属于其父元素的第二个元素的每个<p>元素

：enabled ：disabled 控制表单控件的禁用状态

：checked 单选框或复选框被选中

3.元素浮动的原因，解决方法？

脱离正常文档流，造成页面布局混乱

方法：

1）overflow：hidden（auto)

2)clear:both

3)增加一个空div元素

4）设置伪类

4.列出display的值，说明他们的作用，position的值？

1）block：转化为块元素

    inline-block:转为行内块元素

    none：隐藏并不占空间

2）absolute:绝对定位，相对于static定位以外的第一个父元素定位。

    fixed：相对于浏览器窗口进行定位。

   relative:相对定位，相对于正常位置进行定位。

5.css新特性有哪些?

css实现圆角（border-radius:9px),阴影（box-shadow:10px)，

文字加特效（text-shadow)，线性渐变（gradient），旋转（transform）

scale（0.85,0.9）缩放，translate（0px，-30px）定位，skew（-9deg，0deg）倾斜

6.前端页面分为哪三层，分别是什么？

结构层（html）表示层（css）行为层（js）

7.描述css scriptes如何使用？

css精灵把一堆的图片整合到一张大图上，减轻服务器对图片的请求数量

8.什么是语义化？

是H5新特性，有利于搜索殷勤的抓取