下载掌阅APP，畅读海量书库
立即打开
专题讲座：光盘\MR\Video\3\重点讲解XHTML基础.exe
视频速递：全面解读XHTML
HTML（Hypertext Marked Language）即超文本标记语言，是制作超文本文档的简单标记语言。当用户打开浏览器看到的如图片、文字、视频等内容时都是通过HTML表现出来的。用HTML编写的代码文档称为HTML文档，它是独立于各种操作系统平台，是WWW（万维网）的信息表示语言。
HTML是一种文本类型语言，也就是说，用任何一种文本工具都可以创建文件。创建的HTML文件可以直接由浏览器解释和执行而不需要编译。当用浏览器打开网页时，浏览器读取HTML代码并根据解释的结果显示网页内容。也正因为如此，网页显示的等待时间与代码质量关系很大。保持严谨和高效的HTML源代码是十分重要的。下面对HTML语法进行系统的介绍，让读者了解如何编写严谨、高效的HTML代码。
HTML文件中是以标签对或标签来标记网页结构和显示内容资料的。“<标签名>”表示标签开始，以“</标签名>”结束。很大一部分的标签都是成对出现的，成对的标签也可以叫做容器。在一对标签中可以嵌套一个或多个标签。一个HTML标签及标签中嵌套的内容就是网页中的一个HTML元素。有一小部分的标签不需要与之配对的结束标签，被称为空标签，如<hr>、<br>等。
例如，下面创建一个基本的HTML网页，其中有成对出现的标签，也有单独使用的标签，代码如下。
属性是为HTML元素所提供的说明信息，例如，一个男孩叫张宇，张宇就是它的属性。还可以包括身高、体重、穿什么样的衣服等。HTML中的标签是以“名称/值”的形式出现在HTML标签中的，例如，img图像标签的格式如下。
需要说明的是各属性之间无先后次序之分，而且HTML标记中的每个属性都是可选的，如果没对属性进行设置，属性会以默认值的方式被调用。属性的值可以用英文的双引号（''）或者单引号（''）引起来，也可以不使用引号。但是，建议使用双引号来定义属性值。虽然HTML脚本对这些的要求不是很严谨，但是规范化编程是一名程序员良好素质的体现。
HTML标签名和属性都是不区分大小写的，例如，<title>、<TITLE>或<Title>都是定义相同的标签。但笔者推荐使用小写字母书写。
HTML注释的作用是帮助用户更好地阅读源代码，理解源代码表述的含义。HTML注释以“<!—”开始，以“-->”结束，HTML注释的使用格式如下。
注释语句只在源代码中有所体现，浏览器在解释代码时会自动忽略注释的内容，而不会在浏览器中显示。注释的功能是很强大的，不但可以对内容进行说明，而且可以对源码中不需要的内容进行注释。
在注释中再包含注释，而且注释不能在标记中使用，但是注释可以包围标记，实现标记的隐藏。另外在注释掉标记之后，要保证剩余的文本仍然是一个结构完整的HTML文档。
在HTML页面中回车和空格都不会在页面的源代码中有所体现，所以在编写HTML代码时，可以通过回车或者空格来对代码进行排版，保证代码结果清晰。
几乎所有的浏览器都支持颜色名集合，颜色值可以是一个关键字或者是一个RGB格式的数字，RGB格式的颜色名集合要远远大于颜色名集合关键字，所以在网页中RGB格式颜色值用得比较多。
关键字颜色值仅仅有16种颜色名被W3C的HTML 4.0标准所支持，它们是：apua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、和yellow。
RGB颜色值是由十六进制符号来定义的，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00），最大值是255（十六进制：#FF）；也就是每个原色可有256种彩度，故此三原色可混合成16 777 216中颜色。应用时要在每个RGB值之前加上“#”符号，如bgcolor= '#FF0000'。如果使用英文名字表示颜色值时，可以直接写名字，如bgcolor= 'red'。
十六进制数是由0～9、A～F组成的。0～9一般是指十进制数，而A～F读者可以简单理解成11～15这几个数字。
某些字符串在HTML中有特殊的含义，例如，小于号（<）和大于号（>）在HTML中表示标签的开始和结束，它们就不可以在HTML中直接输出。为了能够在HTML中输出这些特殊的字符串，引入了字符实体，通过字符实体在HTML中完成特殊字符的输出。字符实体是由“&”、实体名称和“；”组成的，也可以由“&”、“#”、实体编号和“；”组成。例如，小于号的字符实体是“ ”或者“ ”。虽然有两种字符实体的表述形式，但是笔者建议使用前一种，因为实体名称似乎更容易记忆。同时还要注意，实体名称是区分大小写的。在表3.1中将列出一些常用的HTML实体。
表 3.1 常用HTML实体
HTML文档的基本格式，需要以下几个全局架构元素标签，并将HTML代码分为三部分编写，如下所示。
上例在网页文件中声明的这几对标签，在每个网页文档中都是唯一的，<head>标签和<body>标签要嵌套在HTML标签中。
第一部分：<html></html>是网页文件的最外层标签，读者可以把它看成是从头到脚的一个人，<html></html>标签对主要是告诉浏览器此HTML文件的开始点与结束点。
由于HTML语言不是很严谨，当只存在开始标记不存在结束标记时，HTML文件一样可以被浏览器解析。
第二部分：位于<head></head>标签之间的文本是头信息，读者可以把它看成是人的头部。头信息不会显示在浏览器窗口中，主要包括当前页面的一些基本描述的语句，用以说明文件的标题和整个文件的一些公共属性，如声明网页的标题和关键字等。
第三部分：<body>标签是HTML文件的主体标记，是页面显示内容的主要载体或者可以说是标签的最大容器。如文字信息、图片、链接、表单等都要声明在这个标记中。
HTML头部标记是<head>，主要包括页面的一些描述语句及引入CSS和JavaScript脚本。通常情况下位于头部标记的内容都不会在网页上直接显示，而是通过其他方式起作用的。在<head>标记中可以使用的标签并不多，常用标签包括<title>、<meta>、<link>、<script>和<style>等。下面将具体解释这几个定义头部信息的标记。
标题标记<title>：HTML文件的标题显示在浏览器的标题栏，用于说明文件的用途。每个HTML网页都有自己的标题，将作为网页被保存后的文件名称；而在搜索引擎，会将网页的标题作为搜索的关键字，同时在搜索引擎页面中作为标题显示。<title>标签的语法格式如下。
设置外部文件的链接标记<link>：显示当前文档和其他文档之间的连接关系，最常用的就是通过<link>标记载入外部的层叠样式表（CSS样式文件）。当使用<link>标记时，浏览器会分析<link>中的内容，自动读取并加载相应的文件。基本语法格式如下。
元信息标记<meta>：通过该标记的属性定义文件信息的名称、内容等。这个标记是实现元数据的主要标记，它能够提供文档的关键字、作者、描述和语言等多种信息，在HTML的头部中可以包含任意多个<meta>标记。通过该标记中的http-equiv、name、content属性，可以建立多种效果和功能，基本语法格式如下。
例如，通过meta标签设置网页的关键字；设置当前HTML网页的类型，编码格式，其代码如下。
在HTML的<body>和</body>标签中放置页面中的显示内容，如图片、文字、表格、表单、超链接等。<body>标签有属于自己的属性，设置<body>标签属性，可控制整个页面的显示方式和字体风格等。该标记的基本使用格式如下。
<body>标签中可以使用的属性，如表3.2所示。
表 3.2 body标签的常用属性
<body>标签中有四个通用属性，之所以说是通用属性，主要是因为这四个属性不仅能够在<body>标签中使用，在其他的任何HTML的标签中也都可以使用。但这四个属性只有在结合CSS和JavaScript脚本时才有意义，如表3.3所示。
表 3.3 HTML中的通用属性
网页中显示的内容主要是以文本数据为主，一般情况下可以通过字体、大小、颜色等来设置它的样式。文字是网页中最基础的一部分。对文字的格式化和样式修订通常是通过两种方式来完成的：一种是直接使用HTML标记，这种方式有利于搜索引擎的搜索；另一种是使用CSS样式，它更倾向于对文本格式的精确控制和美化。
格式标签一般用于定义网页中文本的布局，如缩进、位置、换行、列表、首字下沉等。当浏览器遇到这些标记时，就会按标记的格式显示网页。例如，<hr>标签具有输出一条水平分隔线的功能，当浏览器遇到<hr>标签时，就会把标签后的文本输出到水平分隔线的下方显示。常用的格式标签，如表3.4所示。
表 3.4 常用的格式标签
【例3.1】 在<body>标记中通过格式标签定义文本输出的样式，具体步骤如下。
实例位置：光盘\MR\ Instance\3\3.1
创建index.html网页，在<body>标记中添加格式标签，设置文本输出的样式，代码如下。
图 3.1 格式标签定义文本样式
其运行结果，如图3.1所示。
在HTML页面中，为了强调或者特殊说明某一部分文字，HTML提供了一些能产生特殊效果的标签。常见的文本标签，如表3.5所示。
表 3.5 常见的HTML文本标签
续表
【例3.2】 在<body>标记中通过文本标签定义文本输出的样式，具体步骤如下。
实例位置：光盘\MR\ Instance\3\3.2
创建index.html网页，在<body>标记中添加文本标签，设置文本输出的样式，代码如下。
其运行效果，如图3.2所示。
图 3.2 HTML文本风格标签
图像和超级链接极大地丰富了HTML文档的表现形式。大家所看到的丰富多彩的Web页面，大都是由它们和文字组成的。在互联网上，图像和链接是通过URL来确定信息资源位置的。URL分为绝对URL和相对URL，也就是俗称的绝对路径和相对路径。当所需的相关资源在远程主机上时，需要使用绝对URL来获取信息。而当所需资源在本机服务器上时，可以只提供文件名部分即可实现资源获取，这就是相对URL。
在Web页面中通常使用三种格式的图片。即JPEG、GIF和PNG。JPEG占硬盘空间相对较大，建议使用GIF格式。这些格式的图片通过使用<img>标记插入到HTML文档中，其语法格式如下。
<img>标记的属性如下：
src属性：指定一个包括URL路径名在内的图片文件；
alt属性：定义一个字符串，当鼠标悬停在图片上时，输出定义的字符串；
width和height属性：设置图像的宽度和高度，单位为像素；
border属性：设置图像边框的宽度，单位为像素。
<img>标记在网页中使用的示例如下。
上例在网页中使用<img>标记分别插入4张图片，并且都使用src属性通过相对URL指定图像文件的位置。在页面中的显示效果，如图3.3所示。
图 3.3 使用img标记插入四张图片
上面代码中所涉及的图片是笔者随机挑选的，用户可以根据需要选择加载自己喜欢的图片即可。加载方法是将图片src路径属性bg.gif更改为其他路径下的图片名称即可。
Web上的网页彼此之间是存在关系的，单击被定义为超链接的文本或图形就可以链接到指定页面或指定的内容。链接文档中的指定位置也叫做锚点，这种锚点类似于用户在看一本书时插入的书签。主要作用是用户可以选择性地读取书中的内容。定义锚点和超链接都使用<a>标记，其基本语法格式如下。
a标记的属性如下：
href属性：指定所链接文件的URL路径。这个路径可以是相对路径也可以是绝对路径；
name属性：指定页面的锚点名称，如果需要链接到对应的锚点位置，要在锚点名称前添加一个“#”字符；
target属性：指定要打开的链接所使用的浏览器窗口名称，可以使用自定义的窗口名称。也可以使用下面四个内置的窗口名称，其中前两个比较常用：
_self：在当前窗口中打开链接文件，是默认值；
_blank：开启一个新的窗口，打开链接文件；
_parent：在父级窗口中打开文件，常用于框架页面；
_top：在顶层窗口中打开文件，常用于框架页面。
下面是一段定义锚点和超链接的示例代码，使用文字和图片两种链接，以及通过相对URL和绝对URL分别链接本地文件和远程文件。
上面代码中所提到的sec.html是笔者随机建立的html文本文件，所涉及的图片也是笔者随机挑选的，用户可以根据需要选择加载自己喜欢的图片。加载方法是将图片src路径属性bg.gif更改为其他路径下的图片名称即可。
表格在网站开发中应用是非常广泛的，它的优点是可以对页面数据进行较精确的排版，在CSS+DIV还未盛行时，很多大型动态网站都借助表格进行页面布局。但是，由于使用表格对页面排版时会产生低效率的问题，所以现在的程序开发中一般都使用CSS+DIV进行页面布局。
在HTML文档中，表格是通过表格标记<table>、行标记<tr>、单元格标记<th>或<td>等标签按一定的关系嵌套共同完成的，表格的基本结构如下。
在一个单一表格中，必须包含一组<table>标签、一组标签<tr>和一组<td>标签或<th>标签。在<table>标签中，可以使用表3.6中给出的一些常用的可选属性。
表 3.6 <table>标签的常用属性
表格是由行和列共同组成的，一个表格有几行数据就要有几个行标签对<tr></tr>，一组行标签内可以建立多个由<td>或<th>标签对所定义成的单元格。行标签本身具有很多可选属性，例如，align属性设置行内容的水平对齐，valign属性设置行内容的垂直对齐等。
<th>和<td>标签的主要作用是插入单元格。这两个标签必须嵌套在<tr>标签内使用，并且是成对出现的。<th>表头标签，顾名思义一般位于首行或首列，其中的文字以粗体居中显示。数据标签<td>是该单元格的具体数据内容，<th>和<td>标签的属性是相同的，相关属性说明如表3.7所示。
表 3.7 <th>和<td>标签的属性说明
表单是PHP程序与用户交互的最直接最有效的方式之一，一般作为收集访问者信息的数据输入界面出现。表单程序的运作原理是：在客户端通过表单提交数据，将数据提交给Web服务器的脚本程序。在脚本程序中完成对数据的处理。下面讲解表单及表单中的元素是如何定义的。
一个表单用<form></form>标签来创建并定义表单的开始和结束位置，在此标签对之间的一切定义都属于表单的内容。就算单击了提交按钮，提交的内容也仅仅是表单范围之内的内容。在<form>标记中需要携带表单的相关信息，如处理表单的脚本程序的位置、提交表单的方法等。这些信息对于浏览者是不可见的，但对于处理表单却有着决定性的作用。该标记的常用属性如表3.8所示。
表 3.8 表单的常用属性
在<form></form>标记对内定义的<input>标记在表单操作中具有非常重要的地位，此标记属于单标记，即没有结束标记。<input type='' >标记用于定义一个用户输入区域，一般情况下允许输入的最大字节长度为40字节。在本标记中共提供了九种类型的输入区域，具体选择哪一种由<input>标记的type属性决定。
在<form></form>标记对内定义的<input>标记在表单操作中具有非常重要的地位，此标记属于单标记，即没有结束标记。<input type='' >标记用于定义一个用户输入区域，一般情况下允许输入的最大字节长度为40字节。在本标记中共提供了九种类型的输入区域，具体选择哪一种由<input>标记的type属性决定。<input>标记的常用属性如表3.9所示。
表 3.9 <input>标记的常用属性
当<input>标记的type属性为text时，表示定义文本域；当<input>标记的type属性为password时，表示定义密码域。文本域和密码域是两个非常相似的文本，唯一不同的是，用户在密码域中输入的字符并不以原样显示，而是以“*”符号代替内容。文本框和密码输入域的基本语法格式如下。
在<input>标记中，当type属性值设置为submit时，表示定义的是“提交”按钮，单击“提交”按钮，可以实现对表单内容的提交；当type属性为reset时，表示定义的是重置按钮，单击“重置”按钮，表单的内容将恢复为默认值；当type属性设置为button时，表示定义的是普通按钮，无任何功能，一般情况下它需要和JavaScript等脚本语言一起使用才能发挥作用。这三种按钮的基本语法格式如下。
在<input>标记中，当type属性值设置为radio时，表示定义单选按钮；当type属性为checkbox时，表示定义复选框。单选按钮本身只支持单项选择即只能选取一个内容，而复选框恰恰相反，可以一次性选择一个或多个内容甚至是选择全部内容。单选按钮与复选框语法格式如下。
同一组中的多个单选框名称必须相同，它们之间才能互相排斥。单选框和复选框都可以通过checked属性设置为选中的状态。
在<input>标记中，当type属性值设置为hidden时，表示定义隐藏域，它不会在网页中显示任何内容，以一种隐藏的方式完成重要数据的传递操作。其语法格式如下。
多行文本域是一种允许用户输入多行文本的区域，它不对输入的字符长度进行限制。它通过<textarea></textarea>标记对进行定义，同样包含于<form></form>标记对中，基本的语法格式如下。
在该标记中使用name属性指定多行文本域的名称，通过cols和rows两个属性分别指定多行文本域中显示字符的行数和列数，单位是字符个数。
在<form>标记中创建下拉列表域需要使用<select>标记，该标记具有multiple、name和size属性。multiple属性是定义下拉列表域是否支持多项选择。size属性用来设置列表的高度，默认时值为1，若没有设置multiple属性，将显示下一个下拉式的列表域。name属性用于定义列表框的名称。<select>标记的基本语法格式如下。
multiple属性不用赋值，直接加入到标签中即可，加入此属性后列表域就成为可多选的列表。
<option>标签用来定义列表域中的一个选项，此标记必须放在<select></select>标签对之间。<option>标记包含selected和value两个属性，其中selected属性用于指定默认选项，value属性用于给每一个下拉选项赋值，这个值才是下拉列表与程序交互的主要内容，定义下拉列表的示例代码如下。
图 3.4 下拉列表的定义
其运行效果，如图3.4所示。
在定义下拉列表并允许多项选择时，用户点选多个选项须按住键盘Ctrl键，否则无法进行多项选取。
在<input>标记中，当type属性值设置为image时，表示定义图像域；在<input>标记中，当type属性值设置为file时，表示定义文件域。
图像域在网站开发中的主要作用是利用图片代替按钮，表单中的按钮虽然可以通过CSS样式进行边框和背景色等的修饰，但是与图片比较起来还是相当单调无趣的。在图像域标签中，通过src属性引入图片位置，此位置可以为绝对路径，也可以为相对路径，图像域语法格式如下。
设置文件域与设置图像域方法大致相同。文件域语法格式如下。
表单是实现动态网页的一种主要的外在形式，使用表单可以收集客户端提交的相关信息，表单是实现网站互动功能的重要组成部分。
【例3.3】 在本实例中编写一个用户注册信息表单，实现用户注册信息的提交功能。具体步骤如下。
实例位置：光盘\MR\ Instance\3\3.3
（1）创建form表单，定义8个表单元素和一个“提交”按钮。
（2）载入CSS样式、JavaScript脚本和jQuery库，实现对表单元素的无刷新验证。在本项目中此内容读者可只做了解。意在突出form表单及表单元素的创建。
（3）当单击“提交”按钮时，程序首先判断文本框内容是否为空，如果为空，则给出提示信息。最后，单击“注册”按钮完成用户信息的提交。本实例采用较少的PHP代码，仅仅是利用CSS+HTML标签组成的，方便用户理解和学习。
（4）程序的主要代码如下。
运行结果，如图3.5所示。
图 3.5 注册页面
上传文件是网站开发中不可缺少的小模块，它的主要优点是能与访客进行简单的互动，由用户自主选择喜欢的图片或文件上传到服务器中，感受分享的乐趣。但是需要注意的是，用户上传的文件有时也是存在很大风险的。大家不妨假想一下。如果用户上传一个200MB或者更大的文件到服务器，这要消耗服务器很多资源，资源就是财富，所以对上传文件的大小和格式的控制显示尤为重要。
【例3.4】 在本实例中通过表单中的文件域选择要上传文件，通过隐藏域控制上传文件的大小，完成一个简单的文件上传操作。具体步骤如下。
实例位置：光盘\MR\ Instance\3\3.4
（1）创建form表单，定义POST方法提交数据，定义enctype的属性值为multipart/form-data，这是通过文件域上传文件必须设置的一个属性。
（2）创建隐藏域，控制上传文件的大小；创建文件域选择要上传的文件，最后创建一个“提交”按钮。
（3）编辑PHP脚本，通过$_POST[]全局数组获取提交按钮的值，判断该值是否存在。如果存在，则利用rand()函数、substr()函数和microtime()函数为上传文件重命名，并且定义上传文件在服务器中的存储路径，最后通过move_uploaded_file()函数将文件上传到服务器指定文件夹下。
（4）程序的主要代码如下。
图 3.6 文件域上传文件
本实例的运行结果，如图3.6所示。
有关文件上传技术的详细讲解，请参考本书第10章的内容，这里只是让读者了解图片、文件的上传是通过文件域来提交的。