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