1 简介和超链接 html 第一部分. 2 html 初步 html 的优点： html 的优点： html...

11

简介和超链接简介和超链接

HTML第一部分

22

HTMLHTML 初步初步

HTMLHTML 的优点的优点：：• HTMLHTML 文件比较小，便于在网络上传输；文件比较小，便于在网络上传输；• HTMLHTML 文档独立于计算机操作平台；文档独立于计算机操作平台；• 原则上，建立原则上，建立 HTMLHTML 文档不需要任何特文档不需要任何特

殊的软件，只需一般的文本编辑器即可；殊的软件，只需一般的文本编辑器即可；• HTMLHTML 标记语言，非常便于学习。标记语言，非常便于学习。

33

HTMLHTML 初步初步 HTMLHTML 支持通过支持通过 CGICGI （（ Common Gateway Common Gateway

InterfaceInterface 即通用网关接口）方式与用户和外部即通用网关接口）方式与用户和外部程序进行交互。程序进行交互。 CGICGI 是一种在网络服务器上运是一种在网络服务器上运行的程序，用来处理用户从行的程序，用来处理用户从 WibWib 表单上输入的表单上输入的请求，查询数据库上的信息，向用户提交动态的请求，查询数据库上的信息，向用户提交动态的结果。理论上，结果。理论上， CGICGI 程序可以用任何一种语言程序可以用任何一种语言编写，但大多数程序员用编写，但大多数程序员用 C/C++C/C++ 和和 PerlPerl 语言语言编写编写 CGICGI 程序。程序。

44


HTMLHTML 还支持还支持 JavaJava 编程，程序员只要将编编程，程序员只要将编号的号的 JavaJava 程序按一定的要求嵌入到程序按一定的要求嵌入到 HTMLHTML文档中，就可以完成许多灵活的工作，如文档中，就可以完成许多灵活的工作，如Home PageHome Page 种的动画演示。种的动画演示。

HTMLHTML 还支持还支持 JavascriptJavascript 编程，程序员可编程，程序员可以将以将 JavascriptJavascript 语句嵌入到语句嵌入到 HTMLHTML 文档中，文档中，完成更多的交互操作。完成更多的交互操作。

55


HTMLHTML 的局限性的局限性：：• 直接用文本编辑时，不是所见即所得；直接用文本编辑时，不是所见即所得；• 不同浏览器对同一个不同浏览器对同一个 HTMLHTML 文档可能得到不同文档可能得到不同

的显示效果；的显示效果；• 已定义的标记往往不能满足多方面的需要。已定义的标记往往不能满足多方面的需要。

66


HTMLHTML 文件的基本构成：文件的基本构成：由文件的内容和标记组成；由文件的内容和标记组成；标记基本上是成对出现，结束标记带有“标记基本上是成对出现，结束标记带有“ /”/”

符：符： << 标记名标记名 > > 文件的内容文件的内容 </</ 标记名标记名 >>

标记不区分大小写字符，大小写字符效果相同标记不区分大小写字符，大小写字符效果相同

77

HTMLHTML 初步初步 HTMLHTML 文档基本格式文档基本格式

<<HTML>HTML>

<HEAD><HEAD>

<title>, <base>, <link>, <isindex>, <meta>,< <title>, <base>, <link>, <isindex>, <meta>,< script >script >

</HEAD></HEAD>

<BODY><BODY>

HTML HTML 文件的正文写在这里文件的正文写在这里 ... ... ... ... </</BODY>BODY>

</HTML></HTML>

88


HTMLHTML 文档必须以标记文档必须以标记 HTMLHTML 开始和结束。开始和结束。HTMLHTML 文档划分为两个部分：文档划分为两个部分： HEADHEAD 和和

BODYBODY ；；在在 HEADHEAD 部分部分 TITLETITLE （（标题）是必须的，将出标题）是必须的，将出

现在浏览器的标题栏，也将出现在“收藏夹”现在浏览器的标题栏，也将出现在“收藏夹”中，应该慎重选取；中，应该慎重选取；

99


例例 1 1 最简单的最简单的 HTMLHTML 文件文件：：<<HTML>HTML>

<HEAD><HEAD>

<TITLE> <TITLE> 信息工程学院主页信息工程学院主页 </</TITLE>TITLE>

</HEAD></HEAD>

