pgg-download

書名： HTML5+CSS3+JavaScript從入門到精通（微課精編版）
作者名：前端科技
本章字數： 2674字
更新時間： 2019-08-15 16:37:43

1.3　HTML基本語法

HTML文檔由標簽和各種信息組成，HTML標簽可以標識文字、圖形、動畫、聲音、表格、超鏈接等網頁對象。標簽可以包含屬性，用來設置標簽的各種功能。編寫HTML文檔時，必須遵循一定的語法規范，否則瀏覽器是無法解析的。

1.3.1　HTML4語法

視頻講解

HTML4的規范條文不多，具體說明如下：

　所有標簽都包含在“<”和“>”起止標識符中，構成一個標簽。例如，<style>、<head>、<body>和<div>等。

　在HTML文檔中，絕大多數元素都有起始標簽和結束標簽，在起始標簽和結束標簽之間包含的是元素主體。例如，<body>和</body>中間包含的就是網頁內容主體。

　起始標簽包含元素的名稱，以及可選屬性，也就是說，元素的名稱和屬性都必須在起始標簽中。結束標簽以反斜杠開始，然后附加上元素名稱。例如：

    <tag>元素主體</tag>

　元素的屬性包含屬性名稱和屬性值兩部分，中間通過等號進行連接，多個屬性之間通過空格進行分隔。屬性與元素名稱之間也是通過空格進行分隔。例如：

    <tag a1="v1" a2="v2" a3="v3" …… an="vn">元素主體</tag>

　少數元素的屬性也可能不包含屬性值，僅包含一個屬性名稱。例如：

    <tag a1 a2 a3 …… an>元素主體</tag>

　一般屬性值應該包含在引號內，雖然不加引號，瀏覽器也能夠解析，但是讀者應該養成良好的習慣。

　屬性是可選的，元素包含多少個屬性，也是不確定，這主要根據不同元素而定。不同的元素會包含不同的屬性。HTML也為所有元素定義了公共屬性，如title、id、class、style等。

雖然大部分標簽都是成對出現，但是也有少數標簽不是成對的，這些孤立的標簽，被稱為空標簽?？諛撕瀮H包含起始標簽，沒有結束標簽。例如：

    <tag>

同樣，空標簽也可以包含很多屬性，用來標識特殊效果或者功能，例如：

    <tag a1="v1" a1="v1" a2="v2" …… an="vn">

　標簽可以相互嵌套，形成文檔結構。嵌套必須匹配，不能交錯嵌套，例如，<div><span></div></span>。合法的嵌套應該是包含或被包含的關系，例如，<div><span></span></div>或<span><div></div></span>。

　HTML文檔所有信息必須包含在<html>標簽中，所有文檔元信息應包含在<head>子標簽中，而HTML傳遞信息和網頁顯示內容應包含在<body>子標簽中。

【示例】對于HTML4文檔來說，除了必須符合基本語法規范外，還必須保證文檔結構信息的完整性。完整文檔結構如下所示。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w1.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
    <html xmlns="http://www.w1.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文檔標題</title>
    </head>
    <body></body>
    </html>

HTML4文檔應主要包括如下內容。

　必須在首行定義文檔的類型，過渡型文檔可省略。

　<html>標簽應該設置文檔名字空間，過渡型文檔可省略。

　必須定義文檔的字符編碼，一般使用<meta>標簽在頭部定義，常用字符編碼包括中文簡體（gb2312）、中文繁體（big5）和通用字符編碼（utf-8）。

　應該設置文檔的標題，可以使用<title>標簽在頭部定義。

HTML文檔擴展名為.htm或.html，保存時必須正確使用擴展名，否則瀏覽器無法正確地解析。如果要在HTML文檔中增加注釋性文本，則可以在“”標識符之間增加，例如：

    <!-- 單行注釋-->

或

    <!-----------------
    多行注釋
    ----------------->

1.3.2　XHTML語法

視頻講解

XHTML是根據XML語法簡化而來的，因此它遵循XML文檔規范。同時XHTML又大量繼承HTML4語法規范，因此與HTML4非常相似，不過它對代碼的要求更加嚴謹。遵循這些要求，對于培養良好的XHTML代碼書寫習慣是非常重要的。

　在文檔的開頭必須定義文檔類型。

　在根元素中應聲明命名空間，即設置xmlns屬性。

　所有標簽都必須是閉合的。在HTML中，你可能習慣書寫獨立的標簽，如<p>、<li>，而不愛寫對應的</p>和</li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹的結構，所有標簽都必須關閉。如果是單獨不成對的標簽，應在標簽的最后加一個“／”來關閉它，如<br />。

　所有元素和屬性都必須小寫。這與HTML不同，XHTML對大小寫是敏感的，<title>和<TITLE>表示不同的標簽。

　所有的屬性必須用引號（""）括起來。在HTML中，你可以不需要給屬性值加引號，但是在XHTML中，它們必須被加引號，如<table height="80"></table>。特殊情況下，可以在屬性值里使用雙引號或單引號。

　所有標簽都必須合理嵌套。這是因為XHTML要求有嚴謹的結構，因此所有的嵌套都必須按順序。

