《《文字图片超链接》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《文字图片超链接》PPT课件.ppt（34页珍藏版）》请在金锄头文库上搜索。
1、HTML的基本标签讲师：蓝敏第第 一一 章章就业技能结构图本门课程目标和课程项目展示本门课程目标本门课程目标学完本门课程后，你能够：课程项目展示课程项目展示演示示例演示示例1 1：课程项目展示课程项目展示 能制作界面美观大方、面向企业应用的静态商业网站，不含动态脚能制作界面美观大方、面向企业应用的静态商业网站，不含动态脚本功能。本功能。本章任务制作图文并茂的制作图文并茂的“广告广告”页面页面 查看源代码查看源代码本章目标会使用会使用HTMLHTML的基本结构创建网页的基本结构创建网页会使用文本相关标签实现文字修饰和布局会使用文本相关标签实现文字修饰和布局会使用图像相关标签实现图文并茂的页面会使
2、用图像相关标签实现图文并茂的页面会使用超链接相关标签实现页面间的跳转会使用超链接相关标签实现页面间的跳转HTML文件的基本结构HTMLHTML文档的结构文档的结构我的第一个网页我的第一个网页 Hello World!HTML 网页网页头部部分头部部分主体部分主体部分标签标记标签标记 HTML 文档的开始和结束文档的开始和结束网页标题网页标题网页内容，可以是网页内容，可以是文本、图像等文本、图像等这这部分包含文本、部分包含文本、图图像和像和链链接。它包括在接。它包括在 标签标签内内查看源代码查看源代码这部分包括标题和其他说明信息。包括在这部分包括标题和其他说明信息。包括在 标签内标签内使用记事本
3、创建网页演示示例演示示例2 2：如何在记事本里创建网页如何在记事本里创建网页 使用记事本创建网页的步骤：使用记事本创建网页的步骤： 1 1、打开记事本、打开记事本2 2、输入、输入HTMLHTML代码代码3 3、保存为、保存为* *.html.html或或* *.htm.htm文件，注意格式问题文件，注意格式问题4 4、打开网页预览效果、打开网页预览效果使用记事本创建网页使用记事本创建网页标签网页标题网页标题网页页面中出现乱码，那如何消除乱码使其正常显示？网页页面中出现乱码，那如何消除乱码使其正常显示？使用使用标签标签简体中文：简体中文：gb2312繁体中文：繁体中文：big5纯英文网页：纯英
4、文网页：iso-8859-1可以避免页面可以避免页面中的乱码中的乱码页面背景色或背景图像 Hello World！为了使页面美丽大方，网页背景要尽量地浅为了使页面美丽大方，网页背景要尽量地浅Hello World!查看源代码查看源代码网页背景色彩网页背景色彩 网页背景图像网页背景图像 文本相关标签字体、字号字体、字号标题标签标签特殊符号行的控制行的控制段落标签换行标签使用了使用了 换段了换段了设置了字体的设置了字体的大小和颜色大小和颜色换行了换行了特殊符号特殊符号字体、字号相关标签标题标签标题标签 . #=1, 2, 3, 4, 5, 6 说明：到字体大小依次递减 一级标题一级标题 二二级标题
5、级标题 三三级标题级标题 四四级标题级标题 五五级标题级标题 六六级标题级标题 H1 到到 H6 标签用于指定不同级别的标题标签用于指定不同级别的标题查看源代码查看源代码 . 字体、字号相关标签标签标签特殊符号特殊符号特殊字符特殊字符转义码转义码空格空格 引号引号(“”)"小于小于()>版权号版权号( )©字体的字体的大小值大小值字体的字体的颜色颜色字体的字体的类型类型字体、字号相关标签查看源代码查看源代码. 手机充值、手机充值、IP卡卡/电话卡电话卡 移移动动 | 100 | 联联通通 | 50 Copyrig
6、ht © 2007 "淘宝网淘宝网" All rights.空格效果空格效果. 淘宝集市欢迎您！淘宝集市欢迎您！ 淘宝网首届翠友会！淘宝网首届翠友会！ 行的控制相关标签段落标签段落标签段(Paragraph) (可以看作是空行) 换行标签换行标签换行 查看源代码查看源代码换段了换段了换行了换行了图像标签常见的图片格式介绍常见的图片格式介绍图像类型图像类型优点优点缺点缺点适用场合适用场合制作工具制作工具*.jpg体积小，比较清晰体积小，比较清晰有损压缩有损压缩 、画面失真画面失真 网页图片网页图片Photoshop*.gif支持支持 Internet 标准标准 ,支
7、持无损耗压缩和支持无损耗压缩和透明度，很流行透明度，很流行 支持有限的支持有限的透明度透明度,效果效果不如别的图不如别的图像像网页图片网页图片Photoshop*.swf体积小体积小,便于网络传便于网络传输输制作麻烦制作麻烦网页动画网页动画 Flash*.bmp支持支持 24 位颜色深度，位颜色深度，兼容性好兼容性好不支持压缩不支持压缩 容量大容量大桌面墙纸桌面墙纸photoshop图像标签图像的基本语法图像的基本语法查看源代码查看源代码鼠标移到图像上，出鼠标移到图像上，出现的提示性文字现的提示性文字图像的图像的位置位置图像的图像的宽度宽度图像的图像的高度高度为图像添加的提示性文字为图像添加的
8、提示性文字图像标签图像与文本的对齐方式图像与文本的对齐方式图像与文本居中对图像与文本居中对齐齐,还可以取还可以取top, bottom 值值. 请点击广告进入明星专区请点击广告进入明星专区查看源代码查看源代码图像和文本居图像和文本居中对齐中对齐小结1字号大小为字号大小为3练习答案练习答案练习代码练习代码编写如下图所示效果对应的编写如下图所示效果对应的htmlhtml代码代码文字布局内容分隔内容分隔标签标签项目列表和编号项目列表和编号有序列表无序列表预格式文本预格式文本标签标签水平分隔线水平分隔线有序列表有序列表无序列表无序列表用了预先定义用了预先定义好的格式好的格式如何使用内容分隔标签HR w
9、idth=300线的厚度值线的厚度值线的宽度线的宽度查看源代码查看源代码 标签标签用于在用于在页页面上面上绘绘制水平制水平线线 线的颜色线的颜色如何使用列表无序列表语法无序列表语法 列表项内容 有序列表语法有序列表语法 列表项内容 查看源代码查看源代码 注册步骤：注册步骤： 填写信息填写信息 收收电电子子邮邮件件 注册成功注册成功 新人上路指南新人上路指南 如何激活会如何激活会员员名？名？ 如何注册淘宝会如何注册淘宝会员员？ 注册注册时时密密码设码设置有什么要求置有什么要求？ 支付宝支付宝认证认证 预格式文本标签 如何实现如下图所示的页面中的文字如何实现如下图所示的页面中的文字效果？效果？使用
10、使用 标签标签可以可以实现实现如何使用预格式文本标签 腾讯腾讯-QQ币币/QQ幻想幻想-30元卡元卡 一一 口口 价：价：26.45元元 运运费费：卖卖家承担运家承担运费费 剩余剩余时间时间：5天天 宝宝贝类贝类型：型： 全新全新 卖卖主声明：主声明：货货到付款，可到付款，可试试用用10天！天！ 查看源代码查看源代码HTML中代码格式与浏览中代码格式与浏览器中显示效果一样器中显示效果一样页面链接标签链接到其他页面链接到其他页面免费注册链接内容链接内容链接的地址链接的地址链接到其他页面链接到其他页面 免免费费注册注册 登登录录 单击单击”免费注册免费注册”之后链接到的页面之后链接到的页面查看源代
11、码查看源代码页面链接标签链接到其他页面链接到其他页面相对路径指定从根目录到文件的完整路径。绝对路径指定相对于当前文件的文件位置。 在同一个文件夹下有两个在同一个文件夹下有两个html文件，从一个文文件，从一个文件超链接到另一个文件的路径有几种方式？件超链接到另一个文件的路径有几种方式？两种方式：相两种方式：相对对路径和路径和绝对绝对路径路径页面链接标签要要链链接到同一目接到同一目录录 (C:HTML) 下的下的页页面，可面，可编编写写 或或 相对路径名相对路径名绝对路径名绝对路径名页面链接标签 要实现如下图所示的超链接效果，怎么办？要实现如下图所示的超链接效果，怎么办？演示示例演示示例3 3：
12、演示锚链接的例子演示锚链接的例子 使使用用锚锚记记标标签签页面链接标签链接到本页面链接到本页面锚记标签用于使用户“跳”到文档的某个部分HTML 的 NAME 属性用于创建锚标记 主题名称为达到这种跳转效果，请在 HREF 参数中使用该标记主题名称演示示例演示示例4 4：演示锚链接的例子演示锚链接的例子 链接到其他页面链接到其他页面新人上路新人上路新人上路指南新人上路指南1、定义锚标记、定义锚标记2、链接到锚标记所在位置、链接到锚标记所在位置页面链接标签电子邮件链接电子邮件链接要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”站长信箱演示示例演示示例5 5：演示电子邮件链接演示电子邮件
13、链接 电子邮件链接电子邮件链接 站站长长信箱信箱单击单击”站长信箱站长信箱”链接后的输出结果链接后的输出结果任何正确的电子邮任何正确的电子邮箱地址均可箱地址均可滚动标签MARQUEE 滚动滚动文字或文字或图图像像滚动延迟滚动延迟时间时间滚动对象的滚动对象的方向方向说明：说明：scrolldelay：表示滚动延迟时间，默认值为表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。表示滚动的方向，默认为从右向左。查看源代码查看源代码滚动标签 水平水平滚动滚动 垂直垂直滚动滚动 Avon化化妆妆品品 雅雅诗兰诗兰黛黛 水平向水平向左移动左移动垂直向垂直向上移动上移动图片
14、和文字同时图片和文字同时垂直向上移动垂直向上移动声明滚动声明滚动文字结束文字结束声明滚动文字声明滚动文字“水平滚水平滚动动”开始，并且将会以开始，并且将会以默认方式从右向左滚动默认方式从右向左滚动小结2有序列表有序列表OL无序列表无序列表UL练习答案练习答案练习代码练习代码编写如下图所示效果对应的编写如下图所示效果对应的html代码代码标记用于在页面中嵌入多媒体文件，但是用户计算机上需要事先安标记用于在页面中嵌入多媒体文件，但是用户计算机上需要事先安装相应的处理程序装相应的处理程序.(.(一般用于一般用于IEIE和基于和基于IEIE内核的浏览器。火狐需要安内核的浏览器。火狐需要安装插件才行。装
15、插件才行。) )常用嵌入式文档的格式：mp3, mid, wma, asf, swf, flv, rm, ra, ram, avitestEmbed.htmlembed src=ee.wmv autostart=true loop=true hidden=false width=100px height=100px /autostart:autostart:是否自动播放嵌入的文件。是否自动播放嵌入的文件。loop:loop:是否循环播放。也可以取数字，表明循环多少次。是否循环播放。也可以取数字，表明循环多少次。hidden:hidden:是否显示播放器。是否显示播放器。总结哪个标签中的哪个属性可以改变字体颜色和字号？哪个标签中的哪个属性可以改变字体颜色和字号？图像与文本的对齐方式有哪几种？图像与文本的对齐方式有哪几种？项目列表和编号有何区别？分别适用什么场合？项目列表和编号有何区别？分别适用什么场合？链接到其他页面时，路径的表示方法有两种：相对路径和绝链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，这两种路径有何区别和联系？对路径，这两种路径有何区别和联系？
