HTML5、CSS3面试题（一）

1、H5 的新特性有哪些？C3 的新特性有哪些？（必会）

H5 新特性

1、拖拽释放(Drap and drop) API ondrop

拖放是一种常见的特性，即抓取对象以后拖到另一个位置

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

2、自定义属性 data-id

3、语义化更好的内容标签(header,nav,footer ,aside, article, section)

1. <header>：用于定义页面或区域的页眉，通常包含导航链接、站点标志等内容。
2. <nav>：用于定义导航链接的区域，包含页面的主要导航链接。
3. <footer>：用于定义页面或区域的页脚，通常包含版权信息、联系方式等内容。
4. <aside>：用于定义页面内容之外的内容，通常是侧边栏、广告、相关链接等。
5. <article>：用于定义独立的、完整的内容块，如一篇博客文章、新闻报道等。
6. <section>：用于定义文档中的一个区块或节，通常用于组织相关内容

4.多媒体支持：原生支持音频和视频，不再需要使用第三方插件。

    音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay

5、画布 Canvas

      其中使用可视化模型的Echarts 使用它和svg实现的

6、 地理(Geolocation) API

7、 本地离线存储 localStorage 长期存储数据 浏览器关闭后数据不丢失

8、 sessionStorage 的数据在浏览器关闭后自动删除

9、 表单控件 calendar , date , time , email , url , search , tel , file , number

CSS3 新特性

1、颜色: 新增 RGBA , HSLA 模式

2、文字阴影(text-shadow)

3、边框: 圆角(border-radius) 边框阴影 : box-shadow

4、盒子模型: box-sizing

5、背景:background-size background-origin background-clip

6、渐变: linear-gradient , radial-gradient

7、过渡 : transition 可实现动画

8、自定义动画 animate @keyfrom

9、媒体查询 多栏布局 @media screen and (width:800px) {…}

10、border-image

11、2D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

12、3D 转换

13、字体图标 font-face

14、弹性布局

Localstorage、sessionStorage、cookie 的区别（必会）

共同点： 都是保存在浏览器端、且同源的

区别：

1、cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器

间来回传递，而 sessionStorage 和 localStorage 不会自动把数据发送给服务器，仅在本地保存。

cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下

2、存储大小限制也不同，cookie 数据不能超过 4K，同时因为每次 http 请求都会携带 cookie、

所以 cookie 只适合保存很小的数据，如会话标识。sessionStorage 和 localStorage 虽然也有存

储大小的限制，但比 cookie 大得多，可以达到 5M 或更大

3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始

终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的 cookie 过

期时间之前有效，即使窗口关闭或浏览器关闭

4、作用域不同，

sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；

localstorage

在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中都是共享的

5、web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者

6、web Storage 的 api 接口使用更方便

H5 的浏览器存储有哪些？（必会）

1、cookie

这个存储用了很久了，而且也是以前大多网站十分喜欢的存储站点。但是也很容易被

清除。同时 cookie 会在每一次通信过程中传向服务端。同时 cookie 有一个很好的地

方就是，它本身有一个过期时间属性，可以用来标注一个变量的有效期。而 cookie 一

旦过期就会被自动删除掉

2、localStorage、sessionStorage

- localStorage: 持久存储，只要用户不主动删除就会一直存在。

- sessionStorage：面向 session 的浏览器存储，因此只存在于一个页面的生命周期

内，关闭即清除两者均采用键值对的形式存储数据

3、indexedDB

内嵌在浏览器端的非关系型数据库，数据以键值对的形式存储，兼容性良好

indexDB 直接操作的存储对象是 ObjectStore，这有点类似其他数据库中 table 概念

4、websql

内嵌在浏览器的关系型数据库，前端可以像在使用 mysql、Oracle 一样的写 sql 语句，

并存储信息。兼容性良好。存储后可在浏览器 resource 中查看

5、window 变量

生命周期有限，一般大家也不会去使用。但是对于全局变量的临时存储来说，还是一

个不可多得的好地方

6、flash cookie

flash cookie 现在用的地方比较多

简述 transform，transition，animation 的作用？（必会）

1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转

rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形 matrix。

transition 和 animation 两者都能实现动画效果

transform 常常配合 transition 和 animation 使用

2、transition 样式过渡，从一种效果逐渐改变为另一种效果

transition 是一个合写属性

Transition:transition-property transition-duration transition-timing-function

transition-delay

从左到右分别是： css 属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间

transition 通常和 hover 等事件配合使用，需要由事件来触发过渡

3、animation 动画 由@keyframes 来描述每一帧的样式

区别：

3.1）transform 仅描述元素的静态样式，常常配合 transition 和 animation 使用

3.2）transition 通常和 hover 等事件配合使用，animation 是自发的，立即播放

3.3）animation 可设置循环次数

3.4）animation 可设置每一帧的样式和时间，transition 只能设置头尾

3.5）transition 可与 js 配合使用， js 设定要变化的样式，transition 负责动画效果。

下一章:HTML5、CSS3面试题（二）