HTML和CSS新手指南之二——元素和语义化

本文由Yaochun根据Shay Howe的《A Beginner's Guide to HTML & CSS》第二课《Elements & Semantics》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://learn.shayhowe.com/html-css/elements-semantics，以及作者相关信息

作者：Shay Howe

译者：Yaochun

HTML和CSS的基本理解之后，是时候应该深入地探究一下，去看看这两个语言的元素和语义化。

在开始制作web页面之前，你需要了解一些——比如哪些HTML元素是用来展示不同类型内容的。你同样想知道这些不同的元素怎样工作。确保实现你需要的效果

此外，一旦你开始编码，你希望确认你正在做的是不是语义化的。编写语义化的代码包括：让你的代码有条理的，做一些有远见的决定。

这节课程涵盖的内容：

HTML部分

• 语义概述
• Div和Span
• 排版
• 超链接
• HTML5元素

CSS部分

• 不要重复你自己

语义概述

到现在为止，语义化被提过很多次，那到底什么才是语义化？在HTML里面的语义化是让页面的内容更有意义和结构化。页面上这些，不是单独地使用样式为目的的。使用语义化的代码提供大量的收益，包括：给电脑、屏幕阅读器、搜索引擎和其他设备更好的阅读和理解网页。此外，语义化的代码更容易管理和协作。很清楚地知道内容的每一个部分是关于什么的。

Div和Span

div和span都是HTML元素，它们可以作为各种内容的容器。作为一个通用型的容器，它们不带有任何的意义、不带有语义化的值。也许当内容被p元素包裹起来会有语义化，因为大家都知道p代表段落。Div和span不具有这样的意义，而只是简单的容器。Div和span不管怎样，在构建网站的时候，都是极其有价值的——你可以给它引用相关的样式规则。

Div是块级元素，通常用来定义网站的大的区域，帮助建立布局和设计。Span是行内元素，通常被用来定义一个行内元素内部的小的字体部分，就像段落。

块元素与行内元素对比

元素主要包括块元素和行内元素，以及行内块元素等，那么块元素和行内元素有什么区别呢？

页面上的块级元素重启新的一行，并且占据整个可用的宽度。块级元素可能嵌套在其他元素里面，同样也可以包裹行内元素。

行内元素不会重启新的一行，而是在文档的正常流里面，保持它们必要的宽度。行内元素不能嵌套一个块级元素，但是可以嵌套其他行内元素。

Div和span当它们有class或者id的时候可以给其赋值。一个class或者id典型的目的都是增加样式、区别其他的div或者span。选择一个class或者id的时候也体现语义化。当选择一个class或者id属性值的时候，很重要的一点：选择一些与那个元素真实的上下文相关的值。

比如，你有一个橙色背景的div，他包含社交媒体链接，此时你的第一反应，可能给这个div一个class为orange。如果后面橙色变成蓝色咋办呢？有一个class为orange变得不再有意义。一种更好的，更语义化的：class选择为social——它与div的内容有关系，而不是样式。

<!-- div -->
<div class="social">
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<!-- span -->
<p>Lorem ipsum dolor sit amet, <span class="tooltip">consectetur</span> elit.</p>

排版

大量的线上内容完全是基于文本的。大量不同的媒体形式和内容存在线上，不管怎样，文本统治着多数。在web页面中，HTML里面有大量的不同元素来展示文本。在这课里，我们关注最流行的，更有语义化的元素。想要查看更多的概述，可以查看排版这课。

标题

标题是块级元素，有6种不同的等级，从h1到h6，他们是给用户浏览页面的时候的关键标签。标题帮助快速地给内容分段、提供层级。它们也用来帮助搜索引擎做索引和决定一个页面的内容的权重

标题应该按照内容有关的顺序来用。页面或者区域的主标题应该用h1，如果有必要的话：副标题应该用h2。标题真正的作用是用来更好的分类，而不是用来给文字加粗或者变大。

<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>	

效果：

段落

标题一般后面紧跟着段落。段落是用块标签P来定义。很多的段落可以一个挨着一个，给页面增加信息。

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>	

效果：

用strong给文本加粗

为了让文本加粗来标示它的重要性，可以用strong这个内联元素。理解strong和b之间的语义化差异是非常重要的，这两个都是可以加粗文字。Strong语义化地被用来标示文本有很强的重要性，就像大多数例子中我们想要给文字加粗。b可以让文本加粗，这并不是用来突出文本的最好理由。评估你查看的文字的重要性，以此设置加粗和选择相符的元素。

