HTML5 新增的标签

增的结构标签

section元素

表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2...等元素结合起来使用，表示文档结构。

例：HTML5中<section>...</section>;HTML4中<div>...</div>。

article元素

表示页面中一块与上下文不相关的独立内容。比如一篇文章。

aside元素

表示article元素内容之外的、与article元素内容相关的辅助信息。

header元素

表示页面中一个内容区块或真个页面的标题。

hgroup元素

表示对真个页面或页面中的一个内容区块的标题进行组合。

footer元素

表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

nav元素

表示页面中导航链接的部分。

figure元素

表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

figure 定义媒介内容的分组, 以及它们的标题。

figcaption 定义 figure 元素的标题。

例如：

<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>

HTML4中常写作

<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>

新增的其他元素

video元素

定义视频。像电影片段或其他视频流。例：

<video src="movie.ogg" controls="controls">video元素</video>

HTML4中写法：

<object type="video/ogg" data="move.ogv">
<param name ="src" value="movie.ogv">
</object>

audio元素

定义音频。如音乐或其他音频流。例：

<audio src ="someaudio.wav">audio元素</audio>

html4中写法：

<object tyle="application/ogg" data="someaudio.wav">
<param name ="src" value= "someaudio.wav">
</object>

embed元素

用来嵌入内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" />

HTML4中代码示例<object data="flash.swf" type="application/x-shockwave-flash"><object>

mark元素

主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。典型应用搜索结果中高亮显示搜素关键字。

HTML5<mark></mark>;HTML4 <span></span>。

progress元素

表示运行中的进程，可以使用progress元素显示JavaScript中耗时时间函数的进程。等待中……、请稍后等。<progress></progress>。

time元素

表示日期或时间，也可以两者同时。

ruby元素

定义 ruby 注释(中文注音或字符)。

与 <ruby> 以及 <rt> 标签一同使用。ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成，

还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

<ruby>

汉朝<rt><rp>(</rp>西汉和东汉<rp>)</rp></rt>

</ruby>

rt元素

定义字符(中文注音或字符)的解释或发音。

rp元素

在 ruby 注释中使用, 以定义不支持 ruby 元素的浏览器所显示的内容。

wbr元素

表示软换行。与br元素的区别：br元素表示此处必须换行；wbr表示浏览器窗口或父级元素足弓宽时(没必要换行时)，

不换行，而宽度不够时主动在此处换行。

canvas元素

定义图形，比如图表和其他图像。<canvas> 元素只是图形容器(画布)，必须使用脚本来绘制图形。

<canvas id="myCanvas"></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>

command元素各版本浏览器支持有问题

表示命令按钮，比如单选按钮、复选框或按钮。

只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。。

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

details标签

用于描述文档或文档某个部分的细节。

可与 summary 标签配合使用，summary可以为 details 定义标题。

标题是可见的，用户点击标题时，会显示出 details。summary应该是details的第一个子元素。

<details>
<summary>迪丽热巴</summary>
<p>迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，中国内地影视女演员。</p>
</details>

fieldset标签

组合表单中的相关元素

fieldset 标签用于从逻辑上将表单中的元素组合起来。

legend 标签为 fieldset 元素定义标题。

<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>

datalist标签

定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。使用 input 元素的 list 属性来绑定 datalist。

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

datagrid标签如何用？

定义可选数据的列表。datagrid 作为树列表来显示。

如果把 multiple 属性设置为 true，则可以在列表中选取一个以上的项目。

keygen标签如何用?

标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

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

output标签

定义不同类型的输出，比如脚本的输出。

<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

source标签

标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

menu标签

定义菜单列表。当希望列出表单控件时使用该标签。注意与nav的区别，menu专门用于表单控件。

<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

abbr: 标记一个缩写

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

显示结果

The PRC was founded in 1949.

mark标签

定义有记号的文本。

<mark>有记号的文本</mark>

progress 定义任何类型的任务的进度。

中国，北京，2016年5月13日]由华为和云适配联合主办，主题为"HTML5的未来，就是你！"的HTML5移动应用开发大赛颁奖典礼今日在北京圆满落幕。本次大赛设计的初衷即希望为广大HTML5开发企业和个人提供一个交流和展示的平台，让开发者们在HTML5移动应用上尽情"烧脑"。对于优秀的作品和个人，华为和云适配将给予大赛奖金之外更为广阔的展示空间和发展机会，与开发者共享移动办公的蓝海。

