前端面试题总结(HTML5 和CSS3部分)
四、HTML5 和CSS3
1、CSS3 有哪些新特性？
2、html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？
如何区分 HTML 和 HTML5？
3、本地存储（Local Storage ）和 cookies（储存在用户本地终端上的数据）之间的
区别是什么？
4、如何实现浏览器内多个标签页之间的通信?
5、你如何对网站的文件和资源进行优化？
6、什么是响应式设计？
7、新的HTML5 文档类型和字符集是？
8、HTML5 Canvas元素有什么用？
9、HTML5 存储类型有什么区别？
10、用 H5+CSS3 解决下导航栏最后一项掉下来的问题…
11、CSS3 新增伪类有那些？
12、请用 CSS实现：一个矩形内容，有投影，有圆角，hover 状态慢慢变透明。
13、描述下 CSS3 里实现元素动画的方法
14、html5\CSS3 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼
容问题？如何区分 HTML 和 HTML5？
15、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字
布局 如何设计?
16、你能描述一下渐进增强和优雅降级之间的不同吗?
17、为什么利用多个域名来存储网站资源会更有效？
18、请谈一下你对网页标准和标准制定机构重要性的理解。
19、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
20、知道 css有个 content属性吗？有什么作用？有什么应用？
21、如何在 HTML5 页面中嵌入音频?
22、如何在 HTML5 页面中嵌入视频？
23、HTML5 引入什么新的表单属性？
24、CSS3 新增伪类有那些？
25、(写)描述一段语义的 html 代码吧。
26.cookie 在浏览器和服务器间来回传递。 sessionStorage 和 localStorage区别
27、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
如何区分 HTML 和 HTML5？
28、如何区分： DOCTYPE 声明\新增的结构元素\功能元素
29、语义化的理解？
30、HTML5 的离线储存？
31、写出 HTML5 的文档声明方式
32、HTML5 和CSS3 的新标签
33、自己对标签语义化的理解
四、5 HTML5 CSS3
1 、3 CSS3 有哪些新特性？
- CSS3 实现圆角（border-radius），阴影（box-shadow），
- 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)
skew(-9deg,0deg);//旋转,缩放,定位,倾斜 - 增加了更多的 CSS 选择器 多背景 rgba
- 在 CSS3 中唯一引入的伪元素是 ::selection.
- 媒体查询，多栏布局
- border-image
2 、5 html5 有哪些新特性、移除了那些元素？如何处理 5 HTML5 新标签的浏览器兼
分 容问题？如何区分 L HTML 和 和 HTML5 ？
新特性： - 拖拽释放(Drag and drop) API
- 语义化更好的内容标签（header,nav,footer,aside,article,section）
- 音频、视频 API(audio,video)
- 画布(Canvas)API
- 地理(Geolocation) API
- 本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失；
- sessionStorage 的数据在浏览器关闭后自动删除
- 表单控件，calendar、date、time、email、url、search
- 新的技术 webworker, websocket, Geolocation
移除的元素： - 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
- 对可用性产生负面影响的元素：frame，frameset，noframes；
支持 HTML5 新标签： - IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性
让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当
然最好的方式是直接使用成熟的框架、使用最多的是 html5shim框架）：
如何区分：
DOCTYPE 声明新增的结构元素、功能元素
3 、本地存储（l Local e Storage ）和 cookies （储存在用户本地终端上的数据）
之间的区别是什么？
Cookies:服务器和客户端都可以访问；大小只有 4KB 左右；有有效期，过期后将会删除；
本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过 POST 或
者 GET 的通道发送到服务器；每个域 5MB；没有过期数据，它将保留知道用户从浏览器清除
或者使用 Javascript 代码移除
4 、如何实现浏览器内多个标签页之间的通信? ?
调用 localstorge、cookies 等本地存储方式
5 、你如何对网站的文件和资源进行优化？
文件合并
文件最小化/文件压缩
使用 CDN托管
缓存的使用
6 、什么是响应式设计？
它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有
的人能在这些设备上让网站运行正常
7的 、新的 5 HTML5 文档类型和字符集是？
答：HTML5 文档类型：
HTML5 使用的编码
8 、5 HTML5 s Canvas 元素有什么用？
答：Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进
行图形操作。
9 、5 HTML5 存储类型有什么区别？
答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer
API、Command API、Constraint ValidationAPI、History API
10、用 H5+CSS3 解决下导航栏最后一项掉下来的问题
11、CSS3 新增伪类有那些？
p:first-of-type选择属于其父元素的首个
元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled、:disabled控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
12 、请用 S CSS 实现：一个矩形内容，有投影，有圆角，r hover 状态慢慢变透明 。
css 属性的熟练程度和实践经验
13 、描述下 3 CSS3 里实现元素动画的方法
动画相关属性的熟悉程度
14 、3 html5\CSS3 有哪些新特性、移除了那些元素？如何处理 5 HTML5 新标签的浏
分 览器兼容问题？如何区分 L HTML 和 和 HTML5 ？
HTML5 现在已经不是 SGML的子集，主要是关于图像，位置，存储，地理定位等功能的增加。
- 绘画 canvas 元素
用于媒介回放的 video 和 audio元素
本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
CSS3 实现圆角，阴影，对文字加特效，增加了更多的 CSS 选择器 多背景 rgba
新的技术 webworker, websockt, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes； - 是 IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，
可以利用这一特性让这些浏览器支持 HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式： - 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim框架
15 、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? ? 一个满
屏 屏品 品 局 字布局 如何设计? ?
- 首先划分成头部、body、脚部；。。。。。
- 实现效果图是最基本的工作，精确到 2px；
与设计师，产品经理的沟通和项目的参与
做好的页面结构，页面重构和用户体验
处理 hack，兼容、写出优美的代码格式
针对服务器的优化、拥抱 HTML5。
16、你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基
本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户
体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏
览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从
一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功
能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被
认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对
象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无
妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏
览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被
直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，
还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”
成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏
览器支持 (Graded Browser Support)”策略的原因所在。
那么问题了。现在产品经理看到 IE6,7,8网页效果相对高版本现代浏览器少了很多圆
角，阴影（CSS3），要求兼容（使用图片背景，放弃 CSS3），你会如何说服他？
17、为什么利用多个域名来存储网站资源会更有效？
CDN 缓存更方便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
18 、请谈一下你对网页标准和标准制定机构重要性的理解。
（无标准答案）网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者
遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各
种 BUG、安全问题，最终提高网站易用性。
19 、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个
会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种
持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除
非主动删除数据，否则数据是永远不会过期的。
web storage 和 cookie 的区别
Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie
的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样
无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。
除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像
cookie 需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或
缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而
Web Storage 仅仅是为了在本地“存储”数据而生。
20、知道css有个content属性吗？有什么作用？有什么应用？
知道。css 的content 属性专门应用在 before/after 伪元素上，用来插入生成内容。
最常见的应用是利用伪类清除浮动。
//一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了 content 属性
display:block;
height:0;
visibility:hidden;
clear:both;}
.clearfix {
*zoom:1;
}
after 伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用
clear:both 清除浮动。
那么问题继续还有，知道 css 计数器（序列数字字符自动递增）吗？如何通过
csscontent 属性实现css 计数器？
答案：css 计数器是通过设置 counter-reset 、counter-increment 两个属性 、及
counter()/counters()一个方法配合 after / before 伪类实现。
21在 、如何在 5 HTML5 页面中嵌入音频? ?
HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：
元素的每个
元素。 p:last-of-type 选择属于其父元素的最后
元素的每个
元素。 p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。 p:only-child 选择属于其父元素的唯一子元素的每个
元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled、:disabled控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
25 、( ( 写) ) 描述一段语义的 l html 代码吧。
（HTML5 中新增加的很多标签（如：
HTML 元素不能用作语义用途以外的其他目的。例如：
包含标题，但并非用于放大本。
包含大段引述，但并非用于文本缩进。
空白段落元素 (
) 并非用于跳行。文本并不直接包含任何样式信息。例如：
不使用 或
类或 ID中不引用颜色或位置。
26. cookie 。 在浏览器和服务器间来回传递。 sessionStorage 和 localStorage 区别
sessionStorage 和 localStorage 的存储空间更大；
sessionStorage 和 localStorage 有更多丰富易用的接口；
sessionStorage 和 localStorage 各自独立的存储空间；
27 、 html5 有哪些新特性 、 移除了那些元素？如何处理 5 HTML5 新标签的浏览器兼
分 容问题？如何区分 L HTML 和 和 HTML5 ？
- HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的
增加。 - 绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术 webworker, websockt, Geolocation - 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持 HTML5 新标签： - IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，
可以利用这一特性让这些浏览器支持 HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式： - 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim框架
28 、： 如何区分： E DOCTYPE 声明\ \ 新增的结构元素\ \ 功能元素
29 、 语义化的理解？
用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
30 、5 HTML5 的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
31 、写出 5 HTML5 的文档声明方式
32 、5 HTML5 和 和 3 CSS3 的新标签
HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio…
CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image,
border-color, transform…;
33 、自己对标签语义化的理解
在我看来，语义化就是比如说一个段落， 那么我们就应该用
标签来修饰，
标题就应该用
五、移动web开发
1 、移动端常用类库及优缺点
知识面宽度，多多益善
2 、Zepto 库和 JQ 区别
Zepto 相对 jQuery 更加轻量，主要用在移动端，jQuery 也有对应的 jQuerymobile 移动端框
架