當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

[译]HTMLCSS Lesson2: 了解HTML

發布時間：2025/3/21 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 [译]HTMLCSS 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>的內容，而不是樣式。

<div class="social"><p>I may be found on...</p><p>Additionally, I have a profile on...</p> </div> <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>復制代碼

img

段落

標題后常跟著段落。段落用<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>復制代碼

img

用strong加粗文字

加粗和強調文本，我們可以使用內聯元素<strong>。我們有兩個元素可以加粗文本：<strong>和<b>元素。理解它們的語義非常重要。

<strong>元素的語義是強調文本的重要性,因此它是最常用于加粗文本的元素。<b>沒有特殊的語義，只是改變文本的樣式，因此在突出文本重要性這個方面它不是最好的選擇。我們可以根據需要選擇合適的元素。

以下是用兩種元素加粗文本的示例：

<p><strong>Caution:</strong> Falling rocks.</p> <p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>復制代碼

img

用em呈現斜體

用斜體強調文本，可以使用內聯元素<em>。與加粗文本一樣，也有兩種元素可以設置斜體，它們也有不同的語義。

<em>的語義是強調重點文本，因此它是最常用于斜體的元素。而另一個元素<i>，語義是代替語音或者有語調的文本，類似于放在引號里。我們可以根據需要選擇合適的元素。

以下是斜體示例：

<p>I <em>love</em> Chicago!</p> <p>The name <i>Shay</i> means a gift.</p>復制代碼

img

創建結構

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

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

以下是一個使用例子：

img

<header>元素

<header>聽上去就知道是放在頁面、文章的頂部。通常<header>內包含標題、介紹性文本和導航。

<header>...</header>復制代碼

<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>復制代碼

隨著我們對結構元素和文本元素的了解，我們的對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>復制代碼

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

img

特殊字符編碼

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

<a href="about.html">About</a> <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><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這頁面一致。

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

img