HTML 5 是什么 ？
HT ML 5是是下一代HTML，比之前的HTML更增添了许多新的 标签元素 ，对于浏览器的要求也比较高级，至少需要IE9以上的浏览器，移动端浏览器版本高，使用的比较多。那今天就来看看它增加了那些新的特性。
HTML5
audio（音频标签）、video（视频标签）
例：
//audio标签属性：auto play ： 是否 自动播放
//controls ： 提供添加播放、 暂停 和 音量 控件
//loop : 设置循环次数
// PR eload ：在页面进行加载时进行加载，预备播放
//src : 文件存储路径
<audio src=" ;m P3 .mp3" controls="controls"> </audio>
<audio controls="controls">
&nbs p; <source src="1.ogg" ty PE ="audio/ogg">
<source src="2.mp3" type="audio/mpeg">
</audio>
//video属性标签：同audio相同，
//h ei ght width : 设置视频播放器高度、 宽 度
<video src="mp3.mp3" controls="controls"> </video>
<video controls="controls" width="300" height="400">
<source src="1.ogg" type="video/ogg">
<source src="2.mp4" type="video/mp4">
</video>
拖放（ Drag and drop）
实例：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.p rev entDefault();
}
function drag(ev)
{
ev.data transfer .setData("Text",ev.t arg et.id);
}
function drop(ev)
{
ev.preventDefault();
VAR data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p id="p1" ondrop="drop(event)"
ondragover="allowDrop(event)"></p>
< img id="drag1" src="img_ LOG o.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
结构标签：header、footer、nav、article、section、aside；
新增标签：datalist（定义选项列表）、det ai ls（定义文档 细节 ，通常与summary使用）、menu（定义列表/菜单）、address、progress（ 进度 条，有两个值：value、max）、mark（标记）、time（时间）
新增表单元素type：email、url、tel、number（min、max、step）、range（进度条）、color（颜色面板）、se Arch
//用法基本相同
<input type="email" n am e="user_email" />
属性： form、autocomp let e、autofocus、method、action、multiple、pattern、placeholder、requi red 、contented IT able、hidden、tableindex。
<form action="demo_form.asp" method="get" auto complete ="on">
First name: <input type="text" name="fname" />< br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="s ub mit" />
</form>
绘图：canvas
webstorage ：分为localStorage与sessionStorage（他们的区别以及cookie，会 在后 面单独列出来）。
//二者用法大同小异，只 不过 存储方式不同。
<script>
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
以上是常见的HTML 新属性 ，接下来是 CSS 3 的新属性，同样在较高版本的浏览器中才能实现功能。
CSS3
注意：因为浏览器内核的不同，渲染引擎在会有不同变得表现，需要注意偏差。
边框：
border -i mage 设置所有 border-image-* 属性的简写属性。
border-radius 设置所有四个 border-*-radius 属性的简写属性。
box -s hadow 向方框添加一个或多个阴影。
p
{
border:solid 2px red;
border-radius:25px;
border-radius:25px; /* 创建 圆 角，100%为圆形 */
box-shadow: 10px 10px 5px # 888888；
}
背景：
background-clip 规定背景的 绘制 区域。
background-ori gin 规定背景图片的定位区域。
background-size 规定背景图片的 尺寸 。
文本效果：
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 [justify] 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
2D效果：
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
trans latex (n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换， 改变 元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
//如何使用 matrix 方法将 p 元素旋转 30 度：
p
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms -t ransform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
- webkit -transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Ch rom e */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* opera */
}
3D转换：
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
渐变：线性渐变与镜像渐变
线性：background:gre die nt(linear, left-top, left-bottom, From (blue), to(red), color-stop(0.4,#fff));
镜像： background:gredient(radialr, center center, 0, center center，200， from(blue), to(red), color-stop(0.4,#fff));
响应式布局：根据不同分辨率设备，将网页很好地呈献给用户，media screen判定宽度大小。
另外这些只是常用的用法，具体的用法可参考 官方 文档，里面有更细致的用法。
HTML5是什么？HTML5是是下一代HTML，比之前的HTML更增添了许多新的标签元素，对于浏览器的要求也比较高级，至少需要IE9以上的浏览器，移动端浏览器版本高，使用的比较多。那今天就来看看它增加了那些新的特性。
HTML5
audio（音频标签）、video（视频标签）
例：
//audio标签属性：autoplay ：是否自动播放
//controls ： 提供添加播放、暂停和音量控件
//loop : 设置循环次数
//preload ：在页面进行加载时进行加载，预备播放
//src : 文件存储路径
<audio src="mp3.mp3" controls="controls"> </audio>
<audio controls="controls">
<source src="1.ogg" type="audio/ogg">
<source src="2.mp3" type="audio/mpeg">
</audio>
//video属性标签：同audio相同，
//height width : 设置视频播放器高度、宽度
<video src="mp3.mp3" controls="controls"> </video>
<video controls="controls" width="300" height="400">
<source src="1.ogg" type="video/ogg">
<source src="2.mp4" type="video/mp4">
</video>
拖放（drag and drop）
实例：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p id="p1" ondrop="drop(event)"
ondragover="allowDrop(event)"></p>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
结构标签：header、footer、nav、article、section、aside；
新增标签：datalist（定义选项列表）、details（定义文档细节，通常与summary使用）、menu（定义列表/菜单）、address、progress（进度条，有两个值：value、max）、mark（标记）、time（时间）
新增表单元素type：email、url、tel、number（min、max、step）、range（进度条）、color（颜色面板）、search
//用法基本相同
<input type="email" name="user_email" />
属性： form、autocomplete、autofocus、method、action、multiple、pattern、placeholder、required、contenteditable、hidden、tableindex。
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
绘图：canvas
webStorage：分为localStorage与sessionStorage（他们的区别以及cookie，会在后面单独列出来）。
//二者用法大同小异，只不过存储方式不同。
<script>
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
以上是常见的HTML新属性，接下来是CSS3 的新属性，同样在较高版本的浏览器中才能实现功能。
CSS3
注意：因为浏览器内核的不同，渲染引擎在会有不同变得表现，需要注意偏差。
边框：
border-image 设置所有 border-image-* 属性的简写属性。
border-radius 设置所有四个 border-*-radius 属性的简写属性。
box-shadow 向方框添加一个或多个阴影。
p
{
border:solid 2px red;
border-radius:25px;
border-radius:25px; /* 创建圆角，100%为圆形 */
box-shadow: 10px 10px 5px #888888；
}
背景：
background-clip 规定背景的绘制区域。
background-origin 规定背景图片的定位区域。
background-size 规定背景图片的尺寸。
文本效果：
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 [justify] 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
2D效果：
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
//如何使用 matrix 方法将 p 元素旋转 30 度：
p
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and C hr ome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
3D转换：
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
渐变：线性渐变与镜像渐变
线性：background:gredient(linear, left-top, left-bottom, from(blue), to(red), color-stop(0.4,#fff));
镜像： background:gredient(radialr, center center, 0, center center，200， from(blue), to(red), color-stop(0.4,#fff));
响应式布局：根据不同分辨率设备，将网页很好地呈献给用户，media screen判定宽度大小。
另外这些只是常用的用法，具体的用法可参考官方文档，里面有更细致的用法。
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5是什么？CSS3新增了什么特性？ 全部内容，希望文章能够帮你解决 html5教程-HTML5是什么？CSS3新增了什么特性？ 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5是什么？CSS3新增了什么特性？的详细内容...