2.3 HTML超文本标记语言.

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 <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 单击“站长信箱”链接后的输出结果 <HTML> <HEAD> <TITLE>电子邮件链接</TITLE> </HEAD> <BODY> …… <A href="mailto: "> 站长信箱</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=" " size="22"> <FORM name="form2" method="post" action=""> …… <P>密码： <INPUT value=" " 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标记的使用格式和方法；
尝试修改部分代码，观察其在“设计视图”中的变化；进一步完善网站内容，插入必要的图片，尽可能达到网站内容和布局基本成形。

2.3 HTML超文本标记语言.

Similar presentations

Presentation on theme: "2.3 HTML超文本标记语言."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

2.3 HTML超文本标记语言.

Similar presentations

Presentation on theme: "2.3 HTML超文本标记语言."— Presentation transcript:

Similar presentations

About project

反馈