JSP技术-第2章 HTML语言

第 2 章HTML 语言 wangkf05 文件标记 排版标记 清单标记 字体标记 表格标记 表单标记 图形标记 链接标记 多媒体标记 其他标记 特殊字符 调色原理 附录所有标记 HTML 为 HyperText Mark up Language 缩写 译为 超文本标注式语言 是一种为 普通文件中某些字句加上标示的语言 其目的在于运用标记使文件达到预期的显示效果 可以用它编写扩展名为 html 或 htm 的文件 您可以使用 FrontPage 记事本等编辑 工具来编写 Html 文件 在讲述 HTML 语言之前让我们首先了解下 HTML 语言标记的写法语言标记的写法 任何标记皆由一对尖括号 所围住 如 标记名与尖括号之间不能留有空白字符 在起始标记之标记名前加上符号 便是其终结标记 如 参数只可加于起始标记中 如HTML 标记字母大小写皆可 围堵标记与空标记围堵标记与空标记 1 围堵标记围堵标记 顾名思义 它以起始标记及终结标记将文字围住 令其达到预期显示效果 例如 HTML Source HTML 是一种超文本标注式语言 显示成 HTML 是一种超文本标注式语言 其中 便称为围堵标记 它以起始标记及终结标记标示文字 Creation of webpage 令它显 示成粗体 两者失其一都会发生错误显示 2 空标记空标记 是指标记单独出现 只有起始标记没有终结标记 例如 HTML Source I love Creation of Webpage It s a wonderful place 显示成 I love Creation of Webpage It s a wonderful place 其中换行标记便属空标记 它的作用便是将标记后所有东西显示于下一行 可见终结标记于它是没意义的 但有些人会为空标记加上终结标记 这是为方便记认而己 对 HTML 没有影响 下面让我们来分块学习 HTML 语言 如果读者已经十分熟悉 HTML 语言 可以略过这 一章进行下一章的学习 2 1 文件标记文件标记 2 1 1 HTML 基本架构基本架构 用到的标记有 下用以一个简单的便子来说明其基本架构 源码如下 HTML 基本架构 网页的主体部分 多数标记都写在此处 说明 整个文件处于标记与之间 的作用是声明这是 HTML 文件 让 Web 认出并处理此文件 基本架构分两部分 从到间称为开头开头 到间称 为本文本文 各有适用于开头和本文的标记 如只适用于开头 只有具有参数设 定 这是需要特别注意的 2 1 2 BODY 的参数设定的参数设定 text 000000 用以设定文字颜色 000000 代表黑色 亦可以采用颜色的名称 即 text blac k link 0000FF 设定一般文字连结颜色 alink FF0000 设定刚按下时文字连结颜色 vlink 0000FF 设定连结后的颜色 被按过 background bg1 gif 设定背景墙纸 GIF 或 JPEG 皆可 可以是绝对途径或相对途径 bgcolor FFFFFF 设定背景颜色 当己设定背景墙纸时会失去作用 除非墙纸有透明部分 leftmargin 2 设定整份文件显示画面的左方边沿空间 单位为像素 只适用于 IE topmargin 2 设定整份文件显示画面的上方边沿空间 只适用于 IE bgproperties fixed 固定背景墙纸 当卷动文字时墙纸不会跟著卷动 只适用于 IE 注意 标记及参数之字母大小都可以 标记及参数之字母大小都可以 2 2排版标记排版标记 这一节我们将分别向读者讲解下面这 9 种重要的排版标记 正像许多其它语言一样 如 C C java 等 HTML 语言也提供了注解功能 浏览器会忽略此 标记中的文字 可以 是很多行 而不作显示 一般使用目的 为文中不同部份加上说明 方便日后修改 这对较复杂或非私人网页尤其重要 它不单是提醒自已 亦提醒你的同事这部分 做什么 那部分做什么 例子 用作版权声明 假如你不希望别人使用或复制你的网页 可加上警告字眼 例子 如以下代码 HTML 是一种超文本标注式语言 将只显示 HTML 是一种超文本标注式语言 即网页显示将乎略注解部份 称为段落标记 作用 为字 画 表格等之间留一空白行 例如 原 始 代 码 Do the Advantages of Television Outweigh the Disadvantages Television is now playing a very important part in our life But television like other things has both advantages and disadvantages 显 示 结 果 Do the Advantages of Television Outweigh the Disadvantages Television is now playing a very important part in our life But television like other things has both advantages and disadvantages 称为换行标记 作用 令字 画 表格等显示于下一行 错误例子 原 始 代 码 吉林省长春市吉林大学前卫南区 经信二公寓 446 寝 邮编 130012 收信人 吴海菠 显 示 结 果 吉林省长春市吉林大学前卫南区经信二公寓 446 寝邮编 130012 收信人 吴海菠 显然如果这样做 邮递员无法接受这种一行的错误格式 正确例子 原 始 代 码 吉林省长春市吉林大学前卫南区 经信二公寓 446 寝 邮编 130012 收信人 吴海菠 显 示 结 果 吉林省长春市吉林大学前卫南区 经信二公寓 446 寝 邮编 130012 收信人 吴海菠 称为水平线 作用 插入一条水平线 其中可以加入一些参数 下面以 为例加以说明 align X 设定线条置放位置 X 可选择 left right center 三种设定值 size X 设定线条厚度 以像素作单位 内定 X 为 2 width X 设定线条长度 可以是绝对值 以像素作单位 或相对值 X 内定为 100 color X 只适用于 IE 设定线条颜色 X 内定为黑色 如 0000FF 代表蓝色 亦可以采用颜色的名称 即 text blue noshade 设定线条为平面显示 若删去则具阴影或立体 这是内定值 例子 原 始 代 码 显 示 结 果 称为居中标记 作用 令字 画 表格等显示于中间 例子 原 始 代 码 Who are you Heber How do you do Fine thanks and you 显 示 结 果 Who are you Heber How old are you Fine thanks and you 称为预设格式标记 作用 令文件按照原始码的排列方式显示 此标记允许保留你 于原始码中输入的空白及 Return 例子 原 始 代 码 请您输入几组数据 年龄 14 15 16 17 18 19 20 21 22 平均身高 158 160 162 165 168 170 170 170 170 显 示 结 果 请您输入几组数据 年龄 14 15 16 17 18 19 20 21 22 平均身高 158 160 162 165 168 170 170 170 170 说明 由此可见当出现很多诸如空格 换行的时候使用标记将是最好的选择 称为区隔标记 作用 设定字 画 表格等的摆放位置 以 为例 align center 可选值 center left right 决定字 画 表格等居中 靠左或靠右 的作用和居中标记 一样 前者是由 HTM L3 0 开始 的标准 后者是通用己久的标示法 例子 原 始 Who are you Heber 代 码 Nice to meet you Nice to meet you too 显 示 结 果 Who are you Heber Nice to meet you Nice to meet you too 称为不折行标记 作用 令某些文字不因太长而绕行 一 显示于同一行或下 一 行 它对住址 数学算式 一行数字 程式码等尤为有用 例子 其中 Chris s Creation of Webpage 将不被分开而显示于同一行 原 码 If you want to know how to create you own homepage quickly don t miss Chris s Creation of Webpage which will help you a lot 结 果 If you want to know how to create you own homepage quickly don t miss Chris s Creation of Webpage which will help you a lot 称为建议折行标记 作用 预设折行部位 它没有侵犯到 的责任 只是 作建议而已 若观者的系统解像度够高的话 那么它是 不会折行的 例子 若不加标记 整个网址会显示于下一行 原 始 代 码 Please visit my other homepage which locate at liconValley Sector 8234 index html There are many softwares for download I think you will really love that place 显 示 结 果 Please visit my other homepage which locate at liconValley Sector 8234 index html There are many softwares for download I think you will really love that place 2 3 清单标记清单标记 这一节我们将分别向读者讲解下面这 8 种重要的清单标记 称为顺序清单标记 则用以标示清单项目 所谓顺序清单就是在每一项前面加上 1 2 3 等数目 又称编号清单 的参数设定 常用 例如 type i 设定数目款式 其值有五种 请参考 右表 内定为 type 1 start 4 设定开始数目 不论设定了哪一数 目款式 其值只能是 1 2 3 等整 数 内定 为 start 1 的参数设定 常用 例如 type square 只适用于非顺序清单 设定符号款式 其值有三种 如下 内定为 type disc 符号 是当 type disc 时的列项符号 符号 if width 10 height 10 border 0 是当 type circle 时的列项 符号 符号 是当 type square 时的列项符号 value 4 只适用于顺序清单 设定该一项的数目 其後各项将以此作为起始数目而递增 但前面各项则不受影响 其值只能是 1 2 3 等整数 没有内定值 例子 原始码浏览器显示结果 My best friends My best friends Michelle Wei Michael Wan Gloria Lam 1 Michelle Wei 2 Michael Wan 3 Gloria Lam 称为无序清单标记 所谓无序清单就是在每一项前面加上 等符号 故又称符号清单 的参数设定 常用 例如 type square 设定符号款式 其值有三种 如下 内定为 type disc 符号 是当 type disc 时的列项符号 符号 是当 type circle 时的列项符号 符号 是当 type square 时的列项符号 注意 由于 及 都有 type 这个参数 两者尽可能选用其一 例子 原码浏览器显示结果 My Homepages Penpals Garden ICQ Garden Software City Creation of Webpage My Homepages Penpals Garden ICQ Garden Software City Creation of Webpage 这两个标记都不为 W3C 所赞同 希望用者能以 及 代之 及 基本上它和 是一样的 在一些特别的浏览器可能表现出 的 效果 于旧版的 IE 或 NC 标记 不显示符号或数目 两标记的用法 与 完全一 样 例子 原码浏览器显示结果 My Homepages Penpals Garden ICQ Garden Software City My Homepages Penpals Garden ICQ Garden Software City 称为定义清单标记 用以标示定义条目 则用以标示定义内容 所谓定义清单就是一种分二层的项目清单 其不故符号及数目 三个标记都没有常用的参数 而 可以独立使用 只是一些旧的浏览器并 不支援 如 IE 3 0 常用的如 标记可用以制造段落第一个字前面的空白 原 始 代 码 How to use Definition List First you should not place paragraph tag right after or before a list structure or between the items of a list In cerntain contexts use of extra paragraph tags should always be avoided when you realize t his concept it is quit easy to write a HTML Other things to know We usually put only ONE Definition tag following the Definition T erm tag more than one DD tag is not recommanded Bes