网站规划与网页设计
第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 框架(多窗口页面) 4.10 表单
4.1 XHTML简介 4.1.1 XHTML的产生 HTML语言依然有缺陷和不足,人们仍在不断的改进它,使它更加便于控制和有弹性,以适应网络上的应用需求。 2000年,W3C组织公布发行了XHTML 1.0版本。 XHTML 1.0是一种在HTML 4.0基础上优化和改进的新语言,目的是基于XML应用。 XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。
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。
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要求所有的标签和属性的名字都必须使用小写字母。
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" />
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注释的开头和结束位置。
4.2 XHTML文档的基本结构 4.2.1 标记及其属性 XHTML文档由标记和被标记的内容组成。格式为: 4.2.1 标记及其属性 1.标记 XHTML文档由标记和被标记的内容组成。格式为: <标记> 受标记影响的内容 </标记> <title> 我的第一个网页 </title> 需要注意: ① 每个标记都要用“<”(小于号)和“>”(大于号)括起来,如<p>,<table>,以表示这是XHTML代码而非普通文本。 “<”、“>”与标记名之间不能留有空格或其他字符。 ② 在标记名前加上符号“/”便是其结束标记,表示该标记内容的结束,如</h1>。标记也有不用</标记>结尾的,称之为单标记。
4.2 XHTML文档的基本结构 4.2.1 标记及其属性 2. 标记的属性 标记只是规定这是什么信息,或是文本,或是图片,但怎样显示或控制这些信息,就需要在标记后面加上相关的属性来表示,每个标记有一系列的属性。格式为: <标记 属性1="属性值1" 属性2="属性值2" …> 受影响的内容 </标记> <h1 align="left"> 欢迎!</h1>
4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 XHTML文档是一种纯文本格式的文件,XHTML文档的基本结构为: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title> 网页的标题 </title> </head> <body> 网页的内容 </body> </html> 【例4-1】
4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 【说明】 ①DOCTYPE必须为大写。 DTD叫做文档类型定义,里面包含了文档的规则。浏览器根据定义的DTD来解释页面的标记,并显示出来。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分。 DOCTYPE声明必须放在每一个XHTML文档的最顶部,在所有代码和标记之前。
4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 【说明】 ② “xmlns”是XHTML namespace的缩写,称为“名字空间”。由于XHTML是HTML向XML过渡的标记语言,它需要符合XML文档规则,因此也需要定义名字空间。又因为XHTML1.0不能自定义标记,所以它的名字空间都相同,就是http://www.w3.org/1999/xhtml。 ③ 第5行定义语言编码。为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言。一般使用gb2312(简体中文)。
4.3 网页文件的创建过程 4.3.1 编辑和保存网页 用最简单的“记事本”来编辑网页。 4.3 网页文件的创建过程 4.3.1 编辑和保存网页 用最简单的“记事本”来编辑网页。 ① 打开记事本。单击Windows的“开始”按钮,在“程序”菜单中的“附件”子菜单中单击“记事本”。 ② 创建新文件,并按HTML语言规则编辑。在“记事本”窗口中输入HTML语言,输入的内容。 ③ 保存网页。打开“记事本”的“文件”菜单,选择“保存”。此时将出现“另存为”对话框,在“保存在”下拉列表框中选择文件要存放的路径;在“文件名”文本框输入以.html或.htm为后缀的文件名,如welcome.html;在“保存类型”下拉列表框中选择“文本文档”。最后单击“保存”按钮,将记事本中的内容保存在磁盘中。 如果希望这一页是网站的首页(主页),想让浏览者输入网址后,就显示这一页的内容,可以把这个文件设为默认文档,文件名为index.html或index.htm。
4.3 网页文件的创建过程 4.3.2 预览网页 1. 用浏览器打开 2. 在“Windows资源管理器”或“我的电脑”中打开 4.3 网页文件的创建过程 4.3.2 预览网页 1. 用浏览器打开 2. 在“Windows资源管理器”或“我的电脑”中打开 在“Windows资源管理器”或“我的电脑”中双击要打开的.html文件,这时将直接在默认的浏览器中打开该.html文件。
4.4 段落标记 1 注释标记<!--...--> <!-- 注释内容 --> 4.4 段落标记 1 注释标记<!--...--> <!-- 注释内容 --> 2 强制换行和不换行标记<br />、<nobr>...</nobr> <br>放在一行的末尾,可以使后面的文字、图片、表格等显示于下一行,而又不会在行与行之间留下空行,即强制文本换行。强制换行标记的格式为: 文字 <br /> 不换行标记可令文字不能因太长使浏览器无法显示而换行,它对住址、数学公式、一行数字等尤其有用。其格式为: <nobr> 文字 </nobr>
4.4 段落标记 3 段落标记<p>...</p> 4.4 段落标记 3 段落标记<p>...</p> 段落标记放在一个段落的头尾,用于定义一个段落。<p>...</p>标记不但能使后面的文字换到下一行,还可以使两段之间多一空行。段落标记的格式为: <p align="left|center|right"> 文字 </p> 一个段落标记<p>可以看作是两个<br />标记,即<br /><br />。
4.4 段落标记 4 定位标记<div>…</div> 4.4 段落标记 4 定位标记<div>…</div> 设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时,常使用<div>…</div>标记。定位标记的格式为: <div align="left|center|right"> 文本、图像或表格 </div> 缺省时默认为left。
4.4 段落标记 5 水平线标记<hr /> 4.4 段落标记 5 水平线标记<hr /> 当浏览器解释到HTML文档中的<hr/>标记时,会在此处换行,并加入一条水平线段。 水平线标记的格式为: <hr align="left|center|right" size="横线粗细" width="横线长度" color="横线色彩" noshade=“ noshade” /> size设定线条粗细,以像素为单位,默认为2。 width设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。 color设定线条色彩,默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。
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】
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>定义的网页标题不同,标题格式显示在浏览器窗口内,而不显示在浏览器的标题栏中。
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 文字标记综合实例
4.6 超链接 超链接从当前网页定义的位置跳转到其他位置,包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件,甚至跳转到声音、图片等多媒体文件。 通过超链接还可以获得不同形态的服务,如文件传输、资料查询、电子邮件、远程访问等。 当网页包含超链接时,网页中的外观形式为彩色(一般为蓝色)且带下划线的文字或图片。单击这些文本或图片,可跳转到相应位置。 超文本链接使用锚点标记<a>来定义。
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>。
target属性 target设定链接被单击后结果所要开始窗口的方式。可选值为:_blank,_parent,_self,_top。
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>
4.6 超链接 3 指向本页中的链接 <a href="#记号名"> 热点文本 </a> 4.6 超链接 3 指向本页中的链接 要在当前页面内实现超链接,需要定义两个标记:一个为超链接标记,另一个为书签标记。超链接标记的格式为: <a href="#记号名"> 热点文本 </a> 书签就是用<a>标记对该文本作一个记号。格式为: <a name="记号名"> 目标文本附近的字符串 </a>
建立指向其他页面某处的文本 格式为: <a href="URL#记号名"> 热点文本 </a> 要在跳转到的位置处加上链接标记: <a name="记号名"> 文字串 </a> 如果链接指向其他文件的某一部分,格式为: <a href="目标文件路径/文件名#记号名"> 热点文本 </a>
4.6 超链接 4 指向下载文件的链接 <a href="下载文件名"> 热点文本 </a> 5 指向电子邮件的链接 4.6 超链接 4 指向下载文件的链接 如果链接到的文件不是HTML文件,则该文件将作为下载文件,其格式为: <a href="下载文件名"> 热点文本 </a> 5 指向电子邮件的链接 单击指向电子邮件的链接,将打开缺省的电子邮件程序,如FoxMail、Outlook Express,并自动填写邮件地址。指向电子邮件链接的格式为: <a href="mailto:E-mail地址"> 热点文本 </a>
4.6 超链接 6.超链接综合实例 【例4-4】超链接综合实例。在浏览器中的显示效果如图4-6所示。 【例4-4】 图4-6 超链接综合实例
4.7 图像 1 网页的背景 (1) 设置背景色 <body bgcolor="色彩值"> 4.7 图像 1 网页的背景 (1) 设置背景色 <body bgcolor="色彩值"> “色彩值”可以为色彩的英文名或相应十六进制值。 (2) 用图片作为背景 <body background="图片文件名"> background取值为一个图片文件名,并且要指出文件存放的路径,可以是相对路径,也可以是绝对路径。图片文件可为GIF格式或JPEG格式的文件。 在浏览器中,作为背景的图片将按原来的大小复制,重复铺满整个网页。
4.7 图片 2 图片标记<img> <img src="图片文件名" alt="简单说明" width="图片宽度" height="图片高度" border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白" align="环绕方式|对齐方式“ /> 如果不设定图片的尺寸,图片将按照其本身的大小显示。可使用<img>标记的width和height属性来设置图片的大小。width和height属性的属性值可取像素数,也可取百分数。
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>
4.7 图片 4.图像应用综合实例 【例4-5】图像应用综合实例。本例文件ex4-5.htm在浏览器中的显示效果如图4-7所示。 图4-7 图像应用综合实例 【例4-5】
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>
4.8 表格 2 表格内文字的对齐方式 在缺省下,表项居于单元格的左端。 (1) 水平对齐 表项数据的水平对齐用标记<th>、<td>和<tr>的align属性。align的属性值分别为:center(表项数据的居中)、left(左对齐)、right(右对齐)或justify(左右调整)。 (2) 垂直对齐 valign的属性值分别为:top(靠单元格顶)、bottom(靠单元格底)、middle(靠单元格中)或baseline(同行单元数据项位置一致)。
4.8 表格 3 表格在页面中的对齐方式 表格在浏览器窗口中的位置有三种:居左、居中和居右。 4.8 表格 3 表格在页面中的对齐方式 表格在浏览器窗口中的位置有三种:居左、居中和居右。 使用<table>标记的align属性。格式为: <table align="left|center|right"> 当表格位于页面的左侧或右侧时,文本填充在另一侧。 当表格居中时,表格两边没有文本。 当align属性缺省时,文本在表格的下面。
4.8 表格 4 表格的色彩和图片背景 bgcolor=""色彩或色彩值" 设置背景色彩 background="图片文件名“ 设置背景图片 4.8 表格 4 表格的色彩和图片背景 在<table>、<th>、<tr>、<td>标记中,属性可以改变表格的背景和边框的色彩、添加背景图片,也可以为行和单元格改变色彩、添加背景图片。 bgcolor=""色彩或色彩值" 设置背景色彩 background="图片文件名“ 设置背景图片 bordercolor="色彩" 设置表格边框的色彩 bordercolorlight="色彩" 设置表格边框亮部的色彩 rules="row,cols或none" 设置表内线的显示方法,none为无内线
4.8 表格 5.表格应用综合实例 【例4-6】表格应用综合实例。本例文件ex4-6.htm在浏览器中的显示效果如图4-8所示。 【例4-6】 图4-8 表格应用综合实例
4.9 框架(多窗口页面) 框架(Frames)也称多窗口页面或帧,是在同一浏览器窗口中显示多个相互隔离的XHTML页的结构,每个区域显示一个XHTML文件。 1 建立框架 框架的建立使用<frameset>、<frame>两个标记。<frameset>用来划分窗格,<frame>标记用来声明其中框架页面的内容。框架的基本结构为: <html> <head>... </head> <frameset> <!-- 划分窗格 --> <frame src="url"> <!-- 定义第1个窗格 --> <frame src="url"> <!-- 定义第2个窗格 --> … </frameset> </html>
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 设置各窗格间的空白
4.9 框架(多窗口页面) 框架有横向和纵向之分。对一个框架来说,其大小是很重要的。<frameset>的rows和cols属性用于设定横向分割和纵向分割的框架数目。例如,要建立有三个横向框架的页面,可写为: <frameset row="x1|y1%|z1*, x2|y2%|z2*, x3|y3%|z3*">
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>中定义的框架数量,则多余的框架为空。
4.9 框架(多窗口页面) 【例4-7】纵向排列多个窗格。本例中用到的其他HTM文件是在前面例题中建立的文件。本例文件ex4-7.htm在浏览器中显示的效果如图4-9所示。 框架的嵌套 图4-9 纵向排列多个窗格 【例4-7】
4.9 框架(多窗口页面) 2 框架间的链接 在一个框架中显示一个所有网页内容的目录,而通过单击其中的某项,在另一个框架中显示相应内容。这些目录是热点文本,需要在框架之间建立超链接,并指明显示的目标文件的框架。 使用<a>的target属性就可以控制目标文件在那个框架内显示。当单击热点文本时,目标文件就会出现在有target指定的框架内。target属性的值可以为框架名,使用格式为: <a href="目标文件名.html" target="框架名"> 热点文本 </a>
4.9 框架(多窗口页面) 2 框架间的链接 另外,“框架名”有4个特殊的值,分别实现4类特殊的操作: 4.9 框架(多窗口页面) 2 框架间的链接 另外,“框架名”有4个特殊的值,分别实现4类特殊的操作: target="_blank":链接的目标文件被显示在一个新的没有名字的浏览器窗口中。 target="_self":链接的目标文件被显示在当前框架窗口中,代替正在显示的热点文本所在的那个文件,是省略target属性的默认值。 target="_top":链接的目标文件被显示在整个浏览器窗口(取消了框架)。 target=“_parent”:当框架嵌套时,链接的目标文件被显示在父框架中;否则,被显示在整个浏览器窗口中。
4.9 框架(多窗口页面) 3.框架应用综合实例 【例4-9】制作一个框架集,包含上、下框架,下框架又分为左、右两部分,并实现框架间的链接。本例文件ex4-9.htm在浏览器中显示的效果如图4-11所示。 图4-11 框架应用综合实例 【例4-9】
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属性 :表单处理的方式,往往是E-mail地址或网址 method属性:表单数据的传送方向,是获得(GET)表单还是送出(POST)表单
4.10 表单 2 文字和密码的输入 type属性值为text,则输入的文本以标准的字符显示; 4.10 表单 2 文字和密码的输入 type属性值为text,则输入的文本以标准的字符显示; type属性值为password,则输入的文本显示为“*”。 在表项前应加入表项的名称,如“您的姓名”等,以告诉浏览者在随后的表项中输入的内容。
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的设置值时,重置和提交的按钮分别显示为“重置”和“提交查询内容”。
4.10 表单 4 复选框和单选钮 选择钮可以是复选框(checkbox)或单选钮(radio)。 4.10 表单 4 复选框和单选钮 选择钮可以是复选框(checkbox)或单选钮(radio)。 用<input>标记的type属性可设置选择钮的类型 属性value可设置该选择钮的控制初值,用以告诉表单制作者选择结果。 用checked表示是否为缺省选中项。 name属性是控制名,同一组的选择钮的控制名是一样的。
4.10 表单 5 选择栏<select> 当浏览者选择的项目较多时,如果用选择钮来选择,占页面的区域就会较多。可以用<select>标记和<option>标记来设置选择栏。选择栏可分为两种,即弹出式和字段式。<select>标记的格式为: <select size="x" name="控制操作名" multiple> <option value=“”> … </select>
4.10 表单 5 选择栏<select> 其中: size:取数字,表示在带滚动条的选择栏中一次可见的列表项数 4.10 表单 5 选择栏<select> 其中: size:取数字,表示在带滚动条的选择栏中一次可见的列表项数 name: 控制操作名 multiple:不带值,加上本项表示可选多个选项,否则只能单选 <option>标记的格式为: <option select value="可选择的内容"> select 不带值,加上本项表示该项是预置的 value 指定控制操作的初始值,缺省时初值为option中的内容表示选项值
4.10 表单 6 多行文字的输入textarea>...</textarea> 4.10 表单 6 多行文字的输入textarea>...</textarea> <TEXTAREA>标记可以设置允许成段文字的输入。格式为: <textarea name="控制操作名" rows="行数" cols="列数"> 多行文本 </textarea> 其中的行数和列数是指不用滚动条就可看到的部分。
4.10 表单 7.表单应用综合实例 【例4-10】制作一个“职员调查表”,收集职员的个人资料。为了显得整洁,在表单中使用了无边框表格。本例文件ex4-10.htm在浏览器中显示的效果如图4-12所示。 【例4-10】 图4-12 表单应用综合实例
习题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所示的框架网页。在左框架中单击项目,在右框架中显示相应的内容。