HTML基本标记和网站链接.ppt

1、Page 1/42,第1章内容回顾,Dreamweaver MX是一个所见即所得的网页编辑工具，在工作区内提供了便于工作的各种面板和工具栏，可以快速创建网页文档，建立站点 为Dreamweaver的网页文本格式化，如粗体、斜体、下划线 三种段落格式：段落、标题、和预先格式化的 常用的列表样式，如何为设置列表 表格可以装载数据，但是更多的是用表格做页面的布局 在标准视图下可以为网页插入普通表格 在布局视图下插入表格，分层处理布局表格的嵌套关系 HTML表格可以装载页面的各种元素，文字、图片、动画、多媒体等等,HTML基本标记和网站链接,第2章,Page 3/42,本章目标,熟悉HTML 文档的基

2、本结构 掌握运用基本标记修改网页格式及外观 掌握设置超链接的几种方法以及按照不同目的设置各个目标参数,Page 4/42,本章结构,HTML基本标记和网站链接,标题标记,HTML基础,HTML基本语法,超级链接和路径,URL概述,链接路径,链接类型及目标属性,创建链接,HTML文档结构,HTML基本标记,段落标记,文本格式标记,列表,其他常用标记,使用特殊字符,META 标记,文档结构,HTML表格标记,Page 5/42,HTML基础,进行复杂的网页设计必须学习HTML标记语言 HTML(Hypertext Marked Language) 超文本标记语言 用HTML编写的超文本文档称为HT

3、ML文档 能独立于各种操作系统平台运行 用于描述网页的格式设计和它与web上其它网页的连结信息 HTML并不是一种程序语言，它只是一种排版网页中资料显示的结构语言 需要通过web浏览器显示出效果 超文本语言，是除了文字以外它可以插入图片、声音、动画、视频等多媒体内容,Page 6/42,HTML文档结构,HTML文档结构, 一个基本的HTML页面 欢迎光临我的主页 这是我第一次做主页，无论怎样， 我都会努力做得更好！ ,开始标记,结尾标记,下面是一个基本的网页的HTML源代码,头标记,文档主体,标签标记 HTML 文档的开始和结束,这部分包括标题和其他说明信息。包括在 标签内,这部分包含文本、

4、图像和链接。它包括在 标签内,在浏览器中的输出结果,Page 7/42,HTML基本语法,HTML的标记有以下三种表示方法 文本或超文本 这是关闭型标记 文本或超文本 这是带有可选属性的标记 这是“非关闭型”标记,应用举例： 关闭型，例如：体标记 hello word! 带有可选属性，例如： 绿色的世界充满了生机和希望！ 非关闭型， 、等,Page 8/42,META标记 3-1,META 标记出现在网页的标题部分。META是HTML文档HEAD部分的一个辅助性标记 META标记共有两个属性它们分别是 http-equiv属性 name属性 name属性应用 name属性主要用于描述网页，与之

5、对应的属性值为content 标注网页的作者,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的,例如，要将 Blue Moka 指定为网页的作者，则使用以下 META 标记：,Page 9/42,META标记 3-2,设定关键字 例如，要用Keywords（关键字）来告诉搜索引擎你网页的关键字是什么 索引向导 例如，告诉搜索机器人哪些页面需要索引，哪些页面不需要索引 content的参数有all，none，index，noindex，follow，nofollow。,Page 10/42,META标记 3-3,http-equiv属性 http-equiv 属性可用来代替

6、name 属性。http-equiv 类似于HTTP的头部协议，它给浏览器回应一些有用的信息，以帮助正确地显示网页内容 Expires（期限）,可以用于设定网页的到期时间(GMT的时间格式) refresh（自动刷新）,比如间隔5秒网页自动刷新，并指向新的URL网址：,自动刷新的例子,Page 11/42,标题标记,HTML语言提供了六级标题,为最大,为最小, 标题 这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 ,Page 12/42,段落标记 3-1,段落标记 以 开始、 结束 通过段落的 align 属性 ，设置段落的对齐方式，如左对齐(left)、居

