[译]HTML&CSS Lesson2: 了解HTML
我们初步了解了HTML和CSS，现在让我们深入挖掘HTML并了解哪些元素构成了这种语言。
建设网站前，我们需要了解什么元素适合排版什么内容。这对于理解元素如何展示在页面中以及元素的语义化都有非常重要的意义。
在工作中使用适当的元素排版需要长时间的实践，但接下来的学习中我们将会合理的使用它们。
语义化概述
究竟什么是语义化呢？HTML语义化是在页面中使用恰当的元素让内容具有意义和结构。语义化编码仅针对页面的内容而不关心内容的样式。使用语义化元素有很多的好处，包括使计算机，屏幕阅读器，搜索引擎以及其他设备充分阅读和理解页面的内容。 另外，HTML语义化也更利于管理和使用，因为它非常清晰的显示了每个内容是什么。
接下来的学习中，我们会一边介绍新元素，一边讨论这些元素的实际意义和他们最能代表的内容类型。在此之前，我们先来看一下两个元素：<div>，<span>，它们没有任何语义，仅用于排版。
辨别div和span
<div>和<span>两个HTML元素都被当做容器，仅用于页面排版。作为通用的容器，它们不具备任何意义和语义。举个例子，段落的语义化元素为<p>，用<p>包裹的内容被理解为段落；但<div>和<span>就没有这样的意义，是很纯粹的容器。
块状元素与内联元素
大部分的HTML元素都可被分为块状元素或内联元素。那两者之间有什么不同呢？
块状元素会另起一行，并单独占据一整行空间。块状元素可以相互嵌套，并且可以包裹内联元素。我们常用块状元素包裹大块的内容，比如段落。
行内元素不会另起一行。它们被划分为正常的文件流，一个接着一个显示，宽度之随着内容的变化而变化。内联元素之间可以相互嵌套；但是它们不可以包裹块状元素，我们常用讲内联元素用在小块的内容上，比如几句话。
<div>和<span>在建站中都非常有价值，因为它们可以将针对性的样式作用于整组被包裹的内容上。
<div>作为块状元素，常用在大块的内容，用来帮助页面的布局和设计。<span>作为内联元素，常用在块状元素中的小块内容。
我们通常会见到的<div>和<span>元素都设置了class和id属性用于调节样式。选择class和id属性的值的时候，需要注意：我们要选择一个代表元素内容的值，而不是元素要显示的样式。
举个例子来说，我们有一个包裹了社交媒体链接(social media links)内容的<div>元素，背景色要设为橙色orange。我们第一个想到的就是将class属性值设为orange。那么如果我们接下来将橙色背景换为蓝色blue呢？这个时候orange这个属性值就不再具有意义。更明智的选择就是将class属性值设为social，它代表<div>的内容，而不是样式。
<!-- Division -->
<div class="social">
<p>I may be found on...</p>
<p>Additionally, I have a profile on...</p>
</div>
<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
上述代码中有感叹号，那不是元素，而是HTML注释
HTML和CSS都可以在代码中添加注释，注释中的内容不会被展示在页面上。注释有助于我们保持代码的有序性，允许我们设置提醒，并为我们提供了一种更有效的管理代码的方法。 注释在多人编辑一份文件的时候变得非常有用。
HTML注释格式开始于<!-- 结束于 -->， CSS注释开始于/*结束于*/。
基于文本的元素
虽然线上存在着许多不同形式的媒体和内容，但文字是主要的。于是，页面中就有了许多用于排版文字的元素。现在我们将一些更常用的元素，包括标题，段落，表示重要性的粗体和用于强调的斜体。
标题
标题都是块状元素，它们有六个等级，<h1>到<h6>。标题有助于快速分解内容并建立层次结构。它们是用户阅读页面的关键标识符。它们也有助于搜索引擎索引和分析页面的内容。
在页面中使用标题要有顺序。页面或者章节的主标题应该用<h1>元素，随后根据需要使用<h2>，<h3>，<h4>，<h5>和<h6>元素
每个等级的标题元素都应该用在适合它语义的地方，不应该单纯为了使文字加粗或变大而使用它——我们有更好的方法做到。
以下是不同等级的标题元素的示例：
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
段落
标题后常跟着段落。段落用<p>元素来定义。段落可以一个接一个，按照需要展示在页面上。以下是段落的示例：
<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>
<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up–advice which he sincerely took to heart.</p>
用strong加粗文字
加粗和强调文本，我们可以使用内联元素<strong>。我们有两个元素可以加粗文本：<strong>和<b>元素。理解它们的语义非常重要。
<strong>元素的语义是强调文本的重要性,因此它是最常用于加粗文本的元素。<b>没有特殊的语义，只是改变文本的样式，因此在突出文本重要性这个方面它不是最好的选择。我们可以根据需要选择合适的元素。
以下是用两种元素加粗文本的示例：
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>
<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
用em呈现斜体
用斜体强调文本，可以使用内联元素<em>。与加粗文本一样，也有两种元素可以设置斜体，它们也有不同的语义。
<em>的语义是强调重点文本，因此它是最常用于斜体的元素。而另一个元素<i>，语义是代替语音或者有语调的文本，类似于放在引号里。我们可以根据需要选择合适的元素。
以下是斜体示例：
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>
<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
创建结构
长时间以来，我们都用<div>来进行页面布局，但是<div>本身没有什么特殊的语义，确定这些div的作用会有些困难。 而现在HTML添加了很多新的结构化元素，包括<header>，<nav>，<article>，<section>，<aside>和<footer>元素。
这些新元素都是为了使我们的页面更具意义，提升结构语义。它们都是块状元素，并且没有默认样式。这些元素都可以在单页面中多次出现，当然要保证使用在符合他们语义的场景里。
以下是一个使用例子：
<header>元素
<header>听上去就知道是放在页面、文章的顶部。通常<header>内包含标题、介绍性文本和导航。
<header>...</header><header> VS. <head> VS. <h1>...<h6>
<header>，<head>，<h1>...<h6>很容易让人混淆。它们都有自己的语义和使用场景：
<header>元素是一个结构元素，它包裹了页面标题、介绍性文本和导航等元素。通常在<body>元素里。
<head>元素的内容不会展示在页面里，它包裹了元数据,文档标题，以及对外部文件的引用。 它直属于<html>元素。
<h1>...<h6>是标题元素，定义了多级标题，贯穿整个页面。
<nav>元素
<nav>元素用来表示页面的主导航。 <nav>应该只应用于主导航，例如全局导航，目录， 上一页/下一页，或其他值得注意的导航组。
<nav>通常包含超链接<a>用于链接网站的其他页面或模块。其他杂项的链接不应该用<nav>，它们单独使用<a>元素就可以了。
<nav>...</nav>
<article>元素
<article>元素用在独立的，分布式开发的或者可复用的模块。我们常将<article>元素用在博客，新闻，用户体检内容等类似的地方。
我们想要使用<article>时，我们需要确定若这块内容复制到其他地方，是否会导致混淆。若这块内容从页面中移除，例如在邮件或者打印中，这张页面是否依旧正常有效。
<article>...</article>
<section>元素
<section>元素用于专题组，通常(并不是所有)都会含有标题。<section>中的内容分组本质上是通用的，内容相关时非常好用。
<section>常用于分解页面，为页面建立层次。
<section>...</section>如何选用<article>，<section>和<div>元素
有时候我们很难确定 <article>，<section>和<div>中那个元素是最符合工作场景中的语义。小技巧是与选择其他语义元素一样，看内容。
<article>和<section>元素都有助于设置文档结构和画出文档轮廓。如果只是为了样式而分组，不涉及文档轮廓，那么就使用<div>。
如果内容涉及文档轮廓，并且能够被独立配置与合并，就使用<article>。
如果内容涉及文档轮廓，并且代表一个专题组，那么就使用<section>。
<aside>元素
<aside>元素常用于侧边栏、概述，这与它周围的内容切切相关。当它在<article>元素中，<aside>中可能显示与文章作者相关的信息。
我们可能本能的认为<aside>应该出现在页面的左右两侧。但我们需要记住，所有的结构化元素，包括<aside>都是块状元素，它们会另起一行，并占据嵌套它们的元素也就是父级元素的整行可用宽度。
<aside>...</aside>我们会在后面讲到怎么修改一个元素的位子，让他向左或向右布局。
<footer>元素
<footer>元素常用于页面，文章，区块或类似场景的尾部。简单的说就是<footer>元素放在父级元素的底部。<footer>元素应该显示相关的信息，不能偏离包含它的文档。
<footer>...</footer>随着我们对结构元素和文本元素的了解，我们的对HTML知识开始有了真正的了解。现在我们来重温一下 我们的样式讨论大会网站，看看是否能优化它的结构。
练习
目前我们的网站缺少真正意义上的结构，内容也是。我们需要花点时间让他充实起来。
- 打开已存在的
index.html，添加一个<header>，将已存在的<h1>元素嵌入<header>元素中；然后在<h1>元素下面再添加一个<h3>元素作为标语。
<header>
<h1>Styles Conference</h1>
<h3>August 24–26th — Chicago, IL</h3>
</header>- 接下来，我们使用
<section>元素添加一组新的内容，用以介绍我们的讨论会。先在这个区块中添加一个<h2>元素，然后将已存在的<p>元素移到<h2>元素下。
<section>
<h2>Dedicated to the Craft of Building Websites</h2>
<p>Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>
</section>- 在介绍了我们的讨论会之后，再添加一组新的内容，这其中包括好几块，例如演讲者介绍，计划表还有场地等。
我们将整组内容都包含在一个<section>中，然后将每一块也都分别包裹在一个<section>中，总的来说，有三个<section>元素创建在父级<section>中。
<section>
<section>
<h5>Speakers</h5>
<h3>World-Class Speakers</h3>
<p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
</section>
...
</section>- 最后，我们将版权信息添加在页面尾部的
<footer>元素中。同时，我们可以使用<small>元素，它的语义为附加信息和附属细则——非常适合我们的版权信息。
<footer>
<small>© Styles Conference</small>
</footer>现在我们可以看到我们的主页的内容开始丰富起来。
练习中有个有趣的现象，我们的<header>元素中的<h3>元素和<footer>元素中的<small>元素都有特殊的字符。
特殊字符包括各种标点符号，带声调的字母和标志。如果直接输入到HTML中可能会导致误解和解析错误，因此它们需要编码。
每个字符编码都由&符号起头，以分号;结尾。它们中间是具有唯一性的字符串编码，无论是名字还是数字编码
例如我们将单词"resumé"编码为resumé。上例中，我们的标题中有两种破折号编码，在页脚中有一个版权标志。这里有一个特殊字符编码的列表供参考：特殊字符编码
创建超链接
与文本一样，超链接也是互联网核心要素之一，它提供了从一个页面跳转到另一个页面或资源的能力。超链接用<a>元素建立，这是一个内联元素。为了实现从一个页面到另一个页面（或资源）的跳转，需要使用href属性，这个属性被称为超链接引用。href标识了链接的目的地。
例如，点击href属性值为 http://shayhowe.com的<a>元素的文本"Shay",页面将跳转到指定的网站。
<a href="http://shayhowe.com">Shay</a>本质上<a>元素是一个内联元素。根据互联网标准,内联元素不可以嵌套块状元素。但随着HTML5的推出，<a>元素被允许包裹块状元素，内联元素以及其他各类的元素。虽然这么做打破了标准约定，但这是为了使页面中的大块内容也可以成为链接。
相对路径和绝对路径
链接最常用的两种场景是跳转到同一网站的其他页面和跳转到其他网站。这些链接都是href属性的值，也称为路径。
链接到同一网站的其他页面会存在一个相对路径，就是href属性值不包含域名(.com，.org，.edu等)。由于链接到同一网站的页面，href属性的值只需要有目标文件的文件名例如:about.html。
如果目标页面与目前的页面不在同一目录下，href属性的值也需要反应出这一点。例如about.html在pages目录下，那么相对路径就是:pages/about.html。
链接到其他的网站则要求是绝对路径，href属性的值需要有完整的域名。例如链接到谷歌Google，那么href属性的值为http://google.com， 在这例子中路径由http开头，域名为.com
点击文本"About"将会在浏览器中打开about.html页面。点击文本"Google",将会在浏览器中打开http://google.com/ 页面。
<!-- Relative Path -->
<a href="about.html">About</a>
<!-- Absolute Path -->
<a href="http://www.google.com/">Google</a>链接到Email地址
我们偶尔也会想要链接到我们的email地址。例如文本为"Email Me"的超链接，点击后会打开用户的默认email客户端，并且预设了一部分Email内容。至少填充了Email地址，也可能会有类似于标题或者文本之类的信息。
创建一个Email链接，href属性值需要由 mailto:开头，再是email地址。例如href属性值可以这么写：mailto:shay@awesome.com。
此外，也可以填充标题，正文和其他信息。添加标题需要在email地址后添加subject=参数。email地址后的第一个参数需要以问号?开头，将其绑定到超链接地址中。若有空格需要将其编码为%20。
添加正文和添加标题一样，不过使用的是body=参数。因为我们已经绑定了一个参数，所以我们需要使用&符号将两个参数隔开。和标题一样空格使用编码字符%20,换行符使用%0A。
总而言之，链接到email地址为shay@awesome.com,标题为“Reaching Out”,正文为“How are you”的链接的href属性值设置成：mailto:shay@awesome.com?subject=Reaching%20Out&body=How%20are%20you。
代码如下：
<a href="mailto:shay@awesome.com?subject=Reaching%20Out&body=How%20are%20you">Email Me</a>在新窗口中打开链接
超链接有一个功能是确认在哪里打开链接。通常是在当前窗口打开链接；但我们也可以在新窗口打开它。
如果我们想在新窗口打开链接，需使用target属性，并将值设置为_blank。target属性确定链接在哪里打开，而_blank属性指向新窗口。
以下示例在新窗口打开http://shayhowe.com/页面：
<a href="http://shayhowe.com/" target="_blank">Shay Howe</a>链接到当前页面的其他模块
有时候我们会看到跳转到当前页面其他部分的超链接。一个本页面跳转常见的功能就是“回到顶部”。
我们可以在当前页面想要跳转到的元素上设置id属性。然后将id属性的值作为超链接元素的href的值，并以#号为前缀。
还是以“回到顶部”为例，我们在<body>元素上添加id属性，值设为top；然后将链接的href属性值设置为#top，这时候点击链接就会跳转到<body>元素顶部。
代码如下所示：
<body id="top">
...
<a href="#top">Back to top</a>
...
</body>链接非常有用，彻底改变了我们如何使用互联网。
到目前为止，我们已经学习了怎么链接到其他页面或网站，以及如何创建email链接和在当前页面跳转。接下来我们来实践一下。
练习
现在为我们的样式讨论会网站添加多个页面， 它们之间都会有相互跳转的链接。
- 我们先将
<header>元素中的<h1>元素链接到index.html页面。虽然当前页面就是index.html，添加这个链接会觉得很奇怪，但当<header>会复制到其他页面，这个链接就会返回到index.html页面了。
<h1>
<a href="index.html">Styles Conference</a>
</h1>- 为了能浏览所有的页面，我们在
<header>元素中添加一个<nav>元素作为导航。
我们将创建演讲者、计划表、地点、报名页面，他们都可以从主页中访问，所以我们要为它们增加链接。
<header>
...
<nav>
<a href="index.html">Home</a>
<a href="speakers.html">Speakers</a>
<a href="schedule.html">Schedule</a>
<a href="venue.html">Venue</a>
<a href="register.html">Register</a>
</nav>
</header>-为了方便，我们把<header>元素中的菜单导航也添加到<footer>元素中。
<footer>
...
<nav>
<a href="index.html">Home</a>
<a href="speakers.html">Speakers</a>
<a href="schedule.html">Schedule</a>
<a href="venue.html">Venue</a>
<a href="register.html">Register</a>
</nav>
</footer>- 在介绍我们讨论会的
<section>元素中，我们应该增加一个报名链接。放在介绍文字下方是很好的选择。
<section>
...
<a href="register.html">Register Now</a>
</section>
- 我们也需要在所有指向这些页面的区块上添加链接。我们用
<a>元素将每个区块的<h3>元素和<h5>元素包裹起来并添加相关页面的链接。
<section>html
<section>
<a href="speakers.html">
<h5>Speakers</h5>
<h3>World-Class Speakers</h3>
</a>
<p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
</section>
...
</section>- 现在我们需要创建一些新页面：
speakers.html，schedule.html，venue.html和register.html页面。这些页面和index.html在同一文件夹中，这样我们之前添加的链接就有效了。
为了让所有页面看起来相同，我们要确保所有的页面的结构，<header>元素和<footer>元素都与index.html这页面一致。
以下是最终结果，网站不再只有一个页面，而是一个多页面的完整的网站。
演示源代码
这是练习的源代码。点击下载
总结
我们在这节课中讨论了语义化，这对HTML的结构和意义非常重要。接下来我们也介绍了一些具有语义的HTML元素。这些元素使我们的内容更具价值。
我们这节课所学内容概括如下：
- 什么是语义化元素以及它们的重要性
-
<div>，<span>以及 块状元素和内联元素的区别 - 哪些基于文本的元素最能表现文本意义
- HTML5的结构化元素以及怎么使我们的页面具有结构和组织
- 怎么使用超链接跳转不同的页面和网站
到此，希望你对HTML有一个不错的印象。虽然还有很多知识要学，但是已经打好了基础。 接下来我们要更深入的学习CSS。
