3.1.3　HTML 5的基本语法

HTML5向下兼容HTML4及之前版本的所有语法，因此HTML中所有的标记都可以在HTML5中直接应用。但是，目前的网页开发中，建议HTML5只作为语义部分，页面的颜色和样式都使用CSS来渲染，页面中的简单互动都使用JS来渲染。由于本书主要是学习Web的基本技术，鉴于篇幅有限的缘故，这里只做简单的介绍，其它复杂的应用也是在这些简单应用的基础上进行组装的。

在W3C的规范中，要求HTML5的标签全部使用小写字母，因此本书后续的代码也基本遵循这个原则，前面的一小节的大写字母为了让读者对HTML语法有一个了解，对其兼容性有一个认识。

网页中的基本元素如文本、图像、超链接、表格等本质上对应的是HTML的相应标记，在制作HTML文档时，只需要在对应的HTML代码中插入相应的属性和内容即可。

1．文本的创建方式

在网页中，直接添加文本的方式有以下几种方式：

（1）直接添加文本

最简单的文本添加方式是直接添加，如＜div＞添加文本＜/div＞、＜td＞添加文本＜/td＞、＜li＞添加文本＜/li＞等标记中。

（2）段落文本

使用＜p＞...＜/p＞的段落标签可以很容易地在段落与段落之间添加文本，并且文本与文本之间有一行间距。如：

（3）标题文本

标题文本的作用是给文本添加一个标题，它是具有语义的标记。该标记一共有6层，分别是h1、h2、h3、h4、h5、h6，数值越大，字体越小，如＜h1＞是最大的标题标记，而＜h6＞是最小的标题标记。

标题标记中有很多属性如align="center"表示居中显示，但是在HTML 5的代码中，这种align属性一般不推荐使用，如果需要使用样式，一般都是采用CSS进行控制。

（4）换行标记

在HTML中，＜br/＞是常见的换行标记，一般在编辑中，直接利用【Enter】键是无法起到换行的作用的，必须采用标记进行换行操作。

（5）列表标记

列表标记的标签如＜ul＞、＜li＞等一般在HTML 5的代码中使用较少，现在都将这种列表标记与CSS进行配合使用，可以制作界面优良的下拉菜单。

（6）其他标记

在HTML中，有时需要输入一些特殊的标记，如空格、版权信息（©）、大于符号等，在这种情况下，需要对符号进行特殊处理，表3.1中列举了特殊的标记符号。

续表

在表3.1中，可以利用&nbsp；或&#160；在浏览器中显示一个空格，其他符号也是采用类似的方式输出。

图3.2是利用文本标记创建的一个页面，其代码如下：

2．图像

图像是目前来说网页中的重要组成部分，在网页中，选取合适的图像，能够吸引更多用户获取更多的流量。而且图像的表现更加直接，很容易让用户了解网站的主要内容。

在HTML中，使用＜img＞标签对图像进行插入，并且可以设置图像的大小、对齐等属性。＜img＞标签是一个单标记，其基本用法的代码如下：

上述代码的图片pic.jpg放置在images文件夹中，并且与该html文件同级的目录下，其显示的效果图如图3.3所示。

另外，＜img＞标记有一些常见的属性，如src、alt等，其属性的基本意义如表3.2所示。

3．超链接

超链接是网站最重要的标记之一，它的主要作用是方便浏览者从一个网页跳转到另外一个网页，从而将多个无关联的页面联系在一起。在互联网上，超链接是通过URL定位的，而在同一个网站工程中，通常使用路径来定位到另外一个HTML文档。

在网页中，超链接是使用＜a＞...＜/a＞标签来完成的，下列代码即完成了几个简单的超链接：

上述代码的运行效果如图3.4所示，图中的超链接的显示方式为文本，除了这种显示方式外，超链接还可以使用图片、多媒体等做超链接。

超链接中有一些基本属性，其属性的基本含义如表3.3所示。

（1）用文本做超链接

使用文本做超链的方式是常见的，基本上在标签＜a＞...＜/a＞之间插入文本即可，其基本的格式如下：

（2）用图片做超链接

使用图片做超链接的方式比较简单，基本上将以上代码的文本换成图像即可，其代码的基本形式如下：

（3）其他超链接形式

除了以上常见的几种超链接形式外，还有其他几种超链接形式，如音频、视频等都可以做超链接，其方式和上述的效果类似。不过有一种热区链接的方式，这种方式需要将图片中的指定区域进行标记，当用户点击到标记区域的相关内容后，即可触发超链接效果。由于这些超链接的应用不是很常见，因此本书不做过多的详细介绍。

4．表格

表格是网页中的常见元素，它不仅仅可以显示页面中的数据，还可以对页面中的元素进行布局和排版，达到美化页面的效果。另外，表格通常和表单配合使用，可以达到很好的页面布局。

（1）表格的基本属性

