html5新增了哪些标签?css3新增了哪些属性

html-css024

html5新增了哪些标签?css3新增了哪些属性,第1张

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

- h5新增的标签

新增元素

说明

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等

用户界面(常用)

box-sizing、resize

css3新增伪类

:nth-child()

:nth-last-child()

:only-child

:last-child

:nth-of-type()

:only-of-type()

:empty

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

:enabled  

:disabled

:checked

:not

制作时间

首先,笔者在制作时间上进行对比,利用CSS3制作页面远比使用CSS节省时间。因为CSS3可以直接制作很多效果用来替换图片,而使用旧CSS版本制作的页面需要制作一些图片来体现效果,所以在制作图片上也要花费很多时间。

文件数量、容量及加载时间

CSS3版本的CSS文件大小为5.2K,网页文件总数为12,总容量为767.9K;CSS版本的CSS文件为4.5K,但网页文件总数为22,网页容量为849.2K。加载时间分别是3.3秒和4.7秒。

从以上数据可见,CSS3比CSS精简很多,速度也更快。

服务器请求次数

另外一个衡量指标是服务器请求次数,一般网页中有多少文件,就会对服务器有多少次请求数。不要小看这个指标,很多网页制作高手为了减少对服务器的请求负载,才探索出CSS Sprite技术。

CSS3中一共有12个文件,CSS版本中有22个文件,所以它们对服务器的请求数分别为12和22。又是CSS3胜出。

最后,综合以上的数据,在图三中已经列出CSS3和CSS的相关数据,CSS3完胜。

这下我们可以看到CSS3除了比较美观的效果外,还有更多的优点,毕竟它是网络技术发展中的产物,必然会向更加简单实用美观的方向发展。