第一章 HTML基础

1、HTMLHTML语言基础（第一部分）语言基础（第一部分） WEB基础 目标 v描述 HTML 文档的结构 v使用基本的 HTML 标签 v在 HTML 文档中插入特殊字符 v在 HTML 文档中创建超级链接 什么是HTML vHTML的概念 qHTML（HyperText Markup Language）即超 文本标识语言，是WWW的描述语言。 qHTTP-HyperText Transfer Protocol：超文本 传输协议 qFTP-File Transfer Protocol：文件传输协议 什么是HTML vHTML的结构 vHTML的结构包括头部（Head）、主体 （Body）两大部

2、分，其中头部描述浏览器 所需的信息，而主体则包含所要说明的具 体内容。 什么是HTML vHTML的结构 1: 2: 3: HTML文档范例 4: 5: 6: 7: 这是一个HTML范例 8: 9: 10: 什么是HTML vHEAD头元素主要包括该页面的一些基础描 述的语句. CSS和JavaScript一般都定义在 头部.描述信息都在中定义. v：用于设置一些头信息 v用于定义样式 v用于定义 脚本 什么是HTML vHTML的标签及属性 v标签及属性格式如下： 内容 q链接 HTML的特点 vHTML很简单，因此易于学习。 vHTML语言还需有通用性，用HTML书写的网页可 以被网上任何

3、其他人浏览到，无论浏览者使用的 是什么系统的电脑或什么版本的浏览器。 v编辑HTML页面可以用一般的文字处理器 v专业的HTML编辑工具，如Dreamweaver等。 HTML 文档示例 学习 HTML 欢迎来到 HTML 世界 HTML 代码 浏览器处理代码并进行 显示 编辑器和浏览器 学习 HTML 欢迎来到 HTML 世界 HTML 代码代码 在编辑器中编写 HTML 代码 浏览器显示 HTML 文档/页面 编辑器 1-2 需要在编辑器中键入源代码 示例：DreamWeaver Macromedia Dreamweaver 是一种 专业的 HTML 编辑器，用于设计、 编码、开发网站、网

4、页和强大的 Web 应用程序。 HTML 文档结构 学习 HTML 欢迎来到 HTML 世界 HTML 网页 头部部分 主体部分 标签标记 HTML 文档的开始和结束 这部分包括标题和其他说明信息。包括在 标签内这部分包含文本、图像和链接。它包括在 标签内 学习 HTML 欢迎来到 HTML 世界 HTML 标签 标签 标识 BODY 元素 属性属性 提供有关元素的附加信息 值 分配给属性的内容 META 标签 1-1 vMETA 标签是一个特殊的 HTML 标签，提 供有关网页的信息，如作者姓名、公司名 称和联系信息等 v许多搜索引擎都使用 META 标签信息 v例如，要将 Graham B

5、rowne 指定为作者， 则使用以下 META 标签： META 标签 1-2 vhttp-equiv 属性可用来代替 META 标签中的 name 属性 表示有效期：格林尼治标准时间 2005 年 9 月 12 日，星期一 14:25:27 属性值：具体的过期时间属性名称：网页过期 表示每隔2秒，自动刷新网页 演示：自动刷新的例子 META标签1-3 标签属性 意义 http-equiv Content-Type显示字符集的设定 Refresh 刷新 Expires 网页过期时间 nameauthor作者 description 描述 keywords关键字 META标签分两大部分 示例:

6、META标签1-4 HTML 基本元素 v标题 v段落 v换行符 v预先格式化 v字符格式化 v列表 v水平线 v字体 v图像 v特殊字符 v超级链接 标题 动物世界 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 H1 到到 H6 标签用于指定不同级别的标题标签用于指定不同级别的标题 段落标签 诗词学习 我是第一段 我是第二段 左对齐显示 居中显示 右对齐显示 标签用于标记段落标签用于标记段落 换行符 v只要在文本中放入 标签，就会强制换行 诗词学习 我是第一行我是第二行 我是第一段 我是第二段 标签 诗词学习诗词学习 静夜思静夜思

7、 床前明月光床前明月光 疑是地上霜疑是地上霜 举头望明月举头望明月 低头思故乡低头思故乡 HTML 标签用于显示具有预先定义格式的文本 （如 HTML 文档中所示） 学习 HTML 这很有趣这很有趣 足球是最令人喜爱的运动之一足球是最令人喜爱的运动之一。 信息技术是发展的关键信息技术是发展的关键。 水的分子式是水的分子式是 H 2 O。 3 2 等于等于 9。 字符格式化标签 此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等 列表简介 v列表用于按逻辑方式对数据分组 玫瑰花 向日葵 兰花 苹果 桔子 水仙 芒果 水果 苹果 芒果 桔子 花卉 水仙 兰花 向日葵 玫瑰花 列表类型