本次大赛自2015年11月启动，历时5个多月的时间。期间华为组织专业讲师在线与开发者共同探讨HTML5技术原理；通过线下沙龙的方式邀请行业领袖与开发者、创客面对面分享前沿技术理念，深入剖析市场机遇，现场参与人数达到150多位。到2016年4月作品提交截止日，大赛共吸引400多个开发团体及个人参加。收到的参赛作品涵盖了备忘录、计算器等基础办公工具，企业IM、电子签章等通用行业应用，面向快消、职信监督等垂直行业应用。大赛评委会经过多轮深入讨论和细致评审，评选出20个优秀作品入围，并在今天现场颁奖。20位优秀作品的作者受邀齐聚一堂，共同见证、分享收获的时刻。

个人开发者郑张宽所设计的企业IM应用"PenPen"荣获此次大赛一等奖，斩获50000元现金大奖。山西百城科技的"BB商务会签"和永中软件的"永中DCS"应用则拿下奖金为20000元的二等奖。深圳前海圆舟科技的"柚客"、长春我们俩文化传播公司的"职业信用监督体系"和个人开发者李文祥的"i记事"荣获奖金为8000元的三等奖。其他入围作品的作者也在现场通过抽奖的方式获得Mate8、华为Watch、手环等豪华礼品。为了给开发者充分展现自我的机会，现场还安排了开发者故事分享和优秀作品路演环节，充分展现参赛开发者强大的创新能力，并通过作品展示了HTML5技术在移动化开发中的独特优势。

典礼现场，华为邀请到了云适配CEO陈本峰、白鹭时代联合创始人张翔、LAYABOX创始人谢成鸿、火速移动CEO赵九州、致远软件副总裁李平等HTML5移动应用开发领域领军人物，就HTML5技术的应用之道进行了深入讨论。相对于传统的基于原生API的开发方式，HTML5在跨平台方面具有天然的优势，能够更好地解决企业移动化过程中开发和升级维护成本高、信息割裂等问题。在未来，HTML5必将满足从普通用户的生活娱乐，到企业的专业移动化办公等全方位多领域的需求。

"今天的颁奖典礼只是本次大赛的一个阶段性成果，但它并不是休止符。我们还会继续通过各种赛事活动来发现和挖掘优秀的开发者，并与其建立合作关系。"华为AnyOffice产品总监陈爱平说。根据计划，AnyOfficeEMM（EnterpriseMobileManagement，企业移动管理）平台报表插件大赛即将启动，而决赛则被安排在2016年8月31日-9月2日华为旗舰大会上进行。这将是一次在更大舞台上展示的机会，相信将会有更多的开发者在这个舞台上一展才华。

华为的BYOD战略与企业移动化发展密切相关。华为BYOD移动应用联盟经过3年多的持续发展，目前联盟平台已有超过200家合作伙伴，集成各种应用500多个，覆盖全球超过450万移动终端。HTML5是未来企业移动应用发展的重要方向，华为已与微软、英特尔、云适配等公司共同筹建并启动"中国企业级HTML5联盟"，AnyOffice安全平台也已全面兼容HTML5应用。在未来，华为一方面将坚持聚焦构建移动应用基础安全能力，如安全沙箱、应用层VPN、MDM、MAM等，并以SDK的形式助力伙伴快速实现对安全能力的整合；另一方面，将始终坚持移动办公商业生态的构建，与开发者和合作伙伴一起推动HTML5的市场化进程，为企业提供更为安全、快速、高效的移动化解决方案。

么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。那什么又是HTML呢？HTML 是用来描述网页的一种语言。HTML的上一个版本诞生于1999年。自从那以后，Web 世界已经经历了巨变。HTML 指的是超文本标记语言： Hyper Text Markup Language。HTML 不是一种编程语言，而是一种标记语言。而标记语言是一套标记标签 (markup tag)。HTML 使用标记标签来描述网页，HTML 文档包含了HTML 标签及文本内容，因此HTML文档也叫做 web 页面。

HTML5 是如何创建的？

HTML5 是 W3C 与 WHATWG 合作的结果。W3C 致的是World Wide Web Consortium，也就是万维网联盟。而WHATWG 致 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年的时候，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些新规则

新特性基于 HTML、CSS、DOM 以及 JavaScript；减少对外部插件的需求（比如 Flash）；更优秀的错误处理；更多取代脚本的标记；HTML5 应该独立于设备；开发进程应对公众透明。

