1.2.2　HTML中的基礎標簽

HTML中預定義的標簽很多，本節通過幾個基礎標簽的應用實例來向讀者介紹標簽在HTML中的簡單用法。

HTML文檔中的標題通常使用h標簽來定義，根據標題的等級h標簽又分為h1～h6共6個等級。使用VS Code編輯器創建一個名為base.html的文件，在其中編寫如下代碼：

【代碼片段1-3　源碼見附件代碼/第1章/2.base.html】

后面的大多示例，HTML文檔的基本格式都是一樣的，代碼的不同之處主要在body標簽內，后面的示例只會展示核心body中的代碼。

運行上面的HTML文件，瀏覽器渲染效果如圖1-6所示。可以發現，不同等級的標題文本字體的字號大小是不同的。

HTML文檔的正文部分通常使用p標簽定義，p標簽的意義是段落，正文中的每個段落的文本都可以用p標簽包裹，示例如下：

【代碼片段1-4　源碼見附件代碼/第1章/2.base.html】

     <p>這里是一個段落</p>
     <p>這里是一個段落</p>

a標簽用來定義超鏈接，a標簽中的href屬性可以指向一個新的文檔路徑，當用戶單擊超鏈接的時候，瀏覽器會跳轉到超鏈接指向的新網頁，示例如下：

【代碼片段1-5　源碼見附件代碼/第1章/2.base.html】

     <a >跳轉到百度</a>

在實際的應用開發中，很少使用a標簽來處理網頁的跳轉邏輯，更多時候使用JavaScript/TypeScript來操作跳轉邏輯。

HTML文檔中也可以方便地顯示圖像，向base.html文件所在的目錄中添加一幅圖片素材（demo.png），使用img標簽來定義圖像，示例如下。

【代碼片段1-6　源碼見附件代碼/第1章/2.base.html】

     <div><img src="demo.png" alt="圖片" width="400px"></div>

需要注意，之所以將img標簽包裹在div標簽中，是因為img標簽是一個行內元素，如果想讓圖片單獨另起一行展示，則需要使用div標簽包裹，示例效果如圖1-7所示。

HTML中的標簽可以通過屬性對其渲染或對交互行為進行控制，例如上面的a標簽，href就是一種屬性，其用來定義超鏈接的地址。在img標簽中，src屬性用于定義圖片素材的地址，width屬性用于定義圖片渲染的寬度。標簽中的屬性使用如下格式設置：

     tagName = "value"

tagName為屬性的名字，不同的標簽支持的屬性也不同。通過設置屬性可以方便控制HTML文檔中元素的布局與渲染，例如對于h1標簽來說，將其align屬性設置為center后，其就會在文檔中居中展示：

     <h1 align = "center">1級標題</h1>

效果如圖1-8所示。

HTML中還定義了一種非常特殊的標簽——注釋標簽。編程工作除要進行代碼的編寫外，優雅地撰寫注釋也是非常重要的，注釋的內容在代碼中可見，但是對于瀏覽器來說是透明的，不會對渲染產生任何影響，示例如下：

     <!-- 這里是注釋的內容 -->

注釋都是寫給開發人員看的，方面后續代碼的維護和擴展。