面试题集锦（HTML5 CSS3）

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新标签：

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

<!--[if lt IE 9]>

<![endif]-->

如何区分：

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

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

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

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除

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

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

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

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

6、什么是响应式设计？

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

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

答：HTML5文档类型：<!doctype html>

HTML5使用的编码<meta charset=”UTF-8”>

8、HTML5 Canvas 元素有什么用？

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

9、HTML5 存储类型有什么区别？

答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

10、用H5+CSS3解决下导航栏最后一项掉下来的问题

11、CSS3新增伪类有那些？

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，单选框或复选框被选中。

12、请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。

css属性的熟练程度和实践经验

13、描述下CSS3里实现元素动画的方法

动画相关属性的熟悉程度

14、html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 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框架

<!--[if lt IE 9]>

<![endif]-->

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

* 首先划分成头部、body、脚部；。。。。。

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

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

做好的页面结构，页面重构和用户体验

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

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

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计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？

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

21、如何在 HTML5 页面中嵌入音频?

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

Your browser does'nt support audio embedding feature.

</audio>

22、如何在 HTML5 页面中嵌入视频？

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

Your browser does'nt support video embedding feature.

</video>

23、HTML5 引入什么新的表单属性？

Datalist datetime output keygen date month week time number range emailurl

24、CSS3新增伪类有那些？

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，单选框或复选框被选中。

25、(写)描述一段语义的html代码吧。

（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）

就是基于语义化设计原则）

< div id="header">

< h1>标题< /h1>

< h2>专注Web前端技术< /h2>

< /div>

语义 HTML 具有以下特性：

文字包裹在元素中，用以反映内容。例如：

段落包含在 <p> 元素中。

顺序表包含在<ol>元素中。

从其他来源引用的大型文字块包含在<blockquote>元素中。

HTML 元素不能用作语义用途以外的其他目的。例如：

<h1>包含标题，但并非用于放大文本。

<blockquote>包含大段引述，但并非用于文本缩进。

空白段落元素 ( <p></p> ) 并非用于跳行。

文本并不直接包含任何样式信息。例如：

不使用 <font> 或 <center> 等格式标记。

类或 ID 中不引用颜色或位置。

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

sessionStorage和localStorage的存储空间更大；

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

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

27、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 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框架

<!--[if lt IE 9]>

<![endif]-->

28、如何区分： DOCTYPE声明\新增的结构元素\功能元素

29、语义化的理解？

用正确的标签做正确的事情！

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

30、HTML5的离线储存？

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

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

31、写出HTML5的文档声明方式

32、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...;

33、自己对标签语义化的理解

在我看来，语义化就是比如说一个段落，那么我们就应该用 <p>标签来修饰，标题就应该用 <h?>标签等。符合文档语义的标签。

posted @ 2017-01-14 10:46 波吉大王子阅读(382) 评论(0) 收藏举报

大云🐶

面试题集锦（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、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏品字布局如何设计?

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、自己对标签语义化的理解

公告

大云🐶

面试题集锦 （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、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?

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、自己对标签语义化的理解

公告

面试题集锦（HTML5 CSS3）

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