2.4 HTML 语义学

最新推荐文章于 2024-06-07 18:11:32 发布

Amnesia Greens

最新推荐文章于 2024-06-07 18:11:32 发布

阅读量101

点赞数

分类专栏：网络编程

原文链接：https://marksheet.io/html-semantics.html

版权

网络编程专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML是关于意义的。
HTML标签的目的是向文档传递意义。不要在意你的网页看起来如何。专注于你要使用的每个标签的意义。
根据你所写的内容，你可以选择与文本意义相匹配的合适元素。
这个元素的范围足够大，既可以容纳一般的内容（如段落或列表），也可以容纳更具体的内容，如<output>（显示计算结果）或<progress>（显示任务进度）。

源网页： 2.5 HTML Semantics——HTML is about meaning

1. 结构元素：组织你的页面

结构元素允许你组织你的页面的主要部分。它们通常包含了其他HTML元素。

下面是一个典型的网页可以包含的内容。

<header>作为页面的第一个元素，可以包括标志和标语。
<nav>作为链接列表，链接到网站的不同页面。
<h1>作为页面的标题。
<article>作为页面的主要内容，像博客文章一样。
<footer>作为页面的最后一个元素，位于页面的底部。

2. 文本元素：定义你的内容

在这些结构元素里面，你通常会发现文字元素是为了定义你的内容的样式（原文Purpose）。
你将主要使用:

<p>用于指示段落
<ul>用于（无序的）列表
<ol>为（有序）列表
<li>用于单个列表项目
<blockquote>为引号

3. 内嵌元素：区分你的文字

因为文本元素可能很长，但内容却多种多样，所以内嵌式元素可以区分你的文本的各个部分。
有很多可用的内嵌式元素，但你通常会遇到以下几种：

<strong>用于强调
<em>为强调
<a>为链接
<small>为不太重要的词
<abbr>为W3C等缩写

只要阅读这段HTML代码，你就可以很容易理解每个HTML元素的含义。

<article>
  <h1>页面的主要标题</h1>
  <h2>副标题</h2>
  <p>
    东西的东西和一些<em>强调</em>，甚至是<strong>重要的</strong>词。
  </p>
  <p>
    又是一段。
  </p>
  <ul>
    <li>一</li>
    <li>两</li>
    <li>三</li>
  </ul>
  <blockquote>
    曾经说过
  </blockquote>
</article>
<aside>
  <h3>我的最新文章</h3>
  <ul>
    <li><a href="#">一</a></li>
    <li><a href="#">一</a></li>
    <li><a href="#">一</a></li>
  </ul>
</aside>