您的位置：首页 > Web前端 > HTML5

Html5标签

2016-02-23 00:00 162 查看

摘要: HTML5新增标签

结构化：一个页面比作房子，那HTML就是毛坯房；而CSS就是装修。好的页面结构就是在没有CSS装饰的情况下，页面结构依然清晰明了，房屋依然可现。
语义化：HTML是一种对文本内容和意义（即语义）的补充说法。它会告诉我们说：“这行是一个标题，这几行组成一个段落，这是一个项目列表，那是一个链接。”而不是来告诉我们：“这些字是蓝色的，那些又是红色的，这部分内容靠右，这几个是斜体。”这些是CSS的工作。总之：HTML告诉我们一块内容是什么（或其意义），而不是它长什么样子。
语义化的好处：去掉样式能让页面结构呈现清晰；屏幕阅读器会按标记“读”你的网页；有益于SEO；便于团队开发和维护。

1、增加了<canvas>标签，画布：绘制图形，在一定程度上可以替代flash

代码：
<!--这是一个画布标签，我们可以在这个区域绘制图形绘制图形-->
<canvas id="can1" width="500px" height="400px" style="border:1px solid red">
</canvas>

<script type="text/javascript">
//我要在画布上画出矩形
//1.得到画布
var canvas = document.getElementById("can1");
//2.得到上下文环境--我们可以通过cxt这个对象来绘制图形
//也可以简单的理解，这个cxt就是画笔。cxt提动了很多绘制图形的方法
//通过这些方法就可以绘制图形
var cxt = canvas.getContext("2d");
//画出一个矩形
//改变颜色
cxt.fillRect(30,30,30,30);
cxt.fillStyle="red";
</script>

2、增加<header>和<footer>标签，做到内容和结构分离，利于搜索引擎seo

<header>页头</header>
Hello Word !
<footer>页尾</footer>

3、增加了<video>和<audio>标签，视频和音频。

这里的<video>只支持ogg、mp4、webm格式，如果把有<video>的html5放在apache下，别人就能直接访问观看。

代码：
<video src="1453127889897.mp4" controls="controls" width="500px" height="600px">
</video>

4、Html5的离线存储功能

开启离线存储功能后，在访问网页时，会把css/js/图片/视频等离线存储到h5自带的数据库里面，类似html4的cookie,但比cookie强大的多。使用的技术是 Web Storage API，通过使用sessionStorage或localStorage，实现基于浏览器存储或者本地存储。
5、Html5语音识别和图形识别

代码：
<!--语音输入-->
<input type=”text” autofocus x-webkit-speech/>

6、html5支持css3的各种功能：动画和css3的选择器

代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animations功能使用方法（以前必须使用flash，现在使用css3动画）</title>
<style>
body{
}
div {
background-color:red;
height:20px;
width:100px;
}
@-webkit-keyframes mycolor{
0%{
background-color:red;
height:20px;
width:100px;
color:white;
font-size:15px;
}
40%{
background-color:darkblue;
height:25px;
width:100px;
color:white;
font-size:20px;
}
70%{
background-color:yellow;
height:30px;
width:100px;
font-size:25px;
}
100%{
background-color:red;
height:20px;
width:100px;
font-size:20px;
}
}
div:hover{
-webkit-animation-name:mycolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}
</style>
</head>
<body>
<div>css3动画</div>
</body>
</html>

7、可以拖放、跨文档消息、浏览器历史管理等

8、兼容性好

9、Html5废弃的标签

第一类：表现性元素

basefont / big / enter / font / s / strike / tt / u

这些标签都可以用css控制替代
第二类：框架性元素
因框架有很多可用性和可访问性问题，html5移除以下元素：

frame / frameset / noframes

但是html5还支持iframe

第三类：属性类
很多表现性的属性也被新规范移除，如下：

align
body标签上的：link、vlink、alink、text属性
bgcolor
height和width
iframe元素上的scrolling属性
valign
hspace和vspace
tabel标签上的cellpadding
cellspacing和border属性
header标签上的profile属性
连接标签a上的target属性
img和iframe元素的longdesc属性

第四类：其他
abbr取代acronym（用于表示缩写），object取代了applet，ul取代了dir
10、html5新增的标签

1、<article> 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
2、<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
3、<canvas>标签定义图形，比如图表和其他图像。标签只是图形容器，您必须使用脚本来绘制图形。

<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
<canvas id="myCanvas">
your browser does not support the canvas tag
</canvas>

4、<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。
5、<datagrid> 标签定义可选数据的列表。datagrid 作为树列表来显示。
6、<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

<input id="myCar" list="cars" /><datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo"></datalist>

7、<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。"summary" 元素应该是 "details" 元素的第一个子元素。

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of phpStudy.</p>
</details>

8、<embed> 标记定义外部的可交互的内容或插件

<embed src="helloworld.swf" />

9、<figure> 标记定义一组媒体内容以及它们的标题，figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

10、<footer> 标记定义一个页面或一个区域的底部
11、<header> 标记定义一个页面或一个区域的头部
12、<hgroup> 标签用于对网页或区段（section）的标题进行组合

<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>

13、<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
所有主流浏览器都支持 <keygen> 标签，除了 Internet Explorer 和 Safari。

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

14、<mark> 标签定义带有记号的文本。

<p>Do not forget to buy <mark>milk</mark> today.</p>

15、<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。
必须定义度量的范围，既可以在 text 中，也可以在 min/max 属性中定义。

<meter min="0" max="20" value=”10”>5</meter>
<meter>2 out of 10</meter>
<meter>30%</meter>

16、<nav> 标签定义导航链接的部分。

<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

17、<output> 标记定义一些输出类型
18、<progress> 标签定义运行中的进度（进程）。
可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。

对象的下载进度：
<progress>
<span id="objprogress">85</span>%
</progress>

19、<rp> 标记是用在Ruby annotations 告诉那些不支持 Ruby元素的浏览器如何去显示
20、<rt> 标记定义对ruby annotations的解释
21、<ruby> 标记定义 ruby annotations.
<ruby> 标签定义 ruby 注释（中文注音或字符）。
在东亚使用，显示的是东亚字符的发音。
与 <rp> 以及 <rt> 标签一同使用：
ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

22、<section> 标记定义一个区域
标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</section>

23、<source> 标记定义媒体资源
而如果像下面这样指定了复数的媒体源的话，当浏览器支持MP3时会播放MP3，不支持MP3的时候会按顺序播放下面的WAV或OGG音频。
source 元素的 onerror 属性可以在所有格式都不被浏览器支持的时候，执行 JavaScript 处理。

<audio autoplay>
<source src="xxx.mp3" type="audio/mp3">
<source src="xxx.wav" type="audio/wav">
<source src="xxx.ogg" type="audio/ogg" onerror="error()">
</audio>

24、<time> 标记定义一个日期/时间
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

目前所有主流浏览器都不支持 <time> 标签。
25、<video> 标记定义一个视频

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

html语义化

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 HTML5新增标签 html5语义化

相关文章推荐

新的分享

章节导航