<BODY><BODY>

信息工程学院是浙江工业大学最具活力的…信息工程学院是浙江工业大学最具活力的…</</BODY>BODY>

</HTML></HTML>

1010

关于文字和段落的标记关于文字和段落的标记关于文字和段落的标记：关于文字和段落的标记：

分段标记分段标记 <P>

HTMLHTML 不识别回车符，分段时要加分段标记；不识别回车符，分段时要加分段标记；分行标记分行标记 < BR>

分段标记会自动加一个空行，用分行标记可以分段标记会自动加一个空行，用分行标记可以避免。避免。PP 和和 BRBR 不是成对出现。不是成对出现。

1111

关于文字和段落的标记关于文字和段落的标记

例例 22 ：不加标记的段落将连续显示：不加标记的段落将连续显示<<BODY>BODY>

电信工程学院是浙江工业大学最大的学院。电信工程学院是浙江工业大学最大的学院。它包括它包括 77 个教学和科研中心。个教学和科研中心。共有教职工约共有教职工约 150150 人。人。</</BODY>BODY>

1212

关于文字和段落的标记关于文字和段落的标记例例 33 ：加上：加上 <P> 标记的段落将分段并显示空标记的段落将分段并显示空

行行<<BODY>BODY>

信息工程学院是浙江工业大学最大的学院。信息工程学院是浙江工业大学最大的学院。 <P>

它包括它包括 77 个教学和科研中心。个教学和科研中心。 <P>

共有教职工约共有教职工约 150150 人。人。 <P>

</</BODY>BODY>

1313

关于文字和段落的标记关于文字和段落的标记例例 44：加上：加上 < BR> 标记的段落将分段并不加标记的段落将分段并不加

空行空行<<BODY>BODY>

信息工程学院是浙江工业大学最大的学信息工程学院是浙江工业大学最大的学院。院。 < BR>

它包括它包括 77 个教学和科研中心。个教学和科研中心。 < BR>

共有教职工约共有教职工约 150150 人。人。 < BR>

</</BODY>BODY>

1414

关于文字和段落的标记关于文字和段落的标记 HTMLHTML 文档一般也不识别多个空格。文档一般也不识别多个空格。

原样显示标记原样显示标记 <<PRE>PRE>

使用使用 PREPRE 标记就可以识别回车和多个空格；标记就可以识别回车和多个空格；标题和子标题标记标题和子标题标记 <<H>H>

共分共分 66 级标题：级标题： H1~H6H1~H6 ；； H1H1 的字体最的字体最大；大； H6H6 最小，最小， <<H>H> 标记本身就有标记本身就有 <P>标记的功能，即可以换行，并添加空行。标记的功能，即可以换行，并添加空行。

1515

关于文字和段落的标记关于文字和段落的标记例例 55 ：不使用：不使用 <<PRE>PRE> 标记，不显示标记，不显示

多个空格多个空格 <<BODY>BODY> Here's Here's some ditty some ditty Specially done Specially done to lay it out all to lay it out all Formatted and pretty. Formatted and pretty. Unfortunately, that is all Unfortunately, that is all This junk really means This junk really means Because I admit I Because I admit I couldn't scrawl couldn't scrawl Poetry for Poetry for beans. beans. </BODY></BODY>

1616

例例 66：使用：使用 <<PRE>PRE> 标记，既有空标记，既有空格，也有换行格，也有换行

<<PRE>PRE> Here'sHere's some dittysome ditty Specially doneSpecially done to lay it out allto lay it out all Formatted and pretty.Formatted and pretty. Unfortunately, that is allUnfortunately, that is all This junk really meansThis junk really means Because I admit IBecause I admit I couldn't scrawlcouldn't scrawl Poetry for Poetry for beans.beans. </PRE></PRE>

1717

关于文字和段落的标记关于文字和段落的标记例例 77 ：标题标记的效果：标题标记的效果

<<BODY>BODY>

<H1><H1>今天天气真好！今天天气真好！ </</H1>H1>






</BODY></BODY>

1818

关于文字和段落的标记关于文字和段落的标记字体大小标记字体大小标记 < ... #=1, 2, 3, 4, 5, 6, font size=#> ... #=1, 2, 3, 4, 5, 6,

