1.2.2　HTML中的基礎標簽

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

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

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

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

圖1-6　HTML中的h標簽

HTML文檔的正文部分通常使用p標簽定義，p標簽的意義是段落，正文中的每個段落的文本都可以將其包裹在p標簽內(nèi)，如下：

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

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

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

在實際的應用開發(fā)中，我們將很少使用a標簽來處理網(wǎng)頁的跳轉邏輯，更多時候使用JavaScript來操作跳轉邏輯。

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

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

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

圖1-7　HTML文檔效果演示

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

     tagName = "value"

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

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

效果如圖1-8所示。

圖1-8　標題居中展示

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

     <!-- 這里是注釋的內(nèi)容 -->