HTML 基礎(chǔ)- 4個實例

本章介紹了 HTML 中較為常用的基礎(chǔ)標簽的實例以及 HTML 基礎(chǔ)知識。您可能還沒接觸過這些實例，不過不用擔心，閱讀完本章您就能夠掌握它們了！ 1

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的梅里斯網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

HTML 標題

HTML 標題（Heading）是通過 

-

 標簽來定義的.

h是英文header標題的縮寫，標題無處不在，它的應(yīng)用范圍十分廣泛：網(wǎng)站結(jié)構(gòu)、寫作文、PPT 等。

這里有六個標題元素標簽 —— 

、

 、

、

、

、

，每個元素代表文檔中不同級別的內(nèi)容：

 

 表示主標題（ the main heading ），

 表示二級子標題（ subheadings ），

表示三級子標題（ sub-subheadings ），

、

、

字體的大小依次遞減。

實例

 

這是標題1

 

這是標題2

 

這是標題3

 

這是標題4

 

這是標題5

 

這是標題6

嘗試一下 ?

你也可以通過實戰(zhàn)實驗來嘗試挑戰(zhàn)一個 h2 標題的設(shè)置：

HTML標題實戰(zhàn)實驗

HTML 段落

---

HTML 段落是通過標簽

來定義的，P是英文paragraph段落的縮寫，經(jīng)常被用來創(chuàng)建一個段落，就和你寫作文一樣，您可以進行實戰(zhàn)演練。

實例

這是一個段落。

這是另外一個段落。

嘗試一下 ?

 

下面這個實例講述了標題和段落的結(jié)構(gòu)層次：

實例

三國演義

羅貫中

第一回 宴桃園豪杰三結(jié)義 斬黃巾英雄首立功

話說天下大勢，分久必合，合久必分。

第二回 張翼德怒鞭督郵 何國舅謀誅宦豎

且說董卓字仲穎

卻說張飛

卻說張飛飲了數(shù)杯悶酒

嘗試一下 ?

上述實例所涉及的元素具體代表什么，完全取決于作者編輯的內(nèi)容，只要確保層次結(jié)構(gòu)是合理的。在創(chuàng)建此類結(jié)構(gòu)時，您只需要記住以下幾點：

• 首先，您應(yīng)該只對每個頁面使用一次

  ，這是主標題，所有其他標題位于層次結(jié)構(gòu)中的下方。

• 其次，請確保在層次結(jié)構(gòu)中以正確的順序使用標題。不要使用

  來表示副標題，后面跟

  來表示副副標題，這是沒有意義的，會導致奇怪的結(jié)果。

• 最后，在可用的六個標題級別中，您應(yīng)該保證每個頁面中標題級別的使用不超過三個，除非您認為有必要使用更多。具有許多標題級別的文檔會變得難以操作并且難以導航。在這種情況下，如果可能，建議將內(nèi)容分散在多個頁面上。 

HTML 中的空格

在代碼中可能包含了很多的空格——這是沒有必要的

下面的兩個代碼片段是等價的：

實例

狗 狗 很 呆 萌。

狗 狗        很

       呆 萌。

嘗試一下 ? 無論你用了多少空格（包括空格字符，包括換行），當渲染這些代碼的時候，HTML 解釋器會將連續(xù)出現(xiàn)的空格字符減少為一個單獨的空格符。

為什么我們會使用那么多的空格呢?

答案就是為了可讀性——如果你的代碼被很好地進行格式化，那么就很容易理解你的代碼，反之就會很混亂。在我們的 HTML 代碼中，我們讓每一個嵌套的元素以兩個空格縮進。

你使用什么風格來格式化你的代碼取決于你（比如所對于每層縮進使用多少個空格），但是記住你應(yīng)該堅持使用某種風格。

HTML 鏈接

HTML 鏈接是通過標簽來定義的。a標簽，也叫anchor（錨點）元素，既可以用來鏈接到外部地址實現(xiàn)頁面跳轉(zhuǎn)功能，也可以鏈接到當前頁面的某部分實現(xiàn)內(nèi)部導航功能。

實例

這是一個鏈接

嘗試一下 ?

 提示：在href屬性中指定鏈接的地址。

 (您將在本教程稍后的章節(jié)中學習更多有關(guān)屬性的知識)

 HTML鏈接實戰(zhàn)測驗

HTML 圖像

HTML 圖像是通過標簽來定義的。使用img元素來為你的網(wǎng)站添加圖片，使用src 屬性指向一個圖片的具體地址。

舉例如下：

請注意：img元素是自關(guān)閉元素，不需要結(jié)束標記。

實例

嘗試一下 ?

注意： 圖像的名稱和尺寸是以屬性的形式提供的。

HTML 圖像實戰(zhàn)測驗

HTML 強調(diào)

在人類語言中，為了突出一句話的意思，我們通常強調(diào)某些詞，并且我們通常想要標記某些詞作為重點或者表示某種程度上的不同。HTML 提供了許多語義化的元素，并且允許我們通過這些元素的意義標記正文內(nèi)容，在這個章節(jié)中，我們將看到最常見的一小部分元素。

在 HTML 中我們可以使用em（emphasis）元素來標記這樣的情況，瀏覽器默認風格為斜體：

實例

我 很高興你不 討厭我.

嘗試一下 ?

在 HTML 中我們還可以使用(strong importance)元素來標記這樣的請況，瀏覽器默認風格為粗體：

實例

這種液體是高毒性的.

我就指望你不會 遲到!

嘗試一下 ?

注意：為了不同的字體風格，我們應(yīng)該使用元素和一些 CSS 的樣式.