7、中(center)、右对齐(right), 对齐方式 我在中间 我在左边 我在右边 ,Page 13/42,段落标记 3-2,换行标记 标记在用户要结束一行但又不想开始一个新的段落时使用 标记强制换行 没有结束标记, br和P的对比 大家都知道：动物世界中， 蓝鲸是最大的哺乳动物。 出生时体重为 5 吨。 其他哺乳动物就大不相同了！ 你知道么？ ,段落标记和换行标记的细微区别： 就是它们之间的间隔大小不一样,Page 14/42,段落标记 3-3, 预格式化标记 标签用于显示预先已定义好格式的文本 浏览器中会遵循已在 HTML 源文档中定义的格式显示文本, 芭比BOB奇幻魔力 奇幻魔力 异次元

8、的大陆里 黑夜来袭 奇幻魔力悄然笼罩著大地 有个魔女渴望爱情的降临 想寻找一个白纸般的心灵 古堡里望星星 王子的眼睛 诉说着他一个奇怪的梦境 ,Page 15/42,文本格式标记, 标记 用于以粗体字体显示文本 标记 用于以斜体字体显示文本 标记 为在浏览器中显示的文本添加下划线 标记 使文本的高度低于周围的文本，并以更小的字体进行显示 标记 使文本的高度高于周围的文本，并以更小的字体进行显示,HTML提供多个用于格式化文本内容的标记 这些标记定义文本的显示格式。、 标记可用于格式化文本, 学习HTML格式标记 字符格式化标记 开始认识基本标记 IT技术的发展是科技进步的标志。 我热爱运动、学

9、习、工作。 水的分子式是 H 2 O。 3 2 等于 9。 ,Page 16/42,列表2-1,列表是以逻辑方式对数据进行分组列举 列表基本分为：无序列表和有序列表 无序列表（项目列表） 列表项前面带有项目符号 包含在无序列表标记 . 内 列表中每项都用列表标记 标记，其中 LI 表示列表项。结束标记 为可选项 有序列表（编号列表） 列表项以自动生成的编号顺序显示 有序列表包含在 标记内, 学习 HTML 最新网络游戏产品 星战情缘 仙侣奇缘 梦幻国度 卓越之剑 傲世Online 龙与地下城 盟军敢死队 ,示例（无序列表）：, 学习HTML 最新网络游戏产品排名 星战情缘 仙侣奇缘 梦幻国度

10、卓越之剑 傲世Online 龙与地下城 盟军敢死队 ,示例（有序列表）：,Page 17/42,列表2-2,可添加属性以定义为列表项生成的编号系统,START,Page 18/42,其它常用标记 8-1,标记 标记用于控制网页上文本的显示 此标记包含文本大小、颜色和样式等属性, font标记的用法 原创作品区 商业插画作品区 精品插画创作 插画CG涂鸦草图练习区 CG涂鸦草图练习 插画CG作品完稿区 写实风格 ,使用示例：,Page 19/42,其它常用标记 8-2,Page 20/42,其它常用标记 8-3,标记 标记用于在页面上绘制水平线 此标签只有开始标记，没有结束标记 可使用属性控制水

11、平线的显示,使用示例：, HR的用法 插画中国论坛:漫画 + 卡通 + 吉祥物 + 游戏 + 海报(原创) 发贴的同志请注意标题了: ,Page 21/42,其它常用标记 8-4,Page 22/42,其它常用标记 8-5, 标记 标记用于在 HTML 文档中插入图像 标记会显示 SRC 属性中指定的内容 标签的 ALIGN 属性可用于调整图像相对于周围文本的对齐方式 ALIGN 属性可取下面的值： TOP、BOTTOM、MIDDLE、LEFT 或 RIGHT, 网络世界 硬件/外设 外设产品 磁盘陈列 ,使用示例：,Page 23/42,其它常用标记 8-6, 标记 用此标记可以在网页中嵌入

12、音频文件，例如：,在网页上嵌入了一个符合 此音频文件的播放程序,Page 24/42,其它常用标记 8-7, 标记 用来做横向和纵向的滚动字幕 direction属性的取值决定滚动方向：down（向下）、就是up(向上)、left( 向左)、right（向右） 滚动字幕可以是多行 可以加入图像,欢迎访问我们的技术、学习、交流论坛！,例如：,Page 25/42,其它常用标记 8-8,超文本链接标记 超级链接的标记的语法是： href是hypertext reference的缩写，用于设定链接的URL地址, 超级链接 欢迎访问BENET公司网站 ,示例：,Page 26/42,特殊字符,插入“特

