1.2 常用的HTML标签
HTML标签有很多种，例如段落标签、标题标签、文本样式标签、表格标签和图像标签等。下面介绍几种比较常用的HTML标签。
1.2.1 段落、行内和换行标签
为了使网页中的文字有条理地显示出来，HTML 提供了段落标签<p>和行内标签<span>。如果希望某段文本强制换行显示，就需要使用换行标签<br>。下面通过案例演示这3种标签的使用。在chapter01文件夹中创建名称为htmlDemo02的HTML文件，其关键代码如文件1-2所示。
文件1-2 htmlDemo02.html
1 <body> 2 <p>使用HTML制作网页时， 3 <span>通过br标签</span>可以实现<br />换行效果 4 </p> 5 </body>
使用浏览器打开文件1-2，显示结果如图1-3所示。
图1-3 文件1-2的运行结果
从图1-3中可以看出，使用标签<span>对文本没有影响，但使用换行标签<br />的文本实现了强制换行的效果。
1.2.2 文本样式标签
在 HTML 中，使用<font>标签控制网页中文本的样
式，例如字体、字号和颜色。<font>标签的基本语法格式如下：
<font 属性=＂属性值＂>文本内容</font>
下面通过一个案例演示<font>标签的使用。在chapter01文件夹中创建名称为htmlDemo03的HTML文件，其关键代码如文件1-3所示。
文件1-3 htmlDemo03.html
1 <body> 2 我是默认样式的文本<br /> 3 <font face=＂微软雅黑＂ size=＂7＂ color=＂green＂><br /> 4 我是7号绿色文本，我的字体是微软雅黑哦</font> 5 </body>
在文件1-3中，第2行代码的文本为HTML默认文本样式，第3行代码使用<font>标签的face、size和color属性分别设置了文本的字体、大小和颜色。使用浏览器打开文件1-3，显示结果如图1-4所示。
图1-4 文件1-3的运行结果
1.2.3 表格标签
在制作网页时，为了使网页中的数据能够有条理地显示，可以使用表格对网页进行规划。在Word文档中，可通过插入表格的方
式来创建表格，而在HTML网页中需要使用相关的表格标签才能创建表格。
在HTML网页中创建表格的基本语法格式如下：
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
上述语法格式包含3对HTML标签，分别为<table></table>、<tr></tr>、<td></td>，它们是创建表格的基本标签，缺一不可。其中，<table></table>用于定义一个表格；<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中；<td></td>用于定义表格中的单元格，也可称为表格中的列，必须嵌套在<tr></tr>标签中。下面通过一个案例演示<table>标签的使用。
在chapter01文件夹中创建一个名称为htmlDemo04的HTML文件，其关键代码如文件1-4所示。
文件1-4 htmlDemo04.html
1 <body> 2 <table border=＂1px＂> 3 <tr> 4 <td>姓名</td> 5 <td>语文</td> 6 <td>数学</td> 7 <td>英语</td> 8 </tr> 9 <tr> 10 <td>itcast</td> 11 <td>95</td> 12 <td>80</td> 13 <td>90</td> 14 </tr> 15 </table> 16 </body>
在文件1- 4中，<table>标签的border属性会为每个单元格应用边框，并用边框围绕表格。这里将border的属性设置为1，单位是像素，表示该表格边框的宽度为1像素。使用浏览器打开文件1- 4，显示结果如图1-5所示。
如果border属性的值发生改变，那么只有围绕表格的边框尺寸会发生变化，表格内部的边框还是1像素宽。如果将border的属性值设置为0或者删除border属性，将显示没有边框的表格。将文件1-4中的border属性值设置为0，保存文件后刷新页面，显示结果如图1-6所示。
图1-5 文件1-4的运行结果
图1-6 修改文件1-4后的运行结果
从图1-6可以看出，表格中的内容依然整齐有序地排列着，但是这时已看不到边框。
1.2.4 表单标签
表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。例如，注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标签定义的。
表单主要由3个部分构成，分别为表单控件、提示信息和表单域。这3个部分的详细介绍如下。
● 表单控件：包含具体的表单功能项，例如单行文本输入框、密码输入框、复选框、提交按钮等。
● 提示信息：一个表单中通常还需要包含一些说明性的文字即表单控件前的说明文字，用于提示用户进行填写和操作。
● 表单域：它相当于一个容器，用于容纳所有的表单控件和提示信息。
表单中常用标签的使用方法具体如下。
（1）表单域<form>
在HTML中，<form>标签用于定义表单域，即创建一个表单。<form>标签基本语法如下：
<form action=＂URL地址＂ method=＂提交方式＂ name=＂表单名称＂>
各种表单控件
</form>
在上述语法中，action、method、name为<form>标签的常用属性。action属性用于指定表单提交的地址，例如action="login.jsp"，表示表单数据会提交到名为login.jsp的页面去处理。method属性用于设置表单数据的提交方式，它有GET和POST两个值。其中，GET为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且有数据量限制；而使用POST提交方式不但保密性好，而且可以提交大量的数据，因此开发中通常使用POST方式提交表单。
（2）表单控件<input />
浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等，使用<input />控件可以在表单中定义这些元素。<intput />控件基本语法格式如下：
<input type=＂控件类型＂ />
在上述语法中，type属性为<input />标签最基本的属性，用于指定不同的控件类型，type属性的取值有多种。除type属性外，<input />控件还可以定义很多其他属性，其中比较常用的有id、name、value、size，它们分别用于指定<input />控件的ID值、名称、控件中的默认值和控件在页面中的显示宽度。下面通过一个案例演示<input />控件的使用。
在chapter01文件夹下创建名称为htmlDemo05的 HTML文件，在该文件中使用<input />控件来显示注册页面，其关键代码如文件1-5所示。
文件1-5 htmlDemo05.html
1 <body> 2 <fieldset> 3 <legend>注册新用户</legend> 4 <!-- 表单数据的提交方式为POST --> 5 <form action=＂#＂ method=＂post＂> 6 <table cellpadding=＂2＂ align=＂center＂> 7 <tr> 8 <td align=＂right＂>用户名：</td> 9 <td> 10 <!-- 1．文本输入框控件 --> 11 <input type=＂text＂ name=＂username＂ /> 12 </td> 13 </tr> 14 <tr> 15 <td align=＂right＂>密码：</td> 16 <!-- 2．密码输入框控件 --> 17 <td><input type=＂password＂ name=＂password＂ /></td> 18 </tr> 19 <tr> 20 <td align=＂right＂>性别：</td> 21 <td> 22 <!-- 3．单选按钮控件，因为无法输入value, 所以预先定义好 --> 23 <input type=＂radio＂ name=＂gender＂ value=＂male＂ /> 男 24 <input type=＂radio＂ name=＂gender＂ value=＂female＂ /> 女 25 </td> 26 </tr> 27 <tr> 28 <td align=＂right＂>兴趣：</td> 29 <td> 30 <!-- 4．复选框控件 --> 31 <input type=＂checkbox＂ name=＂interest＂ value=＂film＂ /> 看电影 32 <input type=＂checkbox＂ name=＂interest＂ value=＂code＂ /> 敲代码 33 <input type=＂checkbox＂ name=＂interest＂ value=＂game＂ /> 玩游戏 34 </td> 35 </tr> 36 <tr> 37 <td align=＂right＂>头像：</td> 38 <td> 39 <!-- 5．文件上传控件 --> 40 <input type=＂file＂ name=＂photo＂ /> 41 </td> 42 </tr> 43 <tr> 44 <td colspan=＂2＂ align=＂center＂> 45 <!-- 6．提交按钮控件 --> 46 <input type=＂submit＂ value=＂注册＂ /> 47 <!-- 7．重置按钮控件，单击后会清空当前表单 --> 48 <input type=＂reset＂ value=＂重填＂ /> 49 </td> 50 </tr> 51 </table> 52 </form> 53 </fieldset> 54 </body>
在文件1-5中，分别使用<input />定义了文本输入框控件、密码输入框控件、单选按钮和复选框控件、文件上传控件以及提交和重置按钮控件。在上述控件中，name属性代表控件名称，value属性表示该控件的值。需要注意的是，单选按钮控件和复选框控件必须指定相同的name值，这是为了方便在处理页面数据时获取表单传递的值（表单所传递的是该控件的value值）。在上述代码中，还使用了<fieldset>和<legend>标签，<fieldset>标签的作用是将表单内的元素分组，而<legend>标签则用于为<fieldset>标签定义标题。
使用浏览器打开文件1-5，显示结果如图1-7所示。
填写图1-7中的表单数据，页面如图1-8所示。
图1-7 文件1-5的运行结果
图1-8 填写图1-7中的表单数据
从图1-8可以看出，密码输入框中内容为不可见状态，单选按钮只能选择一个值，而复选框可以选择多个值。
多学一招：HTML的多行文本标签
通过前面的学习可知，使用<input>可以定义单行文本输入框。但是，如果需要输入大量的文本信息，单行文本框将无法显示全部的输入信息，为此HTML提供了<textarea>标签，通过此标签可以创建多行文本框。<textarea>标签的基本语法格式如下：
<textarea cols=＂每行中的字符数＂ rows=＂显示的行数＂>
文本内容
</textarea>
下面通过一个案例演示<textarea></textarea>标签的使用。在 chapter01文件夹中创建一个名称为htmlDemo06的HTML文件，其关键代码如文件1-6所示。
文件1-6 htmlDemo06.html
1 <body> 2 <form action=＂#＂ method=＂post＂> 3 评论： <br /> 4 <textarea cols=＂60＂ rows=＂5＂> 5 评论时，请注意文明用语。 6 </textarea> 7 <br /> <br /> 8 <input type=＂submit＂ value=＂提交＂ /> 9 </form> 10 </body>
在文件1-6中，<textarea>标签的cols属性用于设置文本框每行的字符数，rows属性用于设置文本框的行数。<textarea></textarea>标签之间的文字为默认显示文本，该文字可以被用户修改或删除，这里起提示作用。使用浏览器打开文件htmlDemo06.html，显示结果如图1-9所示。
图1-9 文件1-6的运行结果
1.2.5 列表标签
列表标签是网页结构中常用的标签，网页中的列表按照列表结构划分通常分为3类，分别是无序列表、有序列表和定义列表。下面对这3类列表标签进行详细讲解。
（1）无序列表
无序列表是一种没有特定顺序的列表，各个列表项之间没有先后顺序之分，通常是并列的。定义无序列表的基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
在上述语法中，<ul>标签用于定义无序列表，<li>标签嵌套在<ul>标签中，用于描述具体的列表项，每对<ul></ul>中至少应包含一对<li></li>。
下面通过一个案例演示<ul>标签的使用。在chapter01文件夹中创建一个名称为htmlDemo07的HTML文件，其关键代码如文件1-7所示。
文件1-7 htmlDemo07.html
1 <body> 2 <font size=＂5＂>传智播客学科</font><br /> 3 <ul> 4 <li>web前端</li> 5 <!-- 指定type属性值 ,disc为默认值--> 6 <li type=＂disc＂>JAVA</li> 7 <li type=＂square＂>PHP</li> 8 <li type=＂circle＂>.NET</li> 9 </ul> 10 </body>
在文件1-7中，<li>标签的type属性用于指定列表项目符号， type常用的属性值有3种：disc、square和circle，它们的显示效果分别是●、■和○。type属性的默认值是disc，第4行代码使用了此默认值，第6行代码设置了type属性值为"disc"。使用浏览器打开文件1-7，结果如图1-10所示。
图1-10 文件1-7的运行结果
（2）有序列表
有序列表是一种强调排列顺序的列表，使用<ol>标签定义，内部可以嵌套多个<li>标签。例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
在上述语法中，<ol>标签用于定义有序列表，<li>为具体的列表项。与无序列表类似，每对<ol></ol>中也至少应包含一对<li></li>。
有序列表的使用与无序列表类似，此处不再赘述。
（3）定义列表
定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即<dl>、<dt>、<dd>。定义列表的基本语法格式如下：
<d1>
<dt>名词1</dt>
<dd>dd是名词1的描述信息1</dd>
<dd>dd是名词1的描述信息2</dd>
<dt>名词2</dt>
<dd>dd是名词2的描述信息1</dd>
<dd>dd是名词2的描述信息2</dd>
</d1>
在上述语法中，<dl>标签用于指定定义列表，<dt>标签和<dd>标签并列嵌套于<dl>标签中。其中，<dt>标签用于指定术语名词，<dd>标签用于对名词进行解释和描述。一对<dt></dt>可以对应多对<dd></dd>，也就是说可以对一个名词进行多项解释。下面通过一个案例演示定义列表标签的使用。
在chapter01文件夹中创建一个名称为htmlDemo08的HTML文件，其关键代码如文件1-8所示。
文件1-8 htmlDemo08.html
1 <body> 2 <d1> 3 <dt>红色 </dt> 4 <dd>是光谱的三原色和心理四色之一</dd> 5 <dd>代表着吉祥、喜庆、火热、幸福、豪放、斗志、革命、轰轰烈烈、激情澎湃等</dd> 6 <dt>绿色</dt> 7 <dd>是自然界中常见的颜色</dd> 8 <dd>绿色有无公害、健康的意思</dd> 9 </d1> 10 </body>
文件1-8中定义了一个定义列表，其中，第3～5行代码中的<dt>标签内名词为“红色”，其后紧跟着2对<dd></dd>标签，用于对<dt>标签中“红色”进行解释和描述；第6～8行代码中的< dt>标签内名词为“绿色”，其后紧跟着2对<dd></dd>标签，用于对<dt>标签中“绿色”进行解释和描述。使用浏览器打开文件1-8，显示结果如图1-11所示。
图1-11 文件1-8的运行结果
1.2.6 超链接标签
超链接是网页中常用的元素，一个网站通常由
多个页面构成，进入网站时首先看到的是首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在 HTML 中创建超链接非常简单，只需用<a>标签环绕需要被链接的对象即可。使用<a>标签创建超链接的基本语法格式如下：
<a href=＂跳转目标＂ target=＂目标窗口的弹出方式＂>文本或图像</a>
在上述语法中，<a>标签是一个行内标签，用于定义超链接，href和target是<a>标签的常用属性，具体含义如下。
● href:href属性用于指定链接指向的页面的URL，当在<a>标签中使用href属性时，该标签就具有了超链接的功能。
● target:target属性用于指定页面的打开方式，其值有_self、_blank、_parent和_top（_self和_blank较为常用）。其中，_self为默认值，表示在原窗口打开；_blank表示在新窗口打开；_parent表示在父框架集中打开被链接文档；_top表示在整个窗口中打开被链接文档。
下面通过一个案例演示<a>标签的使用。在chapter01文件夹中创建一个名称为htmlDemo09的HTML文件，其关键代码如文件1-9所示。
文件1-9 htmlDemo09.html
1 <body> 2 在新窗口打开： 3 <a href=＂http://www.itcast.cn/＂ target=＂_blank＂>传智播客</a><br /> 4 在原窗口打开： 5 <a href=＂http://www.baidu.com/＂ target=＂_self＂>百度</a> 6 </body>
在文件1-9中，使用<a>标签定义了两个超链接，其中“传智播客”首页链接的打开方式设置为在新窗口打开，“百度”首页链接的打开方式设置为在原窗口打开。使用浏览器打开文件1-9，显示效果如图1-12所示。
图1-12 文件1-9的运行结果
从图1-12中可以看到两个超链接，单击“传智播客”链接后，页面跳转效果如图1-13所示。
图1-13 单击“传智播客”链接后打开的新窗口
从图1-13中可以看出，当单击“传智播客”链接时，“传智播客”首页在新窗口打开。关闭新窗口，回到原窗口再单击“百度”链接，页面跳转效果如图1-14所示。
图1-14 “百度”链接页面在原窗口打开
从图1-14中可以看出，当单击“百度”链接后，“百度”首页会在原窗口打开。
1.2.7 图像标签
要想在HTML网页中显示图像就需要使用图像标签<img>。<img >标签基本语法格式如下：
<img src=＂图像URL＂ />
在上述语法中，src 属性用于指定图像文件的路径，属性值可以是绝对路径，也可以是相对路径，它是<img>标签的必备属性。要想在网页中灵活地应用<img>标签，只使用src属性是不行的，还需要其他属性的配合。
下面通过一个案例演示<img>标签的用法。在chapter01文件夹中添加一个名称为itcast.png的图片文件，然后创建一个名称为htmlDemo10的HTML文件，其关键代码如文件1-10所示。
文件1-10 htmlDemo10.html
1 <body> 2 显示图片：<img src=＂itcast.png＂ width=＂160px＂ height=＂130px＂ border=＂0＂ /> 3 </body>
在文件1-10中，width和height属性分别用于设置图像的宽度和高度，单位为像素；border属性用于设置图像的边框，border="0"表示无边框。使用浏览器打开文件1-10，显示结果如图1-15所示。
从图1-15中可以看出，浏览器显示出了相应的图片。
图1-15 文件1-10的运行结果