PowerPoint 演示文稿

Transcript PowerPoint 演示文稿

HTML语言基础知识及使用
本次课内容：
一、引入新课——网页源文件及考证试题
二、HTML语言
（一）什么是HTML语言
（二）HTML文档的结构
（三）HTML文档的特点
（四）查看HTML文档的方法
三、HTML标签
（一）什么是HTML标签
（二） HTML标签的格式
（三）HTML标签的特点
（四）HTML的颜色
四、HTML标签的使用
（一）文档标签
（二）排版标签
（三）链接标签
二、HTML语言
（一）什么是HTML语言
全写： HyperText Mark-up Language
译名：超文件注标识语言（译名之一）
简释：一种为普通文件中某些字句加上标识的语言，其目的在于运用标签（tag）
使文件达到预期的显示效果。
HTML 的格式非常简单，只是由文字及标签组合而成，于编辑方面，任何文字编
辑器都可以，只要能将文件另存成 ASCII 纯文字格式即可
（二）HTML文档的结构
HTML文档一般由两部分组成：
1 文档所要表达的内容信息；
2 一系列HTML标签。
HTML的标签分单标签和成对标签两种。
成对标签是由首标签<标签名>
和尾标签</标签名>组成的，成对标签的作用域
只作用于这对标签中的文档。单独标签的格式<标签名>，单独标签在相应的位置插入
元素就可以了，大多数标签都有自己的一些属性, 属性要写在始标签内，属性用于进
一步改变显示的效果, 各属性之间无先后次序，属性是可选的，属性也可以省略而采
用默认值;其格式如下：
<标签名字属性1 属性2 属性3 … >内容</标签名字>
作为一般的原则，大多数属性值不用加双引号。但是包括空格、％号，＃号等特殊字符的属性
值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。如：
字体设置

单独标签
是指标签单独出现，只有起始标签没有终结标签。
例如 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>
html文件开始
<head>
文件头开始
<title>
文档标题
</title>
</head>
文件头结束
<body> 文件体开始
文档的主要内容
</body> 文件体结束
</html>
html文件结束
返回
注意：<html> 网页文件格式。
<head> 标头区 : 记录文件基本资料，如作者、编写时间。
<title> 标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看
到标题。
<body> 本文区 : 文件资料，即在浏览器上看到的网站内容。
（三）HTML文档的特点
1 通用性
2 简单性、
3 可扩展性、
4 平台无关性、
5 编辑器无关性
（四）查看HTML文档的方法
查看一个网页HTML源代码的方法是:打开一个网页之后，
点击浏览器上的菜单“查看”，选择下面的“源文件”
选项，即可打开一个记事本文件，其中就是这个网页所
所有代码。
可以将鼠标放置到网页上的任何位置（只要位于没有链
接、图片处，最好是网页中的空白区域），点击鼠标右
键，选择其中的“查看源文件”即可。
三、HTML标签
（一）什么是HTML标签
HTML标签是由 < 和 > 所括住的指令，
主要分为 : 单标签指令（ < 起始标签> ）、双标签指令 ( 由 < 起始标签
>，< / 结束标签>所构成 ) 。
（二） HTML标签的格式
HTML标签的格式是：
<标签名> 相应内容 </标签名>
如：<title> 网页的标题 </ title >
（三）HTML标签的特点
•任何标签皆由"<"及">"所围住，如 
•标签往往成对出现
•标签名与小于号之间不能留有空白字符。
•某些标签要加上属性，某些则不必。如 Hello
如 <hr>
•属性只可加于起始标签中。
•在起始标签之标签名前加上符号"/"便是其终结标签，如 
•标签字母大小写皆可。
•不同标签之间可以嵌套，但不能交叉。
最后一个特点如何理解？请举例说明。
（四）HTML的颜色
HTML 的颜色表示可分两种：
•以命名方式定义常用的颜色，如 RED。
•以 RGB 值表示，如 #FF0000 表示 red。
命名方式涵括的色种不多亦不甚方便，较少采用，以下介绍 RGB 值的原
理：
於应用时常在每个 RGB 值之前加上符号 # 以示分别，但不加亦可。
具体的颜色的表示参见另一个网页文件
思考题：
HTML中“#9ACD32”表示什么颜色？“#800080”呢？
“#90EE90”呢？
四、HTML标签的使用
（一）文档标签
<html> <head> <title> <body>
上述标记中只有<BODY>具属性设定。
■ <BODY> 之属性设定：
例子： <BODY text="#000000" link="#0000FF" alink="#FF0000"
vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2
topmargin=2 bgproperties="fixed">
•text=“#000000”
用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即
text=“black” 。各种颜色的值及名称可参考【HTML的颜色】。
•link="#0000FF"
设定一般文字属性颜色。
•alink="#FF0000"
设定刚按下时文字属性颜色。
•vlink="#0000FF"
设定属性后的颜色。（被按过）。
•background="bg1.gif"
设定背景墙纸。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。
•bgcolor="#FFFFFF"
设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。
•leftmargin=2
设定整份文件显示画面的左方边沿空间，单位为像素。『只适用于IE』
•topmargin=2
设定整份文件显示画面的上方边沿空间。『只适用于IE』
•bgproperties="fixed"
固定背景墙纸，当卷动文字时墙纸不会跟著卷动。『只适用于IE』
标记及属性之字母大小都可以。
（二）排版标签
<CENTER> ； ； ； ； <HR> ；
：
像很多电脑语言一样，HTML 文件亦提供注解功能。浏览器会忽略此标
记中的文字（可以是很多行）而不作显示，一般使用目的：
•为文中不同部份加上说明，方便日后修改。
这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同
事这部分做什么、那部分做什么。
例子：