7 or +#, -#7 or +#, -# 标记没有标记没有 <P> 标记的功能；标记的功能；可以在原有字体大小的基础上增加（可以在原有字体大小的基础上增加（ ++）或减少）或减少

（（ --）；）； <<basefont size=#> #=1, 2, 3, 4, 5, 6, 7basefont size=#> #=1, 2, 3, 4, 5, 6, 7

设置文档的基本字体大小，此时使用（设置文档的基本字体大小，此时使用（ ++）、）、（（ --），都将以基本字体大小为准。），都将以基本字体大小为准。

1919

关于文字和段落的标记关于文字和段落的标记例例 88：字体大小标记的效果：字体大小标记的效果

<<BODY>BODY>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font></</BODY>BODY>

2020

关于文字和段落的标记关于文字和段落的标记

例例 99：字体大小标记和标题标记的比较：字体大小标记和标题标记的比较<<BODY>BODY>

 今天天气真好！今天天气真好！ </<H1>font><H1> 天气真好！天气真好！ </</H1>H1>






 今天天气真好！今天天气真好！ </font>

</BODY></BODY>

2121

关于文字和段落的标记关于文字和段落的标记例例 1010 ：： BasefontBasefont 的效果的效果

<<BODY>BODY><basefont size=4><basefont size=4>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font>今天天气真好！今天天气真好！ </font></BODY></BODY>

2222

关于文字和段落的标记关于文字和段落的标记指定“字体大小”的标记和“指定字体”指定“字体大小”的标记和“指定字体”

的标记的组合使用的标记的组合使用 <i> 今天今天 </ b> 天气天气 < font size=6> 真好！真好！

</font> 

今天今天天气天气真好！真好！

2323

关于文字和段落的标记关于文字和段落的标记客户端字体客户端字体 ((Font Face) Font Face)

 ... ... #=#=客户端可获得的字体客户端可获得的字体

如：如： < Hellow font face="Arial, Helvetica"> Hellow

World! World! 结果：结果： Hellow World! Hellow World!

2424

关于文字和段落的标记关于文字和段落的标记文字的分区文字的分区 ((Division)Division) 显示显示

可以在左、中右三个区域显示：可以在左、中右三个区域显示：

<<div align=left> ... </div>div align=left> ... </div>

<div align=left><div align=left>

Please show me your smile.Please show me your smile.

</div> </div>

结果：结果：Please show me your smile. Please show me your smile.

2525

关于文字和段落的标记关于文字和段落的标记<<div align=center>div align=center>

Please show me your smile.Please show me your smile.

</div> </div>

Please show me your smile. Please show me your smile.

<div align=right> <div align=right>


</div></div>

2626

关于文字和段落的标记关于文字和段落的标记物理字体物理字体

粗体：粗体： <…B>…</B> 斜体：斜体： <…I>…</I> 下划线：下划线： <…U>…</U> 等宽体：等宽体： <<TT>…TT>…</</TT>TT> 上标：上标： <…SUP>…</SUP> 下标：下标： <…SUB>…</SUB> 删除线：删除线： <<STRIKE>…STRIKE>…</</STRIKE>STRIKE>

2727

关于文字和段落的标记关于文字和段落的标记例例 1111 ：物理字体效果：物理字体效果

<<BODY>BODY>粗体：粗体： <B>今天天气真好！今天天气真好！ </B>斜体：斜体： <I>今天天气真好！今天天气真好！ </I>下划线：下划线： <U>今天天气真好！今天天气真好！ </U>等宽体：等宽体： <<TT>TT>今天天气真好！今天天气真好！ </</TT>TT> 上标：上标： AA今天天气真好！今天天气真好！ </SUP>下标：下标： AA今天天气真好！今天天气真好！ </SUB>删除：删除： <<STRIKE>STRIKE>今天天气真好！今天天气真好！ </</STRIKE>STRIKE></BODY></BODY>

2828

关于文字和段落的标记关于文字和段落的标记字体颜色标记字体颜色标记

< ... font color=#> ... #=#=rrggbb 16 rrggbb 16 进制数码，或者是下列预定义进制数码，或者是下列预定义色彩：色彩：

Black, Olive(Black, Olive( 橄榄橄榄 ), ), Teal, Red, Blue, Teal, Red, Blue, Maroon(Maroon(栗色栗色 ), ), Navy, Gray, Lime(Navy, Gray, Lime( 翠绿翠绿 ), ),

