1.3 HTML基本语法_HTML5+CSS3+JavaScript从入门到精通（微课精编版）-QQ阅读男生玄幻网

书名：HTML5+CSS3+JavaScript从入门到精通（微课精编版）
作者名：前端科技
本章字数：2674字
更新时间：2021-03-29 23:34:32

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等。

虽然大部分标签都是成对出现，但是也有少数标签不是成对的，这些孤立的标签，被称为空标签。空标签仅包含起始标签，没有结束标签。例如：

    <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>