HTML4.0基础教程.doc

HTML4 0HTML4 0 基础教程基础教程 2006 年 05 月 编号 密级 2 文档信息 系统名称初稿作者审核建立日期 HTML4 0 基础教程 2006 5 10 修订记录 编号名称 3 1 1 HTMLHTML 概述概述 5 1 1 HTML 介绍 5 1 2 HTML 结构 5 1 3 HTML 标志 6 1 4 HTML 颜色 7 1 5 HTML 字符 8 1 6 HTML 链接 9 1 1 链接路径链接路径 9 2 2 超级链接超级链接 10 3 3 链接站点链接站点 13 4 4 发发 E mailE mail 13 5 5 链接链接 FTPFTP 14 2 2 HTMLHTML 标签标签 16 2 1 基本标签 16 1 1 16 2 2 16 3 3 16 4 4 17 2 2 格式标签 18 1 1 18 2 2 19 3 3 19 4 4 20 5 5 20 6 6 21 7 7 22 8 8 23 9 9 24 2 3 文本标签 24 1 1 24 2 2 25 3 3 25 4 4 26 2 4 图像标签 28 1 1 28 2 2 28 2 5 表格标签 30 1 1 30 2 2 30 3 3 31 2 6 链接标签 32 4 1 a1 href 33 2 a2 name 33 2 7 框架标签 36 1 1 36 2 2 36 3 3 36 2 8 表单标签 38 1 1 38 2 input2 type 38 3 3 39 4 4 40 2 9 注释标签 40 3 3 HTMLHTML 速查速查 42 4 4 HTMLHTML 网址网址 46 5 1 1 HTMLHTML 概述概述 1 1 1 1 HTMLHTML 介绍介绍 HTML 的英语意思是 Hypertext Marked Language 即超文本标记语言 是一种用来制作超文本文档 的简单标记语言 超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作 HTTP 协 议的制定使浏览器在运行超文本时有了统一的规则和标准 用 HTML 编写的超文本文档称为 HTML 文档 它 能独立于各种操作系统平台 自 1990 年以来 HTML 就一直被用作 是 World Wide Web 的缩写 也 可简写 WEB 中文叫做万维网 的信息表示语言 使用 HTML 语言描述的文件 需要通过 WEB 浏览器显示 出效果 所谓超文本 是因为它可以加入图片 声音 动画 影视等内容 HTML 并不是一种程序语言 它只 是一种排版网页中资料显示的结构语言 易学易懂 非常简单 HTML 的普遍应用就是带来了超文本的技 术 通过单击鼠标从一个主题跳转到另一个主题 与世界各地主机的文件链接 直接获取相关的主题 如下所示 通过 HTML 可以表现出丰富多彩的设计风格 图片调用 文字格式 文字 通过 HTML 可以实现页面之间的跳转 页面跳转 通过 HTML 可以展现多媒体的效果 声频 视频 从上面我们可以看到 HTML 超文本文件时需要用到的一些标签 这些标签均由 符号以及一个 字符串组成 而浏览器的功能是对这些标记进行解释 显示出文字 图像 动画 播放声音 这些标签符 号用 来表示 HTML 只是一个纯文本文件 创建一个 HTML 文档 只需要两个工具 一个是 HTML 编辑器 一个 WEB 浏览器 HTML 编辑器是用于生成和保存 THML 文档的应用程序 WEB 浏览器是用来打开 WEB 网页文件 提 供给我们查看 WEB 资源的客户端程序 1 2 1 2 HTMLHTML 结构结构 一个 HTML 文档是由一系列的元素和标签组成 元素名不区分大小写 HTML 用标签来规定元素的属性 和它在文件中的位置 HTML 超文本文档分文档头和文档体两部分 在文档头里 对这个文档进行了一些 必要的定义 文档体中才是要显示的各种文档信息 下面是一个最基本的 html 文档的代码 1 1 html 开始标签 一个简单的 HTML 示例 头部标签 6 欢迎光临我的主页 文件主体 这是我第一次做主页 结尾标签 在文档的最外层 文档中的所有文本和 html 标签都包含在其中 它表示该文档是以超 文本标识语言 HTML 编写的 事实上 现在常用的 Web 浏览器都可以自动识别 HTML 文档 并不要求有 标签 也不对该标签进行任何操作 但是为了使 HTML 文档能够适应不断变化的 Web 浏览器 还是 应该养成不省略这对标签的良好习惯 是 HTML 文档的头部标签 在浏览器窗口中 头部信息是不被显示的 在此标签中可以 插入其它标记 用以说明文件的标题和整个文件的一些公公属性 若不需头部信息则可省略此标记 良好 的习惯是不省略 和是嵌套在头部标签中的 标签之间的文本是文档标题 它被显示在浏览器 窗口的标题栏 标记一般不省略 标签之间的文本是正文 是在浏览器要显示的页面内容 上面的这几对标签在文档中都是唯一的 HEAD 标签和 BODY 标签是嵌套在 HTML 标签中的 1 3 1 3 HTMLHTML 标标记记 对于刚刚接触超文本的朋友 遇到的最大的障碍就是一些用 括起来的句子 我们称它为 标签 是用来分割和标签文本的元素 以形成文本的布局 文字的格式及五彩缤纷的画面 标签通过指定 某块信息为段落或标题等来标识文档某个部件 属性是标志里的参数的选项 HTML 的标签分单标签和成对标签两种 成对标签是由首标签 和尾标签组成的 成对标签的作用域只作用于这对标签中的文档 单独标签的格式 单独标签在相应的位置插入元 素就可以了 大多数标签都有自己的一些属性 属性要写在始标签内 属性用于进一步改变显示的效果 各属性之间无先后次序 属性是可选的 属性也可以省略而采用默认值 其格式如下 内容 作为一般的原则 大多数属性值不用加双引号 但是包括空格 号 号等特殊字符的属性值必须 加入双引号 为了好的习惯 提倡全部对属性值加双引号 如 字体设置 注意事项 输入始标签时 一定不要在 与标签名之间输入多余的空格 否则浏览器将不能正确 的识别括号中的标志命令 从而无法正确的显示你的信息 7 1 4 1 4 HTMLHTML 颜色颜色 颜色值是一个关键字或一个 RGB 格式的数字 在网页中用得很多 在此就先介绍一下 颜色是由 red green blue 三原色组合而成的 在 HTML 中对颜色的定义是用十六进位的 对於三原色 HTML 分别给予两个十六进位去定义 也就是每个原色可有 256 种彩度 故此三原色可混合成 16777216 种 颜色 例如 白色的组成是 red ff green ff blue ff RGB 值即为 ffffff 红色的组成是 red ff green 00 blue 00 RGB 值即为 ff0000 绿色的组成是 red 00 green ff blue 00 RGB 值即为 00ff00 蓝色的组成是 red 00 green 00 blue ff RGB 值即为 0000ff 黑色的组成是 red 00 green 00 blue 00 RGB 值即为 000000 应用时常在每个 RGB 值之前加上 符号 如 bgcolor 336699 用英文名字表示颜色时直接写 名字 如 bgcolor green RGB 颜色可以有四种表达形式 rrggbb 如 00cc00 rgb 如 0c0 rgb x x x x 是一个介乎 0 到 255 之间的整数 如 rgb 0 204 0 rgb y y y y 是一个介乎 0 0 到 100 0 之间的整数 如 rgb 0 80 0 Windows VGA 视频图像阵列 形成了 16 各关键字 aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white and yellow 下面是部分颜色的 RGB 代码图表 8 1 5 1 5 HTMLHTML 字符字符 在 HTML 文档中 有些特殊字符没办法直接显示出来 例如 使用特殊字符可以将键盘上没有的字符 表达出来 而有些 HTML 文档的特殊字符在键盘上虽然可以得到 但浏览器在解析 HTML 文当时会报错 例 如 等 为防止代码混淆 必须用一些代码来表示它们 HTML 几种常见特殊字符及其代码表如下 特殊或专用字符特殊或专用字符字符代码字符代码特殊或专用字符特殊或专用字符字符代码字符代码 空格 赋得古原草送别 离离原上草 一岁一枯荣 野火烧不尽 春风吹又生 白居易 1 6 1 6 HTMLHTML 链接链接 1 1 链接路径链接路径 每一个文件都有自己的存放位置和路径 理解一个文件到要链接的那个文件之间的路径关系是创建链 接的根本 URL Uniform Resourc Locator 中文名字为 统一资源定位器 指的就是每一个网站都具有的 地址 同一个网站下的每一个网页都属于同一个地址之下 在创建一个网站的网页时 不需要为每一个连 接都输入完全的地址 我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了 因此 链接 可以分以下三种 绝对路径 如 相对路径 如 news index html 根路径 如 d web news index html 1 1 绝对路径绝对路径 绝对路径 包含了标识 INTERNET 上的文件所需要的所有信息 文件的链接是相对原文档而定的 包 括完整的协议名称 主机名称 文件夹名称和文件名称 其格式为 通讯协议 服务器地址 通讯端口 文件位置 文件名 10 其中网络协议是 HTTP Hypertext Transfer Protocol 超文本传输协议 资源所在的主机名为 通常情况下使用默认的端口号 资源在 WWW 服务器主机 web 文件夹下 资源的名称 为 index html 例 表明采用 http 从名为 的服务器上的目录 myweb 中获得文件 book htm 2 2 相对路径相对路径 相对路经是以当前文件所在路径为起点 进行相对文件的查找 一个相对的 URL 不包括协议和主机地 址信息 表示它的路径与当前文档的访问协议和主机名相同 甚至有相同的目录路径 通常只包含文件夹 名和文件名 甚至只有文件名 可以用相对 URL 指向与源文档位于同一服务器或同文件夹中的文件 此时 浏览器链接的目标文档处在同一服务器或同一文件夹下 如果链接到同一目录下 则只需输入要链接文件的名称 要链接到下级目录中的文件 只需先输入目录名 然后加 再输入文件名 要链接到上一级目录中文件 则先输入 再输入文件名 相对路径的用法 相对路径名相对路径名含含 义义 herf shouey html shouey html 是本地当前路径下的文件 herf web shouey html shouey html 是本地当前路径下称做 web 子目录下的文件 herf shouey html shouey html 是本地当前目录的上一级子目录下的文件 herf shouey html shouey html 是本地当前目录的上两级子目录下的文件 3 3 根路径根路径 根路径目录地址同样可用于创建内部链接 但大多数情况下 不建议使用此种链接形式 根路径目录 地址的书写也很简单 首先以一个斜杠开头 代表根目录 然后书写文件夹名 最后书写文件名 如果根 目录要写盘符 就在盘符后使用 而不用 这点与 DOS 的写法不同 如 web highight shouey html d web highight shouey html 也许读者会问 链接本地机器上的文件时 应该使用相对路径还是绝对路径 在绝大多数情况下使用 相对路径比较好 例如 用绝对路径定义了链接 当把文件夹改名或者移动之后 那么所有的链接都要失 败 这样就必须对你的所有 html 文件的链接进行重新编排 而一旦将此文夹件移到网络服务器上时 需 要重新改动的地方就更多了 那是一件很麻烦的事情 而使用相对路径 不仅在本地机器环境下适合 就 是上传到网络或其他系统下也不需要进行多少更改就能准确链接 11 2 2 超级链接超级链接 1 1 书签链接书签链接 链接文档中的特定位置也叫书签链接 在浏览页面时如果页面很长 要不断的拖动滚动条给浏览带来 不便 要是浏览者可以从上头阅读到尾 又可以选择自己感兴趣的部分阅读 这种效果就可以通过书签链 接来实现 方法是选者一个目标定位点 用来创建一个定位标记 用属性 name 的值来确定定位标记名 然后在网页的任何地方建立对这个目标标记的链接 标题 在标题上建立的链接 地址的名字要和定位标记名相同 前面还要加上 号 单击标题就跳到要访 问的内容 书签链接可以在同一页面中链接 也可以在不同页面中链接 在不同页面中链接的前提是需要指定好 链接的页面地址和链接的书签位置 格式 在同一页面要使用链接的地址 超连链标题名称 在不同页面要使用链接的地址 名称 链接到的目的地址 目标超链接名称 name 的属性值为该目标定位点的定位标记点名称 是给特定位置点 这个位置点也叫锚点 起个名 称 实例 4 2 11 html 唐诗欣赏 唐诗欣赏 李白 清平調三首 長干行 月下獨酌 清平調三首 雲想衣裳花想容 春風拂檻露華濃 若非群玉山頭見 會向瑤台月下逢 一枝紅艷 露凝香 雲雨巫山枉斷腸 借問漢宮誰得似 可憐飛燕倚新妝 名花傾國兩相歡 常得君王帶笑看 解釋春風無限恨 沈香亭北倚闌干 長干行 妾髮初覆額 折花門前劇 郎騎竹馬來 遶床弄青梅 同居長干里 兩小無嫌猜 十四為君婦 羞顏未嘗開 低頭向暗壁 千喚不一回 十五始展眉 願同塵與 灰 常存抱柱信 豈上望夫臺 十六君遠行 瞿塘灩澦堆 五月不可觸 猿鳴 天上哀 門前遲行跡 一一生綠苔 苔深不能掃 落葉秋風早 八月蝴蝶來 雙飛西園草 感此傷妾心 坐愁紅顏老 早晚下三巴 預將書報家 相迎不道遠 直至長風沙 12 唐诗欣赏 月下獨酌 花間一壺酒 獨酌無相親 舉杯邀明月 對影成三人 月既不解飲 影徒隨我身 暫伴月將影 行樂須及春 我歌月裴回 我舞影零亂 醒時同交歡 醉後各分 散 永結無情遊 相期邈雲漢 李白蔑视权贵 实例 4 2 12 html 李白 李白 李白 701 762 字太白 号青莲居士 祖籍陇西成纪 今甘肃省天水市附近的秦安县 隋朝末年其先租因罪住在中亚细亚 李白的家世和出生地至 今还是个谜 学术界说法不一 一说李白就诞生在安西都护府所辖的碎叶城 五岁时随父迁 到绵州昌隆县青莲乡 李白性情豪放 喜爱纵横家的作风 爱好任侠之事 轻视财货 早年在蜀中度过 他的 父亲是个富商 李白二十五岁开始漫游全国 走过湖北 江西 河南 山东等地 李白蔑视权贵 传说他喝醉酒 曾在玄宗面前使高力士给他脱靴 高力士认为这是很大的耻辱 就摘取李白诗句激怒杨贵妃 玄宗每次让李白做官 杨贵妃就 加以阻止 李白知道玄宗的亲信对他有意见 于是恳求还家 玄宗赐给他财物 放他开 李白是我国唐代伟大的浪漫主义诗人 被誉为 诗仙 他的诗豪迈瑰丽 诗里有突破现实 的幻想 也有对当时民生疾苦的反映和对政治黑暗的抨击 他的散文具有清新明朗 奔放流 畅的特点 2 2 内部链接内部链接 所谓内部链接 指的是在同一个网站内部 不同的 html 页面之间的链接关系 在建立网站内部链接 的时候 要明确哪个是主链接文件 即当前页 哪个是被链接文件 在前面介绍链接路径时 已经给大 家介绍了内部链接概念 内部链接一般采用相对路径链接比较好 下面我们根据如图示 来看看相对路径 的具体的链接方法 13 在站点内部建立链接 当前页面当前页面被链接页面被链接页面超链接代码超链接代码 2 1 html3 1 html 超链接元素 3 1 html1 1 html 超链接元素 sy html1 1 html 超链接元素 2 1 htmlsy html 超链接元素 1 1 htmlsy html 超链接元素 sy html2 1 html 超链接元素 3 3 外部链接外部链接 所谓外部链接 指的是跳转到当前网站外部 与其它网站中页面或其它元素之间的链接关系 这种链 接的 URL 地址一般要用绝对路径 要有完整的 URL 地址 包括协议名 主机名 文件所在主机上的的位置 的路径以及文件名 最常用的外部链接格式是 还有其他的格式如下表所示 URL 外链部接格式 服务服务URLURL 格式格式描述描述 WWW http 地址 进入万维网站点 Ftpftp 进入文件传输协议 Telnettelnet 启动 Telnet 方式 Gophergopher 访问一个 gopher 服务器 Newsnews 启动新闻讨论组 Emailemail 启动邮件 14 3 3 链接站点链接站点 站点间的页面和元素的链接是万维网交流信息的关键 这种链接用 HTTP 协议来建立网站之间超链接 格式 实例 4 2 31 html 链接到 http 绝对路径链接 清华大学 北京大学 上海外国语学院 4 4 发发 E mailE mail 在 HTML 页面中 可以建立 E mail 链接 当浏览者单击链接后 系统会启动默认的邮件服务系统发送 邮件 基本与法 描述文字 在实际应用中 用户还可以加入另外的两个参数 cc WWW WWW 又叫万维网 WWW internet 提供的最常用的服务是 WWW 5 5 目录列表目录列表 为目录列表标签 它的格式和无序列表一样 格式 1 第一项 第二项 第三项 6 6 菜单列表菜单列表 为菜单列表标签 它的格式和无序列表一样 格式 2 第一项 20 第二项 第三项 实例 5 5 HTML 无序列表 默认的无序列表加 实心园 默认的无序列表 实心园 默认的无序列表 实心园 默认的目录列表加 实心园 默认的目录列表 实心园 默认的目录列表 实心园 默认的菜单列表加 实心园 默认的菜单列表 实心园 默认的菜单列表 实心园 目录列表 square 加方块 目录列表 square 加方块 目录列表 square 加方块 菜单列表 circle 加空心园 菜单列表 circle 加空心园 菜单列表 circle 加空心园 1 8 1 8 HTMLHTML 样式样式 有很多方法将样式表加入到 HTML 中 每个都带有自己的优点和缺点 新的 HTML 元素和属性已被加入 以允许样式表与 HTML 文档更简易地组合起来 21 1 1 连接外部样式表连接外部样式表 一个外部的样式表可以通过 HTML 的 LINK 元素连接到 HTML 文档中 标记是放置在文档的 HEAD 部分 可选的 TYPE 属性用于指定媒体类型 text css 是一个层叠 样式表 允许浏览器忽略它们不支持的样式表类型 为 CSS 文件配置服务器而将 text css 当作 Content type 内容发送出去也是一个好主意 外部样式表不能含有任何像或这样的 HTML 的标记 样式表仅仅由样式规则或声明组成 一个单独由 P margin 2em 组成的文件就可以用作外部样式表了 标记也有一个可选的 MEDIA 属性 用于指定样式表被接受的介质或媒体 允许的值有 screen 缺省值 提交到计算机屏幕 print 输出到打印机 projection 提交到投影机 aural 扬声器 braille 提交到凸字触觉感知设备 tty 电传打字机 使用固定的字体 tv 电视机 all 所有输出设备 多样的媒体通过用逗号隔开的列表或值 all 指定 Netscape Navigator 4 x 错误地忽略除了 screen 值外的任何使用 MEDIA 值声明的连接或嵌入样式表 例如 MEDIA screen projection 会令到样式表被 Navigator 4 x 忽略 尽管展示的设备是计算机的屏 幕 Navigator 4 x 也忽略使用 MEDIA all 声明的样式表 REL 属性用于定义连接的文件和 HTML 文档之间的关系 REL StyleSheet 指定一个固定或首选的样式 而 REL Alternate StyleSheet 定义一个交互样式 固定样式在样式表激活时总被应用 缺少的 TITLE 属性 就像例子中的第一个标记 定义一个固定样式 一个首选样式会自动被应用 就像例子中的第二个标记 REL StyleSheet 和一个 TITLE 属性 的组合指定一个首选的样式 网页制作者不能指定多于一个的首选样式 交互样式通过 REL Alternate StyleSheet 指出 例子中的第三个标记定义一个交互样式 用户可以选择用来代替首选样式表 注意现在的浏览器一般都缺乏选择交互样式的能力 单一的样式也可以通过多个样式表给出 在这个例子中 三个样式表组合成一个 Contemporary 样式 作为一个首选样式表被应用 要组合多 个样式表成一个单一样式 必须在每个样式表中使用相同 TITLE 22 当样式被应用到很多的网页时 一个外部样式表是理想的 网页制作者使用外部样式表可以改变整个 网站的外观而仅仅通过改变一个文件 同样的 大多数浏览器会保存外部样式表在缓冲区 从而如果样式 表在缓冲区就避免了在展示网页时的延迟 Microsoft Internet Explorer 3 for Windows 95 NT4 并不支持来自连接的样式表中的 BODY 背景图 象或颜色 如果考虑到这个错误 网页制作者不妨提供另外的包括一个背景图象或颜色的结构 例如嵌入 或内联样式 或使用 BODY 元素的 BACKGROUND 属性 2 2 嵌入一个样式表嵌入一个样式表 一个样式表可以使用 STYLE 元素在文档中嵌入 STYLE 元素放在文档的 HEAD 部分 必须的 TYPE 属性用于指定媒体类型 LINK 元素也一样 同样地 TITLE 和 MEDIA 属性也可以用 STYLE 指定 旧版本的浏览器 并不能识别 STYLE 元素 会将其当作 BODY 的一部分照常展示其内容 从而使这些 样式表对用户是可见的 要防止这样做 STYLE 元素的内容要包含一个 SGML 注解 在 里面 像上述例子那样 嵌入的样式表可用于当一个文档具有独一无二的样式的时候 如果多个文档都使用同一样式表 那么 外部样式表会更适用 3 3 输入一个样式表输入一个样式表 一个样式表可以使用 CSS 的 import 声明被输入 这个声明用于一个 CSS 文件或内部的 STYLE 元素 注意其它的 CSS 规则应该仍然包括在 STYLE 元素中 但所有的 import 声明必须放在样式表的开始部 分 任意在样式表中指定了的规则 其自身超越在输入样式表中对立的规则 例如上例 即使一个输入的 样式表包含 DT background aqua 定义项 definition terms 依然会是黄色的背景 被输入的样式表的顺序对于它们怎样层叠是很重要的 在上述的例子中 如果 style css 输入的样式 表指定了 STRONG 元素会显示为红色而 punk css 样式表指定了 STRONG 元素显示为黄色的话 那么后面的 规则会获胜 而 STRONG 元素会显示为黄色 输入的样式表对于模块性效果很有用处 例如 一个网站可以通过使用了的选择符分类样式表 一个 simple css 样式表给出公共的元素像 BODY P H1 和 H2 此外 一个 extra css 样式表给出较少共通的 23 元素像 CODE BLOCKQUOTE 和 DFN 一个 tables css 样式表可以用于定义变革元素的规则 这三个样式表 在需要的时候可以使用 import 声明包括在 HTML 中 三个样式表也可以通过 LINK 元素组合 4 4 内联样式内联样式 样式可以使用 STYLE 属性内联 STYLE 属性可以应用于任意 BODY 元素 包括 BODY 本身 除了 BASEFONT PARAM 和 SCRIPT 这个属性将任何数量的 CSS 声明当作自己的值 而每个声明用分号隔开 以 下是一个例子 这段的样式是红色的 New Century Schoolbook 字 如果字体可用的话 注意在 STYLE 中 New Century Schoolbook 包含在单引号中 因为双引号被用作包含样式声明 内联的样式比其他方法更加灵活 要使用内联样式 必须使用 Content Style Type HTTP 页眉扩展对 整个文档进行单独的样式表语言声明 使用内联 CSS 的网页制作者必须将 text css 作为 Content Style Type HTTP 页眉 或在 HEAD 部分包括以下标记 因为和需要展示的内容混合在一起 内联样式会失去一些样式表的优点 同样地 内联样式默认地接 受所有媒体 因为没有任何的为内联样式指定明确的媒体的语句 这种方法应该尽量少用 如当一个样式 会应用在所有媒体到一个元素的个别情况 如果样式会被应用到单一元素的场合 但只能使用确认的媒体 的话 使用 ID 属性代替 STYLE 属性 5 CLASS5 CLASS 属性属性 CLASS 属性用于指定元素属于何种样式的类 例如 样式表可以加入 punk 和 warning 类 punk color lime background ff80c0 P warning font weight bolder color red background white 这些类可以使用 CLASS 属性在 HTML 中引用 属性扩展 一些属性扩展会有负值的边效果 产生于支持和不支持的浏览器上 在这个例子中 punk 类可以用于任何 BODY 元素因为它在样式表中没有 HTML 元素关联 而在这个例 子的样式表 warning 类只能用于 P 元素 一个良好的习惯是在命名类的时候 根据它们的功能而不是根据它们的外观 上述例子中的 warning 类也可以命名为 red 但如果网页制作者决定改变这个类的样式为别的颜色 或希望为那些使用 PC 喇叭 的人定义为 aural 听觉 样式的话 那么这个名字就变得毫无意义了 类会是应用样式到 HTML 文档中在结构上一样的部分的有效的办法 例如 本页使用类给 CSS 源代码 和 HTML 源代码使用不同的样式 6 ID6 ID 属性属性 ID 属性用于定义一个元素的独特的样式 一个 CSS 规则如 wdg97 font size larger 可以通过 ID 属性应用到 HTML 中 欢迎访问 Web Design Group 及 TV water 168 24 整个文档当中的每个 ID 属性的值都必须是唯一的 其值必须是一个以字母开头紧接字母 识字或连 字符 字母限于 A Z 和 a z 注意 HTML 4 0 允许在 ID 属性中有句号 但 CSS1 不允许在 ID 选择符中有句号 也要注意 CSS1 允许 Unicode 字符 161 255 而且忽略 Unicode 字符为一个数字代码 但 HTML 4 0 不允许这些字符在一个 ID 属 性值当中 当一个样式只需要在任何文档中应用一次时 使用 ID 是很适合的 ID 与 STYLE 属性相比 在于 ID 允许指定媒体的样式 而且也可以被应用于多个文档 虽然每个文档只用一次 7 SPAN7 SPAN 元素元素 SPAN 元素被加入到 HTML 中以允许网页制作者给出样式但无须附加在一个 HTML 的结构元素上 SPAN 在样式表中作为一个选择符使用 而且它也能接受 STYLE CLASS 和 ID 属性 SPAN 是一个内联元素 所以它可以作为 HTML 中的元素如 EM 和 STRONG 使用 最重要的差别在于虽然 EM 和 STRONG 带有结构的意义 但 SPAN 就没有这样的意义 它的存在纯粹是应用样式 所以当样式表失 效时它就没有任何的作用 一些 SPAN 例子如下 SPAN 的例子 The first few words 前面是段落中少数的文字 会是小型大写字母 样式也可以内联 如改变文字的样式为 Arial 8 DIV8 DIV 元素元素 DIV 元素在功能上与 SPAN 元素相似 最主要的差别在于 DIV division 部分 的简称 是一个块 级元素 DIV 可以包含段落 标题 表格甚至其它部分 这使 DIV 便于建立不同集成的类 如章节 摘要 或备注 例如 Divisions 部分 DIV 元素在 HTML 3 2 中有定义 但 HTML 3 2 中只有 ALIGN 属性能兼容 HTML 4 0 在属性中加入 CLASS STYLE 和 ID 属性 因为 DIV 可以包含其他块级集成 在用于建立文档的大型章节例如本备注是很有用的 要求关闭标记 25 HTML 只是赋予内容内容的手段 大部分 HTML 标签都有其意义 标签 p 创建段落 h1 标签创建标题等等 的 然而 span 和 div 标签似乎没有任何内容上的意义 听起来就像一个泡沫做成的锤子一样无用 但实际 上 与 CSS 结合起来后 它们被用得十分广泛 它们被用来组合一大块的 HTML 代码并赋予一定的信息 大部分用类属性 class 和标识属性 id 与元素联系起来 见 CSS 中级指南的类和 id 选择符 span 和 div 的不 同之处在于 span 是内联内联的 用在一小块的内联 HTML 中 而 div 想想 division 是什么意思 元素是块级 的 简单地说 它等同于其前后有断行 用于组合一大块的代码 This is crazy 在实践中 div 特别是 span 不应该滥用 尽管有其他相左的意见 比如 你要强调单词 crazy 和 加粗类 paper 可能会用这样的代码 This is crazy 这是做法比再加一个 span 比较好 对于类 class 和标识 id 没有线索 别担心 在 CSS 中级指南中会接触到它们 你所需要记住的是 span 和 div 是 无意义 的标签 少数使用了 CSS 样式的文档能在 HTML3 2 Wilbur 层 在 WDG 网站 译者注 得到认证 HTML3 2 不会 解释 SPAN 元素 也不解释 CLASS STYLE 或 ID 属性 而且在 LINK 和 STYLE 元素中也很少支持 TYPE 和 MEDIA 属性 这些有关的样式元素和属性对不支持的浏览器不会有害 因为它们能安全地忽略 文档使用 这些元素和属性可以被认证防御于 HTML4 0 26 2 2 HTMLHTML 标签标签 2 1 2 1 基本标基本标签签 1 2 3 4 5 Html 是英文 HyperText Markup Language 的缩写 中文意思是 超文本标签语言 用它编写的文 件 文档 的扩展名是 html 或 htm 它们是可供浏览器解释浏览的文件格式 您可以使用记事本 写字板 或 FrontPage Editor 等编辑工具来编写 Html 文件 Html 语言使用标签对的方法编写文件 既简单又方 便 它通常使用来表示标签的开始和结束 例如标签对 因此在 Html 文档中这样的标签对都必须是成对使用的 在此教程中 我先讲一下 Html 的基本标签 1 1 标签用于 Html 文档的最前边 用来标识 Html 文档的开始 而标签恰恰相反 它放在 Html 文档的最后边 用来标识 Html 文档的结束 两个标签必须一块使用 2 2 和构成 Html 文档开头部分 此标签对间之可使用 等等标签对 这些标签对都是描述 Html 文档相关信息的标签对 标签对之间的内容是不会在浏览器的框内显示出来的 两个标签必须一块使用 3 3 是 Html 文档的主体部分 在此标签对之间可包含 等等众多的标签 它们所定义的文本 图像等将会在浏览器的框内 显示出来 两个标签必须一块使用 标签中还可以有以下属性 属性属性用途用途示例示例 设置页面背景颜色 红色背景 设定页面背景图像 设置文本颜色 蓝色文本 设置链接颜色 链接为蓝色 设置已使用的链接的颜色 设置正在被击中的链接的颜色 设置页面的左边距 27 设置页面的上边距 设置页面背景图像为固定 不随页 面的滚动而滚动 说明 以上各个属性可以结合使用 如 引号内的 rrggbb 是 用六个十六进制数表示的 RGB 即红 绿 蓝三色的组合 颜色 如 ff0000 对应的是红色 此外 还可以 使用 Html 语言所给定的常量名来表示颜色 Black White Green Maroon Olive Navy Purple Gray Yellow Lime Agua Fuchsia Silver Red Blue 和 Teal 如表示标签对中的文本使用蓝色显示在浏览器 的框内 格式 例 2 1 html bady 的属性实例 设定不同的连接颜色 测试 body 标签 默认的连接颜色 正在按下的连接颜色 访问过后的连接颜色 返回 说明 的属性设定了页面的背景颜色 文字的颜色 链接的颜色为 3300ff 单击的连接颜色为 ff00ff 单击过后的颜色为 9900ff Body 里面的是页面中的链接标签 对于属性可根据页面的效果来 定 用那个属性就设定那个属性 对于上面的属性在后面的章节中还会介绍 在这里就不逐一引用了 我 们的学习目的主要是掌握标签及属性的使用方法 4 4 使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息 那些信息一般是网页 的 主题 要将您的网页的主题显示到浏览器的顶部其实很简单 只要在标签对之间 加入您要显示的文本即可 注意 标签对只能放在标签对之间 28 下面是一个综合的例子 仔细阅读 您便可以了解以上各个标签对在一个 Html 文档中的布局或所使 用的位置 例 1 Html 文档中基本标签的使用 显示在浏览器最上边蓝色条中的文本 红色背景 蓝色文本 2 2 2 2 格式标签格式标签 1 2 3 4 5 6 7 8 9 10 11 12 13 14 上一个教程中我们讲了 Html 文档的基本标签 但我们还不知道怎样在浏览器中显示文本之类的东西 这正是我们在教程二中将要谈到的 在学习之前 必须强调一下 我们这个教程中所讲的格式标签统统都 是用于标签对之间的 1 1 html 的浏览器是基于窗口的 用户可以随时改变显示区的大小 所以 html 将多个空格以及回车等效 为一个空格 这是和绝大多数字处理器不同的 html 的分段完全依赖于分段元素 标签对是 用来创建一个段落 在此标签对之间加入的文本将按照段落的格式显示在浏览器上 另外 标签还可 以使用 align 属性 它用来说明对齐方式 语法是 align 可以是 Left 左对齐 Center 居中 和 Right 右对齐 三个值中的任何一个 如表示标签对中的文本使 用居中的对齐方式 由标签所标识的文字 代表同一个段落的文字 不同段落间的间距等于连续加了 29 两个换行符 也就是要隔一行空白行 用以区别文字的不同段落 它可以单独使用 也可以成对使用 单 独使用时 下一个的开始就意味着上一个的结束 良好的习惯是成对使用 另外 例This is a centered paragraph 当 html 文件中有图形 图形可能占 据了窗口的一端 图形的周围可能还有较大的空白区 这时 不带 clear 属性的可能会使文章的内容 显示在该空白区内 为确保下一段内容显示在图形的下方 可使用 clear 属性 clear 属性的含义为 clear left 下一段显示在左边界处空白的区域 clear right 下一段显示在右边界处空白的区域 clear all 下一段的左右两边都不许有别的内容 clear 可以是 left right all 之一 格式 其中 ALIGN 是标签的属性 属性有三个参数 left center right 这三个参数设置段落文字的左 中 右 位置的对齐方式 例子 3 2html 测试分段控制标签 花儿什么也没有 它们只有凋谢在风中的轻微 凄楚而又无奈的吟怨 就像那受到了致命伤害的秋雁 悲哀无助地发出一声声垂死的鸣叫 或许 这便是花儿那短暂一生最凄凉 最伤感的归宿 而美丽苦短的花期 却是那最后悲伤的秋风挽歌中的瞬间插曲 2 2 标签对用来对文本进行预处理操作 要保留原始文字排版的格式 就可以通过标签 来实现 方法是把制作好的文字排版内容前后分别加上始标签和尾标签 实例 3 3html 原样显示文字标签 30 白日依山尽 黄河入海流 欲穷千里目 更上一层楼 3 3 文本在页面中使用标签进行居中显示 是成对标签 在需要居中的内容部分开头处加 结尾处加 例子 3 4html 居中对齐标签 送孟浩然之廣陵 故人西辭黃鶴樓 煙花三月下揚州 孤帆遠影碧山盡 惟見長江天際流 4 4 是一个很简单的标签 它没有结束标签 因为它用来创建一个回车换行 这么一说我想您该会使 用了吧 在的使用上还有一定的技巧 如果您把加在标签对的外边 将创建一个大的回 车换行 即前边和后边的文本的行与行之间的距离比较大 若放在的里边则前边和后边 的文本的行与行之间的距离将比较小 您不妨试试看 例子 3 1html 无换行示例 无换行标记 登鹳雀楼 白日依山尽 黄河入海流 欲穷千里目 更上一层楼 31 有换行标记 登鹳雀楼白日依山尽 黄河入海流 欲穷千里目 更上一层楼 5 5 通知浏览器其中的内容在一行内显示 若一行内显示不了 则超出部分被裁剪掉 6 6 标签是单独使用的标签 是水平线标签 用于段落与段落之间的分隔 使文档结构清晰明了 使 文字的编排更整齐 通过设置标签的属性值 可以控制水平分隔线的样式 标签在 Html 文档中 加入一条水平线 它可以直接使用 具有 size color width 和 noshade 属性 size 是设置水平线的厚 度 而 width 是设定水平线的宽度 默认单位是像素 想必大家对 color 属性已经很熟悉了 在此就不再 用多讲 noshade 属性不用赋值 而是直接加入标签即可使用 它是用来加入一条没有阴影的水平线 不 加入此属性水平线将有阴影 标签的属性如下 属性属性参数参数功能功能单位单位默认值默认值 size 设置水平分隔线的粗细pixel 像素 2 width 设置水平分隔线的宽度pixel 像素 100 alignleft enter right 设置水平分隔线的对齐方式 center color 设置水平分隔线的颜色 black noshade 取消水平分隔线的 3d 阴影 例子 3 6html 测试水平分隔线标签 春晓 春眠不觉晓 处处闻啼鸟 夜来风雨声 花落知多少 32 7 7 在标签对之间加入的文本将会在浏览器中按两边缩进的方式显示出来 标签可以用来建立一个引文 他特别适合较长文本的引用 引文显示时将会自动右移 左边 空出几个格 加以区别 实例 3 5html 引文标签 春 盼望着 盼望着 东风来了 春天脚步近了 一切都像刚睡醒的样子 欣欣然张开了眼 山朗润起来了 水涨起来了 太阳的脸红起来了 小草偷偷地从土里钻出来 嫩嫩的 绿绿的 园子里 田野里 瞧去一大片一大片满是的 坐着 躺着 打两个滚 踢几脚球 赛几趟跑 捉几 回迷藏 风轻悄悄的 草软绵绵的 桃树 杏树 梨树 你不让我 我不让你 都开满了花赶趟儿 红的像火 粉的像霞 白的像雪 花里带 着甜味儿 闭了眼 村上仿佛已 经满是桃儿 杏儿 梨儿 花下成千成百的蜜蜂嗡嗡地闹着 大小的蝴蝶飞来飞去 野花遍地是 杂样儿 有名字的 没名字的 散在草 丛里像眼睛 像星星 还眨呀眨的 吹面不寒杨柳风 不错的 像母亲的手抚摸着你 风里带来些新翻的泥土的气息 混着青草味儿 还 有各种花的香 都在微微润湿的 空气里酝酿 鸟儿将巢安在繁花嫩叶当中 高兴起来了 呼朋引伴地卖弄清脆的喉咙 唱出宛转的曲子 跟轻风流水应和着 牛背上牧童 的短笛 这时候也成天嘹亮地响着 雨是最寻常的 一下就是三两天 可别恼 看 像牛毛 像花针 像细丝 密密地斜织着 人家屋顶上全 笼着一层薄烟 树叶儿却绿得发 亮 小草儿也青得逼你的眼 傍晚时候 上灯了 一点点黄晕的光 烘托出一片安静而和平的夜 在乡下 小路上 石桥边 有撑着伞慢 慢走着的人 地里还有工作的农民 披着蓑戴着笠 他们的房屋 稀稀疏疏的 在雨里静默着 天上风筝渐渐多了 地上孩子也多了 城里乡下 家家户户 老老小小 也都赶趟儿似的 一个个都出来 了 舒活舒活筋骨 抖擞 33 抖擞精神 各做各的一份事儿去 一年之计在于春 刚起头儿 有的是工夫 有的是希望 春天像刚落地的娃娃 从头到脚都是新的 它生长着 春天像小姑娘 花枝招展的 笑着 走着 春天像健壮的青年 有铁一般的胳膊和腰脚 他领着我们上前去 8 8 署名标签一般用于说明这个网页是由谁或是由哪个公司编写的 以及其它相关信息 在 标签之间的文字显示效果是斜体字 实例 3 7html 署名标签 乐 游 原 向晚意不适 驱车登古原 夕阳无限好 只是近黄昏 唐 李商隐 9 9 用来创建一个普通的列表 用来创建列表中的上层项目 用来创建列 表中最下层项目 和都必须放在标签对之间 看一下下边的例子您就会明 白了 例 2 创建一个普通列表 34 一个普通列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 此例在浏览器中的显示如下 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 10 10 标签对用来创建一个标有无顺序符号的列表 标签对用来创建一个标有有顺序编 号的列表 标签对只能在或标签对之间使用 此标签对用来创建一个列表 项 若放在之间 则每个列表项加上一个符号 的属性 type 有三个选项 这三个 选项都必须小写 disc 实心园 circle 空心园和 square 小方块 如果不使用其属性 即默认情 况下的会加 disc 实心园 若放在之间 则每个列表项加上一个编号 列表的结果是带有前后顺序之分 的编号 如果插入和删除一个列表项 编号会自动调整 顺序编号的设置是由的两个属性 type 和 start 来完成的 start 编号开始的数字 如 start 2 则编号从 2 开始 如果从 1 开始可以省略 或是在 标签中设定 value n 改变列表行项目的特定编号 例如 type 用于编号的数字 字母等的类型 如 type a 则编号用英文字母 为了使用这些属性 把它们放在或的的初始标 签中 有序列表 type 的属性如下 typetype 类型类型描述描述 35 type 1 表示列表项目用数字标号 1 2 3 type A 表示列表项目用大写字母标号 A B C type a 表示列表项目用小写字母标号 a b c type I 表示列表项目用大写罗马数字标号 type i 表示列表项目用小写罗马数字标号 i ii iii 例 3 标有数字或圆点的列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 此例在浏览器中的显示如下 中国城市 1 北京 2 上海 3 广州 美国城市 华盛顿 芝加哥 纽约 11 11 为目录列表标签 它的格式和一样 36 12 12 为菜单列表标签 它的格式和无序列表一样 例子 5 5 HTML 无序列表 默认的无序列表加 实心园 默认的无序列表 实心园 默认的无序列表 实心园 默