[譯]HTML&CSS Lesson2: 瞭解HTML

龍貓貓發表於2017-07-28
HTMLCSS

我們初步瞭解了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和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>

clipboard.png

段落

標題後常跟著段落。段落用<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>

clipboard.png

用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>

clipboard.png

用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>

clipboard.png

建立結構

長時間以來，我們都用<div>來進行頁面佈局，但是<div>本身沒有什麼特殊的語義，確定這些div的作用會有些困難。 而現在HTML新增了很多新的結構化元素，包括<header>，<nav>，<article>，<section>，<aside>和<footer>元素。

這些新元素都是為了使我們的頁面更具意義，提升結構語義。它們都是塊狀元素，並且沒有預設樣式。這些元素都可以在單頁面中多次出現，當然要保證使用在符合他們語義的場景裡。

以下是一個使用例子：
clipboard.png

<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>

現在我們可以看到我們的主頁的內容開始豐富起來。

clipboard.png

特殊字元編碼

練習中有個有趣的現象，我們的<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這頁面一致。

以下是最終結果，網站不再只有一個頁面，而是一個多頁面的完整的網站。

clipboard.png

演示原始碼

這是練習的原始碼。點選下載

總結

我們在這節課中討論了語義化，這對HTML的結構和意義非常重要。接下來我們也介紹了一些具有語義的HTML元素。這些元素使我們的內容更具價值。

我們這節課所學內容概括如下：

  • 什麼是語義化元素以及它們的重要性
  • <div>，<span> 以及 塊狀元素和內聯元素的區別
  • 哪些基於文字的元素最能表現文字意義
  • HTML5的結構化元素以及怎麼使我們的頁面具有結構和組織
  • 怎麼使用超連結跳轉不同的頁面和網站

到此，希望你對HTML有一個不錯的印象。雖然還有很多知識要學，但是已經打好了基礎。 接下來我們要更深入的學習CSS。

文章來源

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

相關文章