HTML文档的结构课件_第1页
HTML文档的结构课件_第2页
HTML文档的结构课件_第3页
HTML文档的结构课件_第4页
HTML文档的结构课件_第5页
已阅读5页,还剩67页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第四章HTML第四章HTML回顾1-1表单有什么用?表单<FORM>有哪些属性?文本框分为哪三种?各有什么特点?希望昵称文本框不超过10个字符,应使用哪个属性加以限制?单选按钮和复选框有什么区别?2回顾1-1表单有什么用?表单<FORM>有哪些属性?2回顾1-2按钮分为哪三种?各有什么功能?根据您的理解,下拉菜单的选项和值有什么区别?常见的有哪些事件?哪些行为?3回顾1-2按钮分为哪三种?各有什么功能?3目标描述HTML文档的结构使用基本的HTML标签在HTML文档中插入特殊字符在HTML文档中创建超级链接4目标描述HTML文档的结构4HTML简介超文本提供链接到其他页面或同一页面的其他位置的文本标记可以用标签标记页面的不同部分以正确显示语言HTML可用于:控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象5HTML简介超文本提供链接到其他页面或同一页面的其他位置的HTML文档示例<HTML><HEAD><TITLE>学习HTML</TITLE></HEAD><BODYBGCOLOR=“LAVENDER”><H1>欢迎来到HTML世界</H1></BODY></HTML>HTML代码浏览器处理代码并进行显示6HTML文档示例<HTML>HTML代码浏览器处理代码并编辑器和浏览器<HTML><HEAD><TITLE>学习HTML</TITLE></HEAD><BODYBGCOLOR=“LAVENDER”><H1>欢迎来到HTML世界</H1></BODY></HTML>HTML代码在编辑器中编写HTML代码浏览器显示HTML文档/页面7编辑器和浏览器<HTML>HTML代码在编辑器中编写HT编辑器2-2需要在编辑器中键入源代码示例:DreamWeaverMacromediaDreamweaver

是一种专业的HTML编辑器,用于设计、编码、开发网站、网页和强大的Web

应用程序。8编辑器2-2需要在编辑器中键入源代码示例:DreamWeaHTML文档结构<HTML><HEAD><TITLE>学习HTML

</TITLE></HEAD><BODY></H1>

欢迎来到HTML世界</H1></BODY></HTML>HTML网页头部部分主体部分<HTML>…</HTML>标签标记HTML文档的开始和结束这部分包括标题和其他说明信息。包括在<HEAD>…</HEAD>标签内这部分包含文本、图像和链接。它包括在<BODY>…</BODY>标签内9HTML文档结构<HTML>HTML网页头部部分主体部分<HTML><HEAD><TITLE>学习HTML</TITLE></HEAD><BODYBGCOLOR=lavender><H1>欢迎来到HTML世界</H1></BODY></HTML>HTML标签2-2<BODY

BGCOLOR

=“green”>标签标识BODY元素属性提供有关元素的附加信息值分配给属性的内容10<HTML>HTML标签2-2<BODYBGCOLORMETA标签2-1META标签是一个特殊的HTML标签,提供有关网页的信息,如作者姓名、公司名称和联系信息等许多搜索引擎都使用META标签信息例如,要将GrahamBrowne指定为作者,则使用以下META标签:<METAname=“作者"content="GrahamBrowne">11META标签2-1META标签是一个特殊的HTMLMETA标签2-2http-equiv属性可用来代替META标签中的name属性<METAhttp-equiv="expires"content="Wed,26Feb1997GMT">表示有效期:格林尼治标准时间2005年9月12日,星期一14:25:27属性值:具体的过期时间属性名称:网页过期<METAhttp-equiv="refresh"content=“2">

表示每隔2秒,自动刷新网页演示:自动刷新的例子12META标签2-2http-equiv属性可用来代替HTML基本元素标题段落换行符预先格式化字符格式化列表水平线字体图像特殊字符超级链接13HTML基本元素标题13标题<HTML><HEAD><TITLE>动物世界</TITLE></HEAD>

