HTML5+CSS3面试题：（第一天）

目录

1.HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

2.谈谈iframe标签的优缺点?

iframe的优点：

iframe的缺点：

3.CSS3有哪些新特性?

4.让chrome支持小于12px的文字

---

1.HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

新增元素：

1. 增加语意化的元素，比如 article footer header nav section
2. 增加常用的属性:placeholder,multiple,autofocus,data-*(自定义属性),autocomplete...等
3. 增加表单控件, date time email url search tel
4. 用于媒介回放的audio和video元素
5. 用于绘画的 canvas 元素
6. 新增API：Location,Navigator,History,FileReader等对象
7. 本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除

移除的元素：

1. 纯表现的元素：basefont big center font s strike tt u
2. 性能较差元素：frame frameset noframes

兼容性问题:

1. 比如音频视频的兼容性,设定source标签来设置多个多媒体格式,适配不同的浏览器
2. 使用条件注释,比如:`<!--[if lt IE 9]><script> src="http://XXXhtml5.js"</script><![endif]-->`

区分：

1. DOCTYPE声明的方式是区分重要因素
2. 根据新增加的结构、功能来区分

2.谈谈iframe标签的优缺点?

iframe:是一个内联框架(行内框架),可以包含另外一个文档的内容。

iframe的优点：

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：

1.会产生很多页面，不容易管理。

2.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

3.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

4.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

3.CSS3有哪些新特性?

1. 新增选择器：属性选择器、伪类选择器。
2. 伪元素 ：::before,::after
3. 颜色：新增RGBA，HSLA模式
4. 文字阴影:（text-shadow）
5. 边框： 圆角（border-radius）边框阴影： box-shadow
6. 盒子模型：box-sizing
7. 背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点等
8. 渐变：linear-gradient、radial-gradient
9. 过渡：transition，可实现动画
10. 2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
11. 3D转换
12. 自定义动画animation
13. 媒体查询，弹性盒子布局

4.让chrome支持小于12px的文字

使用缩放来解决:例如transform:scale(0.8)