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. 新增选择器：属性选择器、伪类选择器、伪元素选择器。

HTML5和CSS3新特性相关推荐

HTML5和CSS3新特性(完整版)
css3新特性选择器背景和边框文本效果 2D/3D 转换 - 变形(transform).过渡(transtion).动画(animation) 1.选择器 :last-child /* 选择元 ...
Html5、CSS3新特性
h5的新特性? 1.新增一些语义化标签 <article> <section> <aside><header> <footer><n ...
Html5与CSS3新特性
H5新特性新增的语义化标签 <header> : 头部标签 <nav> : 导航标签 <article> : 内容标签 <main> : 主体标签 & ...
HTML5和CSS3新特性有哪些
HTML5 (1)问题分析对于目前市场上来说HTML5中需要掌握的新特性有: 1.拖拽释放(Drag and drop) API 2.语义化更好的内容标签(header,nav,footer,asi ...
前端学习 HTML5和CSS3新特性高级技巧 JavaScript基础语法
HTML5和CSS3提高 HTML5的新特性 HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签,新的表单和新的表单属性等: 这些新特性都有兼容性问题,基本是IE9+以上的版本浏览器才支持 ...
HTML5和CSS3新特性一览
转自:http://www.cnblogs.com/star91/p/5659134.html HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签描述 < ...
（前端知识点）CSS3 新特性与html5 新特性
1. CSS3 新特性有哪些? 答: 1.颜色: 新增 RGBA ,HSLA 模式 2. 文字阴影(text-shadow.) 3.边框: 圆角(border-radius)边框阴影: box-sha ...
前端面试题 | HTML5新特性有哪些？CSS3新特性有哪些？
H5新特性拖拽释放(Drag and drop)API 语义化更好的内容标签(header,nav,footer,aside,article,section) 音频.视频API(audio,vide ...
babel css3新特性_2018年面试前端总结
再有两个月,2018就快过完了,因而有必要在年末对2018年的前端学习做一个总结,本文主要从前端面试中的一些基础知识来对前端进行相关的总结.本文根据网络面试题进行总结. 基础知识本部分主要从以下几个 ...