绘制一个表格通常需要＜table＞、＜tr＞、＜td＞这3个标签，其中＜table＞是定义表格的位置和显示效果，＜tr＞是定义表格的行，＜td＞是定义表格中的元素位置。一个简单表格的代码如下：

关于以上代码，这里有一点需要说明，就是＜table＞的border、cellpadding、cellspacing属性在HTML 5中已经明确不推荐使用，HTML 5将表格的这些设置给CSS进行控制了。而在本书中，由于很多地方使用CSS进行描述的效果不佳，因此仍采用这些基本属性进行设置，读者在开发中，强烈建议使用HTML配合CSS的设计架构，这是目前的主流模式。另一方面，border=0、cellpadding=0、cellspacing=1是默认值，其效果并不是很好，所以一般需要重新设置，上述代码的显示效果如图3.5所示。

在＜table＞中，虽然目前的HTML 5官方建议使用CSS进行表格的设置，但是在很多代码中，还是沿用了HTML 4的属性，这些属性的基本含义如表3.4所示。

（2）单元格的对齐属性

在单元格＜td＞和＜tr＞中也有很多属性，其中用的较多的属性为align（现在也被CSS替代了），它的主要作用是控制单元格的水平对齐属性，有left、center、right这3个属性值，默认值是left。如下列代码即为对齐属性的显示代码。其中，代码的显示效果如图3.6所示，水平的效果不是很明显，原因是目前浏览器对align的属性支持度较低，因此在对单元格进行设置的过程中建议采用CSS完成。

（3）单元格的合并属性

有些单元格可能会出现合并的一些属性，如图3.7所示，即为部分单元格的合并效果。

单元格的合并分为水平和垂直合并，水平合并又称多列合并，对应的属性为colspan；垂直合并又称为多行合并，对应的属性为rowspan，它们是＜td＞的特有属性。图3.7的代码如下：

5．表单

表单是浏览器和服务器进行数据交换的重要标签之一，利用表单可以把用户填写的相关信息提交到服务器。用户一般从服务器获取数据，有超链接和表单提交两种方式，在第1章的图1.1中，可以很清晰地了解浏览器和服务器的传输流程。而表单是传输中最重要的一部分，用户可以通过HTML编写的表单向服务器请求制定的数据，当用户单击页面上的“提交”按钮时，表单的信息就会发送到服务器中，由服务器的相关应用程序进行处理，并将处理的数据返回给用户。

本章的表单仅仅只是讲解HTML的表单设计，关于服务的表单处理，在后续的章节中会继续讲解。一个简单的表单代码如下所示，代码中设计的标签和用法在本节会详细说明的，这里的提交会出现404错误，因为响应的register.jsp页面没有定义：

（1）表单的基本属性

这里的表单主要是＜form＞标签完成，它是一个配对标记，并且是严格配对的，具体的用法如下：

①表单需要限定其范围，一个表单的所有标记内容都要写在＜form＞和＜/form＞之间，当用户单击表单中的“提交”按钮时，提交的信息只能是＜form＞和＜/from＞之间的内容；这里有一个特别说明：HTML 5增加了form属性，允许在＜form＞标签外使用，并能将数据提交到服务器外，但是该标签应用较少，所以本书不做重点介绍。

②表单的属性必须完整，如表单的action响应位置、提交的method方法等。

③表单需要一个提交按钮，方便用户的数据提交。

上述代码的显示效果如图3.8所示。

除了以上的基本用法外，表单还有以下基本属性：

①name属性。name属性是作为唯一的一个名称标记该表单，如＜form name="myform"＞，该属性的主要作用是供JavaScript通过代码调用表单中的元素（随着HTML 5的发展，这种方式已经逐渐演变为id属性）。

②id属性。id属性的主要作用是供JavaScript调用，并对元素进行页面的检验和控制，在整个HTML页面中id的名称是唯一的。

③action属性。action属性是用来设置表单的响应URL的，如＜form action="login.jsp"＞，表示当用户提交数据后，将数据提交到login.jsp进行处理，处理完成后通常将结果返回给浏览器。

④method属性。表单中的method方法对应的有两个选项get和post，其中默认的方法是get，用法如＜form method="post"＞，这两种方法的区别如下：

a．get方法提交后，会在浏览器的地址栏中将提交的信息显示出来，提交的数据之间用&隔开；post方法提交后，信息不会在浏览器中显示出来，数据更加安全。

b．get方法最多只能提交256个字符，而post方法无此限制，因此在提交文件、大量的数据时尽量使用post方法。

c．超链接本质上是一个get方法，服务器将超链接当作get方法处理。

d．大部分的表单提交中，推荐采用post方法，但是在一些特殊地方，还是会使用get方法进行数据的提交，如在分页控制的应用中。

（2）表单数据的处理流程

表单的数据处理流程可以简单描述为：当用户单击表单后的提交按钮后，表单会向服务器发送用户填写的内容，服务器则会通过提交数据的name和value对应的值进行数据的提取，然后对提取数据进行处理后，返回给服务器。

