HTML的基本标签-教案_第1页
HTML的基本标签-教案_第2页
HTML的基本标签-教案_第3页
HTML的基本标签-教案_第4页
HTML的基本标签-教案_第5页
已阅读5页,还剩8页未读 继续免费阅读

下载本文档

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

文档简介

HTMLHTML语言开发商业站点(HTML)3G学术部1/121HTML\l“_TOC_250037“本章任务 2\l“_TOC_250036“本章目标 2\l“_TOC_250035“本章重点 2\l“_TOC_250034“本章难点 2\l“_TOC_250033“预习检查、任务、目标局部[10分钟] 2\l“_TOC_250032“课程学问点讲解: 2\l“_TOC_250031“学问点1:HTML文件的根本构造[10分钟] 2\l“_TOC_250030“HTML文件的根本构造 2\l“_TOC_250029“<META>标签 3\l“_TOC_250028“页面背风光或背景图像 3\l“_TOC_250027“学问点2:文本相关标签[10分钟] 4\l“_TOC_250026“字体、字号标签 4\l“_TOC_250025“行的掌握 5\l“_TOC_250024“学问点3:图像标签[5分钟] 6\l“_TOC_250023“常见的图片格式介绍 6\l“_TOC_250022“图像的根本语法 6\l“_TOC_250021“图像与文本的对齐方式 7\l“_TOC_250020“学问点4:小结1[10分钟] 7\l“_TOC_250019“编写如以下图所示效果对应的html代码 7\l“_TOC_250018“代码 7\l“_TOC_250017“学问点5:文字布局[10分钟] 8\l“_TOC_250016“内容分隔<HR>标签 8\l“_TOC_250015“工程列表和编号 8\l“_TOC_250014“预格式文本<PRE>标签 9\l“_TOC_250013“学问点6:页面链接<A>标签[10分钟] 9\l“_TOC_250012“文件的路径有几种方式 9\l“_TOC_250011“链接到其他页面 9\l“_TOC_250010“链接到本页面 10\l“_TOC_250009“电子邮件链接 10\l“_TOC_250008“学问点7:滚动<MARQUEE>标签[10分钟] 10\l“_TOC_250007“1) <MARQUEE>标签 10\l“_TOC_250006“2) 语法 10\l“_TOC_250005“学问点8:小结2[10分钟] 11\l“_TOC_250004“1) 编写如以下图所示效果对应的html代码 11\l“_TOC_250003“2) 代码 11\l“_TOC_250002“本章总结[5分钟] 12\l“_TOC_250001“考核点 12\l“_TOC_250000“课后作业 12授课教师:钟慧涛课 时:2课时本章任务1〕 制作图文并茂的“广告”页面本章目标HTML会使用文本相关标签实现文字修饰和布局会使用图像相关标签实现图文并茂的页面会使用超链接相关标签实现页面间的跳转本章重点1〕 文本、图像、链接标签的运用本章难点1) 各种标签的综合应用预习检查、任务、目标局部[10分钟]课程目标:HTMLJavaScriptJSPY2JAVAEE、JAVAMEHTMLJS企业应用的商业级网站,便利学员就业。教学案例:理论课学习制作淘宝网,上机课学员将完成拍拍网的制作,工程案例将完成当当网的制作。预习检查:HTML通常使用那个标签的那个属性来创立超链接?课程学问点讲解:1:HTML[10HTMLHTML<HTML></HTML>HTMLHTML语言开发商业站点(HTML)3G学术部10/12<HEAD></HEAD><TITLE></TITLE><BODY></BODY>这些标签都是成对消灭:开头标签为<>,完毕标签为</>HTML使用记事本创立网页使用记事本创立网页的步骤:翻开记事本HTML保存为*.html*.htm翻开网页预览效果<META>标签网页页面中消灭乱码,那如何消退乱码使其正常显示?使用<META>标签<META>标签消灭在网页的标题局部。正确设置<META>charset我们一般使用:charset=gb2312语法:其他用法:<META-equiv=“expires“content=“Wed,26Feb199710:10:10GMT“>表示过期时间:格林尼治标准时间1997年2月26日,星期三10:10:10<META-equiv=“refresh“content=“2“>2页面背风光或背景图像默认状况下,背风光为白色使用<BODY>bgcolor使用<BODY>background一般不会两者同时使用:当同时使用时,显示出来的是背景图片〔将背风光设置为#FFCCFF,背景图片设置成了back_image.GIF〕为了使页面秀丽大方,网页背景要尽量地浅2:文本相关标签[10字体、字号标签标题标签分为<H1>-<H6>六级1.<H#>...</H#>2. #=1,2,3,4,5,6说明:<H1>到<H6>字体大小依次递减H1到H6标签用于指定不同级别的标题作用:吸引读者的提示作用,说明白文章的内容分隔大段文字概括下文内容依据规律构造安排信息<FONT>标签用于掌握网页上文本的显示外观文本大小、字体类型和颜色等属性都可使用<FONT>标签指定size1~7713colorface特别符号HTMLHTML转义码由三局部组成:&号实体名称分号(;)留意:转义码各字符间不能有空格转义码必需以“;”完毕单独的&不被认为是转义开头例如:行的掌握段落标签<P><P>用于标记段落开头段落完毕标签</P>可以不用,作为良好的编码习惯,最好有完毕标记可以通过<Palign如:左对齐、居中、右对齐假设没有完毕标签</P>,那么,在遇到下一个标签<P>时将开头的一段换行标签<BR>用于想要完毕一行,但又不想开头一个的段落时使用<BR>属于强制换行,没有完毕标签3:图像标签[5常见的图片格式介绍JPGInternet最适合用于摄影或连贯色调图像的高级格式JPGGIF是网页中使用最广泛、最普遍的一种图像格式GIF256支持帧动画,可以被设计成动画:把多幅单帧画面连续显示SWFSWF能够用比较小的体积来表现丰富的多媒体形式可以边传输边观看,特别适合网络SWF缺点:制作起来格外耗时耗力BMPBMPWebWindows一般不在网络上使用这种图片格式,用于桌面墙纸图像的根本语法<IMG>HTML该标签可以放在要显示图像的位置<IMGsrc例如:图像与文本的对齐方式<IMG>alignalgintopbottommiddleleftright语法:<IMGalign=“middle“>

图像与文本居中对齐,还可以取top,bottom等值41[10html代码<HTML><HEAD><TITLE>明星一族</TITLE></HEAD><BODY><H1><FONTsize=“3“color=“red“><B><i>让我们看看这些明星们</i></B></FONT></H1><P><IMGsrc=“images/adv_2.jpg“alt=“明星巡回演出“width=“120“height=“80“align=BOTTOM>底部对齐</P><IMGsrc=“images/adv_2.jpg“width=“120“height=“80“align=top>顶部对齐</BODY></HTML>5:文字布局[10文字布局就是使网页中的文字合理分隔、排列有序或按设计者想要的格式去布局内容分隔<HR>标签<HR>〔水平线〕标签用于在页面上绘制水平线只有开头标签,没有完毕标签使用属性掌握水平线的显示size:厚度,单位是像素color:颜色width:宽度,单位可以是像素,也可以是窗口的百分比线的厚度值线的颜色线的厚度值线的颜色线的宽度<HRsize=“5“color=“red“width=“300“>工程列表和编号无序列表<UL>就是“工程列表”列表项前面带有工程符号包含在无序列表标签<UL></UL>内列表中每项都用列表标签<LI>LI完毕标签</LI>可以不用<UL>typedisc:实心圆点circle:空心圆环square:空心正方形有序列表<OL>包含在<OL></OL>标签内显示的列表项是自动生成的有序的工程列表中每项都用列表标签<LI>LI完毕标签</LI>可以不用<OL>type1:数字序列a:小写英文字母序列A:大写英文字母序列i:小写罗马数字序列I:大写罗马数字序列预格式文本<PRE>标签<PRE>HTML学问点6:页面链接<A>标签[10<A>标签用于创立越级链接〔超链接,它是到另一个文档或文件〔频〕甚至到同一文档的另一局部的链接。当用户单击越级链接时,就会进入链接中指定URL。文件的路径有几种方式两种方式:相对路径:指定相对于当前文件的文件位置确定路径:指定从根名目到文件的完整路径链接到其他页面相对路径指定从根名目到文件的完整路径。确定路径指定相对于当前文件的文件位置。链接到本页面当一个页面的内容过多,导致页面过长,可以使用锚点链接命名锚记也称为锚记锚记标签用于使用户“跳”到文档的某个局部<A>标签的name属性用于创立锚标记<ANAME=“marker”>主题名称</A>为到达这种跳转效果,请在HREF参数中使用该标记<AHREF=“#marker”>主题名称</A>电子邮件链接要链接电子邮件,可在链接标签中插入”mailto:邮箱地址”<A“mailto:webmaster@sohu“href=“mailto:webmaster@sohu“>站长信箱</A>点击此链接后,将自动调用默认的邮件客户端软件7:滚动<MARQUEE>标签[10分钟]<MARQUEE><MARQUEE>标签可以移动文字、图片语法说明:scrolldelay90。direction:表示滚动的方向,默认为从右向左。可以取四个值:up、down、left、right82[10html代码<HTML><HEAD><META-equiv=“Content-Type“content=“text/html;charset=gb2312“><TITLE>工程列表和链接的应用</TITLE></HEAD><BODY><OL>

<LI><Ahref=“windows_me.html“target=“_self“>WindowsMe</A><LI><Ahref=“windows_2023.html“target=“_self“>Windows2023</A><ULtype=“disc“><LI>WindowsServer2023

温馨提示

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

评论

0/150

提交评论