<BODY><H1>从大自然获得灵感</H1><H2>从大自然获得灵感</H2><H3>从大自然获得灵感</H3><H4>从大自然获得灵感</H4><H5>从大自然获得灵感</H5><H6>从大自然获得灵感</H6></BODY></HTML>H1到H6标签用于指定不同级别的标题14标题<HTML>H1到H6标签用于指定不同级别的标题1段落标签<HTML><HEAD><TITLE>诗词学习</TITLE></HEAD><BODY><P>我是第一段</P><P>我是第二段</P><Palign="left">左对齐显示<P><Palign="center">居中显示<P><Palign="right">右对齐显示<P></BODY></HTML><P></P><P>…</P>标签用于标记段落15段落标签<HTML><P></P><P>…</P>标签用于换行符只要在文本中放入<BR>标签,就会强制换行<HTML><HEAD><TITLE>诗词学习</TITLE></HEAD><BODY><BR>我是第一行<BR>我是第二行<P>我是第一段</P><P>我是第二段</P></BODY></HTML><BR>16换行符只要在文本中放入<BR>标签,就会强制换行<HT<Pre>标签<HTML><HEAD><TITLE>诗词学习</TITLE></HEAD><BODY><H1>静夜思</H1><PRE> 床前明月光疑是地上霜

举头望明月低头思故乡</PRE></BODY><HTML<PRE>标签用于显示具有预先定义格式的文本(如HTML文档中所示)17<Pre>标签<HTML><PRE>标签用于显示具有预先<HTML><HEAD><TITLE>学习HTML</TITLE></HEAD><BODY><P><B>这很有趣</B><BR><BR><I>足球是最令人喜爱的运动之一。</I><BR><BR><U>信息技术是发展的关键。</U><BR><BR>

水的分子式是H<SUB>2</SUB>O。<BR><BR>

3<SUP>2</SUP>等于9。

<BR><BR></P></BODY></HTML>字符格式化标签此标签用于对文本应用各种格式,如粗体、斜体、下划线、下标、上标等18<HTML>字符格式化标签此标签用于对文本应用各种格式,如粗列表简介列表用于按逻辑方式对数据分组

玫瑰花向日葵兰花苹果桔子水仙芒果水果苹果

芒果桔子花卉水仙兰花向日葵玫瑰花19列表简介列表用于按逻辑方式对数据分组玫瑰花向日葵兰花苹果桔子列表类型:无序列表

…<BODY><H1>星期中的每一天</H1><UL> <LI>星期日<LI>星期一<LI>星期二<LI>星期三<LI>星期四<LI>星期五<LI>星期六</UL></BODY>…无序列表也称为“项目列表”20列表类型:无序列表…无序列表也称为“项目列表”20…<BODY><H1>星期中的每一天</H1><OL> <LI>星期日<LI>星期一<LI>星期二<LI>星期三<LI>星期四<LI>星期五<LI>星期六</OL></BODY>…列表类型:有序列表

有序列表的属性<LITYPE=I><LITYPE=i><LITYPE=A><LITYPE=a><OLSTART=n>在有序列表中,列表项以自动生成的顺序显示21…列表类型:有序列表有序列表的属性<LITYPE=I使用水平线<HTML><HEAD><TITLE>动物世界</TITLE></HEAD><BODY><H3>老虎的夜间视觉</H3><HRnoshadesize=5align=centerwidth=50%><HRsize=15align=leftwidth=80%><HR><P>老虎的夜视能力优于人类的夜视能力五倍以上</BODY></HTML><HR>标签属性alignWidthSizeNoshade<HR>标签用于在页面上绘制水平线22使用水平线<HTML><HR>标签属性alignWidt使用字体和属性<HTML><HEAD><TITLE>动物世界</TITLE></HEAD><BODY><H1>了解有关动物的更多信息</H1><P><FONTSIZE=5COLOR=BLUEFACE=Arial>斑马的特性</FONT><P>没有任何两匹斑马<FONTCOLOR=REDSIZE=3>的斑纹是完全一样的,</FONT>因此每匹斑马都是独一无二的

