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

Question

如题所述

Answer 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

Answer 2

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

- h5新增的标签：

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

audio ： 表示音频    

canvas： 表示位图区域    

source：  为video和audio提供数据源    

track ：   为video和audio指定字母    

svg：  定义矢量图    

code： 代码段    

figure ： 和文档有关的图例    

figcaption ： 图例的说明  

time：  日期和时间值    

mark： 高亮的引用文字    

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

keyge： 秘钥对生成器控件    

output ：  计算值    

rogress ：   进度条    

menu：    菜单    

embed：  嵌入的外部资源    

menuitem： 用户可点击的菜单项    

menu： 菜单  

二、 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

本回答被网友采纳

Answer 3

由于CSS5标准还未完全订下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家在各自标准前加了一个前缀，
如：-moz- 主要是firefox火狐
-webikt-主要是chrome谷歌,
-o-主要是用于苹果机上的浏览器

一. box-shadow(阴影效果)
使用:
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
支持:
FF3.5, Safari 4, Chrome 3
二. border-colors(为边框设置多种颜色)
使用:
border: 10px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
说明:
颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555;
支持:
FF3+
三. boder-image(图片边框)
使用:
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20 ---> 边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果;
(2). 边框图片效果(目前仅实现了两种):
repeat --- 边框图片会平铺, 类似于背景重复;
stretch --- 边框图片会以拉伸的方式来铺满整个边框;
(3). 必须将元素的边框厚度设置为非0非auto值.
支持:
FF 3.5, Safari 4, Chrome 3
四. text-shadow(文本阴影)
使用:
text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>];
说明:
(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色; 当<模糊半径>未指定时, 半径值为0;
(2) shadow可以是逗号分隔的列表, 如:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) 阴影效果会按照shadow list中指定的顺序应用到元素上;
(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身;
(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.
支持:
FF 3.5, Opera 10, Safari 4, Chrome 3
五. text-overflow(文本截断)
使用:
text-overflow: inherit | ellipsis | clip ;
-o-text-overflow: inherit | ellipsis | clip;
说明:
(1) 还有一个属性ellipsis-word, 但各浏览器均不支持.
支持:
IE6+, Safari4, Chrome3, Opera10
六. word-wrap(自动换行)
使用:
word-wrap: normal | break-word;
支持:
IE6+, FF 3.5, Safari 4, Chrome 3
七. border-radius(圆角边框)
使用:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
支持:
FF 3+, Safari 4, Chrome 3

八. opacity(不透明度)
使用:
opacity: 0.5;
filter: alpha(opacity=50); /* for IE6, 7 */
-ms-filter(opacity=50); /* for IE8 */
支持:
all
九. box-sizing(控制盒模型的组成模式)
使用:
box-sizing: content-box | border-box; // for opera
-moz-box-sizing: content-box | border-box;
-webkit-box-sizing: content-box | border-box;
说明:
1. content-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border;
2. border-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度
也不会变).
支持:
FF3+, Opera 10, Safari 4, Chrome 3本回答被提问者采纳

Answer 4

html5新增的标签：article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video，参考：HTML 5 参考手册

css3新增属性：所有动画属性animation、背景的origin和size、边框圆角相关、Box 属性、透明度等等，参考：CSS 参考手册

Answer 5

请查看详细的总结网页链接，或者你可以买本《html5/css3权威指南》，但我觉得没必要买书~个人觉得这书含金量不是很高（相比《javscript权威指南》，不喜勿碰）~