一、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
新特性
HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加。
拖拽释放(Drag and drop)API
语义化更好的内容标签(header,nav,footer,aside,article,section) :aside article section没用过
音频、视频API(audio,video)
画布(Canvas) API :canvas用的比较少
地理(Geolocation) API :geolocation没用过
本地离线存储 localStorage 长期存储数据 浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
表单控件,calendar、date、time、email、url、search
新的技术
webworker, websocket, Geolocation
一般都是对websocket有一定的了解或应用,webworker和Geolocation普遍来说用的较少,可以针对了解一下
移除元素
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
如何处理HTML5新标签的浏览器兼容问题?
IE8/IE7/IE6支持通过document.createElement方法产生的标签,
可以利用这一特性让这些浏览器支持HTML5新标签,
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
如何区分HTML和HTML5
1. DOCTYPE声明
2. 新增的结构元素
3. 功能元素
二、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
CSS 选择符:
1. id选择器(#)
2. 类选择器(.)
3. 标签选择器(div, h1, p )
4. 相邻选择器(div + img)
5. 子代选择器(ul > li)
6. 后代选择器(li a) 要知道子代和后代的区别
7. 通配符选择器
8. 属性选择器(a[rel="extent"])
9. 伪类选择器(a:hover, li:nth-child(n))
可以继承的属性
可继承的样式: font-size font-family color, UL LI DL DD DT;
UL LI DL DD DT 是什么样式? WTF
不可继承的样式:border padding margin width height ;
优先级
!important > id > class > tag
important 比 内联优先级高,但内联比 id 要高
CSS新增伪类
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 单选框或复选框被选中。
三、CSS3有哪些新特性?
CSS3实现圆角(border-radius),阴影(box-shadow),
对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
::selection是干啥的?
媒体查询,多栏布局
border-image
四、解释盒模型宽高值得计算方式,边界塌陷,负值作用,box-sizing概念?
1. 盒模型:IE 678 下(不添加doctype) 使用ie盒模型,宽度 = 边框 + padding + 内容宽度; chrom、IE9+、(添加doctype) 使用标准盒模型, 宽度 = 内容宽度。
2. box-sizing : 为了解决标准盒子和IE盒子的不同,CSS3增添了盒模型属性box-sizing:content-box(默认),border-box 让元素维持IE传统盒子模型, inherit 继承 父盒子模型。
3. 边界塌陷:块元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为 外边界塌陷。
4. 负值作用:负margin会改变浮动元素的显示位置,即使我的元素写在DOM的后面,我也能让它显示在最前面。
五、BFC(Block Formatting Context) 是什么?应用?
1. BFC 就是 ‘块级格式上下文’ 的格式,创建了BFC的元素就是一个独立的盒子,不过只有BLock-level box可以参与创建BFC,它规定了内部的Bloc-level Box 如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。
2. 应用场景:
1. 解决margin叠加的问题
2. 用于布局(overflow: hidden),BFC不会与浮动盒子叠加。
3. 用于清除浮动,计算BFC高度。