二、HTML常用标签
- HTML常用标签是设计HTML页面的主要标签。
1. 列表标签
- 列表是一种规定格式的文字排列方式，用于列举内容。常用的列表分为有序列表、无序列表和自定义列表。
（1）有序列表
- 有序列表是指个列表按一定的标号顺序显示，列表用
<ol>开始，以</ol>结束，每一个列表项用<li></li>标签对定义。在<ol>中可以使用 type、start 属性。其中，type 属性用于设置编号的种类，其取值如下：
| 1 | 编号为数字，是默认值，如1、2、3 … |
|---|---|
| A | 编号为大写英文字母，如A、B、C … |
| a | 编号为小写英文字母，如a、b、c … |
| I | 编号为大写罗马字符，如I、II、III … |
| i | 编号为小写罗马字符，如i、ii、iii … |
- start 属性用于设置编号的起始序号，无论 type 取值是什么，strat 取值只能是1、2、3等整数，默认值为1。在
<li>中使用 type、value 属性，其中 type 属性的作用和上面一样；value 属性用来设定该项的编号，其后各项将以此作为起始编号递增，其值只能是1、2、3等整数。 - 举个例子：
<html>
<head>
<title>有序列表实例</title>
<meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8">
</head>
<body>
Java工程师必备的技能
<hr color = "blue" noshade>
<ol type = "1">
<li value = "3">Java程序设计</li>
<li>JSP程序设计</li>
<li>Java Web框架技术</li>
<li>Web服务器</li>
<li>数据库技术</li>
<li>项目开发经验</li>
</ol>
<hr color = "blue" noshade>
</body>
</html>
（2）无序列表
- 无序列表指各列表之间没有顺序关系，列表项显示时前面有一个项目符号。无序列表用
<ul>开始，以</ul>结束，每一个列表项同样也用<li></li>标签对定义。在<ul>、<li>中都可以使用 type 属性，其中<ul>中的 type 属性用于设置列表中所有表项前的项目符号类型；<li>中的 type 属性用于设置当前列表项前的项目符号类型。type 属性取值如下： - disc：实心圆点，默认值； circle：空心圆点； square：实心正方形
- 举个例子：
<body>
Java工程师必备的技能
<hr color = "blue" noshade>
<ul type = square>
<li>Java程序设计</li>
<li>JSP程序设计</li>
<li type = "disc">Java Web框架技术</li>
<li>Web服务器</li>
<li type = "circle">数据库技术</li>
<li type = "circle">项目开发经验</li>
</ul>
<hr color = "blue" noshade>
</body>
（3）自定义列表
- 自定义列表用
<dl>开始，以</dl>结束，给每一个列表项加上了一段说明性文字，说明性文字独立于列表项另起一行显示。其中，<dt></dt>标签对用来定义列表项；<dd></dd>标签对用来对列表项进行说明。 - 举个例子：
<body>
Java工程师必备的技能
<hr color = "blue" noshade>
<dl>
<dt>Java程序设计</dt>
<dd>要求具有...</dd>
<dt>JSP程序设计</dt>
<dd>要求具有...</dd>
</dl>
<hr color = "blue" noshade>
</body>
2. 多媒体和超链接标签
- 多媒体有图像、视频、背景音乐等多种形式，可以使网页更加丰富多彩，超链接可以包含不同信息的网页链接在一起。
（1）插入图像
- 使用
<img>标签可以为网页添加 .gif、.jpg、.png 等格式的图像，<img>的主要属性如下：
| src | 指定图像的源文件路径，可以使用相对路径、绝对路径或URL |
|---|---|
| width | 指定图像的宽度，单位为像素 |
| height | 指定图像的高度，单位为像素 |
| hspace | 指定图像水平方向的边沿空白，单位为像素 |
| vspace | 指定图像垂直方向的边沿空白，单位为像素 |
| border | 指定图像边框宽度 |
| align | 当文字与图像并排放置时，指定图像与文本行的对齐方式，其属性值可以取为 top(与文本行顶部对齐)、center(水平居中对齐)、middle(垂直居中对齐)、bottom(底部对齐，默认值)、left(图像左对齐)、right(图像有对齐) |
| alt | 用于描述该图像的文字，图像不能显示时将显示该属性值 |
| title | 当鼠标移至图像上时，将该属性值作为提示信息显示 |
- 举个例子：
<body>
美女好美啊！
<hr color = "blue" noshade>
<img alt = "美女" width = "360" height = "500" src = "timg.jpg" />
<!--将图片放在jsp文件目录下即可调用-->
<hr color = "blue" noshade>
</body>
（2）插入背景音乐
- 使用
<bgsound>标签可以在网页中添加 .wav、.mid、.mp3 等格式的背景音乐，主要属性如下：
| balance | 指定音乐的左右均衡 |
|---|---|
| delay | 指定播放延迟 |
| loop | 指定音乐循环播放次数。值为 -1或者 infinite 时，表示无限次数循环 |
| src | 指定音乐源文件的路径 |
| volume | 指定音量 |
- 举个例子：
<body>
<h1 align = "center">Miss Americana & The Heartbreak Prince</h1>
<hr color = "blue" noshade>
<img src = "Taylor Swift.jpg" alt = "歌手Taylor Swift" width = "360" height = "200"/>
<bgsound src = "Miss Americana & The Heartbreak Prince.mp3" loop = "2" volume = "-5000"/>
<hr color = "blue" noshade>
</body>
（3）插入超链接
- 使用
<a></a>标签对来创建超链接，<a>主要属性有 href、target
| href | 指定链接地址。如果是链接到网站外部，必须为URL地址；如果是链接到网站内部页面，只需指明该网页的绝对路径或相对路径。还可以赋值 “#” 作为空链接 |
|---|---|
| target | 指定显示链接目标的窗口，其值可取 _blank(浏览器总在一个新打开、未命名的窗口中载入目标文档)、 _parent(目标文档载入到当前窗口的父窗口中)、 _self(默认值，目标文档载入并显示在当前窗口中)、 _top(清除当前窗口所有被包含的框架并将目标文件载入整个浏览器窗口) |
- 举个例子：
<a href = "http://www.tup.tsinghua.edu.cn/" target = "_blank">清华大学出版社</a>
3. 表格标签
- 表格是一种能够有效地描述信息的组织方式，有行、列、单元格组成，可以很好地控制页面布局。许多网站都用多重表格来构建网站的总体布局，固定文本或图像的输出，还可以任意进行背景和前景颜色的设置。表格标签如下：
<table></table> | 该标签对用来进行一个完整表格的声明 |
|---|---|
<caption></caption> | 该标签对定义表格标题，会居中且显示在表格之上 |
<tr></tr> | 该标签对定义表格中的一行 |
<th><th> | 该标签对定义表格中列标题单元格 |
<td></td> | 该标签对定义行中的一个单元格 |
| 注意 | <caption></caption>标签必须紧随 table 标签之后；<tr></tr>标签对只能放在<table></table>标签对之间使用；<td></td>、<th></th>标签对也只能放在<tr></tr>标签对之间才有效 |
（1）<table>常用属性
| border | 设置表格边框的宽度，值为非负整数，若为0表示边框不可见，单位为像素 |
|---|---|
| cellspacing | 设置单元格边框到表格边框的距离，单位为像素 |
| cellpadding | 设置单元格内文字到单元格边框的距离，单位为像素 |
| width | 设置表格宽度。可以为像素取值也可以是相对页面宽度的百分比 |
| height | 设置表格高度，与width一样取值方式 |
| bgcolor | 设置表格背景色。值可以为十六进制代码，也可以为英文字母 |
| bordercolor | 设置表格边框颜色 |
| align | 设置表格在水平方向的对齐方式,取值为 left、right、center |
| valign | 设置表格在垂直方向的对齐方式 ，取值为 top、middle、baseline |
（2）<tr>常用属性
| bordercolor | 设置该行的外边框颜色 |
|---|---|
| bgcolor | 设置该行单元格的背景颜色 |
| height | 设置该行的高度 |
| align | 设置该行各单元格的内容在水平方向的对齐方式 |
| valign | 设置该行各单元格的内容在垂直方向的对齐方式 |
（3）<td>常用属性
| colspan | 设置单元格所占的列数，默认值为1 |
|---|---|
| rowspan | 设置单元格所占的行数，默认值为1 |
| background | 设置单元格的背景图像 |
| width | 设置单元格的宽度 |
- 单元格合并要满足先上后下、先左后右，并要删除多余的单元格。
（4）<th>常用属性
<th></th>定义的列标题的文字以粗体方式显示，其属性使用方法与<td></td>一致。在表格的定义语法中也可以不使用<th>定义标题单元格。
（5）举个例子
<body>
<table border = "1" width = "90%" bordercolor = "red" cellpadding = "2">
<tr height = "50" valign = "middle">
<th width = "33%" colspan = "2">Java工程师必备技能</th>
<th width = "36%" colspan = "2">测试工程师必备技能</th>
<th width = "36%" colspan = "2">.NET工程师必备技能</th>
</tr>
<tr align = "center">
<td width = "16%">Java程序设计</td>
<td width = "16%">JSP程序设计</td>
<td width = "17%">软件测试理论</td>
<td width = "17%">软件测试工具</td>
<td width = "17%">C#程序设计</td>
<td width = "17%">ASP.NET</td>
</tr>
<tr align = "center">
<td width = "16%">Java Web框架技术</td>
<td width = "16%">一年以上工作经验</td>
<td width = "17%">测试方案制定</td>
<td width = "17%">一年以上工作经验</td>
<td width = "17%">.NET Framework技术</td>
<td width = "17%">一年以上工作经验</td>
</tr>
</table>
</body>
- 对于比较复杂的表格，表格的结构也相对复杂，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用：thead、tbody、tfoot 来标注，这样更好的分清表格结构。
<thead></thead> | 用于定义表格的头部。用来放标题之类的东西。内部必须拥有<tr>标签 |
|---|---|
<tbody></tbody> | 用来定义表格的主体，放数据本体 |
<tfoot></tfoot> | 放表格的脚注之类 |
| 注意 | 以上表格都是放在 table 标签之中 |
4. 表单标签
- 表单在网页中用来供用户填写信息，以实现服务器获得用户信息，使网页拥有交互功能。网页中的可输入项、选择项等实现数据采集功能的控件所组成的就是表单，表单一般由表单标签、表单域、表单按钮组成。
（1）表单标签
<form></form>标签对用来创建一个表单，即定义表单开始和结束的位置。该标签对属于容器标签，表单里所有实现数据采集的控件需要定义在该标签对之间。表单标签的基本语法结构如下：<form action = "url" method = "get|post" name = "value" onsubmit = "function" onreset = "function" target = "window"></form>。常用属性如下：
| action | 设置服务器上用来处理表单数据的处理程序地址，处理程序可以是JSP程序、CGI程序、ASP.NET程序等，该属性值可以是URL地址，也可以是电子邮件地址（采用电子邮件地址的格式是action=“mailto:接收用户输入信息的邮件地址”）。 |
|---|---|
| method | 设置处理程序从表单中获取信息的方式，取值为 get 或 post。get 方法将表单中的输入信息作为查询字符串附加在 action 指定的地址后（中间用？隔开）传送到服务器。查询字符串用 key="value"的形式定义，如果有多个域，中间用&隔开。get 方法在浏览器的地址栏中以明文形式显示表单中各个表单域的值，对数据的长度有限制。post 方法将表单中用户输入的数据进行包装，按照HTTP传输协议中的post方式传送到服务器，且对数据的长度没有限制，目前大多采用此方法。 |
| name | 设置表单名字 |
| onsubmit、onreset | 设置在单击了 submit 或 reset 按钮后要执行的脚本函数名 |
| target | 设置显示表单内容的窗口名 |
（2）表单域
- 单行输入域：
<input>标签用来定义单行输入域，用户可在其中输入单行信息，主要属性如下：
| type | 设置输入域的属性，取值见下图片 |
|---|---|
| name | 设置输入域的名字 |
| align | 设置输入域的位置，可取值 left（靠左）、right（靠右）、middle（居中）、top（靠上）、bottom（靠底） |
| value | 设置输入域的默认值 |
| onclick | 设置按下按钮后执行的脚本函数名 |
- 多行输入域：
<textarea></textarea>标签对用来定义多行文本输入域，主要属性如下：
| name | 设置输入域的名字 |
|---|---|
| rows | 设置输入域的行数 |
| cols | 设置输入域的列数 |
| wrap | 设置是否自动换行，属性值可取 off（不自动换行）、hard（自动硬回车换行，换行标记一同被传送到服务器）、soft（自动软回车换行，换行标记不会被传送到服务器） |
- 选择域：
<select></select>标签对用来建立一个下拉列表，<option>标签用来定义下拉列表中的一个选项，用户可以从列表中选择一项或多项。
<select></select>主要属性 | 属性功能 |
|---|---|
| name | 设置下拉列表的名字 |
| size | 设置下拉列表的选项个数，默认值为 1 |
| multiple | 表示下拉列表支持多选 |
<option>主要属性 | 属性功能 |
| selected | 表示当前选择项被默认选中 |
| value | 设置当前选项的值，在该项被选中后，该项的值被送到服务器 |
（3）表单按钮
<button></button>标签对用于定义提交表单内容给服务器的按钮，主要属性有 type 和 accesskey
| type | 设置按钮类型，属性值可取 button（一般按钮）、reset（复位按钮）、submit（提交按钮）。它们与<input>中同名的属性具有相同的功能 |
|---|---|
| accesskey | 设置按钮热键，即按下 Alt 键的同时按下该属性值所对应的键便可以快速定位到该按钮 |
（4）举个例子
5. 框架标签
- 框架标签主要用来分割窗口和插入浮动窗口，使同一个浏览器窗口同时显示多个网页，如果能有效运用将有助于提高网页的浏览效率。
（1）框架结构文件格式
- 框架将浏览器窗口分为多个子窗口，每个子窗口可以单独显示一个HTML文档，各个子窗口也可以相关联地显示某一个内容，如可以将目录放在一个子窗口，而将文件内容放在另一个子窗口。框架结构文件格式如下：
<html>
<head>
<title>...</title>
</head>
<frameset>
<frame src = "...">
.
.
.
<frameset>
<frame src = "...">
.
.
.
</frameset>
<noframes>
</noframes>
</frameset>
</html>
（2）框架结构基本标签
<frameset></frameset>：该标签对用来定义一个框架结构容器，即用来定义网页被分割成几个窗口，各个子窗口是如何排列的。可以嵌套在其他<frameset></frameset>标签对中实现网页多重框架结构。<frameset>常用属性如下：
| rows | 在垂直方向将浏览器分割成多个子窗口，即浏览器中所有子窗口从上到下排列，同时设置每个子窗口所占的高度。该属性值可以是百分数、整数、星号，其中星号代表那些未说明高度的空间，如果同一个属性中出现多个星号则将剩下的未被说明的空间平均分配。各个子窗口高度之间用逗号分开。 |
|---|---|
| cols | 在水平方向将浏览器分割成多个子窗口，即浏览器中所有子窗口从左到右排列，同时设置每个子窗口所占的宽度。其他和rows属性一样。举个例子：<frameset rows = "40%,*" cols = "50%,*,200">：分为6个窗口，两行三列 |
| border | 设置子窗口边框宽度 |
| frameborder | 设置子窗口是否显示边框 |
| onload | 设置框架被载入时引发的事件 |
| onunload | 设置框架被卸载时引发的事件 |
<frame>：标签放在<frameset></frameset>之间，用来定义框架结构中某一个具体的子窗口。常用属性如下：
| src | 设置子窗口中将要显示的HTML文件地址，取值可以是URL地址，也可以是相对地址或绝对地址 |
|---|---|
| name | 设置子窗口的名字 |
| scrolling | 指定子窗口是否显示滚动条，取值可以是yes、no或auto（根据窗口内容自动决定是否显示滚动条） |
| noresize | 指定窗口不能调整大小，该属性直接加入标签即可使用，不需要赋值。 |
<noframes></noframes>：该标签对中的内容显示在不支持框架的浏览器窗口中。
（3）target属性
- 在框架结构子窗口的HTML文档中如果含有超链接，当用户单击超链接时，目标网页显示的位置由target属性决定，若没有指定则在当前子窗口打开。target属性常用格式如下：
<a href = "目的网页地址" target = "显示目标网页的子窗口名字">超链接文字</a>
（4）举个例子
<html>
<head>
<title>表格实例</title>
<meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8">
</head>
<frameset cols = "70%,*" frameborder = "yes" border = "10">
<frameset rows = "60%,*" frameborder = "yes" >
<frame src = "top.hetml" name = "top" scrolling = "auto" noresize>
<frame src = "bottom.hetml" name = "bottom" scrolling = "no" noresize>
</frameset>
<frame src = "right.html" name = "right" scrolling = "no" noresize>
<noframes>
对不起，您的浏览器版本太低！
</noframes>
</frameset>
</html>
参考书籍：马军霞、张志锋、皇安伟等编著的《JSP程序设计实训与案列教程》第二版
9625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
