使用HTML创建静态页面

使用HTML创建静态网站软开1237班第一小组组长：杨子慰组员：姜陈、邹涛、邹思亮、彭皓天第一课HTML的基本标签•会使用HTML的基本结构创建网页•会使用文本相关标签实现文字修饰和布局•会使用图像相关标签实现图文并茂的页面•会使用超链接相关标签实现页面间的跳转HTML文件的基本结构•HTML文档的结构HTMLHEADTITLE我的第一个网页/TITLE/HEADBODYHelloWorld!/BODY/HTMLHTML网页HEAD头部部分BODY主体部分HTML…/HTML标签标记HTML文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包含文本、图像和链接。它包括在BODY…/BODY标签内这部分包括标题和其他说明信息。包括在HEAD…/HEAD标签内使用记事本创建网页使用记事本创建网页的步骤：1、打开记事本2、输入HTML代码3、保存为*.html或*.htm文件，注意格式问题4、打开网页预览效果使用记事本创建网页META标签HEADMETAhttp-equiv=Content-Typecontent=text/html;charset=gb2312TITLE网页标题/TITLE/HEAD网页页面中出现乱码，那如何消除乱码使其正常显示？使用META标签简体中文：gb2312繁体中文：big5纯英文网页：iso-8859-1可以避免页面中的乱码页面背景色或背景图像BODYbgcolor=#FFCCFF“background=back_image.GIFHelloWorld！/BODY为了使页面美丽大方，网页背景要尽量地浅……BODYbgcolor=#FFCCFF“HelloWorld!/BODY……网页背景色彩网页背景图像文本相关标签•字体、字号–标题标签H1－H6–FONT标签–特殊符号•行的控制–段落标签P–换行标签BR使用了H2…H2换段了设置了字体的大小和颜色换行了特殊符号字体、字号相关标签•标题标签H#.../H##=1,2,3,4,5,6说明：H1到H6字体大小依次递减……BODYH1一级标题/H1H2二级标题/H2H3三级标题/H3H4四级标题/H4H5五级标题/H5H6六级标题/H6/BODY……H1到H6标签用于指定不同级别的标题FONTsize=“+2”color=“red”face=“律书”.../FONT字体、字号相关标签•FONT标签•特殊符号特殊字符转义码空格 引号(“”)"小于()<大于()>版权号(©)©字体的大小值字体的颜色字体的类型字体、字号相关标签......BODYPFONTsize=+2color=red手机充值、IP卡/电话卡/FONTBR/移动 | 100| 联通| 50/PCopyright©2007"淘宝网"Allrights./BODY……空格效果…….Palign=center淘宝集市欢迎您！/PPalign=left淘宝网首届翠友会！BR……/P……行的控制相关标签•段落标签P–段(Paragraph)(可以看作是空行)p•换行标签BR换段了换行了图像标签•常见的图片格式介绍图像类型优点缺点适用场合制作工具*.jpg体积小，比较清晰有损压缩、画面失真网页图片Photoshop*.gif支持Internet标准,支持无损耗压缩和透明度，很流行支持有限的透明度,效果不如别的图像网页图片Photoshop*.swf体积小,便于网络传输制作麻烦网页动画Flash*.bmp支持24位颜色深度，兼容性好不支持压缩容量大桌面墙纸photoshop图像标签•图像的基本语法–IMGsrc=images/adv_2.jpgwidth=300“height=150“alt=明星演唱会开幕……BODYIMGsrc=images/adv_2.jpgalt=明星演唱会开幕width=300height=150/BODY……鼠标移到图像上，出现的提示性文字图像的位置图像的宽度图像的高度为图像添加的提示性文字图像标签•图像与文本的对齐方式–IMGalign=middle图像与文本居中对齐,还可以取top,bottom值….BODYAhref=star.htmlIMGalign=middlesrc=images/adv_2.jpgwidth=180height=95border=0//A请点击广告进入明星专区/BODY……图像和文本居中对齐文字布局•内容分隔HR标签•项目列表和编号–有序列表OL–无序列表UL•预格式文本PRE标签水平分隔线HR有序列表无序列表用了预先定义好的格式如何使用内容分隔HR标签•HRsize=5color=redwidth=300……BODYHRsize=5color=redwidth=300HRsize=10color=blackwidth=200HRsize=5color=#0000FFwidth=50%/BODY……线的厚度值线的宽度HR标签用于在页面上绘制水平线线的颜色如何使用列表•无序列表语法ULLI列表项内容/LI……/UL•有序列表语法OLLI列表项内容/LI……/OLH4注册步骤：/H4OLtype=1LI填写信息/LILI收电子邮件/LILI注册成功/LI/OL新人上路指南ULtype=circleLI如何激活会员名？/LILI如何注册淘宝会员？/LILI注册时密码设置有什么要求？/LILI支付宝认证/LI/UL预格式文本PRE标签如何实现如下图所示的页面中的文字效果？使用PRE标签可以实现如何使用预格式文本PRE标签PREIMGsrc=images/QQ.JPGwidth=159height=133align=LEFT腾讯-QQ币/QQ幻想-30元卡一口价：26.45元运费：卖家承担运费剩余时间：5天宝贝类型：全新卖主声明：货到付款，可试用10天！/PREHTML中代码格式与浏览器中显示效果一样页面链接A标签•链接到其他页面–Ahref=register/register.html[免费注册]/A链接内容链接的地址HTMLHEADTITLE链接到其他页面/TITLE/HEADBODYAhref=register/register.html[免费注册]/AAhref=login/login.htm[登录]/A/BODY/HTML单击”[免费注册]”之后链接到的页面页面链接A标签•链接到其他页面–相对路径指定从根目录到文件的完整路径。–绝对路径指定相对于当前文件的文件位置。在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？两种方式：相对路径和绝对路径页面链接A标签要链接到同一目录(C:\HTML)下的页面，可编写AHREF=“Doc1.htm”或AHREF=“C:\html\Doc2.htm”相对路径名绝对路径名页面链接A标签要实现如下图所示的超链接效果，怎么办？使用锚记标签页面链接A标签•链接到本页面–锚记标签用于使用户“跳”到文档的某个部分–HTML的NAME属性用于创建锚标记ANAME=“marker”主题名称/A–为达到这种跳转效果，请在HREF参数中使用该标记AHREF=“#marker”主题名称/AHTMLHEADTITLE链接到其他页面/TITLE/HEADBODYAhref=#helpme[新人上路]/A……Aname=helpme新人上路指南/A……/BODY/HTML1、定义锚标记2、链接到锚标记所在位置页面链接A标签•电子邮件链接–要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”Ahref=mailto:[e-mail]站长信箱/A演示示例5：演示电子邮件链接HTMLHEADTITLE电子邮件链接/TITLE/HEADBODY……Ahref=mailto:[e-mail]站长信箱/A……/BODY/HTML单击”站长信箱”链接后的输出结果任何正确的电子邮箱地址均可滚动MARQUEE标签MARQUEEscrolldelay=“100”direction=“up滚动文字或图像/MARQUEE滚动延迟时间滚动对象的方向说明：scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。滚动MARQUEE标签MARQUEEscrolldelay=100水平滚动/MARQUEEMARQUEEscrolldelay=200direction=up垂直滚动/MARQUEEMARQUEEscrolldelay=300direction=uponmouseover=this.stop()onMouseOut=this.start()Ahref=#IMGsrc=images/scroll/1.gifborder=0align=middleAvon化妆品/ABRAhref=#IMGsrc=images/scroll/2.gifborder=0align=middle雅诗兰黛/ABR……/MARQUEE水平向左移动垂直向上移动图片和文字同时垂直向上移动声明滚动文字结束声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动总结•哪个标签中的哪个属性可以改变字体颜色和字号？•图像与文本的对齐方式有哪几种？•项目列表和编号有何区别？分别适用什么场合？•链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，这两种路径有何区别和联系？第二课表格基础•会使用表格的基本结构实现简单表格•会使用表格相关标签实现跨行、跨列的复杂表格•会使用表格相关设置进行美化修饰表格的基本结构行列单元格在HTML文档中，广泛使用表格来存放网页上的文本和图像表格的基本语法TABLEborder=1TRTD单元格内容/TD……/TR……/TABLETABLE.../TABLE定义表格TD…/TD定义列TR…/TR定义行border用来设置表格边框尺寸大小如何创建表格TABLEborder=2TRTD移动/TDTD联通/TDTD铁通/TD/TRTRTDIBM/TDTD惠普/TDTD华硕/TD/TR/TABLE跨3列跨3行下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?TABLEborder=1TRTD手机充值、IP卡/TDTDcolspan=2办公设备、文具/TD/TRTRTDrowspan=2各种卡的总汇/TDTD铅笔/TDTD彩笔/TD/TRTRTD打印/TDTD刻录/TD/TR/TABLE如何创建跨行跨列的表格背景图片背景色表格的高度表格的宽度文字对齐方式根据理解,下面表格应该从哪些方面进行美化修饰？如何设置表格的尺寸和边框TABLEwidth=“400”height=“200”border=“15”bordercolor=r