　所有屬性都必須被賦值，沒有值的屬性就用自身來賦值。例如：

錯誤寫法：

    <td nowrap>

正確寫法：

    <td nowrap="nowrap">

　所有特殊符號都用編碼表示，例如，小于號（<）不是元素的一部分，必須被編碼為“<”；大于號（>）不是元素的一部分，必須被編碼為“>”。

　不要在注釋內容中使用“--”?！?-”只能出現在XHTML注釋的開頭和結束，也就是說，在內容中它們不再有效。例如：

錯誤寫法：

    <!--注釋----------注釋-->

正確寫法：

    <!--注釋—  —注釋-->

　XHTML規范廢除了name屬性，而使用id屬性作為統一的名稱。在IE 4.0及以下版本中應保留name屬性，使用時可以同時使用id和name屬性。

上面列舉的幾點是XHTML最基本的語法要求，習慣于HTML的讀者應克服代碼書寫中的隨意，相信好的習慣會影響你的一生。

1.3.3　HTML5語法

視頻講解

HTML5以HTML4為基礎，保證與之前的HTML4語法達到最大限度的兼容。同時，對HTML4進行了全面升級改造，具體變化如下。

1．內容類型

HTML5的文件擴展名和內容類型保持不變。例如，擴展名仍然為“.html”或“.htm”，內容類型（ContentType）仍然為“text/html”。

2．文檔類型

在HTML4中，文檔類型的聲明方法如下：

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
    xhtml1-transitional.dtd">

在HTML5中，文檔類型的聲明方法如下：

    <!DOCTYPE html>

當使用工具時，也可以在DOCTYPE聲明中加入SYSTEM識別符，聲明方法如下：

    <!DOCTYPE HTML SYSTEM "about:legacy-compat">

在HTML5中，DOCTYPE聲明方式是不區分大小寫的，引號也不區分是單引號還是雙引號。

　注意：使用HTML5的DOCTYPE會觸發瀏覽器以標準模式顯示頁面。眾所周知，網頁都有多種顯示模式，如怪異模式（Quirks）、標準模式（Standards）。瀏覽器根據DOCTYPE來識別該使用哪種解析模式。

3．字符編碼

在HTML4中，使用meta元素定義文檔的字符編碼，如下所示：

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

在HTML5中，繼續沿用meta元素定義文檔的字符編碼，但是簡化了charset屬性的寫法，如下所示：

    <meta charset="UTF-8">

對于HTML5來說，上述兩種方法都有效，用戶可以繼續使用前面一種方式，即通過content元素的屬性來指定，但是不能同時混用兩種方式。

　注意：在傳統網站中，可能會存在下面標記方式。在HTML5中，這種字符編碼方式將被認為是錯誤的。

        <meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">

從HTML5開始，對于文件的字符編碼推薦使用UTF-8。

4．標記省略

在HTML5中，元素的標記可以分為3種類型：不允許寫結束標記，可以省略結束標記，開始標記和結束標記全部可以省略。下面簡單介紹這3種類型各包括哪些HTML5新元素。

第一，不允許寫結束標記的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

第二，可以省略結束標記的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

第三，可以省略全部標記的元素有：html、head、body、colgroup、tbody。

　提示：不允許寫結束標記的元素是指，不允許使用開始標記與結束標記將元素括起來的形式，只允許使用<元素／>的形式進行書寫。例如：

　錯誤的書寫方式

　正確的書寫方式

<br/>

HTML5之前的版本中<br>這種寫法可以繼續沿用。

可以省略全部標記的元素是指元素可以完全被省略。注意，該元素還是以隱式的方式存在的。例如，將body元素省略不寫時，它在文檔結構中還是存在的，可以使用document.body進行訪問。

5．布爾值

對于布爾型屬性，如disabled與readonly等，當只寫屬性而不指定屬性值時，表示屬性值為true；如果屬性值為false，可以不使用該屬性。另外，要想將屬性值設定為true時，也可以將屬性名設定為屬性值，或將空字符串設定為屬性值。

【示例1】下面是幾種正確的書寫方法。

    <!--只寫屬性，不寫屬性值，代表屬性為true-->
    <input type="checkbox" checked>
    <!--不寫屬性，代表屬性為false-->
    <input type="checkbox">
    <!--屬性值=屬性名，代表屬性為true-->
    <input type="checkbox" checked="checked">
    <!--屬性值=空字符串，代表屬性為true-->
    <input type="checkbox" checked="">

6．屬性值

屬性值可以加雙引號，也可以加單引號。HTML5在此基礎上做了一些改進，當屬性值不包括空字符串、<、>、=、單引號、雙引號等字符時，屬性值兩邊的引號可以省略。

【示例2】下面寫法都是合法的。

    <input type="text">
    <input type='text'>
    <input type=text>

官术网_书友最值得收藏!

HTML5+CSS3+JavaScript從入門到精通（微課精編版）

1.3 HTML基本語法

1.3.1 HTML4語法

1.3.2 XHTML語法

1.3.3 HTML5語法

1.3　HTML基本語法

1.3.1　HTML4語法

1.3.2　XHTML語法

1.3.3　HTML5語法