Fuchsia(Fuchsia(紫红紫红 ), ), White, Green, Purple(White, Green, Purple( 紫紫色色 ), ), Silver, Yellow, Aqua(Silver, Yellow, Aqua( 蓝绿蓝绿 ) )

2929

例例 1212 ：字体颜色效果：字体颜色效果<Black, FONT COLOR="Black">Black, Olive,Olive,Teal, Teal, Red, Red, Blue,Blue,Maroon, Maroon, Navy,Navy,Gray, Gray, Lime, Lime, Fuchsia, Fuchsia, White,White,Green, Green, Purple,Purple,Silver, Silver, Yellow,Yellow,<AquaFONT COLOR="Aqua ">Aqua

3030

关于文字和段落的标记关于文字和段落的标记字符实体字符实体 ((Entities) Entities)

&#; #=&#; #= 字符实体名称或者字符实体名称或者 ascii ascii 值值例如例如 && & & < << < > >> > " "" "

3131

关于文字和段落的标记关于文字和段落的标记文字的对齐文字的对齐 ((Alignment) Alignment)

<hn align=#>...</hn> <hn align=#>...</hn> ... #=left, center, ... #=left, center,

rightright <<center>...</center> center>...</center>

文字的分区文字的分区 ((Division)Division) 对齐对齐 <<div align=#> ... </div>div align=#> ... </div> #=left, center, right#=left, center, right

3232

列表（列表（ LISTLIST ））

有序列表有序列表 <<ol><li>...</ol>ol><li>...</ol> 如：如： <<ol>ol>

<li>Today<li>Today

<li>Tommorow<li>Tommorow

</ol> </ol> 效果：效果： 1. 1. Today Today

2. Tommorow 2. Tommorow

3333


定制有序列表表中的序号定制有序列表表中的序号 <<li type=#> li type=#>

#=A, a, I, i, 1#=A, a, I, i, 1 AA ：：大写字母大写字母 aa ：：小写字母小写字母 II ：：罗马字母罗马字母 II ：：小写罗马字母小写罗马字母 11 ：数字：数字

3434


定制有序列表表中的序号的起始值定制有序列表表中的序号的起始值 <<ol start=#> #=numberol start=#> #=number

<ol start=5><ol start=5>

<li type=A>ONE-ONE<li type=A>ONE-ONE

<li>ONE-TWO<li>ONE-TWO

<ol start=10><ol start=10>

<li>TWO-ONE<li>TWO-ONE

<li type=i>TWO-TWO<li type=i>TWO-TWO

</ol></ol></ol></ol>

3535


定义列表定义列表 ((Definition lists)Definition lists) <dl><dt>...<dd>...</dl><dl><dt>...<dd>...</dl>如：如： <<dl>dl> <dt>Today<dt>Today <dd>Today is yesterday.<dd>Today is yesterday. <dt>Tomorrow<dt>Tomorrow <dd>Tomorrow is today.<dd>Tomorrow is today. </dl> </dl> Today Today

Today will be yesterday. Today will be yesterday. Tomorrow Tomorrow

Tomorrow will be today. Tomorrow will be today.

3636

HTMLHTML 的链接的链接

用用 HTMLHTML 建立链接：建立链接：链接的种类：链接的种类：

链接到任何一个链接到任何一个 webweb 页面；页面；通过不同的规程链接到不同的站点，即通过通过不同的规程链接到不同的站点，即通过 URLURL 来来

进行链接；进行链接；链接到本机中的一个文件；链接到本机中的一个文件；链接到同一个文件的不同部分；链接到同一个文件的不同部分；链接到不同文件的指定部分。链接到不同文件的指定部分。

3737

HTMLHTML 的链接的链接用用 HTMLHTML 建立链接：建立链接：

基本的格式：基本的格式：<<A HREF=“URLA HREF=“URL或文件名”或文件名” > > 显示的文字显示的文字 </</A>A>

如：如： <<A HREF=“http://www.zjut.edu.cn”A HREF=“http://www.zjut.edu.cn”> > 浙江工业大学浙江工业大学 <<//A>A>

<<A HREF=“computer_center.html”>A HREF=“computer_center.html”> 计算机技术中心计算机技术中心 </</A>A>

3838


