65.9K
CodeProject 正在变化。 阅读更多。
Home

HTML5 语义和良好的编码实践

Aniket Pant
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.33/5 (5投票s)

2011 年 12 月 1 日

CPL

8分钟阅读

viewsIcon

23628

downloadIcon

2

关于 HTML5 语义以及如何更好地编码的简要介绍。

引言

邪恶的人在他们的页面上几乎给每个元素都加上了 ID，使得一切都变得僵化和丑陋。更糟糕的是，前端代码几乎没有任何语义结构。
幸运的是，HTML5 终结了许多这种“邪恶”。至少它是这样尝试的。让我们来谈谈 HTML5 的新特性以及它们为何更有意义。

Doctype

让我们从注释的开头开始

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

DOCTYPE 还能有什么比这个更简单！

<!DOCTYPE html>

章节的改变

阅读这篇 Smashing Magazine 上关于 文档大纲算法 的精彩文章。
它将帮助你理解使用标题和 hgroup 元素的重要性，并将文章用一个类，如“post”，来包裹起来。
之后，你可以使用 hgroup 来组合你的标题，创建一个与你编写和展示方式实际相关的大纲。hgroup 就像是你的标题（从 h1 到 h6）的包装器。你可以在 hgroup 中列出这些标题，根据标题、副标题等进行排序。

使用 hgroup 的目的是创建一个有效的文档大纲。几乎所有（理智的）前端开发者都使用类似的 ID 和类，具有相同的逻辑。

<div class="header">
<div class="navigation">
<div class="footer">

……以此类推。
我们有 header、footer、nav、article、section 和 aside 等标签，它们为你的代码带来了清晰度，并使其更加合理。拥有像这些更有意义的标签来构建你的内容，难道不简单吗？

标题

你可以根据需要，在页面上的任何位置多次使用 header。通常，它用于包裹一个 hgroup、一些标题或相关内容，如目录或类似的东西。

你可能已经习惯看到这样的东西

<div id="header">

header 是对这一切的替代。

页脚

这个 footer 类似于 header。替换你的……

<div id="footer">

……用一个简单的 footer 标签。你可以根据需要多次使用它！

Nav

你可以在 nav 元素中将你的链接分组。这是我们现在编写代码的方式

<div id="main-nav" class="navigation">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="https://codeproject.org.cn/about/">About</a></li>
        <li><a href="https://codeproject.org.cn/blog/">Blog</a></li>
    </ul>
</div>

将你的原始代码改为这样

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="https://codeproject.org.cn/about/">About</a></li>
        <li><a href="https://codeproject.org.cn/blog/">Blog</a></li>
    </ul>
</nav>

Article 和 Section

规范定义 section 为

section 元素代表文档或应用程序的一个通用部分。在此上下文中，一个 section 是内容的主题分组，通常带有标题。
当使用 article 元素比使用 section 元素更有意义时，鼓励作者使用 article 元素。

下一行使 section 的使用更加清晰。

section 的例子包括章节、标签对话框中的各个标签页，或论文的编号部分。一个网站的主页可以被分成 section，用于介绍、新闻项目和联系信息。
注意：section 元素不应用于样式。应优先使用 div。
Louis Lazaris（Impressive Webs）关于 何时使用 HTML5 “section” 元素 的一篇文章非常棒。
你可以从 HTML5 Doctor 阅读关于 article 元素的内容。

题外话

根据我阅读和理解的关于 aside 的内容，它可以用来关联被包含元素的内容。
例如，如果一个 aside 包含在一个 article 中，这意味着 aside 的内容与 article 相关，但与页面无关。而如果 aside 在 article 外面，那么它意味着它与 article 的相关性不那么紧密，而是与页面相关。

地址

新元素还增加了一个 address 标签！是的，我们有了一个 address 标签。想象一下，现在你可以通过查看这个简单的标签，更轻松地从网页中获取地址。

示例

这是一个例子。

  • 你的一个简单的博客文章。将文章的标题和文章信息放在 header 中。
  • 继续实际的文章内容，并放在 article 中。将标签和也许一个“推特我的文章”的链接放在 footer 中。
  • 这些简单的标签使事情更具逻辑性，不像早期使用像“header”和“footer”这样的 ID 来完成任务。

分组

引入了一个 figure 标签来放置你的图片和其他插图。到目前为止，我们通过创建 div 或关联不同的类来实现这一点，但很快我们将开始用 figure 元素来包裹它们。

<figure>
    <!-- Your image here -->
    <figcaption></figcaption>
</figure>

看看我制作的这个 fiddle，用来演示它的用法！

表单

Form 元素是 HTML5 中改动最大的部分。
我们有了 placeholder！是的，现在有了 placeholder，以前我们用 JavaScript 来实现。那么，如何使用 placeholder 呢？嗯，就像吃奶酪一样简单！
只需在你的 input 元素中包含 placeholder 和你需要的文本。

<input name="user-name" type="email" 
placeholder="Your username is your email address">

除此之外，我们还有 keygen。
草案说：

keygen 元素代表一个密钥对生成器控件。当提交控件的表单时，private 密钥将被存储在本地 keystore 中，而 public 密钥将被打包并发送到服务器。

我认为这将有助于通过验证来提高安全性。我需要更多地研究它！根据 草案，output 元素代表计算的结果。
请看下面的代码

<form name="main">
    Result: <output name="result"></output>
    <script>
        document.forms.main.elements.result.value = 'Hello World';
    </script>
</form>

我想，现在你已经理解了这个元素的逻辑。你可以操纵它来相应地改变事物，并以更有条理的方式显示结果。
除了上述元素之外，我们还有 progress 和 meter。
progress 元素可以用来创建一个进度条。值可以使用 JavaScript 轻松更改和更新，并可用于在表单和其他基于步骤的过程中拥有进度条。
Meter 元素在功能上并没有什么了不起，但它为你的代码带来了逻辑。