为 HTML5 建立的一些新特性

用于绘画的 canvas 元素；用于媒介回放的 video 和 audio 元素；对本地离线存储得更好地支持；新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search。

HTML 编辑器

专业的 HTML 编辑器来编辑 HTML：Adobe Dreamweaver、Microsoft Expression Web、CoffeeCup HTML Editor、Sublime Text 。不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法，高手们都是用记事本写的~~~~

而本人使用的是Adobe Dreamweaver（下文中提到简称DW），大家可以自己尝试各种编辑器，再选择自己喜欢的。本教程是实用性类，不会长篇大论阐述理论，会留一些问题供大家去理解，不了解的话百度谷歌。

还需要的软件就是浏览器的准备，大家肯定知道什么是浏览器啦，现在谷歌，微软新版浏览器以及360等众多浏览器都是支持查看网页源代码的。鼠标右键选择查看源代码即可。

学习资料推荐：

在本文中，需要理解的点，在下面讲解中可能会混着讲，所以大家要看完教程之后自己去总结。

HTML文档是什么样
如何新建一个HTML文档
怎么打开HTML文档

首先打开DW，新建一个HTML文件，就是后缀是html结尾的文件。

用DW这样的HTML专业软件有个好处就是新建的文件已经自动写好的一个HTML文件的基本结构。文档标题在页面中间上部的标题处可以修改，也可以保存后自己再修改。

保存名字为教程1，可以看到文件是这样的。

之后，我们尝试用记事本打开这个文件。

用记事本打开的样子。跟DW打开是一样。

在body部分输入文字，内容随意，然后保存。

再用浏览器打开，我这边用的谷歌浏览器。打开之后可以看到如下图所示。相信大家对HTML文件已经有了一点点概念了。

再回到DW打开，可以看到，文件下边是代码，上边是结果。如果只看到代码，这是因为在页面左上角传视图的方式选择。选择拆分即可。

在DW中新建一个文件之后，你其实就已经看到一个HTML的基本结构了，这是我们刚才新建的教程1

红色的矩形框内部的内容，我们称为<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整网页声明类型 DOCTYPE 参考手册。

<!DOCTYPE> 声明之后就是 <html> .....</html> 中间的那些我们暂时忽略。这两个尖括号之间的内容就告诉了浏览器，这段内容是html页面的内容。

在html页面中，哪些是被显示的，哪些是代码？相信通过第一节大家已经有所认识了，在HTML中，标签是通过"< >"表现的。而每一个标签都以对应的“</ >”来结束，如<html></html>,<head></head>,<title></title>.....。(当然也有例外，之后再说)

接下来就是在 <html> ，</html>之间编辑整个页面的头部和身体了.

头部用<head></head>来表示，之间的内容一般包含meta 和title，meta大家可以自己去了解，如果没有这一块，显示可能会出现乱码。一些预先的设置都会放在头部里，样式表等，就像是C语言程序中的头文件。title标签就是整个网页的标题。

编辑好了头部，就进入页面的身体啦。用body标签来表示很直观，也不需要刻意去记了。在实例1中body的内容很简单，只有一行文字，之后的内容也就是教大家如何将body丰富起来~~

掌握三个标签

1.HTML 标题<h1>-<h6>

2.HTML 段落<p>

3.HTML <br/>

HTML 标题

在 HTML 文档中，标题很重要。

标题是通过 <h1> - <h6> 标签进行定义的.

<h1> 定义最大的标题。 <h6> 定义最小的标题。

看看实例效果

关于查看文件的效果，大家可以保持浏览器打开，当DW中保存过文件以后，在浏览器中刷新一下，就可以看到效果。

HTML 段落

HTML 可以将文档分割为若干段落。段落是通过 <p> 标签定义的。在<p> </p>中输入如下内容，并在浏览器打开看一下效果。

如果我缩小浏览器的宽度，效果如下。

现在大家可以发现，html语言是一种排版语言，他会保证你可以看到内容的全部，随着浏览器的变化，文字排版也会跟着变化。你自己敲的空行，是不会显示出来。那么如何自己定义断行呢？介绍一个新的标签<br/>

<br/>标签

英文brake的缩写，很显然，就是打断的意思。因为这个标签是放在内容的结尾的，所以它的开始就是结束，因此他没有结束标签，所以没有</br>,只有<br/>,大家要记清楚~

