第4章HTML语言高级4.1创建超链接4.2创建表格4.3创建表单4.4帧标签4.5分区标签6/25/20211超链接标签超链接标记的格式如下：<ahref="URL信息">超链接文本或图像</a>超链接标记除了必备的href属性外，还有一个属性target，它指明目标页面显示的窗口target的默认值是本页面所在的浏览器窗口target=_blank表示目标页面显示于一个新的浏览器窗口中target=_top表示目标页面显示于整个浏览器窗口中，而不是显示在帧所在窗口中target=帧名表示目标页面显示于指定帧所在的窗口中6/25/202126/25/20213超链接标签根据目标页面的位置不同，href属性的URL信息构成分为以下3种情况：目标页面位于另外的主机或采用非http协议，此时URL采用绝对路径，即使用如下格式：协议名://主机名[/目录信息]若目标页面位于本主机，此时URL采用相对路径：<ahref="des1.htm">超链接文本</a>或<ahref="/des2.htm">超链接文本</a>超链接的目标不仅可以指向HTML文件的头部，也可以指向某个文件的特定位置（称为“锚点”，anchor），其格式如下：<aname="定位标记">文本或图像等页面元素</a>6/25/202146/25/20215创建表格表格标签<table>[<caption>标题内容</caption>]<tr><th>表格内标题</th><td>表格内容</td><td>表格内容</td></tr></table>6/25/20216表格标签<table></table>创建表格<tr></tr>创建表格中的一行，一般包括一个或多个列元素<td></td>创建表格中的一列<caption></caption>标签，定义表格的标题<th></th>可以是表格中的第一个<td>标签，作为表格内的标题行6/25/20217<table>标签的属性6/25/20218<tr>标签的属性6/25/20219<td>标签的属性6/25/202110例3.10若要在网页上显示如下效果的表格，考虑该如何设计HTML文件代码查看源代码6/25/202111利用表格进行网页布局表格标签除了绘制文本表格外，还经常用来进行网页布局。表格是最常用的页面元素，可以用来固定文本或图像的显示位置。通常我们使用<table>、<tr>、<td>标记及其属性对网页内容进行分块显示。在Internet上浏览的许多页面都大量使用了表格，很多较复杂的页面布局就是利用表格来完成的。6/25/202112例3.12使用表格标签设计如下页面结构。查看源代码6/25/202113例3.13试用HTML表格结构设计如下网站截图的右下角目录部分。查看源代码6/25/202114利用表格进行网页布局6/25/202115什么是表单？6/25/202116什么是表单？表单是实现图形用户界面的基本元素，它包括按钮、文本框、单选框、复选框等，它们是HTML实现交互功能的主要接口。用户通过表单向服务器提交数据。表单的使用包括两个部分：一部分是用户界面，提供用户输入数据的元件；另一部分是处理程序，可以是客户端程序，在浏览器中执行；也可以是服务器处理程序，处理用户提交的数据，返回处理结果。6/25/202117表单的定义定义表单的语法如下：<formmethod="get|post"action="处理程序名">[<inputtype=输入域种类name=输入域名>][textarea定义][select定义]</form><form></form>标签对用来创建一个表单，即定义表单的开始和结束位置，具有action、method、target、title、enctype等属性。6/25/202118表单的输入域不同类型的输入域为用户提供灵活多样的数据输入方式。表单的输入域有如下3大类：以标记<input>定义的多种输入域，包括text，radio，checkbox，password，hidden，button，submit和reset等。以标记<textarea>定义的文本域。以标记<select>和<option>定义的下拉列表框。6/25/202119常用的表单输入域6/25/202120<input>表单输入标记<input>标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：<inputname=namevalue=valuealigh=left|center|righvalign=top|middle|bottomtype=text|password|checkbox|radio|submit|reset|hidden|buttonmaxlength=nsize=ncheckedonclick=functiononselect=function>其中value：用于设定表单默认值；checked：表示选择框中，此项被默认选中；maxlength：表示在输入单行文本的时候，最大允许字符数；size：用于设定表单框的尺寸；onclick：表示在按下按钮时调用指定的子程序；onselect：表示当前项被选择时调用指定的子程序。6/25/202121<input>标签举例姓名：<inputtype="text"name="name"size="20">密码：<inputtype="password"name="password"size="20"maxlength="15">性别：<inputtype="radio"name="gender"value="boy">男<inputtype="radio"name="gender"value="girl">女兴趣爱好：<inputtype="checkbox"name="interest">音乐<inputtype="checkbox"name="interest">运动<inputtype="checkbox"name="interest">看
书
关于书的成语关于读书的排比句社区图书漂流公约怎么写关于读书的小报汉书pdf
<inputtype="button"name="submit"value="确认"><inputtype="submit"name="ok"value="提交"><inputtype="reset"name="reset"value="重置">6/25/202122例3.14一个简单的<input>标签实例<html><head><title><input>标签举例</title></head><body>姓名：<inputtype="text"name="name"size="20"><p>密码：<inputtype="password"name="password"size="20"maxlength="15"><p>性别：<inputtype="radio"name="gender"value="boy">男<inputtype="radio"name="gender"value="girl">女<p>兴趣爱好：<inputtype="checkbox"name="interest">音乐 <inputtype="checkbox"name="interest">运动 <inputtype="checkbox"name="interest">看书 <inputtype="checkbox"name="interest">上网 <inputtype="checkbox"name="interest">旅游 <p><inputtype="submit"name="ok"value="提交"><inputtype="reset"name="reset"value="重置"></body></html>6/25/202123<select>标签用<select>标记可以在表单中插入一个下拉菜单，其语法如下：<selectname=namesize=nmultiple><optionvalue=设定值[selected]>表项内容</option><optionvalue=设定值[selected]>表项内容</option>……</select>其中name：设定下拉菜单的名称；size：设定菜单框的高度，也就是一次显示几个菜单项；multiple：是可选项，若定义该属性，则下拉列表中的内容允许进行多选。6/25/202124<select>标签举例例3.15<select>下拉菜单举例<html><head><title><select>标签举例</title></head><body>请选择你所在的年级：<select><option>大一</option><option>大二</option><option>大三</option><option>大四</option></select></body></html>6/25/202125将下面两个例子分别与例3.15进行比较例3.16<html><head><title><select>标签举例</title></head><body>请选择日期：<selectsize=7><option>星期日</option><option>星期一</option><option>星期二</option><option>星期三</option><option>星期四</option><option>星期五</option><option>星期六</option></select></body></html>例3.17<html><head><title><select>标签举例</title></head><body>请选择你喜欢的球类运动：<selectsize=3multiple><option>足球</option><option>篮球</option><option>排球</option><option>乒乓球</option><option>羽毛球</option><option>台球</option><option>网球</option></select></body></html>6/25/202126<select>标签<select>标签中包含了多个<option>标签，<option>标签有两个常用的属性：value和selectedvalue用来指定控制操作的初始值，缺省时初值为option的内容selected设定时表明该项内容被预置6/25/202127<select>标签举例例3.18一段简单的包含下拉菜单的页面代码，注意<option>标签的属性<body>请选择你最喜欢的颜色：<select><optionvalue="">----放弃选择----</option><optionvalue=1selected>红色</option><optionvalue=2>黄色</option><optionvalue=3>蓝色</option><optionvalue=4>绿色</option><optionvalue=5>紫色</option><optionvalue=6>黑色</option><optionvalue=7>白色</option></select></body>6/25/202128<textarea>标签<textarea></textarea>在<form>表单中创建一个能够输入多行文本的文本框属性：cols(列数)，rows(行数)，单位是字符数标签语法如下：此处显示在文本框外的提示信息<textareaname=namecols=xrows=y>此处显示在文本框里的预留信息</textarea>6/25/202129例3.19一段简单的包含多行文本框的页面代码<body><tablewidth="50%"border="0"cellspacing="0"cellpadding="0"><tr><tdalign="center">您的意见对我很重要：</td></tr><tr><tdalign="center"><textareaname="yijian"cols="60"rows="10">请将您的建议输入到此区域</textarea></td></tr><tr><tdalign="center"><inputtype="submit"name="ok"value="提交"><inputtype="reset"name="reset"value="重置"></td></tr></body>6/25/202130帧标签框架(Frame)又常被称为帧，利用框架可以将浏览器显示窗口分割成多个相互独立的区域，每个区域可以显示独立的HTML页面。以下是使用框架的一个简例查看代码6/25/202131帧标签框架的定义较为特殊，首先确定如何划分窗口，然后建立描述窗口分割的主文件，再为每个框架建立相应的HTML文件。主文件的定义方法：<html><head>[头部标记]</head><frameset>{<frameset>...</frameset>}<frame><frame>…</frameset>[<noframes>字符串</noframes>]</html>6/25/202132<frameset>标签的属性6/25/202133<frame>标签的属性6/25/202134例3.21设计如图所示的框架页面，利用帧标签将页面分成3个子窗口。查看代码6/25/202135分区标签<div></div>区域标签，用于将若干相邻的HTML元素组合成一个区域块，对<div>的操作就应用于这个区域内的所有HTML标签。例如要将某段落（文本或图片）的内容全部居中显示，只需用<div>设置组合，添加一个align=center即可，无需逐个设置。在各段落中起始段落前设置<div>，结束段落后设置</div>即可。分区标签在网页设计中的应用非常频繁，留意网页中部分块结构的统一对齐显示，尤其是整个网页内容的居中显示。6/25/202136分区标签举例例3.22一个简单的分区标签的应用<html><head><title>分区标签效果演示</title></head><body><divalign=center><p>段落1</p><p>段落2</p><imgsrc="../picture/Cappuccino03.jpg"border=0width=200alt="卡布奇诺咖啡"><p>段落3</p></div></body></html>其中<body></body>标签中的代码等价于:<palign=center>段落1</p><palign=center>段落2</p><imgsrc="../picture/Cappuccino03.jpg"border=0width=200alt="卡布奇诺咖啡"align=center><palign=center>段落3</p>6/25/202137演讲完毕，谢谢观看！
浙公网安备 33021202002483