Microsoft Word - 扉页.doc

Size: px

Start display at page:

Download "Microsoft Word - 扉页.doc"

二缪
5 years ago
Views:

1 第 5 章 HTML 语言 HTML 是 Hypertext Markup Language( 超文本标记语言 ) 的缩写, 它是构成 Web 页面 (Page) 的主要工具, 是用来设计网页的一种标记语言 HTML 定义了一组用于描述页面结构和风格的标记用 HTML 描述的网页称为 HTML 文件 HTML 文件是标准的 ASCII 文件, 是一种纯文本格式的文件, 它能独立于各种操作系统平台 ( 如 UNIX Windows 等 ) 使用 HTML 语言描述的文件, 需要通过浏览器显示出效果 HTML 文件中包含两种信息 : 页面本身的文本表示页面元素结构格式超链接的 HTML 标记 5.1 HTML 标记 HTML 文档结构 HTML 的文档内容是由标记组成的集合标记必须成对出现, 常规的表现形式为 : < 标记属性 = 取值 > 内容 </ 标记 > HTML 文件的基本结构如下 : HTML 文件开始文件头开始 <title> 网页标题 </title> 文件头结束文件体开始网页的内容文件体结束 HTML 文件结束 HTML 文档的结构可以说是各类标记的嵌套, 嵌套不能交叉头部标记是成对的, 主体标记是成对的 </body > 例 5-1 一个完整的 HTML 程序及在浏览器中显示的结果, 如图 5-1 所示

2 <title></title> <ol> <li>eeeeeeeee <li>ttttttttt <ul type="square"> <li>sssssssss <li>aaaaaaaaaa </ul> <li>dddddddd <li>ffffffff </ol> <dl> <dt>basic</dt> <dd> 是一种计算机的高级语言, 通过计算机解释 BASIC 的语句使计算机来完成相应的功能 </dd> <dt>fortran</dt> <dd> 也是一种计算机的高级语言, 通过计算机的编译与连接使计算机来完成相应的功能 </dd> </dl> 图 5-1 一个完整的 HTML 程序 92 网络数据库技术与应用 ( 第 3 版 )

3 5.1.2 HTML 常用标记 1. 文本类标记 1) 段落标记 <p></p> 与对齐属性 align 在 HTML 文件中,<p> 标记是一个段落标记符号, 利用 <p> 标记可以对网页中的文字信息进行段落的定义, 但不能进行段落格式的定义 ( 即输入文字信息时按回车键不起作用 ) 段落的对齐属性 align 值有 3 种 :center( 居中 ) right( 右对齐 ) left( 左对齐 ) 格式为 : <P align= center > 文本或图像 </P> 例 5-2 段落标记的使用, 如图 5-2 所示 <title> 段落 </title> <p align=center> 登鹳鹊楼白日依山尽, 黄河入海流欲穷千里目, 更上一层楼 </p> 图 5-2 段落标记的使用 2) 回车标记 <br>( 换行标记 ) 在 HTML 文件中, 利用 <br> 标记可以插入换行符, 表示强制性换行将例 5-2 的文件加上标记 <br>, 代码如下 : <title> 段落 </title> 第 5 章 HTML 语言 93

4 <p align=center> 登鹳鹊楼 <br> 白日依山尽,<br> 黄河入海流 <br> 欲穷千里目,<br> 更上一层楼 <br> </p> 试想网页文件的显示效果有何不同? 3) 字体标记 <font></ font > face 属性用来设置字体, 常用的有黑体隶书楷体宋体等, 字号用 size 属性, 颜色用 color 属性各属性之间用空格隔开, 格式如 : <font face= 隶书 size=24 color=red> 4) 标题标记 <h1></h1>,<h2></h2> <h6></h6> 与对齐属性 align 在 HTML 中, 定义了六级标题, 从一级到六级, 每级标题的字体大小依次递减如 : <h1></h1>,<h2></h2> <h6></h6>, 其中对齐属性为 align 例 5-3 标题标记的使用, 如图 5-3 所示 <title> 在网页中添加标题字 </title> <h1 align="center"> 一级标题 </h1> <h2> 二级标题 </h2> <h3> 三级标题 </h3> <h4 align="left" > 四级标题 </h4> <h5 align="center"> 五级标题 </h5> <h6 align="right"> 六级标题 </h6> 图 5-3 <h1>~<h6> 标记的使用效果 94 网络数据库技术与应用 ( 第 3 版 )