13、殊字符”的标记 某些字符在 HTML 中具有特殊意义，如小于号 （）、引号（“”）、版权符号（） 要在浏览器中显示这些特殊字符，就必须在 HTML 文档中使用字符实体 字符实体由3部分组成：),Page 27/42,HTML表格标记3-1,用和标记分别定义表格的开始和结束 Table标记的属性值,Page 28/42,HTML表格标记3-2,Page 29/42,HTML表格标记3-3, 书籍分类 经济学 IT 外语 博一论奕 flash脚本编程 英汉词典 微观经济学 网络技术基础 英语900句 ,示例：,Page 30/42,阶段总结,HTML基础 HTML文档结构 文档结构HTML 基本语

14、法 META标记 HTML基本标记 标题标记 段落标记 文本格式标记 列表 其他文本标记 使用特殊字符 HTML表格标记,Page 31/42,超级链接概述,超链接是从原端点到目标端点的一种跳转 超链接有两个端点：源锚 和目标锚 端点也称为锚（Anchor），也就是超文本链接中的标记，也称锚记 标记用于标识充当 HTML 文档中超级链接的文本或图像 HREF（超文本引用）参数用于指定要链接文档的地址或 URL,什么是超级链接,？,Page 32/42,URL,URL（Uniform Resoure Locator，统一资源定位器）是WWW页的地址 URL组成： Internet资源类型（sch

15、eme） 服务器地址（host） 端口（port） 路径（path）,此项可选,URL地址的组成格式排列为：scheme：/host：port/path， 例如：BENET公司的一个主页地址 /profile.htm,Page 33/42,链接路径 2-1,链接路径是以URL的方式来表示的，分为绝对路径和相对路径 绝对路径 表示法1：在链接中使用完整的URL地址 例如：HTTP:/WWW.SOHU.COM 表示法2：从根目录到文件的完整路径 例如：要指向文件 Monkey.htm，绝对路径名为 D:NatureAnimalExamplesMonkey.htm 相对路径 相对路径可以表示源锚和目

16、标锚之间的相对位置,Page 34/42,链接路径 2-2,例如: BENET站点中products.htm和news.htm在同一级目录下，从products.htm到 news.htm 的相对路径可以表示为： 链接网站跟目录外的文档，可使用绝对路径名 基于一个根目录下相关联的文档，应该使用文档的相对路径,企业新闻 ,Page 35/42,链接的类型及目标属性2-1,Page 36/42,链接的类型及目标属性2-2,链接目标 为页面上文本（图像）创建链接时，属性检查器上有目标属性 目标属性设置新的文档会在哪个窗口或框架中被打开，其选项值有以下4种： _blank ：将打开一个新窗口 _par

17、ent ：将在父窗口中打开（使用框架时） _self ：将在当前窗口中打开 _top：将在上级窗口中中打开（使用多级框架时）,Page 37/42,创建链接,外部链接 指向站点外的链接 内部链接 站点内部文档之间的互相链接，也成为相对文档连接 Email链接 单击此链接就会启动本地计算机中安装的Email客户端应用程序，就此可以开始写邮件，并进行发送等操作 局部链接 就是锚记链接，利用命名锚记，使用户“跳”到文档的不同部分,在 Dreamweaver MX 中创建以上几种链接并设置目标属性,Page 38/42,阶段总结,超级链接和路径 URL概述 链接路径 链接的类型以及目标属性 创建链接,Page 39/42,本章总结,了解HTML文档的基本结构，以及HTML文档的基本标记的基本用法 HTML 文档是包含标记的文本文件，这些标记告诉 Web 浏览器如何显示页面 HTML 标记不区分大小写 标记都具有属性。属性进一步描述网页上 HTML 元素的附加信息 META 标记放置在网页的标题处，以提供关于页面的信息。搜索引擎通常会用到这些标签 在 HTML 文档中可以插入特殊字符 介绍链接的几种类型以及应用方法，制作网站应用相对文档链接 锚记