<p>Duis in <strong>voluptate</strong> velit esse cillum.</p>	

效果：

使用斜体文本

em这个内联元素是用来设置文字斜体，以此起到强调作用。与strong一样，有两种不同的标签可以用来实现文本斜体效果，每一种都有自己不同的语义化含义。em给文字一种重要的强调，因此也是使文字斜体最流行的一种方式。另一个就是i，它使文字以一种交替的音符的语义化展示出来。

同样，你需要评估你想要斜体的文字的重要性，选择相符的元素。

<p>Quae ars <em>putanda</em> est, expeteretur si nih.</p>	

效果：

超链接

Web页面有一个核心元素就是超链接，可以用来创建锚点。超链接可以用内联元素a来定义，但是它需要一个指向某个链接的来源。href属性——所谓的超链接引用，是用来设置链接的目的地。

一般情况下a标签式一个内联元素，但是在HTML5的介绍中，a元素现在可以包裹块级元素或者内联元素。这个虽然打破了正常的惯例，但是允许将页面上全部的内容块变成一个链接。

<a href="https://www.fedev.cn">W3cplus</a>	

效果

W3cplus

相对路径和绝对路径

最常见的两种链接类型是链接到其他页面或者链接到其他站点。他们都是通过它们的路径来标识的，就是他们href属性的值

链接到同一站点的其他页面应该有一个相对地址，href属性的值不包含域。因此链接到同一站点的其他页面的href属性的值只需要包括被链接的页面，比如以“/about.html为例”。href属性的值与这个链接过去的页面与当前页面的子目录关系。比如说about.html属于pages这个目录下面，那这个相对的地址就是/pages/about.html.

链接到其他外部站点的需要一个绝对地址。href属性的值必须包含完整的域。链接到Google就需要href属性的值等于http://google.com,以http开始，包含域，以.com结束。

<!-- 相对路径 -->
<a href="/about.html">About</a>
<!-- 绝对路径 -->
<a href="http://www.google.com/">Google</a>	

链接到一个邮件地址

偶尔，你会遇到一个指向邮箱地址的链接。当它被点击的时候，链接默认打开邮件客户端，填入一些信息。最低限度下，信息要被发送到的邮箱地址会被填入，但是，其他比如主题还有主体内容也可以被填入。

创建一个邮件链接的话，href属性的值需要以mailto:开始，接着是你想要发送的邮件地址。为了创建一个链接到shay@awesome.com的链接，需要设置href的值为mailto:shay@awesome.com。

此外，邮件的主题和主体内容也可以被添加。要加主题的话可以在邮件地址后面加上subject= parameter。多个主题的关键字需要把空格隔开，而且空格需要转义成%20。添加主体内容和添加主题类似，在href属性的值里面用body= parameter。同样需要空格转义成%20，而且转行也必须转义成%0A。

总而言之，链接到shay@awesome.com，而且带有“Still Awesome”的主题还有“This is awesome”这样的主体内容的应该这样：mailto:shay@ awesome.com? subject=Still%20Awesome&body= This%20is%20awesome。请注意：第一个参数需要用？绑在邮箱地址后面，然后添加其他的参数需要用&来分隔前面的参数。

想知道创建邮件链接的更多的信息，包括如何增加多个邮件地址和cc还有bcc这些参数，可以看Joost de Valk 指南,里面有完整的mailto 链接的语法。

<a href="mailto:w3cplus@hotmail.com?subject=Still%20Awesome&body=This%20is%20awesome">Email Me

效果：

Email Me

新窗打开链接

超链接有一个特性，当它被点击的时候，能够决定在哪打开链接。一般的链接在它们点击的时候在同一窗口打开，当然也可以在新窗口打开。为了能在新窗口打开，目标链接的属性target需要设置为_blank。这个target属性决定链接指向哪里，_blank是指向一个新的窗口。

<a href="https://www.fedev.cn" target="_blank">W3cplus</a>	

效果

W3cplus

在同一页面链接到某些元素

偶尔你会看到一些链接指向同一页面的其他部分。本课程页面的引导部分，“In this Lesson”部分就是链接到页面的适当的部分。可能会发现线上很多的“Back to Top”，它们都是让用户返回到页面的顶部。

在你想要链接到的元素上定义一个ID可以实现创建一个页面指向的链接。这样，用那个元素的ID作为链接的href属性的值。举例，给body元素加一个id为main的值，这样你可以设置href的值为#main来链接到页面的头部。

<a href="#awesome">Awesome</a>
<div id="awesome">Awesome Section</div>	

效果

Awesome

HTML5元素