5) 预格式化文本标记 <pre> </pre> 在 HTML 文件中, 利用成对 <pre></pre> 标记对网页中文字段落进行预格式化, 在输入过程中, 按回车键, 可生成一个段落将例 5-2 的 <p> 改为 <pre> 标记, 显示结果如图 5-4 所示 <title> 段落 </title> <pre> 登鹳鹊楼白日依山尽, 黄河入海流欲穷千里目, 更上一层楼 </pre> 图

5 5) 预格式化文本标记 <pre> </pre> 在 HTML 文件中, 利用成对 <pre></pre> 标记对网页中文字段落进行预格式化, 在输入过程中, 按回车键, 可生成一个段落将例 5-2 的 <p> 改为 <pre> 标记, 显示结果如图 5-4 所示 <title> 段落 </title> <pre> 登鹳鹊楼白日依山尽, 黄河入海流欲穷千里目, 更上一层楼 </pre> 图 5-4 <pre> 标记的显示效果 6) 文本修饰标记 <b> <i> <u> 基本格式如下 : 普通文字的显示 <br> <b> 加粗的文字 </b><br> <i> 斜体文字 </i><br> <u> 添加下划线文字 </u><br> 7) 添加删除线标记 <del> 在成对的 <del> </del> 标记之间输入文字, 在网页中显示该标记之间的文字就是被添加了删除线后的显示效果例 5-4 添加了删除线的效果, 具体代码如下 : 第 5 章 HTML 语言 95

6 <title> 添加删除线 </title> 地址信息由 <del>2 号楼 5 单元 </del> 改为 6 号楼 3 单元页面效果如图 5-5 所示图 5-5 添加了删除线的效果 ( 注 : 删除线 <strike> 标记已不常用, 一般使用 <del> 标记替代 ) 8) 强调显示内容的标记 <em> <strong> <em> <strong> 标签告诉浏览器把其中的文本表示为强调的内容 em 是 emphasis 的缩写, 有加重, 着重的意思, 显示效果是斜体, 相当于 html 元素中的 <i>...</i>; strong 是粗体, 相当于 html 元素中的 <b> </b> 9) 水平线标记 <hr> 与 width size align 属性在 HTML 文件中, 利用 <hr> 标记可以插入水平线, 同时利用水平线标记本身的属性 ( 见表 5-1), 可以对水平线进行一些简单的设置表 5-1 <HR> 的属性属性说明 width 设置水平线宽度, 可以是像素, 也可以是百分比 Size 设置水平线高度 noshade 设置水平线无阴影 color 设置水平线颜色 align 设置水平线居中对齐 10) 备注标记 <!- - --> 给代码添加注释语句时, 可以放在 HTML 文件的任何地方, 都不会在网页中被显示出来 11) 空格标记与插入特殊符号 & 字符在 HTML 文件中, 添加空格需要使用代码控制, 需要多少个空格就需要添加多少个特殊符号对应的代码, 在网页中显示的就是该代码对应的特殊符号表 5-2 给出了部分特殊符号与对应代码 96 网络数据库技术与应用 ( 第 3 版 )

表 5-2 部分特殊符号与对应代码符号对应代码符号对应代码 & & 例 5-5 空格与特殊符号标记的使用代码如下 : <title> 插入特殊符号 </title> 下面这段文字是插入版权符号后显示的效果 :<br> 版权所有 : 北京印刷学院数字媒体专业程序运行结果见图 5-6 所示图 5-6 插入空格与特殊符号标记例 5-6 运用文本类标记编写 HTML 程序显示结果如图