用用 HTMLHTML 建立链接：建立链接：锚接（锚接（ archerarcher ）：）：链接到文件中某个位置；链接到文件中某个位置；必须在要链接的地方设一个标记：必须在要链接的地方设一个标记：

<<A NAME=“A NAME=“锚名”锚名” >>这个标记不需要配对；这个标记不需要配对；

在同一个文件用以下格式进行链接：在同一个文件用以下格式进行链接：<<A HERE=“#A HERE=“#被链接的锚名”被链接的锚名” >>

不同文件中用以下格式进行链接不同文件中用以下格式进行链接 <<A HERE=“A HERE=“ 文件名文件名 ## 被链接的锚名”被链接的锚名” >>

3939


用用 HTMLHTML 建立链接建立链接：：注意绝对路径和相对路径的差别注意绝对路径和相对路径的差别对外部对外部 webweb 的文件一般采用绝对路径；的文件一般采用绝对路径；对本身主页所链接的本地文件，可采用相对对本身主页所链接的本地文件，可采用相对路径，只要保持这些文件的相对存放位置不路径，只要保持这些文件的相对存放位置不变，就不容易出现断链的情况。变，就不容易出现断链的情况。

用页面编辑器一般产生绝对路径，如用页面编辑器一般产生绝对路径，如file:///C|/Program file:///C|/Program Files/HTMLFiles/readme.htmlFiles/HTMLFiles/readme.html

4040

HTMLHTML 的链接的链接文件若使用绝对路径，则文件复制后，必须保持文件若使用绝对路径，则文件复制后，必须保持路径不变；路径不变；

使用相对路径，就较少出现断链的现象；使用相对路径，就较少出现断链的现象；若所有文件都在一个目录中，则可以简单地用文若所有文件都在一个目录中，则可以简单地用文

件名进行链接，如：件名进行链接，如：<<A HREF="part02.html">Part02</A>A HREF="part02.html">Part02</A>

若将此文件复制到若将此文件复制到 A:\winA:\win目录，则可解释为：目录，则可解释为：file:///A|/Win/part02.htmlfile:///A|/Win/part02.html

若将此文件复制到若将此文件复制到 C:\My DocumentC:\My Document目录，则目录，则又解释为：又解释为：file:///C|/My Document/part02.htmlfile:///C|/My Document/part02.html

4141

HTMLHTML 的链接的链接若被链接文件直接在当前目录的子目录下，如若被链接文件直接在当前目录的子目录下，如 folder01folder01 ，，

则可写为：则可写为：<<A HREF="folder01/part02.html">Part02</A>A HREF="folder01/part02.html">Part02</A> 但不要写为：但不要写为：<<A HREF="/folder01/part02.html">Part02</A>A HREF="/folder01/part02.html">Part02</A> 可以写为：可以写为：<<A HREF="./folder01/part02.html">Part02</A>A HREF="./folder01/part02.html">Part02</A>

4242


开一个新的开一个新的 ((浏览器浏览器 )) 窗口窗口 ((Target Target Window) Window) <a href="URL" target="Window_Name"> ... <a href="URL" target="Window_Name"> ...

</a></a>

如：如：<<a href="samp/window.html" a href="samp/window.html"

target="window_name">target="window_name">

开一个新窗口开一个新窗口 !!</</a> a>

4343

HTML HTML 语法示例语法示例 11<HTML> <HEAD>

<TITLE> 欢迎学习 HTML</TITLE> </HEAD> <BODY>

<H3> 我的第一个 HTML 文档 </H3> </BODY></HTML>

<HTML> <HEAD>

<TITLE> 欢迎学习 HTML</TITLE> </HEAD> <BODY>

<H3> 我的第一个 HTML 文档 </H3> </BODY></HTML>

运行结果

4444

浏览器和编辑器浏览器和编辑器

Netscape 的 Navigator Microsoft 的 Internet ExplorerNetscape 的 Navigator Microsoft 的 Internet Explorer

• 浏览 HTML 文件的工具

• 编辑 HTML 文件的工具

Microsoft FrontPage Macromedia Dreamweaver记事本……

Microsoft FrontPage Macromedia Dreamweaver记事本……

4545

HTML HTML 开发开发

HTML HTML 标记的格式组成：标记的格式组成：

<HTML> . . . </HTML>

<HTML> . . . </HTML>

