html5结构标签_新HTML5结构标签

最新推荐文章于 2022-09-19 16:55:52 发布

cuxiong8996

最新推荐文章于 2022-09-19 16:55:52 发布

阅读量661

点赞数 1

文章标签：编程语言 python java html linux

原文链接：https://www.ibm.com/developerworks/opensource/library/wa-html5structuraltags/index.html

版权

html5结构标签

什么是HTML5？

HTML5是超文本标记语言（HTML）的最新版本，是迄今为止该语言最彻底的修订。它在各个领域引入了许多新功能。一些更值得注意的补充包括：

内置的音频和视频多媒体标签
用于在浏览器中绘制内容的画布标签
更智能的表单，可让您通过使用必填属性来执行诸如验证之类的操作

有了一组新的结构标签，HTML5修改了HTML文档的结构方式。新的结构标签集中于将HTML文档划分为逻辑部分。标签的名称描述了要包含的内容类型。在本文中，详细了解这些新标记。

有点背景

蒂姆·伯纳斯·李（Tim Berners-Lee）于1989年创建了原始HTML，以解决现有的在Internet上访问信息的方法的缺点。自成立以来，在Internet上寻找路途一直是一项艰巨的任务。 Internet上的内容被视为单个文档，没有在它们之间导航的简便方法。本质上，您必须知道要查找的文档的地址，然后手工输入。为了解决此问题，Berners-Lee创建了两种技术：超文本传输协议（HTTP）和HTML。

HTTP是Web服务器用于传递内容的服务协议。 Web浏览器中URL的开头（假设浏览器显示完整的URL）很可能以http：//开头。 URL的这一部分告诉浏览器向Web服务器发出请求时要使用哪种协议类型。当服务器收到对文档的请求时，该文档很可能被编写或转换为HTML。 HTML文档就是发回浏览器的请求。

HTML是一种脚本语言，可以告诉Web浏览器如何呈现内容。可以在此内容中链接到其他文档，从而提供了一种在Internet上的文档之间导航的用户友好方法。

HTTP和HTML的组合使您可以简单地单击文本链接在文档之间导航，从而在Internet上快速轻松地浏览内容。创建了这两种技术之后，Berners-Lee继续创建了万维网联盟（W3C）。 W3C是HTML的前四个版本的指导力量。

互联网的初衷是提供简单的文本文档。最早的浏览器都是基于文本的（没有花哨的窗口，只是屏幕上的文本）。首次引入时，甚至图像的添加也是很大的。现在，人们可以做所有事情，从发送电子邮件到在Internet上看电视。互联网已不仅仅是一种传输简单文本文档的机制。新功能和新用途带来了HTML语言从未设计过处理的新挑战和问题。

W3C尝试使用可扩展超文本标记语言（XHTML）2.0标准解决当今Internet的问题。但是，该标准并没有被广泛接受，并且在很大程度上已被放弃。 2004年，当W3C专注于XHMTL 2.0标准时，一个称为Web超文本应用程序技术工作组（WHATWG）的小组开始研究HTML5标准，该标准比XHTML 2.0标准受到更多的热烈欢迎。 W3C放弃了XHTML 2.0标准，现在正与WHATWG合作开发HTML5。

支持的浏览器

在撰写本文时，HTML5尚未正式发布。网络上的大多数内容仍在为HTML 4规范编写。但是，一些浏览器包含对HTML5规范的支持。因为每种浏览器可能仅支持HTML5的某些功能，所以事情可能会变得棘手。在编写基于HTML5的网站之前，请检查每个目标浏览器，以确保它们支持您将用于网站的功能。

新的文档类型

无论目标浏览器的功能如何，都必须告诉浏览器您要使用HTML5规范呈现内容。您可以使用doctype声明进行此操作。

doctype声明告诉浏览器该页面使用哪种版本的标记语言。它是通过引用文档类型定义（DTD）来实现的。 DTD指定标记语言使用的规则，以便浏览器正确呈现内容。

