[譯]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這頁面一致。

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