</BODY></HTML><FONTSIZE

=5

COLOR

=BLUE

FACE

=Arial>可以按名称或十六进制值指定颜色可以为字体指定的大小范围为从1到7可以指定一列字体,各字体间用逗号分隔。浏览器以最先找到的字体显示文本<FONT>元素及其相关属性(如SIZE、COLOR和FACE)可用于控制网页上文本的显示23使用字体和属性<HTML><FONTSIZE=5CO<IMG>标签用于在HTML文档中插入图像。<IMG>标签的两个常用属性是SRC和ALIGN。SRC属性用于指定要插入的图像位置。ALIGN属性用于指定图像相对于文本的对齐方式。插入图像2-124<IMG>标签用于在HTML文档中插入图像。<IMG>插入图像2-2<HTML><HEAD><TITLE>动物世界</TITLE></HEAD><H1><FONTSIZE=3COLOR=FORESTGREEN><B>让我们看看这些可爱的动物</B></FONT></H1><BODY><P>

<IMGALIGN=BOTTOMSRC=Animal.jpg>底部对齐</P><P><IMGALIGN=TOPSRC=Animal.jpg>顶部对齐</P><P><IMGALIGN=MIDDLESRC=Animal.jpg>居中对齐</P></BODY></HTML>25插入图像2-2<HTML><HEAD>25插入特殊字符2-1某些字符在HTML中具有特殊意义,如小于号(<)定义HTML标签的开始字符实体用于在HTML文档中插入特殊字符,如版权号,注册商标等插入特殊字符需要用HTML字符实体>®©

空格;26插入特殊字符2-1某些字符在HTML中具有特殊意义,如插入特殊字符2-2特殊字符字符实体大于号(>)>小于号(<)< 引号(“)"®®©

©&号& 27插入特殊字符2-2特殊字符字符实体大于号(>)>创建超级链接<HTML><HEAD><TITLE>了解鸟类</TITLE></HEAD><BODY><H1>会弹琴的狗狗</H1><AHREF=dog.htm>单击此处查看</A></BODY></HTML>28创建超级链接<HTML>28要链接到另一目录(C:\example)下的页面,可编写<AHREF=“..\example\Doc2.htm”>或

<AHREF=“C:\example\Doc2.htm”>要链接到同一目录(C:\html)下的页面,可编写<AHREF=“Doc3.htm”>或<AHREF=“C:\html\Doc3.htm”>C:\html目录C:\example目录绝对和相对路径名Doc1.htmDoc3.htmDoc2.htmDoc4.htm绝对路径名相对路径名29要链接到另一目录(C:\example)下的页面,可编写链接到同一文档的某个部分2-1锚记标签用于使用户“跳”到文档的某个部分HTML的NAME

属性用于创建锚标记

为达到这种跳转效果,请在HREF参数中使用该标记<ANAME=“marker”>主题名称</A><AHREF=“#marker”>主题名称</A>30链接到同一文档的某个部分2-1锚记标签用于使用户“跳”到文档链接到同一文档的各个部分2-2...<BODY><AHREF=#Lion>狮子</A><BR><AHREF=#Zebra>斑马</A><BR><AHREF=#Cheetah>印度豹</A><BR><ANAME=Lion>狮子</A><P>狮子的吼声从八公里之外就能听到!雄狮(很容易从鬃毛识别出雌雄)的重量达250公斤。而雌狮则要轻得多,只有180公斤。<BR><ANAME=Zebra>斑马</A><P>没有任何两匹斑马的斑纹完全一样,因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马......演示:锚链接例子31链接到同一文档的各个部分2-2...演示:锚链接例子31链接到其他文档的特定位置…<P>让我们深入了解一些动物<BR><AHREF=AnimalDetails.htm#Lion>狮子</A><BR><AHREF=AnimalDetails.htm#Zebra>斑马</A><BR><AHREF=AnimalDetails.htm#Zebra>印度豹</A>…Animals.htm…<ANAME=Lion>狮子</A><P>狮子的吼声从八公里之外就能听到!雄狮(很容易从鬃毛识别出雌雄)的重量达250公斤。而雌狮则要轻得多,只有180公斤。