在表单提交中，一个最简单表单必须有以下3部分内容：

①＜form＞标记。表单提交必须有一个完整的form标记，否则表单的数据无法确定后台服务器处理的位置。

②表单中至少有一个提交项。每个表单至少有一个提交项（文本域、单选按钮或复选框等），这样提交的数据才有意义，才能正确收集到用户的信息，否则没有信息提交给服务器。

③提交按钮。每一个表单中最好有一个提交按钮，方便用户将输入的信息提交到服务器中。

6．表单中常见的标记

从图3.6源代码可以看出，表单中的信息包含＜input＞、＜select＞、＜option＞、＜textarea＞等标签，本节将重点介绍这些标签，其他标签在后续代码中用到时也会具体讲解。

（1）＜input＞标记

＜input＞标记主要是用来让用户输入信息，方便表单提交将输入的信息提交到服务器中进行数据处理。＜input＞标签的样式由type属性控制，type属性为不同的值，对应的显示的效果也不同，常见的type属性值如表3.5所示。

表3.5列出了常用的属性值，还有其他属性值，如url、image、search等，因为这些属性值应用较少，本节不做介绍，后续章节有需要时再详细讲解。

（2）单行文本框

当＜input＞的属性中type="text"时，代码在页面中显示一个单行文本，文本框主要用来收集用户的基本信息，其基本用法如下：

这段代码的意思是：该文本框的宽度为20个字符，id和name都为username。这里需要重点说明的是id的作用域只在本页面中起作用，主要是与JavaScript配合，起到页面交互的作用；提交中起关键作用的name，如果用户输入信息为“张三”，提交后，服务器收到的数据其实是“username=张三”的信息。服务器处理的是属性name中的属性名为username中的信息。

如果用户没有输入内容，那么服务器提交表单后收到的数据其实为空；在HTML 5中，为了避免这种情况，定义了required属性，在提交信息之前，页面会对提交项做检查，如果没有输入，则不允许提交。

另外，＜input＞还有一个value属性，可以在初次打开页面中让文本显示一个初始值，方便用户对初始值进行操作，这些常用的属性如表3.6所示。

（3）密码框

当＜input＞中的type属性为password时，表示该属性是一个密码域，用户的输入会以密文显示，但是在提交到服务器的过程中，则是以明文形式输入。其基本用法如下：

当用户在密码框中输入的信息为“123456”时，服务器实际处理的是“passwd=123456”信息，服务器处理会在后续章节中详细讲解。

（4）单选按钮

当＜input＞中的type属性为radio时，它就会在页面中显示一个单选按钮，这里需要重点说明的是：单选按钮只有在name值相同时才有效。在一组单选按钮中，浏览器只允许用户选择一个按钮，当提交时，只有被选中的单选按钮的name和value被提交到服务器中。单选按钮的基本用法如下：

其中，checked="checked"表示当前按钮默认状态为选中状态。

（5）复选框

当＜input＞的type属性为checkbox时，该标签在页面中显示为复选框，允许用户选择一个或多个选项。复选框的一个属性为checked时，表明该复选框默认为选中状态。当表单提交时，浏览器检测复选框，只有当复选框为选中状态时，才会提交到服务器进行处理。复选框的基本用法如下：

（6）数字域

当＜input＞标签的type属性为number时，它是HTML 5的新属性，在页面中显示的是一个数字域，页面中只允许用户输入指定的整数类型，其基本用法如下：

上述代码的意思是该文本框为一个数字域，提交的name为age，输入的数值范围为1～100，每次递进1个数值，默认值为18。如果输入的数值不在此范围内，则表单会提示，并无法提交页面。

（7）文件域

当＜input＞的type属性为file时，页面会显示为带浏览标记的文件上传域，以供用户将文件上传到服务器中，具体用法在后续服务器章节会详细讲明，其常见用法代码如下：

（8）隐藏域

当＜input＞的type属性为hidden时，此时的文本域为隐藏状态，在页面中不会有任何显示效果。这种隐藏域的常见用法是存储用户的特定信息，如有些页面需要分步完成，此时可以用隐藏域来存储特定的信息，如id，以便帮助用户接受处理同一类的信息。其常见的用法代码如下：

（9）多行文本域

＜textarea＞是多行文本域的标记，作用是让用户在浏览器中输入多行文字，如很多留言和评论都是多行文本域。常见的文本域用法如下：

文本域的常见属性如表3.7所示。

（10）下拉菜单标记

下拉菜单标记由＜select＞和＜option＞共同组成，每一个＜option＞对应的value不同，其用法如下：

上述介绍了一些HTML的基本标签，还有其他很多标签，鉴于篇幅，本书不做讲解。由于HTML的主要作用是前端的语义，而现在的大部分网页都是使用的DIV+CSS的架构，因此在后续章节中，将会着重介绍该架构的基本知识。