2.3 HTML超文本标记语言
本节目标 会使用HTML的基本结构创建网页 会使用文本相关标签实现文字修饰和布局 会使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转 会使用表格的基本结构实现简单表格 会使用表格相关标签实现跨行、跨列的复杂表格 会使用表格相关设置进行美化修饰 会使用表单的基本结构制作表单页面 会使用各种表单元素实现注册页面 能理解post和get两种提交方式的区别 会使用框架结构实现多窗口展示页面
1. HTML超文本标记语言 HTML（Hyper Text Markup Language，超文本标记语言）是一种建立超文本/超媒体文档的语言，它用标签（Tag）标记文档中的文本及图像等各种元素（如：文字、图象、声音、动画等各种资源）， 指示浏览器如何显示这些元素。所建立的文本文件的扩展名必须为html 或 htm。 用它编写的html文件可以被网上任何人浏览，浏览器是通过解释的方式来执行HTML代码，将信息展示给浏览者的。
HTML的历史 超文本标记语言HTML的发展历程如下图所示 GML(1969) HTML(1993) CML SGML(1985) HTML(1993) XML(1998) XHTML(2000) CML VML Generalized Markup Language（广义标记语言） Standard Generalized Markup Language（标准广义标记语言） Hyper Text Markup Language（超文本标记语言） eXtensible Markup Language（可扩展标记语言） ……
<HTML>…</HTML>标签标记 HTML 文档的开始和结束 <HEAD> <TITLE>我的第一个网页 </TITLE> </HEAD> <BODY > Hello World! </BODY> </HTML> 网页标题 <HEAD>头部部分 HTML 网页 <BODY>主体部分 网页内容，可以是文本、图像等 <HTML>…</HTML>标签标记 HTML 文档的开始和结束 这部分包含文本、图像和链接。它包括在 <BODY>…</BODY> 标签内 这部分包括标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内
使用记事本创建网页 使用记事本创建网页 使用记事本创建网页的步骤： 1、打开记事本 2、输入HTML代码 3、保存为*.html或*.htm文件，注意格式问题 4、打开网页预览效果
<META>标签 网页页面中出现乱码，那如何消除乱码使其正常显示？ 使用<META>标签 简体中文：gb2312 繁体中文：big5 纯英文网页：iso-8859-1 <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>网页标题</TITLE> </HEAD> 可以避免页面中的乱码
页面背景色或背景图像 网页背景色彩 网页背景图像 <BODY bgcolor="#FFCCFF" background="back_image.GIF" > Hello World！ </BODY> …… <BODY bgcolor="#FFCCFF"> Hello World! </BODY> 为了使页面美丽大方，网页背景要尽量地浅
文本相关标签 字体、字号 行的控制 标题标签<H1>－<H6> <FONT>标签 特殊符号 设置了字体的大小和颜色 字体、字号 标题标签<H1>－<H6> <FONT>标签 特殊符号 行的控制 段落标签<P> 换行标签<BR> 使用了 <H2>… <H2> 换段了 换行了 特殊符号
字体、字号相关标签 标题标签 <H#> ... </H#> #=1, 2, 3, 4, 5, 6 字体大小依 次递减 …… <BODY> <H1>一级标题</H1> <H2>二级标题</H2> <H3>三级标题</H3> <H4>四级标题</H4> <H5>五级标题</H5> <H6>六级标题</H6> </BODY> H1 到 H6 标签用于指定不同级别的标题
字体、字号相关标签 <FONT>标签 特殊符号 特殊字符 转义码 空格 引号(“”) " 字体的 大小值 <FONT>标签 特殊符号 <FONT size=“+2” color=“red” face=“隶书” > ... </FONT> 字体的 类型 字体的 颜色 特殊字符 转义码 空格 引号(“”) " 小于(<) < 大于(>) > 版权号(© ) ©
字体、字号相关标签 ...... <BODY> <P> <FONT size="+2" color="red" > 手机充值、IP卡/电话卡 </FONT><BR /> 移动 | 100 | 联通 | 50</P> Copyright © 2007 "淘宝网" All rights. </BODY> …… 空格效果
行的控制相关标签 段落标签<P> 段(Paragraph) (可以看作是空行) <p> 换行标签<BR> ……. <P align="center">淘宝集市欢迎您！</P> <P align="left">淘宝网首届翠友会！<BR> …… </P> 换段了 换行了
图像标签 常见的图片格式介绍 图像类型 优点 缺点 适用场合 制作工具 *.jpg 体积小，比较清晰 有损压缩 、画面失真 网页图片 Photoshop *.gif 支持 Internet 标准 ,支持无损耗压缩和透明度，很流行 支持有限的透明度,效果不如别的图像 *.swf 体积小,便于网络传输 制作麻烦 网页动画 Flash *.bmp 支持 24 位颜色深度，兼容性好 不支持压缩 容量大 桌面墙纸 photoshop
图像标签 图像的位置 为图像添加的提示性文字 图像的基本语法 <IMG src="images/adv_2.jpg" width="300"height="150"alt="明星演唱会开幕" > 图像的宽度 图像的高度 …… <BODY> <IMG src="images/adv_2.jpg" alt="明星演唱会开幕" width="300"height="150"> </BODY> 鼠标移到图像上，出现的提示性文字
图像标签 图像与文本的对齐方式 <IMG align="middle"> 图像与文本居中对齐,还可以取 top, bottom 值 图像和文本居中对齐 …. <BODY> <IMG align="middle" src="images/adv_2.jpg" width="180" height="95" border="0" /> 请点击广告进入明星专区 </BODY> ……
小练习 编写如下图所示效果对应的html代码 字号大小为3
文字布局 内容分隔<HR>标签 项目列表和编号 有序列表<OL> 无序列表<UL> 预格式文本<PRE>标签 水平分隔线<HR> 有序列表 无序列表 用了预先定义好的格式
如何使用内容分隔<HR>标签 线的厚度值 线的宽度 线的颜色 <HR size="5" color="red" width="300"> …… <BODY> <HR size="5" color="red" width="300"> <HR size="10" color="black" width="200"> <HR size="5" color="#0000FF" width="50%"> </BODY> <HR> 标签用于在页面上绘制水平线
如何使用列表 无序列表语法 有序列表语法 <UL> <LI>列表项内容 </LI> …… <OL > </OL> <H4>注册步骤：</H4> <OL type="1" > <LI>填写信息</LI> <LI>收电子邮件</LI> <LI>注册成功 </LI> </OL> 新人上路指南 <UL type="circle"> <LI>如何激活会员名？ </LI> <LI>如何注册淘宝会员？ </LI> <LI>注册时密码设置有什么要求？</LI> <LI>支付宝认证</LI> </UL>
预格式文本<PRE>标签 如何实现如下图所示的页面中的文字效果？ 使用<PRE> 标签可以实现
如何使用预格式文本<PRE>标签 <IMG src="images/QQ.JPG" width="159" height="133" align="left"> 腾讯-QQ币/QQ幻想-30元卡 一 口 价：26.45元 运 费：卖家承担运费 剩余时间：5天 宝贝类型： 全新 卖主声明：货到付款，可试用10天！ </PRE> HTML中代码格式与浏览器中显示效果一样
页面链接<A>标签 链接到其他页面 <HTML> <HEAD> <TITLE>链接到其他页面</TITLE> </HEAD> <BODY> <A href="register/register.html">[免费注册]</A> <A href="login/login.htm">[登录]</A> </BODY> </HTML> 链接到其他页面 <A href="register/register.html">[免费注册]</A> 链接的地址 链接内容 单击“[免费注册]”之后链接到的页面
页面链接<A>标签 链接到其他页面 在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？ 相对路径 两种方式：相对路径和绝对路径 链接到其他页面 相对路径 指定相对于当前文件的文件位置 绝对路径 指定从根目录到文件的完整路径
页面链接<A>标签 要链接到同一目录 (C:\HTML) 下的页面，可编写 <A HREF = "Doc1.html"> 或 <A HREF = "C:\HTML\Doc2.html"> 相对路径名 绝对路径名
页面链接<A>标签 要实现如下图所示的超链接效果，怎么办？ 使用锚记标签
页面链接<A>标签 链接到本页面 锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记 <A NAME = "marker">主题名称</A> 为达到这种跳转效果，请在 HREF 参数中使用该标记 <A HREF= "#marker">主题名称</A> <HTML> <HEAD> <TITLE>链接到其他页面</TITLE> </HEAD> <BODY> <A href="#helpme">[新人上路]</A> …… <A name="helpme">新人上路指南</A> </BODY> </HTML> 2、链接到锚标记所在位置 1、定义锚标记
页面链接<A>标签 电子邮件链接 要链接电子邮件，可在链接标签中插入“mailto:邮箱地址” <A href="mailto:webmaster@sohu.com">站长信箱</A> 单击“站长信箱”链接后的输出结果 <HTML> <HEAD> <TITLE>电子邮件链接</TITLE> </HEAD> <BODY> …… <A href="mailto: taobaoWebMater@taobao.com "> 站长信箱</A> </BODY> </HTML> 任何正确的电子邮箱地址均可
滚动<MARQUEE>标签 说明： scrolldelay：表示滚动延迟时间，默认值为90毫秒。 <MARQUEE scrolldelay ="100" direction="up" > 滚动文字或图像 </MARQUEE> 滚动延迟时间 滚动对象的方向 说明： scrolldelay：表示滚动延迟时间，默认值为90毫秒。 direction：表示滚动的方向，默认为从右向左。
声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动 声明滚动文字结束 <MARQUEE scrolldelay ="100" >水平滚动</MARQUEE> <MARQUEE scrolldelay ="200" direction="up" >垂直滚动</MARQUEE> <MARQUEE scrolldelay ="300" direction="up" onmouseover="this.stop()" onMouseOut="this.start()"> <A href="#"><IMG src="images/scroll/1.gif" border="0" align="middle"> Avon化妆品</A><BR> <A href="#"><IMG src="images/scroll/2.gif" border="0" align="middle"> 雅诗兰黛 </A><BR> …… </MARQUEE> 水平向左移动 垂直向上移动 图片和文字同时垂直向上移动
小练习 编写如下图所示效果对应的html代码 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>项目列表和链接的应用</TITLE> </HEAD> <BODY> 填写代码 </BODY> </HTML> 有序列表OL 无序列表UL
总结 哪个标签中的哪个属性可以改变字体颜色和字号？ 图像与文本的对齐方式有哪几种？ 项目列表和编号有何区别？分别适用什么场合？ 链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，二者有何区别和联系？
课堂练习 4——熟悉HTML标记 在DW的“拆分”视图中，对比学习HTML的常用标记—— 在“设计视图”中完善练习3所制作的页面内容与形式，适当修改页面元素； 观察代码视图中的相应变化，加深对常用的HTML标记及其使用方法的理解记忆； 继续设计其它栏目的页面内容。
2. 表格标签 表格应用场合 论坛 门户网站 购物网站
为什么使用表格？ 论坛中应用表格 门户网站应用表格 购物网站应用表格
在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 表格的基本结构 列 单元格 行 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像
表格的基本语法 border用来设置表格边框尺寸大小 <TABLE border="1"> <TR> <TD> 单元格内容 </TD> …… </TR> </TABLE> <TABLE>...</ TABLE >定义表格 <TR>…</TR> 定义行 <TD>…</TD> 定义列
如何创建表格 <TABLE border="2"> <TR> <TD>移动</TD> <TD>IBM </TD> <TD>惠普</TD> <TD>华硕</TD> </TABLE>
什么是跨行跨列的表格 下图中的表格哪里用了跨行？哪里用了跨列？ 跨了几行几列? 跨3列 跨3行
跨多列的表格 COLSPAN="n" 属性表示跨多少列？ <TABLE border="2"> <TR> <TD colspan="3">学生成绩表</TD> </TR> <TD >英语</TD> <TD >数学</TD> <TD >语文</TD> <TD>95</TD> <TD>98</TD> <TD>89</TD> </TABLE>
跨多行的表格 rowspan ="n"属性表示跨多少行？ <TABLE border="1"> <TR> <TD rowspan="3" >早上菜谱 </TD> <TD >食物</TD> <TD >鸡蛋</TD> </TR> <TD >饮料</TD> <TD >牛奶</TD> <TD>甜点</TD> <TD>开心粉</TD> </TABLE>
如何创建跨行跨列的表格 <TABLE border="1"> <TR> <TD>手机充值、IP卡 </TD> <TD colspan="2">办公设备、文具</TD> </TR> <TD rowspan="2">各种卡的总汇</TD> <TD>铅笔</TD> <TD>彩笔</TD> <TD>打印</TD> <TD>刻录</TD> </TABLE>
表格小练习 编写如下图所示效果对应的html代码 第一行第一个单元格跨了2行 此单元格跨了3列
什么是表格的美化修饰 根据理解,下面表格应该从哪些方面进行美化修饰？ 背景图片 表格的高度 背景色 文字对 齐方式 表格的宽度
bordercolor用来设置表格边框颜色 如何设置表格的尺寸和边框 width用来设置表格的宽度 height用来设置表格的高度 border用来设置表格边框尺寸大小 <TABLE width=“400" height=“200” border="15" bordercolor="red"> <TR> <TD colspan="4"> 品牌商城</TD> </TR> <TD colspan="2" >笔记本电脑</TD> <TD colspan="2" >办公设备、文具、耗材</TD> <TD >惠普</TD> <TD >华硕</TD> <TD >打印机</TD> <TD >刻录盘</TD> </TABLE> bordercolor用来设置表格边框颜色
如何设置背景 background属性用来设置表格的背景图片 <TABLE background="images/type_back.jpg" width="360" height="120" border="2" > <TR> <TD colspan="6"> </TD> </TR> <TR bgcolor="#EBEFFF"> <TD colspan="3" >笔记本电脑</TD> <TD colspan="3" bgcolor="yellow" >办公设备、文具、耗材</TD> …… </TABLE> bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝 ，下图就是RGB颜色对照表 。
如何设置对其方式 <TABLE width="350" height="100" border="2" background="images/type_back.jpg" > <TR> <TD colspan="4"> </TD> </TR> <TR bgcolor="#EBEFFF"> <TD colspan="2" align="center" >笔记本电脑</TD> <TD colspan="2" align="center" >办公设备、文具、耗材</TD> <TD >惠普</TD> <TD >华硕</TD> <TD >打印机</TD> <TD >刻录盘</TD> </TABLE> align属性用来设置表格、行、列的对齐方式
未填充的效果，字与单元格边框之间的距离靠得太近 为什么要使用填充属性 单元格里的内容太靠近边线，怎么办？ 未填充的效果，字与单元格边框之间的距离靠得太近
什么是填充属性和间距属性 border(边框的厚度) 内容 cellpadding (单元格填充) cellspacing (单元格间距)
如何使用填充、间距属性 border(边框的厚度) cellpadding (单元格填充) cellspacing (单元格间距) <TABLE border="20" cellpadding="30" cellspacing="40" bordercolor="red"> …… </TABLE>
如何设置表格的填充属性 <TABLE cellspacing="5 " cellpadding="10 " border="1" background="images/type_back.jpg" > <TR> <TD colspan="6"> </TD> </TR> <TR bgcolor="#EBEFFF"> <TD colspan="3" align="center" >笔记本电脑</TD> <TD colspan="3" align="center" >办公设备、文具、耗材</TD> …. </TABLE> cellspacing属性用来设置表格内框宽度 cellpadding属性用来设置表格内填充距离 填充之后的效果
表格的高度、宽度、背景图像、边框和填充属性 表格小练习 编写如下图所示效果对应的HTML代码 表格的高度、宽度、背景图像、边框和填充属性 行的背景色 单元格居中对齐
什么是表格布局 如何实现图文内容的布局，达到如左图所示页面的效果？ 分析上图所示页面，应该用什么进行布局？ 用表格对网页的内容进行整体控制 使用表格进行布局
如何使用表格进行布局 使用表格布局下图，需要几行几列？ 需要7行2列
如何使用表格进行布局 <TABLE width="298"> <TR> <TD colspan="2"><IMG src="images/adv.jpg" /></TD> </TR> <TD width= " 122 " rowspan= " 6 " align= " left " ><IMG src="images/wangyou.jpg" width="116" height="142" /></TD> <TD width=“285” > <A href= " # " >超值变形金钢2.5折!</A> </TD> <TD><A href="#">人们为啥对电视吼叫 </A></TD> …… </TABLE>
表格练习 编写如下图所示效果对应的html代码 跨2行，并放了一副图片 此单元格放了一副图片 此单元格跨了3列
表格总结 创建表格最少需要那三个标签？ 简述表格的基本结构。 跨行跨列的表格，主要在什么情况下使用？ 给你一个表格，你会从哪些方面进行美化？
3. 表单和框架 表单的典型应用 注册用户 收集信息 反馈信息 为网站提供搜索工具
表单 注册用户 收集信息
表单包含的控件 单行文本输入框(TEXT) 密码框(PASSWORD) 单选按钮(RADIO) 复选框(CHECKBOX) 下拉列表(SELECT) 重置按钮(RESET) 提交按钮(SUBMIT) 多行文本框(TEXTAREA)
表单页面的基本结构 <FORM action="http://www.sohu.com"method="post"> …… METHOD ACTION 指定向服务器提交的方法: 一般为post或get方法, post方法比较安全 指定提交后，由服务器上哪个处理程序处理 ACTION = "URL" METHOD ="post或get"
指定元素的类型，可为TEXT、RADIO、SUBMIT等 表单元素的统一格式 指定元素的类型，可为TEXT、RADIO、SUBMIT等 控件的名称 控件的初始值 <FORM name="form3" method="post" action=""> <INPUT type="checkbox" name="gen" value="男" size="21“ maxlength=4 checked="checked"> …… </FORM> 控件的初始宽度 控件是否被选中 控件中输入的最多字符个数
表单元素的逐一介绍 文本框基本语法 <INPUT type="text" value="张三" size="20"> 输入元素的默认值 文本输入框 文本区的宽度 文本框基本语法 <INPUT type="text" value="张三" size="20"> <FORM name="form1" method="post" action=""> <P>名 字： <INPUT type="text" value="张三" size="20"> </P> …… </FORM> 单行文本输入框，字符宽度为20
表单元素的逐一介绍 初始密码 密码区宽度 密码框 密码框基本语法 <INPUT type="password " value=" 123456 " size="22"> <FORM name="form2" method="post" action=""> …… <P>密 码： <INPUT value="123456 " type="password" size="22"> </P> </FORM> 密码框，22个字符宽度
表单元素的逐一介绍 单选按钮 初始值 单选按钮基本语法 <INPUT type="radio" value="男" checked="checked"> 默认选中 设置此单选按钮被选中 <FORM name="form3" method="post" action=""> <BR>性别： <INPUT name="gen" type="radio" class="input" value="男" checked> <IMG src="images/Male.gif" width="23" height="21">男 …… </FORM>
表单元素的逐一介绍 复选框名 复选框 复选框基本语法 <INPUT type="checkbox" name="cb2" value="talk"> 复选框值 设置此复选框被选中 <FORM name="form4" method="post" action=""> …… <LABEL> <INPUT type="checkbox" name="cb2" value="talk"checked="checked"> </LABEL>聊天 </FORM>
表单元素的逐一介绍 列表框基本语法 设置此输入框最多只能输入四个符号 出生日期： <INPUT name="byear" value="yyyy" size=4 maxlength=4 > 年 <SELECT name="bmon"> <OPTION value=" " selected>[选择月份] </OPTION> <OPTION value=0>一月</OPTION> <OPTION value=1>二月</OPTION> …… </SELECT> 月 <INPUT name="bday" value="dd" size=2 maxlength=2 > 日 <select name="指定列表名称"size="行数"> <option value="可选项的值"selected>…</option> <option value="可选项的值"> …</option> …… </select> 说明： size确定列表中可同时看到的行数。 selected默认被选中的可选项。 设置“[选择月份]”选项默认被选中
单击按钮，控件的值被重置为value属性中指定的初始值 表单元素的逐一介绍 按钮类型可为button、submit 按钮名称 按钮基本语法 <INPUT type="reset" name="Reset" value=" 重填 "> 按钮上的显示文字 <FORM name="form6" method="post" action=""> <P> <INPUT type="reset" name="Reset" value=" 重填 "> …… <INPUT type="button" name="cancel" value="取消"> </P> </FORM> 单击按钮，控件的值被重置为value属性中指定的初始值
多行文本框基本语法 <TEXTAREA name="textarea" cols="40" rows="6"> 文本框的列数 文本框的名字 多行文本框基本语法 <TEXTAREA name="textarea" cols="40" rows="6"> 文本框中的内容 </TEXTAREA> 文本框的行数 6行40个字符宽度的多行文本域 <FORM name="form7" method="post" action=""> …… <TEXTAREA name="textarea" cols="40" rows="6">欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。 本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 淘宝的权利和义务 </TEXTAREA> </FORM>
小练习 编写如左图所示效果对应的html代码 在网页设计中，表单的主要用途有哪些？ TEXT PASSWORD RADIO TEXTAREA CHECKBOX SELECT RESET SUBMIT
框架 框架集页面(FrameSet.htm) 广告栏顶部框架(top.htm) 框架的边框 详细内容页面右侧框架 (main.htm) 导航栏左侧框架(left.htm)
框架使用场合 页面的一个固定部分显示徽标或静态信息 在另一个固定部分显示导航部分详细内容 在此处显示详细内容， 页面中此部分是变化的。
框架的基本结构 框架页面的基本语法 边框尺寸大小 将窗口分割成左中右3个部分,可选 将窗口分割成上下2个部分,可选 <frameset cols="25%,50%,*" rows ="50%,*" border="5"> <frame src="the_first.html "> …… </frameset> 第一个窗口要显示的网页
如果要在浏览器中创建左中右三个窗口,该如何实现？ 每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？ 框架的基本结构 <HTML> <HEAD> <TITLE>rows_cols框架</TITLE> </HEAD> <FRAMESET rows="25%,50%,*" border="5"> <FRAME name= "top" src="the_first.html"> <FRAME name="middle" src="the_second.html"> <FRAME name= "bottom" src="the_third.html"> </FRAMESET> </HTML> 将窗口分割成上中下3部分 窗口边框的宽度 如果要在浏览器中创建左中右三个窗口,该如何实现？ 每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？
如何创建多个复杂的窗口 要实现如下图所示的窗口，该如何制作？ 1、分成上下两个窗口 2、把下面的窗口分成 左右两个窗口 top窗口 left right窗口 1、分成上下两个窗口 2、把下面的窗口分成 左右两个窗口
如何创建多个复杂的窗口 创建多个复杂的窗口实现步骤如下： 1、创建一个HTML页面“top.html” 2、创建一个HTML页面“left.html” 3、创建一个HTML页面“right.html” top.html效果图 left.html效果图 right.html效果
框架名称，便于超文本链接锚标签target属性所引用 如何创建多个复杂的窗口 4、新建多框架HTML页面"Frame_Sets.html" 设置无框架边框 不显示滚动条 ...... <FRAMESET rows="20%,*" frameborder="0"> <FRAME src="top.html" name="topframe“ scrolling="no" noresize="noresize"> <FRAMESET cols="20%,*"> <FRAME src="left.html" noresize="noresize" scrolling="no" name="leftframe" > <FRAME src="right.html" name="rightframe"> </FRAMESET> 禁止调整框架大小 框架名称，便于超文本链接锚标签target属性所引用
如何设置窗口链接的显示位置 如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？
target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里 如何设置窗口链接的显示位置 target目标窗口属性 name＝"显示的窗口名" <frame src=url name="窗口名"> <a href=url target="窗口名"> target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。 <P><a href="right.html" target="rightframe"> <IMG src="images/reg.jpg" width="158" height="31" border="0" /> </P></A> <P><a href="buy.html" target="rightframe"> <IMG src="images/buy.jpg" width="160" height="32" border="0" /> </P></A> target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里
如何设置窗口链接的显示位置 target目标窗口属性 四个特殊的窗口 <a href=url target="_blank"> 显示在新窗口 <a href=url target="_self"> 显示在本窗口 <a href=url target="_parent"> 显示在父窗口 <a href=url target="_top"> 显示在整个浏览器窗口 新启一个窗口打开文件 "right.html" …… <P><A href="right.html" target="_blank"> <IMG src="images/reg.jpg" width="158" height="31" border="0" /></A> </P> <P><A href="buy.html" target="_self"> <IMG src="images/buy.jpg" width="160" height="32" border="0" /></A> <P><A href="sale.html" target="_parent"> <IMG src="images/sale.jpg" width="158" height="31" border="0" /></A> <P><A href="person_info.html" target="_top"> <IMG src="images/person.jpg" width="157" height="31" border="0"/></A></P>
小练习 编写如下图所示效果对应的html代码 top.html frame_sets.html right1.html或right2.html left.html
总结 表单中提交数据的方法有哪两种及其区别？ 表单里有哪些常用的表单元素？ 创建一个框架页面至少需要哪两个标签？ target设定目标资源所要显示的窗口，其取值可以为哪些？ 简述创建一个多框架页面所需的主要步骤。
课堂练习 5— 修改 HTML代码 在“代码视图”中，打开之前设计的页面，熟悉常用HTML标记的使用格式和方法； 尝试修改部分代码，观察其在“设计视图”中的变化； 进一步完善网站内容，插入必要的图片，尽可能达到网站内容和布局基本成形。