(1)Html超文本标记语言

1网站开发综合技术2《网站开发综合技术》课程结构表格、框架、表单标记层叠样式表JavaScript基本语法浏览器对象和事件处理ASP基础知识网站开发综合技术ASP脚本语言--VBScriptASP内置对象详解利用ADO访问数据库Html超文本标记语言Dreamweaver使用入门ASP基础知识ASP脚本-VBScriptASP内置对象详解利用ADO访问数据库表格、框架、表单层叠样式表Html基本标记Dreamweaver入门案例展示综合案例解析综合作业浏览器对象和事件JavaScript基本语法案例展示综合作业案例展示综合作业综合案例解析综合案例解析第一阶段前台静态网站的开发第二阶段前台动态效果的开发第三阶段动态网站的开发第一章HTML的基本标记预习检查（HTML的基本标记）请详述HTML文档的基本结构。图像与文本的对齐方式有哪几种？通常使用那个标签的那个属性来创建超链接？案例整体剖析此处插入Flash超级链接logo滚动公告信息marquee小图标本章目标（HTML的基本标记）会使用HTML的基本结构创建网页会使用文本相关标签实现文字修饰和布局会使用图像相关标签实现图文并茂的页面会使用超链接相关标签实现页面间的跳转HTML文件的基本结构HTML文档的结构HTMLHEADTITLE我的第一个网页/TITLE/HEADBODYHelloWorld!/BODY/HTMLHTML网页HEAD头部部分BODY主体部分HTML…/HTML标签标记HTML文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包含文本、图像和链接。它包括在BODY…/BODY标签内查看源代码这部分包括标题和其他说明信息。包括在HEAD…/HEAD标签内使用记事本创建网页演示示例2：如何在记事本里创建网页使用记事本创建网页的步骤：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－H6FONT标签特殊符号行的控制段落标签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换行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……查看源代码图像和文本居中对齐小结1字号大小为3练习答案练习代码编写如下图所示效果对应的html代码文字布局内容分隔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……/OL查看源代码H4注册步骤：/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天！/PRE查看源代码HTML中代码格式与浏览器中显示效果一样页面链接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标签要实现如下图所示的超链接效果，怎么办？演示示例3：演示锚链接的例子使用锚记标签页面链接A标签链接到本页面锚记标签用于使用户“跳”到文档的某个部分HTML的NAME属性用于创建锚标记ANAME=“marker”主题名称/A为达到这种跳转效果，请在HREF参数中使用该标记AHREF=“#marker”主题名称/A演示示例4：演示锚链接的例子HTMLHEADTITLE链接到其他页面/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水平向左移动垂直向上移动图片和文字同时垂直向上移动声明滚动文字结束声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动小结2有序列表OL无序列表UL练习答案练习代码编写如下图所示效果对应的html代码总结哪个标签中的哪个属性可以改变字体颜色和字号？图像与文本的对齐方式有哪几种？项目列表和编号有何区别？分别适用什么场合？链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，这两种路径有何区别和联系？