HTML是一種用來描述網(wǎng)頁的標(biāo)記語言，它可以讓我們用一些特定的標(biāo)簽來定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。HTML的全稱是超文本標(biāo)記語言（HyperText Markup Language），它是由萬維網(wǎng)聯(lián)盟（W3C）制定的一種標(biāo)準(zhǔn)。
要用HTML完成網(wǎng)頁制作，我們需要了解以下幾個方面：
- HTML的基本結(jié)構(gòu)和語法
- HTML的常用標(biāo)簽和屬性
- HTML的文檔類型聲明和字符編碼
- HTML的樣式和布局
- HTML的鏈接和圖片
- HTML的表格和表單
- HTML的元數(shù)據(jù)和腳本
下面我們就來逐一介紹這些方面。
HTML的基本結(jié)構(gòu)和語法
一個HTML文檔通常由以下幾個部分組成：
：這是一個文檔類型聲明，它告訴瀏覽器這個文檔是用哪種版本的HTML編寫的。例如，表示這是一個HTML5文檔。：這是一個根元素，它包含了整個文檔的內(nèi)容。它有一個lang屬性，用來指定文檔的語言。例如，表示這是一個中文文檔。：這是一個頭部元素，它包含了一些關(guān)于文檔的信息，比如標(biāo)題、樣式、元數(shù)據(jù)等。它不能包含可見的內(nèi)容，只能包含一些特殊的標(biāo)簽。</code>：這是一個標(biāo)題元素，它定義了文檔在瀏覽器標(biāo)簽欄上顯示的標(biāo)題。它必須放在<code><head></code>元素里面，并且只能有一個。</li> <li><code><body></code>：這是一個主體元素，它包含了文檔的可見內(nèi)容，比如文字、圖片、鏈接等。它必須放在<code><html></code>元素里面，并且只能有一個。</li> </ul> <p> 一個HTML文檔的基本結(jié)構(gòu)如下：</p> <pre><code class="language-html" lang="" num=""><!DOCTYPE html> <html lang="zh-CN"> <head> <title>我的第一個網(wǎng)頁</title> </head> <body> <h1>歡迎來到我的網(wǎng)站</h1> <p>這是我的第一個網(wǎng)頁，我正在學(xué)習(xí)HTML。</p> </body> </html></code></pre> <p> HTML的語法規(guī)則如下：</p> <p></p> <ul> <li>HTML由一系列的標(biāo)簽（tag）組成，每個標(biāo)簽都有一個開始標(biāo)簽（start tag）和一個結(jié)束標(biāo)簽（end tag），中間是標(biāo)簽的內(nèi)容。例如，<code><p>這是一個段落</code>。</p></li> <li>有些標(biāo)簽是自閉合的（self-closing），也就是說它們不需要結(jié)束標(biāo)簽，只需要在開始標(biāo)簽后面加上一個斜杠（/）。例如，<code><br/></code>表示換行，<code><img/></code>表示圖片。</li> <li>每個標(biāo)簽都可以有一些屬性（attribute），用來提供更多的信息或功能。屬性由屬性名和屬性值組成，屬性值必須用引號括起來。屬性之間用空格分隔。例如，<code><img src="logo.png" alt="Logo" width="100" height="50"/></code>表示一個圖片標(biāo)簽，它有四個屬性：src指定圖片的地址，alt指定圖片的替代文字，width指定圖片的寬度，height指定圖片的高度。</li> <li>標(biāo)簽之間可以嵌套（nest），也就是說一個標(biāo)簽可以包含另一個或多個標(biāo)簽。嵌套的規(guī)則是先開后閉，后開先閉，也就是說內(nèi)層的標(biāo)簽必須在外層的標(biāo)簽之間。例如，<code><p>這是一個<b>粗體</b>的段落</code>表示一個段落標(biāo)簽，它包含了一個粗體標(biāo)簽。</p></li> <li>標(biāo)簽之間可以并列（sibling），也就是說一個標(biāo)簽可以和另一個或多個標(biāo)簽在同一層級。并列的規(guī)則是不要交叉，也就是說不能有一部分的標(biāo)簽在另一部分的標(biāo)簽之間。例如，<code><h1>標(biāo)題一</h1><h2>標(biāo)題二</h2></code>表示兩個標(biāo)題標(biāo)簽，它們是并列的。</li> <li>標(biāo)簽的名稱和屬性的名稱都不區(qū)分大小寫，但是屬性的值可能區(qū)分大小寫，取決于具體的屬性。例如，<code><img src="logo.png"/></code>和<code><IMG SRC="logo.png"/></code>是等價的，但是<code><img src="Logo.png"/></code>可能不會顯示圖片，因為文件名區(qū)分大小寫。</li> <li>標(biāo)簽和屬性的名稱都應(yīng)該使用英文單詞或字母，不要使用中文或其他語言。例如，<code><標(biāo)題>這是一個標(biāo)題</標(biāo)題></code>是不合法的，應(yīng)該使用<code><title>這是一個標(biāo)題 - 標(biāo)簽和屬性的值都應(yīng)該使用合法的字符，不要使用特殊的符號或空格。如果需要使用特殊的符號或空格，可以使用轉(zhuǎn)義字符（escape character）或?qū)嶓w引用（entity reference）。例如，
這是一個&符號
&來表示，因為它本身是一個特殊的符號。
更多優(yōu)秀前端開發(fā)課程推薦：前端開發(fā)相關(guān)課程
