一、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. 新增选择器:属性选择器、伪类选择器、伪元素选择器。
版权声明:本文为m0_60263299原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。