…Animaldetails.htm32链接到其他文档的特定位置…Animals.htm…Anima电子邮件链接用户可从网页发送电子邮件<HTML><HEAD><TITLE>海豚</TITLE></HEAD><BODY><H3>充分交流,密切配合</H3><BR><P>据说,海豚的交流模式几乎与人类的一样复杂!<BR><BR><AHREF="mailto:thisperson@">请将您的疑问发送至DavidFernandez</A></BODY></HTML>33电子邮件链接用户可从网页发送电子邮件<HTML>33总结2-1HTML标签一般配对使用,不区分大小写标签都具有属性。属性提供关于网页上HTML元素的附加信息META标签放置在网页的标题处以提供关于页面的信息。搜索引擎常会用到这些标签标题级标签使用<H1>…<H6>34总结2-1HTML标签一般配对使用,不区分大小写34总结2-2段落标签使用<Palign=“对齐方式”>…</P>无序列表使用<UL>标签,有序列表使用<OL>标签字体标签<Fontcolor=“颜色”size=“大小”face=“字体”>超链接标签<Ahref=“链接地址”>超链接文本</A>35总结2-2段落标签使用<Palign=“对齐方式”>…<演讲完毕,谢谢观看!演讲完毕,谢谢观看!第四章HTML第四章HTML回顾1-1表单有什么用?表单<FORM>有哪些属性?文本框分为哪三种?各有什么特点?希望昵称文本框不超过10个字符,应使用哪个属性加以限制?单选按钮和复选框有什么区别?38回顾1-1表单有什么用?表单<FORM>有哪些属性?2回顾1-2按钮分为哪三种?各有什么功能?根据您的理解,下拉菜单的选项和值有什么区别?常见的有哪些事件?哪些行为?39回顾1-2按钮分为哪三种?各有什么功能?3目标描述HTML文档的结构使用基本的HTML标签在HTML文档中插入特殊字符在HTML文档中创建超级链接40目标描述HTML文档的结构4HTML简介超文本提供链接到其他页面或同一页面的其他位置的文本标记可以用标签标记页面的不同部分以正确显示语言HTML可用于:控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象41HTML简介超文本提供链接到其他页面或同一页面的其他位置的HTML文档示例<HTML><HEAD><TITLE>学习HTML</TITLE></HEAD><BODYBGCOLOR=“LAVENDER”><H1>欢迎来到HTML世界</H1></BODY></HTML>HTML代码浏览器处理代码并进行显示42HTML文档示例<HTML>HTML代码浏览器处理代码并编辑器和浏览器<HTML><HEAD><TITLE>学习HTML</TITLE></HEAD><BODYBGCOLOR=“LAVENDER”><H1>欢迎来到HTML世界</H1></BODY></HTML>HTML代码在编辑器中编写HTML代码浏览器显示HTML文档/页面43编辑器和浏览器<HTML>HTML代码在编辑器中编写HT编辑器2-2需要在编辑器中键入源代码示例:DreamWeaverMacromediaDreamweaver

是一种专业的HTML编辑器,用于设计、编码、开发网站、网页和强大的Web

应用程序。44编辑器2-2需要在编辑器中键入源代码示例:DreamWeaHTML文档结构<HTML><HEAD><TITLE>学习HTML

</TITLE></HEAD><BODY></H1>

欢迎来到HTML世界</H1></BODY></HTML>HTML网页头部部分主体部分<HTML>…</HTML>标签标记HTML文档的开始和结束这部分包括标题和其他说明信息。包括在<HEAD>…</HEAD>标签内这部分包含文本、图像和链接。它包括在<BODY>…</BODY>标签内45HTML文档结构<HTML>HTML网页头部部分主体部分<HTML><HEAD><TITLE>学习HTML</TITLE></HEAD><BODYBGCOLOR=lavender><H1>欢迎来到HTML世界</H1></BODY></HTML>HTML标签2-2<BODY

