Html超文本标记语言.ppt

《Html超文本标记语言.ppt》由会员分享，可在线阅读，更多相关《Html超文本标记语言.ppt（36页珍藏版）》请在三一办公上搜索。

1、,1,网站开发综合技术,2,网站开发综合技术课程结构,表格、框架、表单标记,层叠样式表,JavaScript基本语法,浏览器对象和事件处理,ASP基础知识,网站开发综合技术,ASP脚本语言-VBScript,ASP内置对象详解,利用ADO访问数据库,Html超文本标记语言,Dreamweaver 使用入门,ASP基础知识,ASP脚本-VBScript,ASP内置对象详解,利用ADO访问数据库,表格、框架、表单,层叠样式表,Html基本标记,Dreamweaver入门,案例展示,综合案例解析,综合作业,浏览器对象和事件,JavaScript基本语法,案例展示,综合作业,案例展示,综合作业,综合案

2、例解析,综合案例解析,第一阶段前台静态网站的开发,第二阶段前台动态效果的开发,第三阶段动态网站的开发,第一章,HTML的基本标记,预习检查（HTML的基本标记）,请详述HTML文档的基本结构。图像与文本的对齐方式有哪几种？通常使用那个标签的那个属性来创建超链接？,案例整体剖析,此处插入Flash,超级链接,logo,滚动公告信息marquee,小图标,本章目标（HTML的基本标记）,会使用HTML的基本结构创建网页会使用文本相关标签实现文字修饰和布局会使用图像相关标签实现图文并茂的页面会使用超链接相关标签实现页面间的跳转,HTML文件的基本结构,HTML文档的结构,我的第一个网页 Hello

3、World!,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,网页标题,网页内容，可以是文本、图像等,这部分包含文本、图像和链接。它包括在 标签内,查看源代码,这部分包括标题和其他说明信息。包括在 标签内,使用记事本创建网页,演示示例2：如何在记事本里创建网页,使用记事本创建网页的步骤：1、打开记事本2、输入HTML代码3、保存为*.html或*.htm文件，注意格式问题4、打开网页预览效果,使用记事本创建网页,标签,网页标题,网页页面中出现乱码，那如何消除乱码使其正常显示？,使用标签,简体中文：gb2312繁体中文：big5纯英文网页：iso-8859-1,可以避免

4、页面中的乱码,页面背景色或背景图像,Hello World！,Hello World!,查看源代码,网页背景色彩,网页背景图像,文本相关标签,字体、字号标题标签标签特殊符号行的控制段落标签换行标签,使用了,换段了,设置了字体的大小和颜色,换行了,特殊符号,字体、字号相关标签,标题标签.#=1,2,3,4,5,6 说明：到字体大小依次递减,一级标题 二级标题 三级标题 四级标题 五级标题 六级标题,H1 到 H6 标签用于指定不同级别的标题,查看源代码,.,字体、字号相关标签,标签特殊符号,字体的大小值,字体的颜色,字体的类型,字体、字号相关标签,查看源代码,.手机充值、IP卡/电话卡 移动 A

5、ll rights.,空格效果,.淘宝集市欢迎您！淘宝网首届翠友会！,行的控制相关标签,段落标签段(Paragraph)(可以看作是空行)换行标签换行,查看源代码,换段了,换行了,图像标签,常见的图片格式介绍,图像标签,图像的基本语法,查看源代码,鼠标移到图像上，出现的提示性文字,图像的位置,图像的宽度,图像的高度,为图像添加的提示性文字,图像标签,图像与文本的对齐方式,图像与文本居中对齐,还可以取top,bottom 值,.请点击广告进入明星专区,查看源代码,图像和文本居中对齐,小结1,字号大小为3,练习答案,练习代码,编写如下图所示效果对应的html代码,文字布局,内容分隔标签项目列表和编

6、号有序列表无序列表预格式文本标签,水平分隔线,有序列表,无序列表,用了预先定义好的格式,如何使用内容分隔标签,线的厚度值,线的宽度,标签用于在页面上绘制水平线,线的颜色,查看源代码,如何使用列表,无序列表语法 列表项内容 有序列表语法 列表项内容,查看源代码,注册步骤：填写信息 收电子邮件 注册成功 新人上路指南 如何激活会员名？如何注册淘宝会员？注册时密码设置有什么要求？支付宝认证,预格式文本标签,如何实现如下图所示的页面中的文字效果？,使用 标签可以实现,如何使用预格式文本标签,腾讯-QQ币/QQ幻想-30元卡 一 口 价：26.45元 运费：卖家承担运费 剩余时间：5天 宝贝类型：全新

7、卖主声明：货到付款，可试用10天！,查看源代码,HTML中代码格式与浏览器中显示效果一样,页面链接标签,链接到其他页面免费注册,链接内容,链接的地址,链接到其他页面 免费注册 登录,单击”免费注册”之后链接到的页面,查看源代码,页面链接标签,链接到其他页面相对路径指定从根目录到文件的完整路径。绝对路径指定相对于当前文件的文件位置。,在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？,两种方式：相对路径和绝对路径,页面链接标签,要链接到同一目录(C:HTML)下的页面，可编写 或,相对路径名,绝对路径名,页面链接标签,要实现如下图所示的超链接效果，怎么办？,演示示

8、例3：演示锚链接的例子,使用锚记标签,页面链接标签,链接到本页面锚记标签用于使用户“跳”到文档的某个部分HTML 的 NAME 属性用于创建锚标记 主题名称为达到这种跳转效果，请在 HREF 参数中使用该标记主题名称,演示示例4：演示锚链接的例子,链接到其他页面新人上路新人上路指南,1、定义锚标记,2、链接到锚标记所在位置,页面链接标签,电子邮件链接要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”站长信箱,演示示例5：演示电子邮件链接,电子邮件链接 站长信箱,单击”站长信箱”链接后的输出结果,任何正确的电子邮箱地址均可,滚动标签,滚动文字或图像,滚动延迟时间,滚动对象的方向,说明：

9、scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。,查看源代码,滚动标签,水平滚动 垂直滚动 Avon化妆品 雅诗兰黛,水平向左移动,垂直向上移动,图片和文字同时垂直向上移动,声明滚动文字结束,声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动,小结2,有序列表OL,无序列表UL,练习答案,练习代码,编写如下图所示效果对应的html代码,总结,哪个标签中的哪个属性可以改变字体颜色和字号？图像与文本的对齐方式有哪几种？项目列表和编号有何区别？分别适用什么场合？链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，这两种路径有何区别和联系？,