7 表 5-2 部分特殊符号与对应代码符号对应代码符号对应代码 & & 例 5-5 空格与特殊符号标记的使用代码如下 : <title> 插入特殊符号 </title> 下面这段文字是插入版权符号后显示的效果 :<br> 版权所有 : 北京印刷学院数字媒体专业程序运行结果见图 5-6 所示图 5-6 插入空格与特殊符号标记例 5-6 运用文本类标记编写 HTML 程序显示结果如图 5-7 所示 <title></title> <H1 ALIGN=CENTER><font face="arial">welcom TO BEIJING</FONT></H1> <H2><font COLOR="#FF0000">DDD</FONT></H2> <PRE> When I stop to think about <EM>which </EM>possession of mine <STRIKE>means the most</strike> to me, <B>I find myself </B>looking at my left wrist. </PRE> 2. 列表与表格标记 1) 列表标记有序列表 <ol> 格式如下 : 第 5 章 HTML 语言 97

8 <ol Type=""start=""> </ol> 图 5-7 简单的 HTML 程序 (1)<ol> 标记中的 Type 属性及说明见表 5-3 (2)start 属性用来设置编号的起始值表 5-3 有序列表 Type 属性及说明属性值说明属性值说明 1 数字 1, 2 i 小写罗马数字 i ii iii a 小写字母 a b I 大写罗马数字 I II III A 大写字母 A B 无序列表 <ul> 格式如下 : <ul> <ul> 定义列表 <dl> 格式如下 : <dl> <dt> 名称 <dd> 定义 <dt> 名称 <dd> 定义 <dt> 名称 <dd> 定义 <dl> 98 网络数据库技术与应用 ( 第 3 版 )

9 例 5-7 各种列表标记的使用, 代码如下 : <title> 嵌套有序列表与无序列表 </title> <ul type="square"> <li> 水果类 </li> <ol type="a"> <li> 草莓 </li> <li> 木瓜 </li> <li> 桔子 </li> </ol> <li> 蔬菜类 </li> <ol type="i"> <li> 萝卜 </li> <li> 白菜 </li> <li> 土豆 </li> </ol> </ul> <hr> <dl> <dt> 体育三大球类 <dd> 足球 <dd> 篮球 <dd> 排球 <dt> 音乐风格 <dd> 民族音乐 <dd> 流行音乐 <dd> 古典音乐 </dl> 程序的运行结果见图 5-8 所示 2) 表格标记 <table></table> 表标题标记为 <caption></caption> 行标记为 <tr></tr> 单元格标记 ( 列标记 ) 为 <td></td> 表头标记为 <th> 3) 表格属性边框属性 border 为数字第 5 章 HTML 语言 99

10 图 5-8 各种列表标记的使用背景图属性 background 为图形文件名背景色属性 bgcolor 为 #RGB 表对齐属性为 align, 表宽表高属性为 width height 注意 : 表格属性是可用于行标记单元格标记的属性例 5-8 运用列表标记及表格标记编写 HTML 程序显示结果如图 5-9 所示 <title></title> <ol> <li>eeeeeeeee <li>ttttttttt<ul type= square > <li>sssssssss <li>aaaaaaaaaa </ul> <li>dddddddd <li>ffffffff </ol> <dl> <dt>basic</dt> <dd> 是一种计算机的高级语言, 通过计算机解释 BASIC 的语句使计算机来完成相应的功能 </dd> <dt>fortran</dt> <dd> 也是一种计算机的高级语言, 通过计算机的编译与连接使计算机来完成相应的功能 </dd> </dl> <table border=1 width=210 height=100> <caption><b>welcom TO BEIJING</b></caption> 100 网络数据库技术与应用 ( 第 3 版 )

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2

HTML A-1 HTML A-2 A-2 HTML A-8 A-3 A-14 A-4 A-26 A-5 A-30 A-6 A-42 A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ /