html5新增标签有哪些


本文摘自PHP中文网,作者藏色散人,侵删。

html5新增标签有:1、video,表示一段视频并提供播放的用户界面;2、audio,表示音频;3、canvas,表示位图区域;4、source,表示为video和audio提供数据源;5、svg,用于定义矢量图等等。

本文操作环境:Windows7系统、Dell G3电脑、HTML5版。

h5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。

- h5新增的标签

新增元素

说明

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

video    表示一段视频并提供播放的用户界面   

audio    表示音频   

canvas    表示位图区域   

source    为video和audio提供数据源   

track    为video和audio指定字母   

svg    定义矢量图   

code    代码段   

figure    和文档有关的图例   

figcaption    图例的说明   

main   

time    日期和时间值   

mark    高亮的引用文字   

datalist    提供给其他控件的预定义选项   

keygen    秘钥对生成器控件   

output    计算值   

progress    进度条   

menu    菜单   

embed    嵌入的外部资源   

menuitem    用户可点击的菜单项   

menu    菜单   

template   

section   

nav   

aside   

article   

footer   

header

- css3

css3被划分为模块,最重要的几个模块包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

选择器

框模型

背景和边框

border-radius、box-shadow、border-image、

background-size:规定背景图片的尺寸

background-origin:规定背景图片的定位区域

background-clip:规定背景的绘制区域

文本效果(常用)

text-shadow:设置文字阴影

word-wrap:强制换行

word-break

css3提出@font-face规则,规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range

2/3D转换

transform:向元素应用2/3D转换

transition:过渡

动画

@keyframes规则:

animation、animation-name、animation-duration等

用户界面(常用)

1

2

3

4

5

6

7

8

9

10

box-sizing、resize

css3新增伪类

:nth-child()

:nth-last-child()

:only-child

:last-child

:nth-of-type()

:only-of-type()

empty

:target  这个伪类允许我们选择基于URL的元素,如果这个元素有一个识别器(比如跟着一个#),那么:target会对使用这个ID识别器的元素增加样式。

1

2

3

4

:enabled 

:disabled

:checked

:not

以上就是html5新增标签有哪些的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

app三年内是否将被HTML5顶替彻底消失?

详细介绍HTML5 file api实现断点续传

h5的语义化标签新特性应该如何使用

用h5制作烟花粒子特效的制作方法

h5实现获取用户地理定位

对于HTML5应用程序缓存application cache的知识点详解

h5的存储方式详解

HTML5 details标签的作用是什么?<details>标签的使用方法介绍(附使用实例)

什么是 websocket?深入理解HTML5中websocket

HTML5 canvas绘制时指定颜色与透明度的方法

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...