HTML 第一讲

HTMLHTML 第一讲第一讲

主讲：吴涛

硅谷动力网络学院

专业铸造品质知识成就未来 - 硅谷动力网络学院

作者仅授权硅谷动力网络学院发表该系列教程 ,版权归作者本人与网络学院拥有 .任何个人与网站转载请联系 [email protected]

http://www.enet.com.cn/eschool/

http://www.enet.com.cn/eschool/

HTMLHTML 概念概念

• HTML （ Hyper Text Markup Language 超文本标识语言）– 是一种用来制作超文本文档的

简单标记语言。– 用 HTML 编写的超文本文档称

为 HTML 文档。

HTMLHTML 文档的编写方法文档的编写方法

1. 手工直接编写– 记事本等，存成 .htm .html 格

式2. 使用可视化 HTML 编辑器– Frontpage 、 Dreamweaver 等

3. 由 Web 服务器（或称 HTTP 服务器）一方实时动态地生成。

网页文件命名网页文件命名

1. *.htm 或 *.html

2. 无空格3. 无特殊符号（例如 & 符号），

只可以有下划线“ _” ，只可以为英文、数字

4. 区分大小写5. 首页文件名默认为： index.htm

或 index.html

HTML HTML 文件结构文件结构

<html>...</html><head>...</head><body>...</body> • 元素：是 HTML 语言的基本部分。

元素总是成对出现，每一对元素一般都有一个开始的标记（如 <body> ），也有一个结束的标记（如 </body> ）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。

HTML HTML 文件结构文件结构(Document Structures) (Document Structures)

– <HTML> <HTML> • <HEAD><HEAD>

– <title></title><title></title>– <meta><meta>

• </HEAD></HEAD>• <BODY><BODY>

– HTML HTML 文件的正文文件的正文• </BODY></BODY>

– </HTML></HTML>

第一张网页（第一张网页（ 01.htm01.htm ））

<html>

<head>

<title>my first page</title>

</head>

<body>

This is my first homepage!

</body>

</html>

基本组成部分——基本组成部分——HTMLHTML 元素属性元素属性

• HTML 元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的 < > 内，并且和元素名之间有一个空格分隔；属性值用“”引起来。

第二张网页（第二张网页（ 02.htm02.htm ））

<html> <head> <title>my first page</title> </head> <body> <p align="center">This is my

first homepage!</p> </body></html>

HTMLHTML 基本结构的基本结构的有关元素和元素属性有关元素和元素属性

• HEAD 元素—— 1 <head> 元素出现在文档的开头部分。<head> 与 </head> 之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

• <title>

<title> 元素定义 HTML 文档的标题。 <title> 与 </title> 之间的内容将显示在浏览器窗口的标题栏。


• HEAD 元素—— 2• <meta> 元素 • <meta> 元素下面可以插入很多很

有用的元素属性。下面介绍四种：– <meta name="keywords" conte

nt="study,computer"> • 用来标记搜索引擎在搜索你的页

面时所取出的关键词。


• HEAD 元素—— 3• <meta> 元素 – <meta name="author" content=

“wutao"> – 用来标记文档的作者。


• HEAD 元素—— 4• <meta> 元素 – <meta http-equiv=“Content-Ty

pe” content=“text/html; charset=gb2312”>

– 用来标记你的页面的解码方式。


• HEAD 元素—— 5• <meta> 元素 – <meta http-equiv=“refresh” con

tent=“5;URL=http://www.enet.com.cn/eschool”>

– 用来自动刷新网页

练习（练习（ 03.htm03.htm ））• 编写一个网页，要求 3 秒钟后自动跳转到硅谷动

力学院的网站。<html> <head> <title>my first page</title> <meta http-equiv=“refresh” content=“3;URL=

http://www.enet.com.cn/eschool”> </head> <body> <p align=“center”> 三秒钟后本网页将自动跳转

到硅谷动力网络学院首页 </p> </body></html>

<body><body> 元素及元素属性——元素及元素属性——11

• <body> 元素表明是 HTML 文档的主体部分。在 <body> 与 </body>之间，通常都会有很多其它元素；这些元素和元素属性构成 HTML文档的主体部分。


<body> 元素中有下列元素属性： – (1)bgcolor• bgcolor 属性标志 HTML 文档的

背景颜色。如： bgcolor="#CCFFCC" 。• 例： 04.htm

HTMLHTML 对颜色的控制对颜色的控制

• HTML 对颜色的控制也有自己的语法。 HTML 使用 16 进制的 RGB 颜色值对颜色进行控制。

• 16 进制的数码有 : 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

颜色颜色名和 RGB 值黑色 Black=”#000000”

银色 Silver=”#c0c0c0”

红色 Red=”#ff0000”

蓝色 Blue=”#0000ff”

白色 White=”#ffffff”

黄色 Yellow=”ffff00”

绿色 Green=”#00ff00”

海蓝色 Aqua=”#00ffff”

常见颜色的代码常见颜色的代码


• <body> 元素中有下列元素属性： – (2)background• background 属性标志 HTML 文

档的背景图片。如： background=“images/bg.gif" 。• 可以使用的图片格式为 GIF ， JP

G

例： 05.htm 、 06.htm


• <body> 元素中有下列元素属性： – (3)bgproperties=fixed• bgproperties=fixed 使背景图片成

水印效果，即图片不随着滚动条的滚动而滚动。

例： 07.htm 和 08.htm 对比


• <body> 元素中有下列元素属性： – (4)text• text 属性标志 HTML 文档的正文

文字颜色。如： text=“#FF6666” 。Text 元素定义的颜色将应用于整篇文档。• 例： 09.htm


• <body> 元素中有下列元素属性： – (5) 超级链接颜色• link 、 vlink 、 alink 分别控制普

通超级链接、访问过的超级链接、当前活动超级链接颜色。• 例： 10.htm


• <body> 元素中有下列元素属性： – (6) leftmargin 和 topmargin• 设置网页主体内容距离网页顶端

和左端的距离如： leftmargin="20" topmargin="30“

• 例： 11.htm

Documents

HTML 第一讲