[译]HTML&CSS Lesson2: 了解HTML

时间 2019-11-09

标签 html&css html css lesson2 lesson 了解栏目 CSS 繁體版

原文原文链接

咱们初步了解了HTML和CSS，如今让咱们深刻挖掘HTML并了解哪些元素构成了这种语言。css

建设网站前，咱们须要了解什么元素适合排版什么内容。这对于理解元素如何展现在页面中以及元素的语义化都有很是重要的意义。html

在工做中使用适当的元素排版须要长时间的实践，但接下来的学习中咱们将会合理的使用它们。web

语义化概述

究竟什么是语义化呢？HTML语义化是在页面中使用恰当的元素让内容具备意义和结构。语义化编码仅针对页面的内容而不关心内容的样式。使用语义化元素有不少的好处，包括使计算机，屏幕阅读器，搜索引擎以及其余设备充分阅读和理解页面的内容。另外，HTML语义化也更利于管理和使用，由于它很是清晰的显示了每一个内容是什么。浏览器

接下来的学习中，咱们会一边介绍新元素，一边讨论这些元素的实际意义和他们最能表明的内容类型。在此以前，咱们先来看一下两个元素：<div>，<span>，它们没有任何语义，仅用于排版。分布式

辨别div和span

<div>和<span>两个HTML元素都被当作容器，仅用于页面排版。做为通用的容器，它们不具有任何意义和语义。举个例子，段落的语义化元素为<p>，用<p>包裹的内容被理解为段落；但<div>和<span>就没有这样的意义，是很纯粹的容器。ide

块状元素与内联元素
大部分的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和CSS的注释

上述代码中有感叹号，那不是元素，而是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&ndash;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&ndash;26th &mdash; 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>&copy; Styles Conference</small>
</footer>

如今咱们能够看到咱们的主页的内容开始丰富起来。

特殊字符编码

练习中有个有趣的现象，咱们的<header>元素中的<h3>元素和<footer>元素中的<small>元素都有特殊的字符。

特殊字符包括各类标点符号，带声调的字母和标志。若是直接输入到HTML中可能会致使误解和解析错误，所以它们须要编码。

每一个字符编码都由&符号起头，以分号;结尾。它们中间是具备惟一性的字符串编码，不管是名字仍是数字编码

例如咱们将单词"resumé"编码为resum&eacute。上例中，咱们的标题中有两种破折号编码，在页脚中有一个版权标志。这里有一个特殊字符编码的列表供参考：特殊字符编码

建立超连接

与文本同样，超连接也是互联网核心要素之一，它提供了从一个页面跳转到另外一个页面或资源的能力。超连接用<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。

文章来源

http://learn.shayhowe.com/htm...

1. htmlCss----html
2. [译]HTML&CSS Lesson3: 了解CSS
3. Lesson2
4. [HeadFrist-HTMLCSS学习笔记]第一章Web语言：开始了解HTML
5. htmlCss----Day3
6. htmlCSS面试题
7. htmlCss----Day11
8. htmlCss-----Day4
9. 了解HTML(JavaWeb)
10. logic python lesson2
更多相关文章...
• Eclipse 编译项目 - Eclipse 教程
• HTML 指南 - 网站建设指南
• 三篇文章了解 TiDB 技术内幕——说存储
• 三篇文章了解 TiDB 技术内幕 —— 说计算