2.1 HTML语法基础

HTML语言是用来描述网页的一种语言，该语言是一种标签语言（即一套标签，用来描述网页），而不是编程语言，它是制作网页的基础语言，主要用于描述超文本中内容的显示方式。

2.1.1 HTML文档结构

完整的HTML文件包括头部和主题两大部分，头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等；主体包括文本、段落、列表、表格、绘制的图形以及各种嵌入对象，这些对象称为HTML元素。基本的HTML文件结构如下：

从上面的代码可以看出，在HTML文件中，DOCTYPE（Document Type），该声明位于文档中最前面的位置，处于html标签之前，此标签告知浏览器文档使用哪种HTML或者XHTML规范。在HTML5中，Web页面的文档类型说明（Doctype）被极大地简化了。只剩下＜！DOCTYPE html＞非常简单的一行代码。

＜html＞与＜/html＞标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。由于HTML语言语法的松散性，该标签可以省略，但为了使之符合Web标准和文档的完整性，建议不要省略该标签。

在文档的头部＜head＞＜/head＞区，用于定义文档的头部，它是所有头部元素的容器。＜head＞标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。＜head＞标签的作用范围是整篇文档，定义在＜head＞＜/head＞内的元素内容一般不会直接显示在网页上。

在文档的主体＜body＞＜/body＞区，包含文档的所有内容如文本、超链接、图片、表格和列表等。

注意：在构建HTML结构时，标签不允许交叉出现，否则会造成语法错误。如以下代码就是错误的。

2.1.2 HTML标签

HTML5不是一种编程语言，而是一种描述性的标签语言，用于描述超文本中的内容和结构。HTML最基本的语法是＜标签名＞＜/标签名＞。标签通常是成对使用的，一个开始标签和一个结束标签。结束标签是在开始标签的前面加上一个斜线“/”。当浏览器读取HTML文件时，就会解析里面的各个标签，然后将每个标签相对应的功能表达出来。

HTML的标签有很多，在HTML5中又新增了一部分。表2-1列出了按照功能分类的常用的标签。

表2-1 HTML常用标签

（续）

比如在HTML标签中用＜title＞＜/title＞标签来定义页面的标题，当浏览器读取到title元素时，就将该标签里的内容显示在浏览器的标题上。

【例2-1】显示＜title＞标签，代码如下：

在浏览器中预览，显示效果如图2-1所示。

图2-1 ＜title＞标签展示效果

2.1.3 标签的属性

HTML属性能够赋予标签含义和语境，提供了有关HTML元素的更多信息。属性要在开始标签中指定，通常是以名称/值对的形式出现，比如：name="value"，name表示属性的名称，value代表该属性的值，value常用双引号“"”括起来，也可以使用单引号“'”括起来。多个属性用空格隔开，指定多个属性的时候不需要区分顺序。如：

＜img src="picture/food.jpg"alt="美食"width="30%"height="40%"＞

此行代码表示插入了一幅图片，该图片来自同一目录中picture文件夹内的food.jpg，图片显示在页面上的尺寸是浏览器宽度的30%、高度的40%。

【例2-2】多属性值，代码如下：

在浏览器中预览，显示效果如图2-2所示。

图2-2 ＜img＞标签展示效果