BGCOLOR

=“green”>标签标识BODY元素属性提供有关元素的附加信息值分配给属性的内容46<HTML>HTML标签2-2<BODYBGCOLORMETA标签2-1META标签是一个特殊的HTML标签,提供有关网页的信息,如作者姓名、公司名称和联系信息等许多搜索引擎都使用META标签信息例如,要将GrahamBrowne指定为作者,则使用以下META标签:<METAname=“作者"content="GrahamBrowne">47META标签2-1META标签是一个特殊的HTMLMETA标签2-2http-equiv属性可用来代替META标签中的name属性<METAhttp-equiv="expires"content="Wed,26Feb1997GMT">表示有效期:格林尼治标准时间2005年9月12日,星期一14:25:27属性值:具体的过期时间属性名称:网页过期<METAhttp-equiv="refresh"content=“2">

表示每隔2秒,自动刷新网页演示:自动刷新的例子48META标签2-2http-equiv属性可用来代替HTML基本元素标题段落换行符预先格式化字符格式化列表水平线字体图像特殊字符超级链接49HTML基本元素标题13标题<HTML><HEAD><TITLE>动物世界</TITLE></HEAD>

<BODY><H1>从大自然获得灵感</H1><H2>从大自然获得灵感</H2><H3>从大自然获得灵感</H3><H4>从大自然获得灵感</H4><H5>从大自然获得灵感</H5><H6>从大自然获得灵感</H6></BODY></HTML>H1到H6标签用于指定不同级别的标题50标题<HTML>H1到H6标签用于指定不同级别的标题1段落标签<HTML><HEAD><TITLE>诗词学习</TITLE></HEAD><BODY><P>我是第一段</P><P>我是第二段</P><Palign="left">左对齐显示<P><Palign="center">居中显示<P><Palign="right">右对齐显示<P></BODY></HTML><P></P><P>…</P>标签用于标记段落51段落标签<HTML><P></P><P>…</P>标签用于换行符只要在文本中放入<BR>标签,就会强制换行<HTML><HEAD><TITLE>诗词学习</TITLE></HEAD><BODY><BR>我是第一行<BR>我是第二行<P>我是第一段</P><P>我是第二段</P></BODY></HTML><BR>52换行符只要在文本中放入<BR>标签,就会强制换行<HT<Pre>标签<HTML><HEAD><TITLE>诗词学习</TITLE></HEAD><BODY><H1>静夜思</H1><PRE> 床前明月光疑是地上霜

举头望明月低头思故乡</PRE></BODY><HTML<PRE>标签用于显示具有预先定义格式的文本(如HTML文档中所示)53<Pre>标签<HTML><PRE>标签用于显示具有预先<HTML><HEAD><TITLE>学习HTML</TITLE></HEAD><BODY><P><B>这很有趣</B><BR><BR><I>足球是最令人喜爱的运动之一。</I><BR><BR><U>信息技术是发展的关键。</U><BR><BR>

水的分子式是H<SUB>2</SUB>O。<BR><BR>

3<SUP>2</SUP>等于9。

<BR><BR></P></BODY></HTML>字符格式化标签此标签用于对文本应用各种格式,如粗体、斜体、下划线、下标、上标等54<HTML>字符格式化标签此标签用于对文本应用各种格式,如粗列表简介列表用于按逻辑方式对数据分组

玫瑰花向日葵兰花苹果桔子水仙芒果水果苹果

芒果桔子花卉水仙兰花向日葵玫瑰花55列表简介列表用于按逻辑方式对数据分组玫瑰花向日葵兰花苹果桔子列表类型:无序列表

…<BODY><H1>星期中的每一天</H1><UL> <LI>星期日<LI>星期一<LI>星期二<LI>星期三<LI>星期四<LI>星期五<LI>星期六</UL></BODY>…无序列表也称为“项目列表”56列表类型:无序列表…无序列表也称为“项目列表”20…<BODY><H1>星期中的每一天</H1><OL> <LI>星期日<LI>星期一<LI>星期二<LI>星期三<LI>星期四<LI>星期五<LI>星期六</OL></BODY>…列表类型:有序列表

