免費AI編程助手
HTML 基礎(chǔ)
HTML 基礎(chǔ)- 4個實例
本章介紹了 HTML 中較為常用的基礎(chǔ)標(biāo)簽的實例以及 HTML 基礎(chǔ)知識。您可能還沒接觸過這些實例，不過不用擔(dān)心，閱讀完本章您就能夠掌握它們了！ 1
HTML 標(biāo)題
HTML 標(biāo)題（Heading）是通過 <h1> - <h6> 標(biāo)簽來定義的.
h是英文header標(biāo)題的縮寫，標(biāo)題無處不在，它的應(yīng)用范圍十分廣泛：網(wǎng)站結(jié)構(gòu)、寫作文、PPT 等。
這里有六個標(biāo)題元素標(biāo)簽 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每個元素代表文檔中不同級別的內(nèi)容：
<h1> 表示主標(biāo)題（ the main heading ），<h2> 表示二級子標(biāo)題（ subheadings ），<h3>表示三級子標(biāo)題（ sub-subheadings ），<h4>、<h5>、<h6>字體的大小依次遞減。
實例
<h1>這是標(biāo)題1</h1>
<h2>這是標(biāo)題2</h2>
<h3>這是標(biāo)題3</h3>
<h4>這是標(biāo)題4</h4>
<h5>這是標(biāo)題5</h5>
<h6>這是標(biāo)題6</h6>
嘗試一下 ?
你也可以通過實戰(zhàn)實驗來嘗試挑戰(zhàn)一個 h2 標(biāo)題的設(shè)置：
HTML 段落
HTML 段落是通過標(biāo)簽<p>來定義的，P是英文paragraph段落的縮寫，經(jīng)常被用來創(chuàng)建一個段落，就和你寫作文一樣，您可以進(jìn)行實戰(zhàn)演練。
下面這個實例講述了標(biāo)題和段落的結(jié)構(gòu)層次：
實例
<h1>三國演義</h1>
<p>羅貫中</p>
<h2>第一回 宴桃園豪杰三結(jié)義 斬黃巾英雄首立功</h2>
<p>話說天下大勢，分久必合，合久必分。</p>
<h2>第二回 張翼德怒鞭督郵 何國舅謀誅宦豎</h2>
<p>且說董卓字仲穎</p>
<h3>卻說張飛</h3>
<p>卻說張飛飲了數(shù)杯悶酒</p>
嘗試一下 ?
上述實例所涉及的元素具體代表什么，完全取決于作者編輯的內(nèi)容，只要確保層次結(jié)構(gòu)是合理的。在創(chuàng)建此類結(jié)構(gòu)時，您只需要記住以下幾點：
- 首先，您應(yīng)該只對每個頁面使用一次
<h1>，這是主標(biāo)題，所有其他標(biāo)題位于層次結(jié)構(gòu)中的下方。
- 其次，請確保在層次結(jié)構(gòu)中以正確的順序使用標(biāo)題。不要使用
<h3>來表示副標(biāo)題，后面跟<h2>來表示副副標(biāo)題，這是沒有意義的，會導(dǎo)致奇怪的結(jié)果。
- 最后，在可用的六個標(biāo)題級別中，您應(yīng)該保證每個頁面中標(biāo)題級別的使用不超過三個，除非您認(rèn)為有必要使用更多。具有許多標(biāo)題級別的文檔會變得難以操作并且難以導(dǎo)航。在這種情況下，如果可能，建議將內(nèi)容分散在多個頁面上。
HTML 中的空格
在代碼中可能包含了很多的空格——這是沒有必要的
下面的兩個代碼片段是等價的：
為什么我們會使用那么多的空格呢?
答案就是為了可讀性——如果你的代碼被很好地進(jìn)行格式化，那么就很容易理解你的代碼，反之就會很混亂。在我們的 HTML 代碼中，我們讓每一個嵌套的元素以兩個空格縮進(jìn)。
你使用什么風(fēng)格來格式化你的代碼取決于你（比如所對于每層縮進(jìn)使用多少個空格），但是記住你應(yīng)該堅持使用某種風(fēng)格。
HTML 鏈接
HTML 鏈接是通過標(biāo)簽<a>來定義的。a標(biāo)簽，也叫anchor（錨點）元素，既可以用來鏈接到外部地址實現(xiàn)頁面跳轉(zhuǎn)功能，也可以鏈接到當(dāng)前頁面的某部分實現(xiàn)內(nèi)部導(dǎo)航功能。
提示：在
href屬性中指定鏈接的地址。(您將在本教程稍后的章節(jié)中學(xué)習(xí)更多有關(guān)屬性的知識)
HTML 圖像
HTML 圖像是通過標(biāo)簽<img>來定義的。使用img元素來為你的網(wǎng)站添加圖片，使用src
屬性指向一個圖片的具體地址。
舉例如下：<img src="https://www.your-image-source.com/your-image.jpg" rel="external nofollow" >
請注意：img元素是自關(guān)閉元素，不需要結(jié)束標(biāo)記。
注意： 圖像的名稱和尺寸是以屬性的形式提供的。
HTML 強調(diào)
在人類語言中，為了突出一句話的意思，我們通常強調(diào)某些詞，并且我們通常想要標(biāo)記某些詞作為重點或者表示某種程度上的不同。HTML 提供了許多語義化的元素，并且允許我們通過這些元素的意義標(biāo)記正文內(nèi)容，在這個章節(jié)中，我們將看到最常見的一小部分元素。
在 HTML 中我們可以使用em（emphasis）元素來標(biāo)記這樣的情況，瀏覽器默認(rèn)風(fēng)格為斜體：
在 HTML 中我們還可以使用<strong>(strong importance)元素來標(biāo)記這樣的請況，瀏覽器默認(rèn)風(fēng)格為粗體：
注意：為了不同的字體風(fēng)格，我們應(yīng)該使用元素和一些 CSS 的樣式.
更多建議：