前端面试题集锦——HTML5/CSS3

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

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

Cookies:服务器和客户端都可以访问；大小只有 4KB 左右；有有效期，过期后将会删除；
本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过 POST 或者 GET 的通道发送到服务器；每个域 5MB；没有过期数据，它将保留直到用户从浏览器清除或者使用 Javascript 代码移除

什么是响应式设计

低成本实现一套代码一个网页在多终端多设备下访问达到一定用户体验的开发方式。其布局会根据终端情况自适应调整达到一定水平的用户体验

HTML5 Canvas 元素有什么用

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

CSS3 新增伪类有那些？

p:first-of-type	选择属于其父元素的首个 <p>元素的每个 <p> 元素
p:last-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	单选框或复选框被选中

如何在 HTML5 页面中嵌入音频

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

<audio controls>
   <source src="jamshed.mp3" type="audio/mpeg">
    Your browser does'nt support audio embedding feature.
</audio>

如何在 HTML5 页面中嵌入视频

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

<video width="450" height="340" controls>
   <source src="jamshed.mp4" type="video/mp4">
   Your browser does'nt support video embedding feature.
</video>

HTML5 引入什么新的表单属性

Datalist　datetime　output　keygen　date　month　week　time　number　range　emailu

HTML5 的离线储存

localStorage	长期存储数据，浏览器关闭后数据不丢失
sessionStorage	数据在浏览器关闭后自动删除

HTML5 和 CSS3 的新标签

HTML5：

1. nav
2. footer
3. header
4. section
5. hgroup
6. video
7. time
8. canvas
9. audio

CSS3:

1. RGBA
2. opacity
3. text-shadow
4. box-shadow
5. border-radius
6. border-image
7. border-color
8. transform

自己对标签语义化的理解

网页使用什么 HTML 标签要看这个元素是什么元素，而不是看这个元素像什么元素。
例如我们用 h2 标签，是因为这个元素是二级标题 ，而不是因为它看起来比较字体比较粗比较大。