文档类型可能是一个令人困惑的概念。在当前HTML规范中，有许多doctype，但是它们之间的区别还不是很清楚。表1显示了当前可用的doctype及其功能。

表1.文档类型和功能

文件类型	能力	例
HTML 4.01严格	允许所有HTML元素和属性，但不允许显示标签，例如字体标签。不允许使用框架集。	<！DOCTYPE HTML PUBLIC“-// W3C // DTD HTML 4.01 // EN”“ http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01过渡版	与HTML strict相同，但允许使用不赞成使用的元素，例如font标签。不允许使用框架集。	<！DOCTYPE HTML PUBLIC“-// W3C // DTD HTML 4.01 Transitional // EN”“ http://www.w3.org/TR/html4/loose.dtd”>
HTML 4.01框架集	与HTML过渡相同，但允许使用框架集。	<！DOCTYPE HTML PUBLIC“-// W3C // DTD HTML 4.01 Frameset // EN”“ http://www.w3.org/TR/html4/frameset.dtd”>
XHTML 1.0严格	与HTML严格相同，但所有内容都必须以格式正确的XML编写。例如，所有开始标签必须具有匹配的结束标签。不允许使用框架集。	<！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Strict // EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
XHTML 1.0过渡版	与HTML过渡相同，但所有内容都必须以格式正确的XML编写。不允许使用框架集。	<！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Transitional // EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML 1.0框架集	与XHTML过渡版相同，但允许使用框架集。	<DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Frameset // EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
XHTML 1.1	与XHTML strict相同，但也提供了模块功能，例如Ruby对东亚语言的支持。	<！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.1 // EN”“ http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

幸运的是，HTML5中大大简化了doctype声明。实际上，只有一个。为了使您的浏览器使用HTML 5规范进行呈现，请添加清单1中所示的doctype。

清单1. HTML5文档类型

<!DOCTYPE html>

在<html>标记之前，doctype声明应该是HTML文档中的第一件事。

新的结构元素

创建新的结构标签的基本原理是将网页分为逻辑部分，这些标签用描述其包含的内容类型的标签来描述。从概念上讲，请将网页视为文档。文档包含页眉，页脚，章节和其他各种将文档分为逻辑部分的约定。

本节回顾了使用通用示例代码划分HTML文档的当前方法。在本文的其余部分，您将使用新HTML5结构标记来修改原始代码，以逐步了解如何将文档转换为逻辑部分。

HTML 4方法

如果您已经创建了最简单HTML文档，那么您将熟悉div标签。 div标签是HTML5之前时代中用于在HTML文档中创建内容块的主要机制。例如，清单2显示了如何使用div标签创建具有页眉，内容区域和页脚的简单页面。

清单2.使用`div`标签的简单HTML页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>
      A Simple HTML Page Using Divs
    </title>
  </head>
  <body>
    <div id='header'>Header</div>
    <div id='content'>Content</div>
    <div id='footer'>Footer</div>
  </body>
</html>

这很好用； div标签是一个不错的通用标签。但是，除了查看每个div标签的id属性之外，很难分辨每个div标签代表文档的哪个部分。尽管您可能认为id足以代表一个指示器，但如果命名正确， id属性是任意的。有许多变体可以视为同等有效的id 。标签本身未提供要表示的内容类型的指示。

HTML5方法

HTML5通过提供一组标记来解决此问题，这些标记可以更清楚地定义构成HTML文档的主要内容块。不管网页显示的最终内容是什么，大多数网页都是由公用页面部分和元素的不同组合组成的。

清单2中的代码创建了一个带有页眉，内容区域和页脚的简单页面。这些以及其他部分和页面元素非常常见，因此HTML5包含将文档分为公共部分并指示每个部分中包含的内容的标记。新标签为：

本文的其余部分概述了每个标签。您还将通过修改清单2中基于div的原始代码示例以使用新HTML5结构性标记来了解标记的预期用途。

顾名思义， header标记旨在将HTML页面的一部分标记为header。清单3显示了清单2中修改为使用header标记的代码示例。

清单3.添加`header`标签