8、：无序列表 星期中的每一天 星期日 星期一 星期二 星期三 星期四 星期五 星期六 无序列表也称为“项目列表” 星期中的每一天 星期日 星期一 星期二 星期三 星期四 星期五 星期六 列表类型：有序列表 有序列表的属性 在有序列表中，列表项以自动生成的顺序显示 使用水平线 动物世界 老虎的夜间视觉 老虎的夜视能力优于人类的夜视能力五倍以 上 标签属性 align Width Size Noshade 标签用于在页面上绘制水平线 使用字体和属性 动物世界 了解有关动物的更多信息 斑马的 特性 没有任何两匹斑马的斑 纹是完全一样的，因此每匹斑马都是独一无二的 可以按名称或十六进制值指定颜色 可以为

9、字体指定的大小范围为从 1 到 7 可以指定一列字体，各字体间用逗号分隔。浏览器 以最先找到的字体显示文本 元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文本的显示 HTML对色彩的控制对色彩的控制 HTML使用16进制的RGB颜色值对颜色进行控制。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. 书写规范：#RRGGBB 预定义的色彩： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver,

10、 Yellow, Aqua HTML对色彩的控制对色彩的控制 颜色颜色名和RGB值 黑色Black=”#000000” 银色Silver=”#c0c0c0” 红色Red=”#ff0000” 蓝色Blue=”#0000ff” 白色White=”#ffffff” 黄色Yellow=”ffff00” 绿色Green=”#00ff00” 青色Aqua=”#00ffff” 标签用于在 HTML 文档中插入图像。 标签的 两个常用属性是 SRC 和 ALIGN。 SRC 属性用于指定要插入的图像位置。 ALIGN 属性用于指定图像相对于文本的对齐方式。 插入图像 1-1 插入图像 1-2 动物世界 让我们

11、看看这些可爱的动物 底部对齐 顶部对齐 居中对齐 插入特殊字符 1-1 v某些字符在 HTML 中具有特殊意义，如小于号 ( 空格 ； 插入特殊字符 1-2 特殊字符特殊字符字符实体字符实体 大于号 () 小于号 () 引号 (“) 创建超级链接 了解鸟类了解鸟类 会弹琴的狗狗会弹琴的狗狗 单击此处查看单击此处查看 创建超链接 vHTML中的超链接 v超链接名称 属性值属性值描描 述述 _parent 在上一级窗口中打开，一般使用分桢的框架页会经常 使用 _blank在新窗口打开 _self在同一个桢或窗口中打开，这项一般不用设置 _top在浏览器的整个窗口中打开，忽略任何框架 要链接到另一目

12、录 (C:example) 下的页面，可编写 或 要链接到同一目录 (C:html) 下的页面，可编写 或 C:html 目录目录 C:example目录目录 绝对和相对路径名 Doc1.htm Doc3.htm Doc2.htm Doc4.htm 绝对路径名绝对路径名 相对路径名相对路径名 链接到同一文档的某个部分1-1 v锚记标签用于使用户“跳”到文档的某个 部分 vHTML 的 NAME 属性用于创建锚标记 v为达到这种跳转效果，请在 HREF 参数中 使用该标记 主题名称 主题名称 链接到同一文档的各个部分1-2 . . . 狮子 斑马 印度豹 狮子 狮子的吼声从八公里之外就能听到！雄

13、狮（很容易从鬃毛 识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。 斑马 没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独 一无二的。斑马也称为黑白条纹相间的马. 演示:锚链接例子 链接到其他文档的特定位置 让我们深入了解一些动物 狮子 斑马 印度豹 Animals.htm 狮子 狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识 别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。 Animaldetails.htm 电子邮件链接 v用户可从网页发送电子邮件 海豚 充分交流，密切配合 据说，海豚的交流模式几乎与人类的一样复杂！ 请将您的疑问发

14、送 至 David Fernandez 编写HTML文件的注意事项 所有标记都要用尖括号（）括起来，这样，浏览器就可以知道，尖括 号内的标记是HTML命令。 对于成对出现的标记，最好同时输入起始标记或结束标记，以免忘记。 采用标记嵌套的方式可以为同一个信息应用多个标记，如下： 同一个信息同一个信息 在代码中，不区分大小写，比如，将写成或都 可以。XHTML标记要求都是小写。 任何空格或回车在代码中都无效，插入空格或回车有专用的标记，分别 是 、。因此，不同的标记间用回车键换行再编写是个不错的习 惯。 标记中不要有空格，否则浏览器可能无法识别 标记中的属性，可以用双引号(“”)或单引号()引起来，也可以不用引号。 XHTML属性要求用（“”或）引起来。 网页文件的命名网页文件的命名 文件扩展名：*.htm或*.html。 文件名：无空格、无特殊符号（例如&符号），可 以有下划线“_”或者中划线“-”，只可以为英文 或数字，不能使用中文。 推荐命名规则：有