HTML（即Hyper Text Markup Language）是一種用來描述網(wǎng)頁的語言。HTML5是HTML的第五個(gè)版本，因而它的基礎(chǔ)語法和標(biāo)簽與以前的版本有很大不同。現(xiàn)在，讓我們來探索一下HTML5的主要標(biāo)簽，并用代碼進(jìn)行清晰的圖解。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5代碼圖解</title> </head> <body> <header> <nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">博客</a></li> <li><a href="#">聯(lián)系我們</a></li> </ul> </nav> </header> <section> <article> <h1>文章標(biāo)題</h1> <p>這是一段文章內(nèi)容。</p> <p>這是另一段文章內(nèi)容。</p> <figure> <img src="圖片地址" alt="圖片描述"> <figcaption>圖片標(biāo)題</figcaption> </figure> </article> <aside> <h2>側(cè)邊欄標(biāo)題</h2> <p>這是側(cè)邊欄內(nèi)容。</p> </aside> </section> <footer> <p>版權(quán)所有 ? 2021 HTML5代碼圖解</p> </footer> </body> </html>
首先，在html標(biāo)簽中，DOCTYPE定義文檔的類型為html。在head標(biāo)簽中，設(shè)置頁面的標(biāo)題和字符集為UTF-8。在body標(biāo)簽中，頁面的主要部分位于header、section和footer標(biāo)簽中。Header中用一個(gè)nav標(biāo)簽來展示網(wǎng)頁導(dǎo)航。在section標(biāo)簽中，我們可以看到一個(gè)article標(biāo)簽和一個(gè)aside標(biāo)簽，其中article標(biāo)簽用來展示文章內(nèi)容，aside標(biāo)簽用來展示側(cè)邊欄內(nèi)容。在footer標(biāo)簽中，我們可以看到版權(quán)信息的聲明。
在article標(biāo)簽中，我們用h1標(biāo)簽來定義文章的標(biāo)題，p標(biāo)簽來定義文章的內(nèi)容。我們還可以使用figure標(biāo)簽來顯示圖片。在figure標(biāo)簽中，我們可以使用img標(biāo)簽來顯示圖片，“src”屬性用來定義圖片的地址，"alt"屬性用來定義圖片的描述，figcaption標(biāo)簽用來定義圖片的標(biāo)題。
最后，使用pre標(biāo)簽無需編寫轉(zhuǎn)義代碼即可在網(wǎng)頁上顯示代碼、格式和空格，非常方便。在我們的示例中，我們將HTML代碼包含在pre標(biāo)簽中，使其更容易識(shí)別和理解。