糟糕的代码

<section>
    My height is 5 feet and 10 inches.
</section>

好的代码

<section>
    My height is
    <dl>
        <dt>Feet: <dd> <meter min=0 max=7 value=5>5ft</meter>
        <dt>Inches: <dd> <meter min=0 max=12 value=11>11in</meter>
    </dl>
</section>

你可以很容易地理解这一切的含义。比以前更好，对吧？

交互式元素

这个类别下的元素是……等等……

  • 详细说明
  • 摘要
  • 命令
  • Menu

坦白说，我没有使用 details 元素，但我以前看到过一个例子，它非常酷！它就像一个迷你手风琴。目前，你可以在 webkit 浏览器中使用它。在 Mozilla 中不起作用。很快就会在 Opera 中可用。所以，details 的作用是你可以轻松地折叠元素。
它的代码是这样的

<details>
    <summary>Show/Hide me</summary>
    <p>Hello! I am a paragraph element inside a details tag.</p>
</details>

它会看起来像这样，在摘要文本前面有一个简单的箭头，当你点击箭头时，你将看到段落文本。这是 details 元素的 演示。
另一个带有可折叠目录的 好例子。
menu 元素看起来非常有趣。
context 菜单类型允许元素代表上下文菜单的命令。用户只有在激活该上下文菜单时才能与命令进行交互。
如果该属性处于工具栏状态，那么该元素将代表一系列用户可以立即交互的活动命令。
在列表状态属性的情况下，该元素将代表一个无序列表（每个列表项由一个 li 元素表示），其中每个列表项代表一个用户可以执行或激活的命令。

可嵌入元素

刚出炉的，我们有这 6 个东西。Canvas、area、map、audio、video 和 track。
每个人都非常熟悉 Canvas。canvas 可以用于任何事情。用它来构建游戏、渲染图表或处理图像。
你用这个漂亮的小 canvas 都能做什么？

  • 绘制形状
  • 填充颜色
  • 创建漂亮的渐变和图案
  • 渲染文本
  • 从其他 canvas 获取帧
  • 处理像素
  • 将你的 canvas 导出为文件

关于如何与 canvas 交互，已经有很多演示和其他文章了。它是 HTML5 中最受欢迎的引入之一。
接下来是 map 和 area 元素。它们可以用来将像素坐标关联到任何图像或媒体上的另一个元素。
HTML5 Doctor 的一个好例子是这个

<h1>Clothing</h1>
    <section>
    <img src=https://codeproject.org.cn/images/menu.gif 
    alt="Select a department to go to its page." usemap="#nav">
</section>
<footer>
    <map name="nav">
        <p>
            <a href="https://codeproject.org.cn/women/">Women</a>
            <area alt="Women" coords="0,0,100,50" 
        href="https://codeproject.org.cn/women/"> |
            <a href="https://codeproject.org.cn/men/">Men</a>
            <area ALT="Men" coords="0,0,100,50" 
        href="https://codeproject.org.cn/men/"> |
            <a HREF="https://codeproject.org.cn/kids/">Kids</a>
            <area alt="Food" coords="0,0,100,50" 
        href="https://codeproject.org.cn/kids/"> |
        </p>
    </map>
</footer>

看起来很有用！
这些是最好的。
看看这段用于嵌入 YouTube 视频的糟糕的 HTML 代码！

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
    swflash.cab#version=6,0,40,0">
    <param name="allowFullScreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
    <param name="allowfullscreen" value="true" />
    <embed type="application/x-shockwave-flash" width="425" height="344" 
    src=http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1& 
    allowscriptaccess="always" allowfullscreen="true">
    </embed>
</object>

连看它写了什么都不想看。
让我们用 HTML5 的方式来做。

<video width="640"  height="360" 
    src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
    <p> Try this page in Safari  4! 
Or you can <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a> 
instead.</p>
</video>

哦，这太整洁了！（你是不是这样说的？）你甚至可以在 video 标签中添加 autoplay，你知道这意味着什么。
track 元素可以与 video 一起使用，你将能够链接外部文件到你的视频。它的代码很容易理解。
示例

<track kind=subtitles src=abc.vtt srclang=en label="English">

它还有其他的“kind”，如字幕、说明、描述、章节和元数据。
视频完了，该听听音频了。
audio 标签定义了 5 个属性。

  • src
  • autoplay
  • loop
  • controls
  • preload

示例

<audio controls preload="auto" autobuffer>
    <source src="track.mp3" />
    <source src="track.ogg" />
</audio>

这使得音频控件能够启用，并提前加载文件。
目前，对文件类型的支持因浏览器而异。

在 HTML5 Doctor 上阅读更多内容 - 浏览器中的原生音频。

最后的总结

新引入的元素比我们以前的更有效。至少，作为一个热爱编程的人，我是这么认为的。对于前端人员来说，其中一些改变不会产生影响，比如 map、area、address 等。这些细微之处在结果上并没有太大区别。按照你想要的方式编写你的页面。但是，如果有人不看结果而检查你的代码，他就能因为这些细微之处而分辨出不同。

资源

  1. Canvas 渐变
  2. 加载演示
  3. 你可以通过 HTML5 演示 了解更多关于这些伟大技术的功能。
  4. HTML5 Doctor 非常适合定义和很好地解释各种元素。

致谢

上面提到的一些例子受到了草案和 HTML5 Doctor 的启发和引用。

简要说明

我只包含了那些我认为能带来更多清晰度并使代码具有语义的更改。
如果你在 HN 上，请点赞。这是 讨论链接。

© . All rights reserved.