HTML5语义化标签详细介绍教程

最新推荐文章于 2024-09-23 23:31:48 发布

石倩蓉

最新推荐文章于 2024-09-23 23:31:48 发布

阅读量776

点赞数

分类专栏： html5

html5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

这是一个简短的介绍新的HTML 5结构元素的工作草案，和如何使用语义类的名称在HTML 4.01或XHTML1标记对应于这些结构元素的名称。通过这样做，你会开始了解如何使用新的元素也在某种程度上使用普通语义HTML标签。

一、前言
HTML5将是第一个自XHTML 1.0发布以来发布的网页标准语言，而HTML 4.01，是在1999年发布的，你可以看到HTML5的工作草案在2022年将彻底定稿，W3C HTML工作组和WHATWG已经作为代表，开放了一些借口和用法出来，各大浏览器厂商纷纷响应，声称自家的浏览器支持html5所有属性和方法，这是一个好的趋势。
HTML5中添加很多语义化的新标签，这样更容易理解网页的代码，同时也帮助搜索引擎了解网站的结构，更好的收录，同样W3C的文件也更好理解了。
二、<header>标签
<header>标签是一个网页或者一个区域内的标题,不可与以前的头部混淆，这往往只是一个标识标记，它也应该包含一个<h1>-<h6>的分层等级，它也可以包含一些元信息的网页或一段关于“最近更新”的列表，文章版本号、或者博客作者、出版日期等信息。
一个简单的例子，一个页面使用语义化class的网页网页结构：

<div class="header">
<h1>Page Title</h1>
</div>

你可以包括标志标记和其他元数据层内。博客文章下面的例子包括作者和出版日期信息（以及作为一个例子的引用区域和文章语义类名称的元素）：

<div class="section">
    <div class="article">
        <div class="header">
            <h1>Page Title</h1>
            <p>By <a href="*">Author</a> on [date]</p>
        </div>
        [Article content…]
    </div>
    <div class="article">
        [Repeat as required…]
    </div>
</div>

三、<nav>标签
<nav>元素应该包含一组导航链接，或者到其他页面，或在当前页面片段标识符。引用它的语义类的名字很简单：

<div class="nav">
    <ul>
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        [Repeat as required…]
    </ul>
</div>

四、<section>标签
<section>元素定义了一段一个页或不同的内容。它通常有一个标题和可能页脚。这是我们如何能够代表它使用语义类的名称：

<div class="section">
    <div class="header">
        <h2>Section Title</h2>
    </div>
    [Section content…]
</div>

我也一直在使用＜div class=”section”>定义一组层，是相关的（如新闻事件）。在这样的一个例子，这些小节将嵌套，每个都有自己的<h1>-<h6>在等级秩序的维护层次。比如说呢。

<div class="section">
    <div class="header">
        <h2>News and Events</h2>
        <p>The latest announcements and upcoming conferences</p>
    </div>
    <div class="section">
        <h3>News</h3>
        [Section content…]
    </div>
    <div class="section">
        <h3>Events</h3>
        [Section content…]
    </div>
</div>

每个section也可以用一个语义类的名称有一层header如果内容是必要的。
五、<article>标签
这是怎样的HTML 5工作草案的解释文章元素
“文章元素代表了一部分的网页的组成部分包括一个形成文件，网页的一个独立的部分，或网站。这可能是一个论坛，杂志或报纸上的文章，网络日志，用户提交的评论，或任何其他内容的独立项目。”
多个article元素也可以嵌套。我们看的例子，一个系列的博客文章中使用语义类的header、section这是一个独特的使用语义类的名称为例文章页标题和footer：

<body>
    <div class="article">
        <div class="header">
            <h1>Title</h1>
        </div>
        [Article content…]
        <div class="footer">
            [Footer content…]
        </div>
    </div>
</body>

六、<figure>标签
figure元素包含嵌入式媒体一样<img>和新的元素<audio> 和 <video>。它还包含一个可选的<legend>元进行标题的功能。我们的语义类别名称的版本都是这样：

<div class="figure">
    <img src="*" alt="*">
    <p class="legend">[…]</p>
</div>

七、<dialog>标签
dialog元素取代<dl>含有converations类似的成绩单。使用它作为一个语义类的名字很简单：

<dl class="dialog">
    <dt>Speaker 1</dt>
    <dd>So I said to him, I said…</dd>
    <dt>Speaker 2</dt>
    <dd>You never. You did? Oh my…</dd>
</dl>

八、<aside>标签
引用工作草案：

“除了元素代表一段一个页面，包括的内容是在一旁元素含量切相关，并可考虑从内容分离。这些部分通常表示为印刷字体的侧边栏。”

我一直在使用“aside”作为混合内容的侧边栏的类的名字，但我读的草案也表明也可能是适当的引文和主要内容部分有关的任何东西，但不是。见部分有关的INS和IMG元素为例。它会似乎是适当使用一个语义类的名字一样：

<body>
    <div class="section">
        [Section content…]
    </div>
    [Repeat sections as required for main content…]
    <div class="aside">
        [Aside content…]
    </div>
    <div class="footer">
        [Footer content…]
    </div>
</body>

九、<footer>标签
这是什么工作草案说：
“页脚元素代表的页脚区域它适用于。A页脚通常包含有关的区域如他写的，有关文件，链接资料的版权等。”
在改变元素部分HTML5的差异从HTML4这也说明，“地址元现在范围由切片的新概念。”这是很重要的，因为现在，如果你有多个区域在一个页面，每个人都可以有一个标题和一个页脚与相应的地址在页脚如果你认为有必要为每个。然而，这似乎是一个罕见的使用案例。让我们用一个更广泛的一个语义化类：一个页脚的每一页与一个单一的地址元；这是它怎么可能会使用一个语义类的名称：

<div class="footer">
  <address>[…]</address>
  [Other footer content …]
</div>

十、语义化类（class names）
让我们重温一点：利用语义类的名字，我们把信息语义增强，每一块相关的数据是独立的。然而，这可能成为一些设计师阅读这一副作用，使用这种方法的明显，并最终利用HTML 5元素本身，将名称相同的容器内的不同内容很多。<div class=”section”>比如说呢。你可能想呈现不同的内容非常不同的浏览器。多个类的名字会让你做。class=”section”可以成为class=”section news”, 或 class=”section services”.。的“节”类名称允许我们标准化的一些介绍说，字体；例如。的”news”类名称将使我们以不同的方式呈现它作为一款变体。
所以现在我们最好的两个世界；临界结构元素的默认情况下更多的语义类的名字申请我们的创造力提供hooks包含。
十一、最后
记住HTML 5是一个工作草案所以可能会有一些变化，在成为推荐。这似乎不大可能，任何新的结构元素将被删除，但在起草更新锐利的眼睛可能是一个很好的举措。
在这篇文章中的任何错误都是我自己的。如果你有过，请告诉我我会改正的。