HTML 基礎(chǔ)- 4個(gè)實(shí)例

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

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

HTML 標(biāo)題

HTML 標(biāo)題（Heading）是通過 

-

 標(biāo)簽來定義的.

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

這里有六個(gè)標(biāo)題元素標(biāo)簽 —— 

、

 、

、

、

、

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

 

 表示主標(biāo)題（ the main heading ），

 表示二級(jí)子標(biāo)題（ subheadings ），

表示三級(jí)子標(biāo)題（ sub-subheadings ），

、

、

字體的大小依次遞減。

實(shí)例

 

這是標(biāo)題1

 

這是標(biāo)題2

 

這是標(biāo)題3

 

這是標(biāo)題4

 

這是標(biāo)題5

 

這是標(biāo)題6

嘗試一下 ?

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

HTML標(biāo)題實(shí)戰(zhàn)實(shí)驗(yàn)

HTML 段落

---

HTML 段落是通過標(biāo)簽

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

實(shí)例

這是一個(gè)段落。

這是另外一個(gè)段落。

嘗試一下 ?

 

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

實(shí)例

三國演義

羅貫中

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

話說天下大勢(shì)，分久必合，合久必分。

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

且說董卓字仲穎

卻說張飛

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

嘗試一下 ?

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

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

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

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

  來表示副標(biāo)題，后面跟

  來表示副副標(biāo)題，這是沒有意義的，會(huì)導(dǎo)致奇怪的結(jié)果。

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

HTML 中的空格

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

下面的兩個(gè)代碼片段是等價(jià)的：

實(shí)例

狗 狗 很 呆 萌。

狗 狗        很

       呆 萌。

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

為什么我們會(huì)使用那么多的空格呢?

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

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

HTML 鏈接

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

實(shí)例

這是一個(gè)鏈接

嘗試一下 ?

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

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

 HTML鏈接實(shí)戰(zhàn)測(cè)驗(yàn)

HTML 圖像

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

舉例如下：

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

實(shí)例

嘗試一下 ?

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

HTML 圖像實(shí)戰(zhàn)測(cè)驗(yàn)

HTML 強(qiáng)調(diào)

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

在 HTML 中我們可以使用em（emphasis）元素來標(biāo)記這樣的情況，瀏覽器默認(rèn)風(fēng)格為斜體：

實(shí)例

我 很高興你不 討厭我.

嘗試一下 ?

在 HTML 中我們還可以使用(strong importance)元素來標(biāo)記這樣的請(qǐng)況，瀏覽器默認(rèn)風(fēng)格為粗體：

實(shí)例

這種液體是高毒性的.

我就指望你不會(huì) 遲到!

嘗試一下 ?

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