Download presentation
Presentation is loading. Please wait.
1
网站规划与网页设计
2
第4章 XHTML 基础 4.1 XHTML简介 4.2 XHTML文档的基本结构 4.3 网页文件的创建过程 4.4 段落标记
4.3 网页文件的创建过程 4.4 段落标记 4.5 文字标记 4.6 超链接 4.7 图像 4.8 表格 4.9 框架（多窗口页面） 表单
3
4.1 XHTML简介 XHTML的产生 HTML语言依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上的应用需求。 2000年，W3C组织公布发行了XHTML 1.0版本。 XHTML 1.0是一种在HTML 4.0基础上优化和改进的新语言，目的是基于XML应用。 XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。
4
4.1 XHTML简介 4.1.2 XHTML的优点 1．XHTML文档遵从XML标准
XHTML 内容既符合XML，并且如果依照一些简单的指导方针，也能被HTML 4.0用户代理程序识别。 1．XHTML文档遵从XML标准 用标准的XML工具很容易查看、编辑和检验它们.在现有的HTML 4.0代理用户程序中使用，也可以在新的XHTML用户代理程序中使用，在后者中使用可以达到与前者同样或更好的效果。 2．在XHTML文档中可使用更多的应用程序 XHTML文档中使用的应用程序（如Script和Applet）可以是HTML的文档对象模型DOM，也可以是XML的DOM。
5
4.1 XHTML简介 4.1.3 XHTML代码规范 1．所有的标记都必须有一个相应的结束标记
单独不成对的标签，则在标签最后加一个“/”来关闭它 <p>一定写对应的</p> <br /> <img height="80" alt="网页设计师" src="../images/logo_w3cn.gif" width="200" /> 2．所有标签的元素和属性的名字都必须使用小写 XHTML对大小写是敏感的。XHTML要求所有的标签和属性的名字都必须使用小写字母。
6
4.1 XHTML简介 4.1.3 XHTML代码规范 3．所有的标记都必须合理嵌套 按照XHTML要求必须修改为：
<p><b></p></b>错误 按照XHTML要求必须修改为： <p><b></b>/p> 4．所有的属性必须用引号括起来 在HTML中可写为： <input name=guitar type=checkbox value=guitar> 而按照XHTML要求必须修改为： <input name="guitar" type="checkbox" value="guitar" />
7
4.1 XHTML简介 4.1.3 XHTML代码规范 5．特殊符号“<”、“>”和“&”用编码表示
小于（<）号，不是标签一部分的，必须被编码为<； 大于（>）号，不是标签一部分的，必须被编码为>； （&）号，不是实体的一部分的，必须被编码为&。 6．每个属性必须赋值 XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如： <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 按照XHTML要求必须修改为： <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked" /> </td> 7．不要在注释内容中使用“--” “--”只能出现在XHTML注释的开头和结束位置。
8
4.2 XHTML文档的基本结构 4.2.1 标记及其属性 XHTML文档由标记和被标记的内容组成。格式为：
标记及其属性 1.标记 XHTML文档由标记和被标记的内容组成。格式为： <标记> 受标记影响的内容 </标记> <title> 我的第一个网页 </title> 需要注意: ① 每个标记都要用“<”（小于号）和“>”（大于号）括起来，如<p>，<table>，以表示这是XHTML代码而非普通文本。 “<”、“>”与标记名之间不能留有空格或其他字符。 ② 在标记名前加上符号“/”便是其结束标记，表示该标记内容的结束，如</h1>。标记也有不用</标记>结尾的，称之为单标记。
9
4.2 XHTML文档的基本结构 标记及其属性 2. 标记的属性 标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。格式为： <标记 属性1="属性值1" 属性2="属性值2" …> 受影响的内容 </标记> <h1 align="left"> 欢迎！</h1>
10
4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 XHTML文档是一种纯文本格式的文件，XHTML文档的基本结构为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title> 网页的标题 </title> </head> <body> 网页的内容 </body> </html> 【例4-1】
11
4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 【说明】 ①DOCTYPE必须为大写。
DTD叫做文档类型定义，里面包含了文档的规则。浏览器根据定义的DTD来解释页面的标记，并显示出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。 DOCTYPE声明必须放在每一个XHTML文档的最顶部，在所有代码和标记之前。
12
4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 【说明】
② “xmlns”是XHTML namespace的缩写，称为“名字空间”。由于XHTML是HTML向XML过渡的标记语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标记，所以它的名字空间都相同，就是 ③ 第5行定义语言编码。为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言。一般使用gb2312（简体中文）。
13
4.3 网页文件的创建过程 4.3.1 编辑和保存网页 用最简单的“记事本”来编辑网页。
4.3 网页文件的创建过程 编辑和保存网页 用最简单的“记事本”来编辑网页。 ① 打开记事本。单击Windows的“开始”按钮，在“程序”菜单中的“附件”子菜单中单击“记事本”。 ② 创建新文件，并按HTML语言规则编辑。在“记事本”窗口中输入HTML语言，输入的内容。 ③ 保存网页。打开“记事本”的“文件”菜单，选择“保存”。此时将出现“另存为”对话框，在“保存在”下拉列表框中选择文件要存放的路径；在“文件名”文本框输入以.html或.htm为后缀的文件名，如welcome.html；在“保存类型”下拉列表框中选择“文本文档”。最后单击“保存”按钮，将记事本中的内容保存在磁盘中。 如果希望这一页是网站的首页（主页），想让浏览者输入网址后，就显示这一页的内容，可以把这个文件设为默认文档，文件名为index.html或index.htm。
14
4.3 网页文件的创建过程 4.3.2 预览网页 1. 用浏览器打开 2. 在“Windows资源管理器”或“我的电脑”中打开
4.3 网页文件的创建过程 预览网页 1. 用浏览器打开 2. 在“Windows资源管理器”或“我的电脑”中打开 在“Windows资源管理器”或“我的电脑”中双击要打开的.html文件，这时将直接在默认的浏览器中打开该.html文件。
15
4.4 段落标记 1 注释标记<!--...--> <!-- 注释内容 -->
4.4 段落标记 1 注释标记<! > <!-- 注释内容 --> 2 强制换行和不换行标记<br />、<nobr>...</nobr> <br>放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为： 文字 <br /> 不换行标记可令文字不能因太长使浏览器无法显示而换行，它对住址、数学公式、一行数字等尤其有用。其格式为： <nobr> 文字 </nobr>
16
4.4 段落标记 3 段落标记<p>...</p>
4.4 段落标记 3 段落标记<p>...</p> 段落标记放在一个段落的头尾，用于定义一个段落。<p>...</p>标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。段落标记的格式为： <p align="left|center|right"> 文字 </p> 一个段落标记<p>可以看作是两个<br />标记，即<br /><br />。
17
4.4 段落标记 4 定位标记<div>…</div>
4.4 段落标记 4 定位标记<div>…</div> 设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时，常使用<div>…</div>标记。定位标记的格式为： <div align="left|center|right"> 文本、图像或表格 </div> 缺省时默认为left。
18
4.4 段落标记 5 水平线标记<hr />
4.4 段落标记 5 水平线标记<hr /> 当浏览器解释到HTML文档中的<hr/>标记时，会在此处换行，并加入一条水平线段。 水平线标记的格式为： <hr align="left|center|right" size="横线粗细" width="横线长度" color="横线色彩" noshade=“ noshade” /> size设定线条粗细，以像素为单位，默认为2。 width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。 color设定线条色彩，默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。
19
4.4 段落标记 6．段落标记综合实例 【例4-2】本例文件ex4-2.htm在浏览器中的显示效果如图4-4所示。 【例4-2】
4.4 段落标记 6．段落标记综合实例 【例4-2】本例文件ex4-2.htm在浏览器中的显示效果如图4-4所示。 图4-4 段落标记综合实例 【例4-2】
20
4.5 文字标记 1 标题文字标记<h#>…</h#>
4.5 文字标记 1 标题文字标记<h#>…</h#> <h# align="left|center|right"> 标题文字 </h#> #用来指定标题文字的大小，#取1～6的整数值，取1时文字最大，6时文字最小。 属性align设置标题在页面中的对齐方式：left、center或right。缺省时默认为left。 <h#>…</h#>标记缺省显示宋体，在一个标题行中无法使用不同大小的字体。 与用<title>…</title>定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。
21
4.5 文字标记 2．文字标记实例 【例4-3】 【例4-3】设置文字的标题。本例文件ex4-3.htm在浏览器中的显示效果如图4-5所示。
4.5 文字标记 2．文字标记实例 【例4-3】设置文字的标题。本例文件ex4-3.htm在浏览器中的显示效果如图4-5所示。 【例4-3】 图4-5 文字标记综合实例
22
4.6 超链接 超链接从当前网页定义的位置跳转到其他位置，包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。 通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子邮件、远程访问等。 当网页包含超链接时，网页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。 超文本链接使用锚点标记<a>来定义。
23
4.6 超链接 1 锚点标记<a>...</a>
4.6 超链接 1 锚点标记<a>...</a> 锚点（anchor）标记由<a>定义，它在网页上建立超文本链接。 通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的URL。具有以上特点的词、句或图片就称为热点。 <a>标记的格式为： <a href="URL" target="打开窗口方式"> 热点 </a> href属性为超文本引用，它的值为一个URL，是目标资源的有效地址。 如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL，即<a href="#"> 热点 </a>。
24
target属性 target设定链接被单击后结果所要开始窗口的方式。可选值为：_blank，_parent，_self，_top。
25
4.6 超链接 2 指向其他页面的链接 (1) 链接到同一目录内的网页文件 链接到同一目录内的网页文件的格式为：
4.6 超链接 2 指向其他页面的链接 (1) 链接到同一目录内的网页文件 链接到同一目录内的网页文件的格式为： <a href="目标文件名.html"> 热点文本 </a> (2) 链接到下一级目录中的网页文件 链接到下一级目录中网页文件的格式为： <a href="子目录名/目标文件名.html"> 热点文本 </a> (3) 链接到上一级目录中的网页文件 链接到上一级目录中网页文件的格式为： <a href="../目标文件名.html"> 热点文本 </a> 其中“. . /表示退到上一级目录中。 (4) 链接到同级目录中的网页文件 链接到同级目录中网页文件的格式为： <a href="../子目录名/目标文件名.html"> 热点文本 </a>
26
4.6 超链接 3 指向本页中的链接 <a href="#记号名"> 热点文本 </a>
4.6 超链接 3 指向本页中的链接 要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为： <a href="#记号名"> 热点文本 </a> 书签就是用<a>标记对该文本作一个记号。格式为： <a name="记号名"> 目标文本附近的字符串 </a>
27
建立指向其他页面某处的文本 格式为： <a href="URL#记号名"> 热点文本 </a>
要在跳转到的位置处加上链接标记： <a name="记号名"> 文字串 </a> 如果链接指向其他文件的某一部分，格式为： <a href="目标文件路径/文件名#记号名"> 热点文本 </a>
28
4.6 超链接 4 指向下载文件的链接 <a href="下载文件名"> 热点文本 </a> 5 指向电子邮件的链接
4.6 超链接 4 指向下载文件的链接 如果链接到的文件不是HTML文件，则该文件将作为下载文件，其格式为： <a href="下载文件名"> 热点文本 </a> 5 指向电子邮件的链接 单击指向电子邮件的链接，将打开缺省的电子邮件程序，如FoxMail、Outlook Express，并自动填写邮件地址。指向电子邮件链接的格式为： <a href="mailto: 地址"> 热点文本 </a>
29
4.6 超链接 6．超链接综合实例 【例4-4】超链接综合实例。在浏览器中的显示效果如图4-6所示。 【例4-4】 图4-6 超链接综合实例
30
4.7 图像 1 网页的背景 （1） 设置背景色 <body bgcolor="色彩值">
4.7 图像 1 网页的背景 （1） 设置背景色 <body bgcolor="色彩值"> “色彩值”可以为色彩的英文名或相应十六进制值。 （2） 用图片作为背景 <body background="图片文件名"> background取值为一个图片文件名，并且要指出文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件可为GIF格式或JPEG格式的文件。 在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。
31
4.7 图片 2 图片标记<img> <img src="图片文件名" alt="简单说明" width="图片宽度" height="图片高度" border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白" align="环绕方式|对齐方式“ /> 如果不设定图片的尺寸，图片将按照其本身的大小显示。可使用<img>标记的width和height属性来设置图片的大小。width和height属性的属性值可取像素数，也可取百分数。
32
4.7 图片 用图片作为热点 <a href="URL"> <img src="图片文件名"> </a>
4.7 图片 用图片作为热点 图片也可作为热点，单击图片则跳转到被链接的文本或其他文件。格式为： <a href="URL"> <img src="图片文件名"> </a> 例如，下面代码： <a href="vb_book.html"> <img src="vb.jpg" alt="VB封面" width="140" height="190" hspace="10" vspace="5“ /> </a>
33
4.7 图片 4．图像应用综合实例 【例4-5】图像应用综合实例。本例文件ex4-5.htm在浏览器中的显示效果如图4-7所示。 图4-7 图像应用综合实例 【例4-5】
34
4.8 表格 1 简单表格 表格的标记为<table>，行的标记为<tr>，表项的标记为<td>。格式为： <table border="n" width="x|x%" height="y|y%" cellspacing="i" cellpadding="j"> <tr> <th>表头1</th> <th>表头2</th> <th>…</th> <th>表头n</th> <tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td> … </table>
35
4.8 表格 2 表格内文字的对齐方式 在缺省下，表项居于单元格的左端。 (1) 水平对齐 表项数据的水平对齐用标记<th>、<td>和<tr>的align属性。align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。 (2) 垂直对齐 valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。
36
4.8 表格 3 表格在页面中的对齐方式 表格在浏览器窗口中的位置有三种：居左、居中和居右。
4.8 表格 3 表格在页面中的对齐方式 表格在浏览器窗口中的位置有三种：居左、居中和居右。 使用<table>标记的align属性。格式为： <table align="left|center|right"> 当表格位于页面的左侧或右侧时，文本填充在另一侧。 当表格居中时，表格两边没有文本。 当align属性缺省时，文本在表格的下面。
37
4.8 表格 4 表格的色彩和图片背景 bgcolor=""色彩或色彩值" 设置背景色彩 background="图片文件名“ 设置背景图片
4.8 表格 4 表格的色彩和图片背景 在<table>、<th>、<tr>、<td>标记中，属性可以改变表格的背景和边框的色彩、添加背景图片，也可以为行和单元格改变色彩、添加背景图片。 bgcolor=""色彩或色彩值" 设置背景色彩 background="图片文件名“ 设置背景图片 bordercolor="色彩" 设置表格边框的色彩 bordercolorlight="色彩" 设置表格边框亮部的色彩 rules="row,cols或none" 设置表内线的显示方法，none为无内线
38
4.8 表格 5．表格应用综合实例 【例4-6】表格应用综合实例。本例文件ex4-6.htm在浏览器中的显示效果如图4-8所示。 【例4-6】 图4-8 表格应用综合实例
39
4.9 框架（多窗口页面） 框架（Frames）也称多窗口页面或帧，是在同一浏览器窗口中显示多个相互隔离的XHTML页的结构，每个区域显示一个XHTML文件。 1 建立框架 框架的建立使用<frameset>、<frame>两个标记。<frameset>用来划分窗格，<frame>标记用来声明其中框架页面的内容。框架的基本结构为： <html> <head>... </head> <frameset> <!-- 划分窗格 --> <frame src="url"> <!-- 定义第1个窗格 --> <frame src="url"> <!-- 定义第2个窗格 --> … </frameset> </html>
40
4.9 框架（多窗口页面） (1) <frameset>标记
4.9 框架（多窗口页面） (1) <frameset>标记 <frameset>标记用来定义一个框架组的属性，格式为： <frameset row="横向框架数" cols="纵向框架数" border="像素值" bordercolor="色彩值" frameborder="yes|no" framespacing="像素值“ > … </frameset> 其中属性： row 设定横向分割的框架数目 cols 设定纵向分割的框架数目 border 设定边框的宽度 bordercolor 设定边框的色彩 frameborder 设定有∕无边框 framespacing 设置各窗格间的空白
41
4.9 框架（多窗口页面） 框架有横向和纵向之分。对一个框架来说，其大小是很重要的。<frameset>的rows和cols属性用于设定横向分割和纵向分割的框架数目。例如，要建立有三个横向框架的页面，可写为： <frameset row="x1|y1%|z1*, x2|y2%|z2*, x3|y3%|z3*">
42
4.9 框架（多窗口页面） (2) <frame>标记
4.9 框架（多窗口页面） (2) <frame>标记 <frame>标记用于给各个框架指定页面的内容，也就是，它将各个框架和包含其内容的那个文件联系在一起。<frame>是一个单标记，格式为： <frame src="源文件名.html" name="框架名" border="像素值" bordercolor="色彩值" frameborder="yes|no" marginwidth="像素值" marginheight="像素值" scrolling="yes|no|auto" noresize/> <frame>标记的个数应等于在<frameset>标记中所定义的框架数，并按在文件中出现的次序按先行后列对框架进行初始化。如果<frame>标记数目少于<frameset>中定义的框架数量，则多余的框架为空。
43
4.9 框架（多窗口页面） 【例4-7】纵向排列多个窗格。本例中用到的其他HTM文件是在前面例题中建立的文件。本例文件ex4-7.htm在浏览器中显示的效果如图4-9所示。 框架的嵌套 图4-9 纵向排列多个窗格 【例4-7】
44
4.9 框架（多窗口页面） 2 框架间的链接 在一个框架中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示的目标文件的框架。 使用<a>的target属性就可以控制目标文件在那个框架内显示。当单击热点文本时，目标文件就会出现在有target指定的框架内。target属性的值可以为框架名，使用格式为： <a href="目标文件名.html" target="框架名"> 热点文本 </a>
45
4.9 框架（多窗口页面） 2 框架间的链接 另外，“框架名”有4个特殊的值，分别实现4类特殊的操作：
4.9 框架（多窗口页面） 2 框架间的链接 另外，“框架名”有4个特殊的值，分别实现4类特殊的操作： target="_blank"：链接的目标文件被显示在一个新的没有名字的浏览器窗口中。 target="_self"：链接的目标文件被显示在当前框架窗口中，代替正在显示的热点文本所在的那个文件，是省略target属性的默认值。 target="_top"：链接的目标文件被显示在整个浏览器窗口（取消了框架）。 target=“_parent”：当框架嵌套时，链接的目标文件被显示在父框架中；否则，被显示在整个浏览器窗口中。
46
4.9 框架（多窗口页面） 3．框架应用综合实例 【例4-9】制作一个框架集，包含上、下框架，下框架又分为左、右两部分，并实现框架间的链接。本例文件ex4-9.htm在浏览器中显示的效果如图4-11所示。 图4-11 框架应用综合实例 【例4-9】
47
4.10 表单 1 表单的标记<form>...</form>
4.10 表单 1 表单的标记<form>...</form> 网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。在网页中，通过表单交流和反馈信息。格式为： <form name="表单名" action="URL" method="get|post"> <input type="表项类型" name="表项名" value="缺省值" size="x" maxlength="y“ /> … </form> name属性 :表单的名字，在一个网页中用于惟一识别一个表单 action属性 :表单处理的方式，往往是 地址或网址 method属性:表单数据的传送方向，是获得（GET）表单还是送出（POST）表单
48
4.10 表单 2 文字和密码的输入 type属性值为text，则输入的文本以标准的字符显示；
4.10 表单 2 文字和密码的输入 type属性值为text，则输入的文本以标准的字符显示； type属性值为password，则输入的文本显示为“*”。 在表项前应加入表项的名称，如“您的姓名”等，以告诉浏览者在随后的表项中输入的内容。
49
4.10 表单 3 重置和提交 <input type="reset" value="按钮名“ />
4.10 表单 3 重置和提交 如果浏览者想清除输入到表单中的全部内容，可以使用<input>标记中的type属性所设的重置（reset）按钮，当浏览者完成表单的填写，想要发送时，可使用<input>标记的属性type所设的提交（submit）按钮，将表单内容送给action中的网址或函件信箱。格式为： <input type="reset" value="按钮名“ /> <input type="submit" value="按钮名“ /> 当缺省value的设置值时，重置和提交的按钮分别显示为“重置”和“提交查询内容”。
50
4.10 表单 4 复选框和单选钮 选择钮可以是复选框（checkbox）或单选钮（radio）。
4.10 表单 4 复选框和单选钮 选择钮可以是复选框（checkbox）或单选钮（radio）。 用<input>标记的type属性可设置选择钮的类型 属性value可设置该选择钮的控制初值，用以告诉表单制作者选择结果。 用checked表示是否为缺省选中项。 name属性是控制名，同一组的选择钮的控制名是一样的。
51
4.10 表单 5 选择栏<select> 当浏览者选择的项目较多时，如果用选择钮来选择，占页面的区域就会较多。可以用<select>标记和<option>标记来设置选择栏。选择栏可分为两种，即弹出式和字段式。<select>标记的格式为： <select size="x" name="控制操作名" multiple> <option value=“”> … </select>
52
4.10 表单 5 选择栏<select> 其中： size:取数字，表示在带滚动条的选择栏中一次可见的列表项数
4.10 表单 5 选择栏<select> 其中： size:取数字，表示在带滚动条的选择栏中一次可见的列表项数 name: 控制操作名 multiple:不带值，加上本项表示可选多个选项，否则只能单选 <option>标记的格式为： <option select value="可选择的内容"> select 不带值，加上本项表示该项是预置的 value 指定控制操作的初始值，缺省时初值为option中的内容表示选项值
53
4.10 表单 6 多行文字的输入textarea>...</textarea>
4.10 表单 6 多行文字的输入textarea>...</textarea> <TEXTAREA>标记可以设置允许成段文字的输入。格式为： <textarea name="控制操作名" rows="行数" cols="列数"> 多行文本 </textarea> 其中的行数和列数是指不用滚动条就可看到的部分。
54
4.10 表单 7．表单应用综合实例 【例4-10】制作一个“职员调查表”，收集职员的个人资料。为了显得整洁，在表单中使用了无边框表格。本例文件ex4-10.htm在浏览器中显示的效果如图4-12所示。 【例4-10】 图4-12 表单应用综合实例
55
习题4 2．制作如图4-14所示的网页，单击软件名称，则下载该软件。
1．制作如图4-13所示的网页，要求章标题的级别为标题h2，居中，黑体，红色；节标题的级别为标题h3，居左，楷体，绿色；正文为宋体，蓝色。整个网页背景色为乳白色。 2．制作如图4-14所示的网页，单击软件名称，则下载该软件。 3．分别制作如图4-15（a）、（b）所示的网页，单击小图像，将显示放大的图像。 4．练习表格在页面中的应用，分别制作如图4-16（a）、（b）所示的网页。在图4-16（a）中单击“详细”超文本则打开新的浏览器窗口，显示详细内容，如图4-16（b）所示。 5．制作一个“网友推荐”表单，如图4-17所示。 6．制作如图4-18所示的框架网页。在左框架中单击项目，在右框架中显示相应的内容。
Similar presentations
