【前端领域高频笔试面试】—— Html5+CSS3相关

目录

1.CSS3有哪些新特性？

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

3.本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？

4.如何实现浏览器内多个标签页之间的通信?

5.你如何对网站的文件和资源进行优化？

6.什么是响应式设计？

7.新的 HTML5 文档类型和字符集是？

8.HTML5 Canvas 元素有什么用？

9.CSS3新增伪类有哪些？

10.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局如何设计?

11.描述一下渐进增强和优雅降级之间的不同

12.为什么利用多个域名来存储网站资源会更有效？

13.css有个content属性，有什么作用？有什么应用？

14.如何在HTML5页面中嵌入音频?

15.如何在HTML5页面中嵌入视频？

16.cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage区别

17.HTML5的离线储存指

18.HTML5和CSS3的新标签

19.描述一段语义的html代码

20.自己对标签语义化的理解

1.CSS3有哪些新特性？

（1）CSS3实现圆角(border-radius)，阴影(box-shadow)；

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

（3）transform:rotate(9deg)、scale(0.85,0.90)、translate(0px,-30px)、skew(-9deg,0deg)；旋转,缩放,定位,倾斜；

（4）增加了更多的CSS选择器、多背景、rgba；

（5）在CSS3中唯一引入的伪元素是::selection；

（6）媒体查询，多栏布局；

（7）border-image。

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

新特性：

（1）拖拽释放(Drag and drop) API；

（2）语义化更好的内容标签（header,nav,footer,aside,article,section）；

（3）音频、视频API(audio,video)；

（4）画布(Canvas) API；

（5）地理(Geolocation) API；

（6）本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

（7）sessionStorage 的数据在浏览器关闭后自动删除；

（8）表单控件calendar、date、time、email、url、search；

（9）新的技术webworker, websocket, Geolocation。

移除的元素：

（1）纯表现的元素：basefont，big，center，font, s，strike，tt，u；

（2）对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6都支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架。

如何区分：

通过DOCTYPE声明新增的结构元素、功能元素。

3.本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？

Cookies：服务器和客户端都可以访问，大小只有4KB左右，有效期过期后将会删除；

Local Storage：只有本地浏览器端可访问数据，服务器不能访问本地存储，除非通过POST或者GET的通道发送到服务器，每个域5MB。

4.如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式。

5.你如何对网站的文件和资源进行优化？

（1）文件合并；

（2）文件最小化/文件压缩；

（3）使用CDN托管；

（4）缓存的使用。

6.什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能，响应式设计是让网站在所有的在设备上都能运行正常。

7.新的 HTML5 文档类型和字符集是？

HTML5文档类型为

HTML5使用的编码为

8.HTML5 Canvas 元素有什么用？

Canvas元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作。

9.CSS3新增伪类有哪些？

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

元素的每个

元素。

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

元素的每个

元素。

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

元素的每个

元素。

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

元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个

元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

10.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局如何设计?

（1）首先划分成头部、body、脚部；

（2）实现效果图是最基本的工作，精确到2px；

（3）与设计师，产品经理的沟通和项目的参与；

（4）做好的页面结构，页面重构和用户体验；

（5）处理hack，兼容、写出优美的代码格式；

（6）针对服务器的优化、拥抱HTML5。

11.描述一下渐进增强和优雅降级之间的不同

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

12.为什么利用多个域名来存储网站资源会更有效？

（1）CDN缓存更方便；

（2）突破浏览器并发限制；

（3）节约cookie带宽；

（4）节约主域名的连接数，优化页面响应速度；

（5）防止不必要的安全问题。

13.css有个content属性，有什么作用？有什么应用？

css的content属性专门应用在before/after伪元素上，用来插入生成内容，最常见的应用是利用伪类清除浮动，如下：

after伪元素通过content在元素的后面生成了内容为一个点的块级素，再利用clear:both来清除浮动。

补充：如何通过css content属性实现css计数器？

css计数器是通过设置counter-reset、counter-increment两个属性 、及 counter()/counters()一个方法配合after / before伪类实现。

14.如何在HTML5页面中嵌入音频?

HTML5包含嵌入音频文件的标准方式，支持的格式包括MP3、Wav和Ogg：

15.如何在HTML5页面中嵌入视频？

和音频一样，HTM5定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM和Ogg：

16.cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage区别

sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间。

17.HTML5的离线储存指

localStorage，长期存储数据，浏览器关闭后数据不丢失；

sessionStorage，数据在浏览器关闭后自动删除。

18.HTML5和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...;

19.描述一段语义的html代码

HTML5中新增加的很多标签如：