HTML5提供小部分的新元素，这些都是关注于提高语义化。在以前，如果你想要定义页面的一个块级部分你会用一个div。有了HTML5，你可以有部分的新的块级元素来帮助你编写更语义化的代码。

上图是新的HTML5结构元素大纲。

头部（header）

头部就像它叫的一样，是用来定义一个页面、文章、区块的头部。一般情况下，一个头部包含一个标题，描述的文本，或者导航。你可以再一个页面用多个头部。基于网站，你很自然地在页面的开始部分设置一个头部。补充一下，如果有必要的话，头部可以出现在article或者section的头部。

<header>...</header>	

澄清header元素

header元素不要和head、h1到h6标题混淆。header元素是一个结构元素，概述页面中的头部，他是属性body中的一部分。header元素不在页面中显示，也不包括meta数据 、文档标题（title），或链接到外部的文件（link）。

导航(nav)

nav是一个块级元素，用来表示页面上一个主要导航的链接块。不是所有的链接都需要被nav元素包裹。nav主要用来包裹主导航、面包屑、前后链接以及其他显著的链接组。

包裹在nav元素里面的大部分常见的链接将会链接到同一站点的其他部分或者其他网站页面。混杂的链接不应该被nav元素包裹，应该只用a标签

<nav>
  <ul>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
  </ul>
</nav>	

文章（Article）

article这个块级元素和div或者section都很像，但是它用来定义元素—它应该包含独立、自足的内容，而且应该是可分配的或者可重用的。大部分article会作为发布的内容块出现在博客或者其他发布性的站点。决定是否用article元素,取决于元素里面的内容是否可以毫无混淆地被复制到其他任何地方。Article里面的内容必须有意义，而且能够被分类到别处，就像RSS feed.

<article>...</article>	

区域（section）

相比article而言，section更可能与div混淆。作为一个块级元素，section是用来定义类似文档或应用程序的section。section和div的区别在于section不是被用来便于样式或者脚本的目的。

那就是说：你可以给section添加样式，但是你不能用section只是因为添加单独的样式这样的目的。把section保留着存储页面大部分的有用的元素。

<section>...</section>		

决定何时使用section或div

确定何时使用section还是div，最好的方法是看手头的实际内容。如果这块内容可能存在是作为记录在数据库中的一个记录或者不明确需求，只是做为CSS的一个钩子，那么使用section是比较适合。section常用于分割页面，提供一个层次自然的结构，最常见的是里面会包含一个header。

一个div另一方面可以为一个区块设置样式，例如，在一个页面中如果有几段内容要特别突出，也其他的内容区别开，那么就应该用一个div把他们包在一起，然后使用合适的样式用到这个div上，比如背景、边框或相似的样式。

边栏(aside)

伴随着header和footer这两个元素，还有一个也是块级元素的aside。 aside定义和文档相关的或者section围绕着它。和header元素还有footer元素一样，aside也可以再每一个页面使用多次，只要每一次都是实用的。

请记住，aside是一个块级元素，它将会出现在新的一行，占据页面或者任何容器的整个宽度。如果你想要出现在一个块级内容的左边或者右边，你将需要让aside元素浮动起来。现在别担心浮动，我们将在后面的课程里面学习浮动和内容定位。

<aside>...</aside>	

页脚（footer）

Footer和header一样，但是它是在页面、article、section或者页面其他部分的底部。Footer 不能脱离文档或者远离section，它的上下文应该包含相关的信息。

<footer>...</footer>	

不要重复你自己

总的开发原则是DRY，也称为不重复自己。在CSS中很容易，不断写同样的样式。CSS设计方式，使用类名来制作你的样式，这样你就很容易应用固有的风格。最终的目标就是编写干净的代码和轻量级代码，让你的代码更具语义也更便于管理。

扩展阅读：

1. Semantic code: What? Why? How?
2. HTML5 Doctor
3. The i, b, em, & strong Elements
4. The Full mailto Link Syntax
5. New Structural Elements in HTML5

上一课下一课

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Yaochun

“以兴趣做前端这个事业”. My faith: focus being a FE repository.有一个记录自己成长过程的博客“Focus fe”。“冲浪摆渡人“俱乐部一员。目前就职新浪—高级RIA，专攻移动前端开发中。学习—积累—分享，其实也是一个感恩回馈的方式，欢迎观注我：新浪微博。

如需转载烦请注明出处：

英文原文：http://learn.shayhowe.com/html-css/elements-semantics

中文译文：https://www.fedev.cn/css/beginner-html-css-lesson1-elements-semantics.html