•用作版权声明。
假如你不希望别人使用或复制你的网页，可加上警告字眼。
例子：

 ：
称为段落标记。作用：为字、画、表格等之间留一空白行。
本来是一围堵标记，标于一段落的头尾，但从 HTML 2.0
开始己不需要作结尾。
 的常用属性align 表示段落文字的对齐方式：
如：
•align="center"
可选值：right, left, center。
内定值： align="left"
例子：
原
始
码
Here is the text for my paragraph. It does't matter how long it is,
how many space are between the words or when I decide to hit the return key.
It will create a new paragraph only when I begin the tag with another one.
Here's the next paragraph.
显
示
结
果
Here is the text for my paragraph. It does't matter how long it is, how many
space are between the words or when I decide to hit the return key. It will create
a new paragraph only when I begin the tag with another one.
Here's the next paragraph.
 ：
 称为换行标签。作用：令字、画、表格等显示于下一行。
由于浏览器会自动忽略原始码中空白和换行的部分，这令到 
成为最常用的标记之一。因为无论你在原始码中编好了多漂亮的
文章，若不适当地加上换行标签或段落标签，浏览器只会将它显
示成一大段。
错误示范：（邮局可不会接受一行过的地址）
原
始
码
显
示
结
果
566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America
566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America
正确例子：
原 566 E Boston Post RD
始 Mamaroneck NY 10543-9982
码 United States of America
显 566 E Boston Post RD
示 Mamaroneck NY 10543-9982
结 United States of America
果
<HR> ：
<HR>称为水平线。作用：插入一条水平线。
<HR> 之属性修改：
以： <HR align=“LEFT” size=“2” width=“70%” color=“#0000FF” noshade> 为例。
noshade 表示实线（无阴影）
•align="LEFT"
设定线条置放位置，可选择：left；right；center 三种设定值。
•size="2"
设定线条厚度，以像素作单位，内定为 2。
•width="70%"
设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为 100%。
•color="#0000FF" 『只适用于IE』
设定线条颜色，内定为黑色。 #0000FF 代表蓝色，亦可以采用颜色的名
称，即 text="blue" 。
•noshade
设定线条为平面显示，若删去则具阴影或立体，这是内定值。
例子：
原 <HR>
始 <HR align="LEFT" size="4">
码 <HR align="LEFT" size="2" width="70%" color="#0000FF" noshade>
<HR align="LEFT" size="4" width="70" color="#008000">
显
示
结
<CENTER> ：
<CENTER>称为居中标记。作用：令字、画、表格等显示于中间。
例子：
原
始
码
显
示
结
果
<CENTER>Chris's First Homepage</CENTER>
<CENTER>What's new</CENTER>
<CENTER>My profile</CENTER>
Chris's First Homepage What's new My profile
其他的排版标签：
<PRE> ； <DIV> ； ； ；
（三）链接标签
1 链接的概念
链接又叫超链接，超链接是从一个网页指向另一个目的端的链接。这个目的端
通常是另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件或一个
程序。链接是HTML中最重要的功能！因为HTML拥有链接的功能，使你能接
上INTERNET、WWW ……享受多姿多彩的网络世界。
<A> ：
<A> 称链接标签，由 <A> 与 </A> 所围的文字、图片等等可以成为一个链接。
<A> 的一般属性设定：
例如 <a href="index.html" name="hello" target="_top">
相关属性 :
· href 链接的URL位址或文件
· name名称
· target 指定链接到的URL位址或文件显示于那一个视窗 ( 可和 <FRAME> 视窗标记配合
使用或开新的视窗 )
•href="index.html"
这属性不能与另一属性 name 同时使用，使用这属性才能造成可按的链接。
•当作为一外部属性时： href 所设定的是该链接所要连到的文件名称，若该
文件与此 html 档不是同在一目录请加上适当的路径，相对绝对皆可。
•当作为一内部属性时： href 所设定的是该链接所要连到的同文件内参考点
或指定文件之参考点，且不要包围任何字画只加上结束标示 </a>便可以，
例如 <a href=“#there”></a> 、 <a href=“index.html#there”></a> 及
<a href=“http://www.school.net.hk/~chris55/index.html#there”></a>
其中 there 便是参考点，并于其前加上符号 # 以作识别，参考点由下一个属性
name 事先于文件中埋下。
基本上链接分成 :
外部链接——链接至网络的某个URL网址或文件，可参考考网络链接方式。
内部链接——链接同HTML文件的某个区段。<a>和</a>之间不要包围任何文字和图像。
例子一: 外部链接
原
始
码
<a href="../../../../index.html">网络教室首页</a>
<a href="http://tech.china.com/zh_cn/"><img alt="科技频道" border=5 height=31 width=88
src="http://tech.china.com/zh_cn/image/techlogo.gif"></a>
<a href="http://tech.china.com/zh_cn/"><img alt="科技频道" border=0 height=31
src="http://tech.china.com/zh_cn/image/techlogo.gif" width=88></a>