• HTML 标记用于标记 HTML 文档的开始和结束

•元素 - 标识标记•属性 - 描述标记

•值 - 分配给属性的内容<ELEMENT ATTRIBUTE = value><ELEMENT ATTRIBUTE = value>

4646

HTML HTML 文档的结文档的结构构

HTML 部分文档头部分正文部分

<HTML><HEAD>

<TITLE> 欢迎进入 HTML 世界 </TITLE></HEAD><BODY>

 这会是一种很有趣的体验 </BODY>

</HTML>

<HTML><HEAD>

<TITLE> 欢迎进入 HTML 世界 </TITLE></HEAD><BODY>

 这会是一种很有趣的体验 </BODY>

</HTML>

基本结构：

运行结果

4747

段落标记段落标记<HTML>

<HEAD><TITLE> 欢迎使用 HTML</TITLE>

</HEAD><BODY BGCOLOR = lavender>

 这会是一种很有趣的体验 另一个段落元素

</BODY></HTML>

<HTML><HEAD>

<TITLE> 欢迎使用 HTML</TITLE></HEAD><BODY BGCOLOR = lavender>

 这会是一种很有趣的体验 另一个段落元素

</BODY></HTML>

运行结果

4848

换行标记

<HTML><HEAD>


 这会是一种很有趣的 体验 另一个段落元素

</BODY></HTML>

<HTML><HEAD>


 这会是一种很有趣的 体验 另一个段落元素

</BODY></HTML>

运行结果

4949

使用对齐属性使用对齐属性

<HTML><HEAD>

<TITLE> 学习 HTML</TITLE></HEAD><BODY BGCOLOR=lavender>

 这会是一种很有趣的体验 </BODY>

</HTML>

<HTML><HEAD>

<TITLE> 学习 HTML</TITLE></HEAD><BODY BGCOLOR=lavender>

 这会是一种很有趣的体验 </BODY>

</HTML>

运行结果

右对齐

Left ：左对齐Center ：居中Right ：右对齐

5050

在在 HTMLHTML 文档中使用特殊字符文档中使用特殊字符……<TD width="100%" height=18>Userid 用户名 / 口令。 </TD>……

……200>189…… > 号

……20<189…… < 号

……" 风驰电掣 &quot…… “ 号

……x&gty;&x=120…… 与符号

……©CopyRight 版权所有…… © 版权符号

……®APTECH…… ® 注册商标

5151

1 、职位：关于可申请的职位……

2 、培训资源：本学院美术学位的培训资源请单击此处查看视频……

3 、联盟：我们有许多联盟……

1 、职位：关于可申请的职位……

2 、培训资源：本学院美术学位的培训资源请单击此处查看视频……

3 、联盟：我们有许多联盟……

超链接简介超链接简介 2-12-1

5252

超链接简介超链接简介 2-22-2链接类型•内部链接

到同一文档内或同一网站内的其他部分的链接

到同一文档内或同一网站内的其他部分的链接

•外部链接

到其他网站或服务器上的页面的链接。

到其他网站或服务器上的页面的链接。

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

Web站点 1 Web站点 2

5353

创建超链接创建超链接要创建超链接，必须指定两个部分

要链接的文件的完整地址或 URL要链接的文件的完整地址或 URL

热点

热点可以是一行文字甚至一个图像热点可以是一行文字甚至一个图像

http://www.sina.com.cnC:\internet\index.htmlservice/index.html

绝对 URL文件的完整地址相对 URL

5454

HREHREFF

<A HREF = protocol://host.domain:port/path/filename> Hypertext </A>

•Protocol 是协议类型 http– 超文本传输协议 gopher– 搜索文件 telnet– 打开

telnet 会话 ftp– 文件传输协议 mailto– 发送电子邮件 • Host.domain 是服务器的 Internet 地址•Port 是目标服务器的端口号•Hypertext 是用户必须单击才能激活链接的文本或图像

<A HREF = protocol://host.domain:port/path/filename> Hypertext </A>

•Protocol 是协议类型 http– 超文本传输协议 gopher– 搜索文件 telnet– 打开

telnet 会话 ftp– 文件传输协议 mailto– 发送电子邮件 • Host.domain 是服务器的 Internet 地址•Port 是目标服务器的端口号•Hypertext 是用户必须单击才能激活链接的文本或图像

