HTML5与微信开发（1）-HTML标签语法变化和使用概念

来源：互联网发布：国家税务总局网络学校编辑：程序博客网时间：2024/05/21 19:43

什么是HTML5

HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5是如何发展的

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
2012年12月17日 万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
2013年5月6日 HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
2012年12月27日至今 进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。

HTML5新特新

HTML5 中的一些有趣的新特性：
1、用于绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section
5、新的表单控件，比如 calendar、date、time、email、url、search

HTML5浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

HTML5与HTML4的区别

1、概念的变化：HTML5专注内容和结构，而不专注内容

<header><hgroup>导航数据</hgroup></header><nav>菜单</nav><article><h1>HTML5与微信开发（1）-HTML标签语法变化和使用概念</h1></article>

为什么这么说呢，之前我们写HTML代码时候，基本上是想怎么写就怎么写，只要是页面做的漂亮就行，没有什么规范。HTML5就不一样，HTML5 除了表示出规定的样式，还要注重内容和结构，而不注重外在的表现。外在的表现CSS就可以做的很好了，用不着HTML去做。以后我会单独拿出一个版块来介绍CSS，大家先不要着急。

还有一个大家有疑问了，我们使用HTML5做出的样式我们使用HTML4/4.0/4.1都能很好地实现，我们为什么还使用HTML5呢？这个内容到底专注到什么地方？

我就来给大家解释一下，比如我们上边这几行代码，里面的标签大家几乎都不认识，但是大家才应该也能猜到，< header>应该是头部，< nav>
应该是侧边栏菜单，< article>应该是内容。但是这些标签都不带样式，和一个div标签没什么区别，我们为什么不用div标签呢？大家想啊，我们使用div标签的时候是不是需要定义div的名称或者class才能定义div的样式，定义名称的时候根本就没有规范，有人命名header，有人命名head，有人直接命名toubu或者first……五花八门，什么样的也有，你说浏览器怎么去识别你编写的HTML的结构，怎么提取内容？所以说在HTML5中样式已经不是最重要的了，结构和内容才是最重要的。

2、声明与标签：HTML5更加的简洁
<1>HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />></html>

<2>HTML5声明

<!DOCTYPE HTML><html><meta charset="utf-8"></html>

简洁太多了，在学HTML的时候，除了,后面的那一大坨代码我都不知道是干什么的。我查了一下资料：

声明必须是 HTML 文档的第一行，位于 < html> 标签之前。

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。

HTML 5

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML5语法标签

（1）不允许写的结束符的标签：area、basebr、col、command、Embed、hr、img、input、keygen、link、meta、param、source、Track、wbr
（2）可以省略结束符的标签：li、dt、dd、p、rt、optgroup、option、Colgroup、thread、tbody、tr、td、th
（3）可以完全省略的标签：html、head、body、colgroup、tbody

HTML5新增标签

<article>  标记定义一篇文章<aside>    标记定义页面内容部分的侧边栏<audio>    标记定义音频内容<canvas>   标记定义图片<command>  标记定义一个命令按钮<datalist> 标记定义一个下拉列表<details>  标记定义一个元素的详细内容<dialog>   标记定义一个对话框(会话框)<embed>    标记定义外部的可交互的内容或插件<figure>   标记定义一组媒体内容以及它们的标题<footer>   标记定义一个页面或一个区域的底部<header>   标记定义一个页面或一个区域的头部<hgroup>   标记定义文件中一个区块的相关信息<keygen>   标记定义表单里一个生成的键值<mark>     标记定义有标记的文本<meter>    标记定义 measurementwithin apredefinedrange<nav>      标记定义导航链接<output>   标记定义一些输出类型<progress> 标记定义任务的过程<rp>       标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示<rt>       标记定义对rubyannotations的解释<ruby>     标记定义 rubyannotations.<section>  标记定义一个区域<source>   标记定义媒体资源<time>     标记定义一个日期/时间<video>    标记定义一个视频

HTML5的简单示例

<!DOCTYPE html><head><meta charset=utf-8><title>页面结构</title><style type="text/css">    header,nav,article,footer {border:solid 1px #666;padding:5px}     header{width:500px}     nav{float:left;width:60px;height:300px}     article{float:left;width:428px;height:300px}     footer{clear:both;width:500px} </style></head><body>    <header>        <hgroup>导航相关数据</hgroup>    </header>    <nav>菜单</nav>    <article>        <h1>标题:HTML5专题视频教程</h1>        发布日期:<time>19:00</time>        <time datetime="2013-2-14">情人节</time>        <p>测试相关内容</p>    </article>    <footer>        <address>地址：xx省xxx市xxx</address>    </footer></body></html>

3 0