HTML5和CSS3新特性

一、HTML5新属性

1）新语义元素

//HTML5提供了新的语义元素来明确⼀个Web页⾯的不同部分
header、nav、aside、article、section、main、figure、footer

• <header>：描述了⽂档的头部区域，于定义内容的介绍展⽰区域。
• <nav>：定义导航链接的部分。
• <section>：定义⽂档中的节（section、区段）。比如章节、页眉、页脚或⽂档中的其他部分，section通常 包含了⼀组内容及其标题。
• <article>：定义独⽴的内容。
• <aside>：定义页⾯主区域内容之外的内容（⽐如侧边栏）。
• <figure>：标签规定独⽴的流内容（图像、图表、照⽚、代码等等）。
• <figcaption>：定义 <figure>元素的标题。
• <main>:main元素代表文档的主内容区，它应当与文档直接相关，或者是文档的中心主题的扩展。一个页面中只能有一个main元素，不能将 main元素放在 article、aside、header、footer、nav 元素的里面，即main元素的级别不能低于这些元素。
• <footer>：述了⽂档的底部区域，⼀个页脚通常包含⽂档的作者，著作权信息，链接的使⽤条款，联系信息等。

2）内容元素

mark、progress

• < mark> 标签定义带有记号的文本，请在需要突出显示文本时使用 < mark> 标签。
• < progress> 标签定义运行中的任务进度，与 JavaScript 一起使用来显示任务的进度。

3）新的表单控件

calander、date、time、email、url、search、number

• search：定义用于搜索的文本字段。
• email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
• url：用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

• number：number 类型用于应该包含数值的输入域。

4）新的input类型

color、date、datetime、datetime-local、email

• color：定义拾色器。
• email：定义用于 e-mail 地址的文本字段。
• datetime-local/datetime：定义日期字段（带有 calendar 和 time 控件）。

5）Web存储

localStorage、SessionStorage

• localstorage为永久储存，sessionstorage为临时储存
• session是指用户在浏览某个网站时，从进入网站到浏览器关闭的所经过的时间。seesion对象可以用来保存在这段时间内要求保存的任何数据
• localstorage通常将数据保存在客户端本地的硬件设备中，即使浏览器关闭了以后，数据仍然存在

6）多媒体

audio、video、source、embed、track

• <video> 标签定义视频，比如电影片段或其他视频流。默认情况下不允许用户自己控制播放停止。
• <audio> 标签定义声音，比如音乐或其他音频流。
• <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源，允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
• <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
• <embed> 标签定义嵌入的内容，比如插件。

二、CSS3新属性

1. 颜⾊：新增RGBA，HSLA模式

.red{background-color: red}
.red_hex{background-color: #ff0000}
.red_rgb{background-color: rgb(255,0,0);}
.red_hsl{background-color: hsl(0,100%,54%);}

2. ⽂字阴影（text-shadow）

3. 边框： 圆⾓（border-radius）边框阴影： box-shadow

4. 盒⼦模型：box-sizing

//默认值 内容真正宽度 = 设置的宽度
box-sizing: content-box; 

// 内容真正宽度width= 设置的width- 左右padding - 左右border
box-sizing: border-box; 

// 规定从父元素继承此值
box-sizing: inherit;

5. 背景：background-size 设置背景图⽚的尺⼨background-origin 设置背景图⽚的原点background-clip 设置背景图⽚的裁切区域，

以”，”分隔可以设置多背景，⽤于⾃适应布局

6. 渐变：linear-gradient、radial-gradient

linear-gradient   背景颜色渐变功能
该属性一共有三个属性值，分别为：方位(可选)、起始色（必选）、末尾色（必选）

径向渐变（放射性渐变）     radial-gradient      背景颜色渐变功能
该属性一共有三个属性值，分别为：形状(可选)、起始色（必选）、末尾色（必选）

7. 过渡：transition，可实现动画

8. ⾃定义动画

9. 在CSS3中唯⼀引⼊的伪元素 ：selection.

10. 媒体查询，多栏布局

11. border-image

12. 2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)

13. 3D转换

14. 新增选择器：属性选择器、伪类选择器、伪元素选择器。