语法为 :

5555

链接到其他文档链接到其他文档<HTML> <HEAD> <TITLE> 使用链接 </TITLE> </HEAD> <BODY> 本页的所有内容都讲述关于如何创建到文档的链接 <A HREF = Doc2.html> 单击此处查看文档 2</A></BODY></HTML>

<HTML> <HEAD> <TITLE> 使用链接 </TITLE> </HEAD> <BODY> 本页的所有内容都讲述关于如何创建到文档的链接 <A HREF = Doc2.html> 单击此处查看文档 2</A></BODY></HTML>

<HTML> <HEAD> <TITLE> 文档 2</TITLE> </HEAD> <BODY> 这是文档 2 。单击文档 1 中的超链接后将显示本页。 <A HREF= Doc1.html> 返回 </A> </BODY></HTML>

<HTML> <HEAD> <TITLE> 文档 2</TITLE> </HEAD> <BODY> 这是文档 2 。单击文档 1 中的超链接后将显示本页。 <A HREF= Doc1.html> 返回 </A> </BODY></HTML>

5656

链接到同一文档的各个部分链接到同一文档的各个部分<HTML> <HEAD><TITLE> 使用链接 </TITLE></HEAD> <BODY> <A HREF = #Internet> 互联网 </A> <A HREF = #HTML>HTML 简介 </A> <A HREF = #Consistency> 多样化和统一性 </A> <A name = Internet> 互联网 </A> 互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过 TCP/IP 传输协议绑定在一起。 <A name = HTML>HTML 简介 </A> 超文本标记语言是 Web 用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。 SGML 是一种文档格式语言表示方法。 <A name = Consistency> 多样性和统一性 </A> 万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 </BODY></HTML>

<HTML> <HEAD><TITLE> 使用链接 </TITLE></HEAD> <BODY> <A HREF = #Internet> 互联网 </A> <A HREF = #HTML>HTML 简介 </A> <A HREF = #Consistency> 多样化和统一性 </A> <A name = Internet> 互联网 </A> 互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过 TCP/IP 传输协议绑定在一起。 <A name = HTML>HTML 简介 </A> 超文本标记语言是 Web 用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。 SGML 是一种文档格式语言表示方法。 <A name = Consistency> 多样性和统一性 </A> 万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 </BODY></HTML>

单击

5757

链接到另一文档中某个特定位置链接到另一文档中某个特定位置<HTML> <HEAD> <TITLE> 主文档 </TITLE> </HEAD> <BODY> <A HREF=sg_1.12.html#Internet> 互联网 </A> <A HREF= sg_1.12.html#HTML>HTML简介 </A> <A HREF=sg_1.12.html#Consistency> 多样性和统一性 </A> </BODY></HTML>

<HTML> <HEAD> <TITLE> 主文档 </TITLE> </HEAD> <BODY> <A HREF=sg_1.12.html#Internet> 互联网 </A> <A HREF= sg_1.12.html#HTML>HTML简介 </A> <A HREF=sg_1.12.html#Consistency> 多样性和统一性 </A> </BODY></HTML>

单击

5858

使用电子邮件使用电子邮件如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入 mailto 值。<A HREF="mailto:[email protected]"> 我的电子邮件 </A>

如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入 mailto 值。<A HREF="mailto:[email protected]"> 我的电子邮件 </A>

5959

在网站上导航在网站上导航•线性布局•分层布局•图像映射•超链接•子页面•目录•“后退”和“前进”按钮

6060

线性布局线性布局

- - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - -

遵循线性结构遵循线性结构页面之间顺序链接页面之间顺序链接

6161

分层布局分层布局主页具有到其他多个页面的链接主页具有到其他多个页面的链接每个页面都有一个到主页的链接每个页面都有一个到主页的链接

- - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - -

6262

总结总结

• HTMLHTML 命令称为标记，用于控制命令称为标记，用于控制 HTMLHTML 文档文档的内容和外观。的内容和外观。

• 基本的基本的 HTMLHTML 语句语句• 掌握使用掌握使用 HTMLHTML 标记创建超链接。标记创建超链接。

1 简介和超链接 html 第一部分. 2 html 初步 html 的优点 ： html 的优点 ： html...

Documents

1 简介和超链接 html 第一部分. 2 html 初步 html 的优点： html 的优点： html...