有序列表的属性<LITYPE=I><LITYPE=i><LITYPE=A><LITYPE=a><OLSTART=n>在有序列表中,列表项以自动生成的顺序显示57…列表类型:有序列表有序列表的属性<LITYPE=I使用水平线<HTML><HEAD><TITLE>动物世界</TITLE></HEAD><BODY><H3>老虎的夜间视觉</H3><HRnoshadesize=5align=centerwidth=50%><HRsize=15align=leftwidth=80%><HR><P>老虎的夜视能力优于人类的夜视能力五倍以上</BODY></HTML><HR>标签属性alignWidthSizeNoshade<HR>标签用于在页面上绘制水平线58使用水平线<HTML><HR>标签属性alignWidt使用字体和属性<HTML><HEAD><TITLE>动物世界</TITLE></HEAD><BODY><H1>了解有关动物的更多信息</H1><P><FONTSIZE=5COLOR=BLUEFACE=Arial>斑马的特性</FONT><P>没有任何两匹斑马<FONTCOLOR=REDSIZE=3>的斑纹是完全一样的,</FONT>因此每匹斑马都是独一无二的

</BODY></HTML><FONTSIZE

=5

COLOR

=BLUE

FACE

=Arial>可以按名称或十六进制值指定颜色可以为字体指定的大小范围为从1到7可以指定一列字体,各字体间用逗号分隔。浏览器以最先找到的字体显示文本<FONT>元素及其相关属性(如SIZE、COLOR和FACE)可用于控制网页上文本的显示59使用字体和属性<HTML><FONTSIZE=5CO<IMG>标签用于在HTML文档中插入图像。<IMG>标签的两个常用属性是SRC和ALIGN。SRC属性用于指定要插入的图像位置。ALIGN属性用于指定图像相对于文本的对齐方式。插入图像2-160<IMG>标签用于在HTML文档中插入图像。<IMG>插入图像2-2<HTML><HEAD><TITLE>动物世界</TITLE></HEAD><H1><FONTSIZE=3COLOR=FORESTGREEN><B>让我们看看这些可爱的动物</B></FONT></H1><BODY><P>

<IMGALIGN=BOTTOMSRC=Animal.jpg>底部对齐</P><P><IMGALIGN=TOPSRC=Animal.jpg>顶部对齐</P><P><IMGALIGN=MIDDLESRC=Animal.jpg>居中对齐</P></BODY></HTML>61插入图像2-2<HTML><HEAD>25插入特殊字符2-1某些字符在HTML中具有特殊意义,如小于号(<)定义HTML标签的开始字符实体用于在HTML文档中插入特殊字符,如版权号,注册商标等插入特殊字符需要用HTML字符实体>®©

空格;62插入特殊字符2-1某些字符在HTML中具有特殊意义,如插入特殊字符2-2特殊字符字符实体大于号(>)>小于号(<)< 引号(“)"®®©

©&号& 63插入特殊字符2-2特殊字符字符实体大于号(>)>创建超级链接<HTML><HEAD><TITLE>了解鸟类</TITLE></HEAD><BODY><H1>会弹琴的狗狗</H1><AHREF=dog.htm>单击此处查看</A></BODY></HTML>64创建超级链接<HTML>28要链接到另一目录(C:\example)下的页面,可编写<AHREF=“..\example\Doc2.htm”>或

<AHREF=“C:\example\Doc2.htm”>要链接到同一目录(C:\html)下的页面,可编写<AHREF=“Doc3.htm”>或<AHREF=“C:\html\Doc3.htm”>C:\html目录C:\example目录绝对和相对路径名Doc1.htmDoc3.htmDoc2.htmDoc4.htm绝对路径名相对路径名65要链接到另一目录(C:\example)下的页面,

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论