显
示
结
果
网络教室首页
退出
例子二（内部连结）：请到 PenPal Garden 的 FAQ Page 刻体
验一下何为内部连结。原始码
原
始
码
<a name="test"></a>
<a href="#test">本页的内部连结</a>
 <a href="http://www.school.net.hk/~chi/faq.html#14">跳到 PenPal Garden 的
FAQ 部分</a>
显
示
结
果
本页的内部连结
跳到 PenPal Garden 的 FAQ 部分
•name="hello"
这属性是为文件埋下参考点，作为被属性，不会被
显示。所以说造成一个内部连结要使用两次 <A>
属性标记。一个使用属性 name 事先於文件中埋下
一参考点，另一个使用属性 href 连到这个参考点。
•target=“_top”
这个属性设定链接被点击后，结果所要显示的视窗。
可选值为： _blank, _parent, _self, _top, 框窗名称。
• target=“框窗名称”
这只运用於框架中，若被设定则属性结果将显示于该“框窗
名称”之框窗中，框窗名称是事先由框架标记所命名。
•target="_blank" 或 target="new"
将属性的画面内容，开在新的浏览视窗中。
•target="_parent"
将属性的画面内容，当成文件的上一个画面。
•target="_self"
将属性的画面内容，显示在目前的视窗中。(内定值)
•target="_top"
将框架中属性的画面内容，显示在没有框架的视窗中。（即
除去了框架)

PowerPoint 演示文稿

Transcript PowerPoint 演示文稿

Directory