这时就能看到断行啦。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。<hr>标签与<br>标签一样，没有结束标签。所以也可以写成<hr/>.

属性

在设置完水平线之后，我们还可以及设置水平线的宽度。

代码<hr width=50%> 这里的50%是指页面的50%，也可以设置一个具体的数值,比如50，是指50个像素，大家可自行尝试。

这里的width就是这个标签的属性。像这样的属性值，还有，align，size。但不同的效果，大家可以试试。这些效果学了CSS之后，都建议通过CSS样式表来实现。

<hr width=50>设定绝对长度；

<hr align=left>设置左对齐，当然也可以设置右对齐。

<hr size=1>这表示线宽；

曾有有一段时间属性值“=”后面是需要加引号的，<hr width=“50”>，但现在所有浏览器都支持不加引号，大家看到有引号不要觉得是错误的。

<标签名属性名=color> - 指定颜色

比如我可以给水平线设置颜色

在DW中输入color=“之后会弹出颜色选择，可以只选择颜色，DW会自动生成颜色代码。

代码为：

<h3>第四节水平线</h3>
<hr width=90% color=”#FF0000“>
插入一条水平线

效果如下：

字体样式

我们会举例说一些，但是在学习CSS之后，字体样式等于格式有关的功能，都会通过CSS样式表来实现。所以，这里大家只要稍微了解下就好。

举几个例子

加粗<b></b>；斜体<i></i>；下划线<ins></ins>；变小<small></small>；在html中，标签是可以嵌套的。大家可以仔细对比，以下代码，和效果。

短语格式

以下标签的显示结果是由浏览器和样式表决定的，这些标签标识的意思而不是效果。这句话可能有一些难以理解，大家学习久了就会有所体会。

<em>强调</em>；<strong>着重</strong>；<dfn>definition</dfn>；<code>表示这一行是源代码，仅用于小部分代码。</code>；<samp>例子代码</samp>；<kbd>用户输入</kbd>；<bar>变量</bar>；<site>引用</site>

我们试着输入这些代码。

列表

掌握几个标签<ul><li><ol><dl><dt><dd>，标签是可以嵌套的，大家自己可以试一试。

无序列表 <ul>和<li>标签

<ul>un-odered list <li>list item,一项

将 <ul> 标签与 <li> 标签一起使用，创建无序列表。将<ol>标签与<li>标签一起使用，创建有序列表。

代码：

ol和ul可以嵌套自动缩进ul缩进每层标记不一样会有实心和空心等不同的标记。

<dl>、<dd>和<dt>标签

定义：<dl> 标签定义了定义列表（definition list）。<dd> 在定义列表中定义条目的定义部分。<dt> 标签定义了定义列表中的项目（即术语部分）。

用法：<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

举例代码：

<dl>

<dd>用来计算的仪器 ... ...</dd>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

浏览器中的效果如下：

table 标签 -- 代表HTML表格

table标签是成对出现的,以<table>开始,以</table>结束
引用网址:http://www.dreamdu.com/xhtml/tag_table/
属性

Common -- 一般属性

summary -- 代表表格的摘要说明

width-- 代表表格的宽度

border -- 代表表格边框(此属性应该使用CSS实现)

cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)

cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)

table，中文"表格"的意思

示例

<table width="80%" border="1"> <tr> <th>www.dreamdu.com</th> <th>.com域名的数量</th> <th>.cn域名的数量</th> <th>.net域名的数量</th> </tr> <tr> <td>2003年</td> <td>1000</td> <td>2000</td> <td>3000</td> </tr> <tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> <tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> </table>

HTML表格示例 -- 可以尝试编辑

HTML table 标签示例
HTML th 标签示例
HTML cellpadding cellspacing 属性示例
HTML rowspan 属性示例
HTML colspan 属性示例
HTML colgroup col示例

说明

width-- 是表格的宽度,可以使用象素px或者百分比
border-- 是表格的边框的宽度,使用px表示,此属性应该使用CSS实现
tr -- 代表一行
th -- 代表表格头
td -- 代表一个单元格

由于篇幅有限，今天的内容就介绍这么多。如果你有什么想法或者建议，欢迎评论交流！

在线咨询

上一篇：<AppML> 案例研究-HTML 模板
下一篇：前端开发，原生 JS 实现最简单的图片懒加载

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商