<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
    <div id='content'>Content</div>
    <div id='footer'>Footer</div>
  </body>
</html>

清单3中的doctype也进行了更改，以指示浏览器应使用HTML5呈现页面。从现在开始，所有示例均假定您使用的文档类型正确。

`section`标签

section标签用于标识页面上内容的重要部分。这个标签有点类似于将书分成几章。在代码示例中添加一个section标记将产生清单4中的代码。

清单4.添加一个`section`标签

<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <p>
          This is an important section of the page.
        </p>
      </section>
    <div id='footer'>Footer</div>
  </body>
</html>

`article`标签

article标签标识网页中内容的主要部分。想想一个博客，其中每个帖子都构成了重要的内容。添加article标签清单5所示的代码中的代码示例结果。

清单5.添加`article`标签

<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <div id='footer'>Footer</div>
  </body>
</html>

`aside`标签

aside标签指示标签中包含的内容与页面的主要内容相关，但不属于页面的主要内容。这有点类似于使用括号在文本正文中进行注释（如该注释）。括号中的内容提供了有关包含该元素的元素的其他信息。在代码示例中添加aside标签会产生清单6中的代码。

清单6.添加一个`aside`标记

<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <div id='footer'>Footer</div>
  </body>
</html>

footer标记将元素的包含内容标记为文档的页脚。在代码示例中添加footer标记将产生清单7中所示的代码。

清单7.添加`footer`标签

<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

此时，所有原始div标签已被HTML5结构性标签取代。

`nav`标签

nav标签中包含的内容旨在用于导航。将nav标记添加到代码示例中，得到清单8中的代码。

清单8.添加一个`nav`标签

<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header
      <nav>
        <a href='#'>Some Nav Link</a>
        <a href='#'>Some Other Nav Link</a>
        <a href='#'>A Third Nav Link</a>
      </nav>
    </header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

完成的例子

清单9显示了用新HTML5结构标签替换原始div标签的结果。

清单9.完成的示例

<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header
      <nav>
        <a href='#'>Some Nav Link</a>
        <a href='#'>Some Other Nav Link</a>
        <a href='#'>A Third Nav Link</a>
      </nav>
    </header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

虽然例子很简单，出于演示的目的，当你比较原始div为基础的例子，从清单2的结果清单9 ，意图新结构标签应清晰。

结论

新HTML5标签描述了它们包含的内容的类型，它们有助于将文档划分为逻辑部分。与作者写书的方式类似，您仍然可以决定何时以及在何处使用文档中的新标签。尽管写同一本书的两位作者可能选择将本书分为几章的不同方法，但是使用章节的行为仍然提供了将本书分为几部分的一致方法。类似地，虽然给定网页的两位作者可能会选择不同的结构，但是新HTML5结构标签提供了网页开发人员可以使用的新约定，而旧div标签则没有提供这些约定。

翻译自: https://www.ibm.com/developerworks/opensource/library/wa-html5structuraltags/index.html

html5结构标签

cuxiong8996

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5结构标签_新HTML5结构标签

什么是HTML5？ HTML5是超文本标记语言（HTML）的最新版本，是迄今为止该语言最彻底的修订。它在各个领域引入了许多新功能。一些更值得注意的补充包括：内置的音频和视频多媒体标签用于在浏览器中绘制内容的画布标签更智能的表单，可让您通过使用必填属性来执行诸如验证之类的操作有了一组新的结构标签，HTML5修改了HTML文档的结构方式。新的结构标签集中于将H...
复制链接

扫一扫

html5结构标签_新HTML5结构标签

什么是HTML5？

有点背景

支持的浏览器

新的文档类型

表1.文档类型和功能

清单1. HTML5文档类型

新的结构元素

HTML 4方法

清单2.使用div标签的简单HTML页面

HTML5方法

header标签

清单3.添加header标签

section标签

清单4.添加一个section标签

article标签

清单5.添加article标签

aside标签

清单6.添加一个aside标记

footer标签

清单7.添加footer标签

nav标签

清单8.添加一个nav标签