徐州工程学院教案纸 以写为双标记<P>、</P>,也可以写为单标记<P>。 综合来讲,HTML的标记有下列3种表示方法: 标记名>文本或超文本</标记名> 标记名属性名1=”属性值1”属性名2=”属性值2-)文本或超文本 </标记名 标记名> 其中,最后一种表示方法仅用于一些特殊的标记。例如,<BR>表示强 制换行,它没有与之对应的</BR>。 (3)常用的HTML标记 下面列出了一些常用的HTML标记及简要的说明:P18-19 <HTML>---</HTML> <HEAD>---</HEAD> <BODY>---/BODY> <TITLE>--/TITLE> < A href=”-”>X</A IMG src=”- <BR> <B>-B I>--</I> <HR> <TABLE>---/TABLE> <TR>---</TR> <TD>---</TD> <FONT>---</FONT> 2.HTML文件中的标记与浏览器显示内容的关系 举例P19图1-17解释图1-17中页面内容:P19 用两种方法设计此页面 用 FrontPage2000介绍设计过程: 进入 FrontPage2000设计环境→选择普通→文字<早发白帝城》大小、 居中→插入水平线→插入图形→选择ⅢM→在插入图形处加入 align=”left”→写入文字<朝辞白帝彩云间》居中→写入文字<千里江陵一日还 居中→写入文字<两岸猿声啼不住>居中→写入文字<轻舟已过万重山居中→插入 水平线 源代码用记事本的设计过程 程序→附件→记事本→写入程序→ <head>
15 徐 州 工 程 学 院 教 案 纸 可以写为双标记<P>、</P>，也可以写为单标记<P>。 综合来讲，HTML 的标记有下列 3 种表示方法： <标记名>文本或超文本</标记名> <标记名 属性名 1=”属性值 1” 属性名 2=”属性值 2”┅>文本或超文本 </标记名> <标记名> 其中，最后一种表示方法仅用于一些特殊的标记。例如，<BR>表示强 制换行，它没有与之对应的</BR>。 （3）常用的 HTML 标记 下面列出了一些常用的 HTML 标记及简要的说明：P18—19 <HTML>┅</HTML> <HEAD>┅</HEAD> <BODY>┅</BODY> <TITLE>┅</TITLE> <A href=” ┅”>X</A> <IMG src=” ┅”> <BR> <P> <B>┅</B> <I>┅</I> <HR> <TABLE>┅</TABLE> <TR>┅</TR> <TD>┅</TD> <FONT>┅</FONT> 2. HTML 文件中的标记与浏览器显示内容的关系 举例 P19 图 1-17 解释图 1-17 中页面内容:P19 用两种方法设计此页面。 用 FrontPage2000 介绍设计过程： 进入 FrontPage2000 设计环境→选择普通→文字<早发白帝城>大小、 居 中 → 插入水平线 → 插入 图 形→ 选择 HTML→ 在 插 入图 形处加入 align=”left”→写入文字<朝辞白帝彩云间>居中→写入文字<千里江陵 一日还> 居中→写入文字<两岸猿声啼不住>居中→写入文字<轻舟已过万重山>居中→插入 水平线。 源代码用记事本的设计过程： 程序→附件→记事本→写入程序→ <html> <head>
徐州工程学院教案纸 <title)my first html document</title> </head> <center> < hI align=" center">早发白帝城</hl <hr> Kp align= center"> Img src="../图片/图1-51‰20.gif" align="left" 朝辞白帝彩云间< p align=" center"> 千里江陵一日还 p align=" center" 两岸猿声啼不住φ p align=" center"> 轻舟已过万重山p)<hr /htm1> 今将编辑好的程序以∴html扩展名存盘,存盘时起名、选路径、保存。 在主页上所建立的一切都依赖于HML的标记及其属性。若想熟练地创 建Web主页,必须了解HML每个标记的功能。 1.4.3HTML基础结构 1.HTML文件的结构 HTML文件是以<! DOCTYPE>版本声明开始,主要由头部<HEAD>和主体 BODY>两部分组成。头部用于文件命名及定义文件的相关说明;主体定义 浏览器显示的页面内容。HTML文件的结构如下表:(P20) 版本信<! DOCTYPE HTML PUBLIC/wc/oDmM4.0/EN? Ehttp://www.w3.org/tr/rec-htm14.0/strIcT.dtd> 文件开<HM> 始 <!-头部开始- 头部(TTE>标题名/ /TITLE !-HTML文件标题-> 其他头部内容定义标记 !-头部结束- 主体<BODY <!-主体开始-> 主页内容(文本、图象等) < ADDRESS>主页作者的信息</ ADDRESS><!一斜体显示主页作者的信息 < BODY <!一主体结束-> 文件结|<HTM <!HTML文件内容结束->
16 徐 州 工 程 学 院 教 案 纸 <title>my first html document</title> </head> <body> <center> <h1 align="center">早发白帝城</h1> </center> <hr> <p align="center"> <img src="../图片/图1-51%20.gif" align="left"> 朝辞白帝彩云间<p align="center"> 千里江陵一日还<p align="center"> 两岸猿声啼不住<p align="center"> 轻舟已过万重山<p><hr> </body> </html> →将编辑好的程序以 .html 扩展名存盘，存盘时起名、选路径、保存。 在主页上所建立的一切都依赖于 HTML 的标记及其属性。若想熟练地创 建 Web 主页，必须了解 HTML 每个标记的功能。 1．4．3 HTML 基础结构 1. HTML 文件的结构 HTML 文件是以<! DOCTYPE>版本声明开始，主要由头部<HEAD>和主体 <BODY>两部分组成。头部用于文件命名及定义文件的相关说明；主体定义 浏览器显示的页面内容。HTML 文件的结构如下表：（P20） 版本信 息 <! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN ?” http://www.w3.org/TR/REC-html4.0/strict.dtd> 文件开 始 <HTML> 头部 <HEAD> <! –头部开始- > <TITLE>标题名</TITLE> <! –HTML 文件标题- > …其他头部内容定义标记… </HEAD> <! –头部结束-> 主体 <BODY> <! –主体开始- > …主页内容（文本、图象等）… <ADDRESS>主页作者的信息</ADDRESS> <! –斜体显示主页作者的信息 - > </ BODY > <! –主体结束- > 文件结 束 </HTML> <! –HTML 文件内容结束- >
徐州工程学院教案纸 2.版本信息 迄今为止HTML以公布了多个版本,目前用的较多的是HTML4.0, HTML4.0规范有三种文件语法定义,见教材P21-22自阅 (1) HTML 4.0 Strict DTD (2)HTML 4.0 Transitional DTD (3) HTML 4.0 Frameset DTD 3.文件头部 文件头部位于文件开始标记<HTML>之后,并由开始标记<HEAD>和结束 标记</HEAD》定义。头部内容包括标题名、文本文件的地址、创作信息等文 件信息说明并由专门标记定义,它们都不在浏览器窗口内显示。头部内使 用的主要标记有 1) <TITLE> <TILE>标记用于定义标题名。标题名括在起始和结束标记之间,格式 <TILE>标题名</ TITLE> 标题名显示在浏览器的标题栏中。例P27上机练习题1. <html> < title>我的主页</ title !一标题名-> </head> body bgcolor=red” !一设定背景色一> <h1>我的主页</h1> </html> 2)<BASE>标记 <BASE>标记是一个单标记,用于设定为使用相对引用而定义的基点 URL,用来定义其后所有链接的起点,使浏览器知道在何处找到其他文件。 3)<META>标记 <META>标记是一个单标记,用于指明HML文件自身的某些信息,例如 文件创作工具、文档的作者、关键内容、所用语言等信息。它为搜索引擎 等程序使用。格式为: <ETAname=”“content=”“→>或Metahttp-equiv=”“content= 例<meta>标记定时转换(原教材)浏览器显示图tu1-9后,过15 秒即自动转为图tu1-10所示页面 <html>head> < title>meta用法√ title metahttp-equiv=refreshcontent=15:url=tul-10.htm1> efresh—更新
17 徐 州 工 程 学 院 教 案 纸 2. 版本信息 迄今为止 HTML 以公布了多个版本，目前用的较多的是 HTML4.0， HTML4.0 规范有三种文件语法定义，见教材 P21—22 自阅。 （1）HTML 4.0 Strict DTD （2）HTML 4.0 Transitional DTD （3）HTML 4.0 Frameset DTD 3. 文件头部 文件头部位于文件开始标记<HTML>之后，并由开始标记<HEAD>和结束 标记</HEAD>定义。头部内容包括标题名、文本文件的地址、创作信息等文 件信息说明并由专门标记定义，它们都不在浏览器窗口内显示。头部内使 用的主要标记有： 1）<TITLE> <TITLE>标记用于定义标题名。标题名括在起始和结束标记之间，格式 为： <TITLE>标题名</TITLE> 标题名显示在浏览器的标题栏中。例 P27 上机练习题 1. <html> <head> <title>我的主页</title> <!--标题名--> </head> <body bgcolor=”red”> <!—设定背景色--> <h1>我的主页</h1> </body> </html> 2）<BASE>标记 <BASE>标记是一个单标记，用于设定为使用相对引用而定义的基点 URL，用来定义其后所有链接的起点，使浏览器知道在何处找到其他文件。 3）<META>标记 <META>标记是一个单标记，用于指明 HTML 文件自身的某些信息，例如 文件创作工具、文档的作者、关键内容、所用语言等信息。它为搜索引擎 等程序使用。格式为： <META name=” “ content=” “>或<META http-equiv=” “ content=” “> 例 <meta>标记-定时转换 （原教材）浏览器显示图 tu1-9 后，过 15 秒即自动转为图 tu1-10 所示页面 <html><head> <title>meta 用法</title> <meta http-equiv="refresh" content="15;url=tu1-10.html"> ‘refresh—更新
徐州工程学院教案纸 <title>ch107</title> </head> <body bgcolor="#ffffo0> Ka href="tul-10 html">tul-10 html</a> <center> < hl align=" center">早发白帝城</h1> </center> <p align="center"> < Img src="./图片/图1-51%20.gif" align="left"> 朝辞白帝彩云间< p align=" center"> 千里江陵一日还< p align=" center"> 两岸猿声啼不住< p align=" center"> 轻舟已过万重山<p><hr>p>p> < font size=5 color="red" align=" center">15秒后将自动转换。 </font> </body </htmI> !一tu1-10.html <html> Head> <title>tul-10</title> </head <body bgcolor="#oOffo0" ><div align="center Marquee behavior="alternate width=400 height=50 hspace=30 vspace=20 loop=10 scrollamount=20 scrolldelay=100 bgcolor=yellow> <h2>欢迎你使用Web实例!</h2 marquee </div> </body> </htmI> 4)<LINK>标记 <LINK>和<LINK>用于链接外部文件 5) <ISINDEX> ISINDEX>标记是一个单标记,它的作用是在浏览器上建立一个交互索 引框,以便用户输入内容检索数据库。格式为:
18 徐 州 工 程 学 院 教 案 纸 <title>ch107</title> </head> <body bgcolor="#ffff00"> <a href="tu1-10.html">tu1-10.html</a> <center> <h1 align="center">早发白帝城</h1> </center> <hr> <p align="center"> <img src="../图片/图 1-51%20.gif" align="left"> 朝辞白帝彩云间<p align="center"> 千里江陵一日还<p align="center"> 两岸猿声啼不住<p align="center"> 轻舟已过万重山<p><hr><p><p> <font size=5 color="red" align="center">15 秒后将自动转换。 </font> </body> </html> <! --tu1-10.html> <html> <head> <title>tu1-10</title> </head> <body bgcolor="#00ff00"><div align="center"> <marquee behavior="alternate" width=400 height=50 hspace=30 vspace=20 loop=10 scrollamount=20 scrolldelay=100 bgcolor=yellow> <h2>欢迎你使用 Web 实例！</h2> </marquee> </div> </body> </html> 4）<LINK>标记 <LINK>和</LINK>用于链接外部文件。 5）<ISINDEX> <ISINDEX>标记是一个单标记，它的作用是在浏览器上建立一个交互索 引框，以便用户输入内容检索数据库。格式为：
徐州工程学院教案纸 〈 ISINDEX prompt=”搜索输入” 4.文件主体 文件主体位于头部之后,以标记<BODY>开始,以标记√BODY>结束。文 件主体定义了Web主页显示的内容、如文字、链接、图象、表格或其他对 在<BODY>和<BODY>之间可以包含<P>、</P>、<H1>、</H1>、<BR>、<HR> 等众多标志,它们所定义的文本、图像等将会在浏览器的框内显示出来。 与<BODY>相关的属性有: background图象设置主页的背景 bgcolor设置主页的背景色 text 设置主页文本的颜色 link 设置超文本链接尚未访问文本时的颜色,缺省设置为蓝 vlink 设置超文本链接已经访问文本的颜色,通常为紫色 设置超文本链接被选择瞬间文本的颜色 属性是用来修饰标记的,放在开始标记内,如颜色、对齐方式、高度 和宽度等。常用属性如下:P22-23 (1)对齐属性 (2)范围属性 (3)色彩属性 5.注释 注释标记用符号“<!”和“->”,中间为注释内容,注释可以插入文 本的任何地方,在浏览器上不显示。 例1-5个较完整的HTML文件浏览器显示如图tu1-11所示 < doctype html public -//w3c//dtd html4. 0//en http://www.w3.org/tr/rec-htm140/strict.dtd> <html> < title>长江三峡√/ title </head <center> <h2>早发白帝城</h2> < font color="red"size="3">李白</font> < Img src="../图片/图1-51%20.gif" align="left" width="345 height="209"> 朝辞白帝彩 千里江陵一日还p
19 徐 州 工 程 学 院 教 案 纸 <ISINDEX prompt=”搜索输入”> 4. 文件主体 文件主体位于头部之后，以标记<BODY>开始，以标记</BODY>结束。文 件主体定义了 Web 主页显示的内容、如文字、链接、图象、表格或其他对 象。 在<BODY>和</BODY>之间可以包含<P>、</P>、<H1>、</H1>、<BR>、<HR> 等众多标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。 与<BODY>相关的属性有： background 图象设置主页的背景 bgcolor 设置主页的背景色 text 设置主页文本的颜色 link 设置超文本链接尚未访问文本时的颜色，缺省设置为蓝 色 vlink 设置超文本链接已经访问文本的颜色，通常为紫色 alink 设置超文本链接被选择瞬间文本的颜色 属性是用来修饰标记的，放在开始标记内，如颜色、对齐方式、高度 和宽度等。常用属性如下：P22—23 （1）对齐属性 （2）范围属性 （3）色彩属性 5. 注释 注释标记用符号“<!”和“-->”，中间为注释内容，注释可以插入文 本的任何地方，在浏览器上不显示。 例 1-5 一个较完整的 HTML 文件 浏览器显示如图 tu1-11 所示。 <! doctype html public "-//w3c//dtd html4.0//en" "http://www.w3.org/tr/rec-html40/strict.dtd"> <html> <head> <title>长江三峡</title> </head> <body> <center> <h2>早发白帝城</h2> <font color="red" size="3">李白</font> <hr> <img src="../图片/图 1-51%20.gif" align="left" width="345" height="209"> 朝辞白帝彩云间<p> 千里江陵一日还<p>