当前位置:文档之家› HTML基础知识

HTML基础知识

第一节 HTML基础知识

1.1HTML(Hypertext Markup Language)超文本标记语言,是一种用于网页制作的排版语言,是web最基本的构成元素,它并非一种编程语言。

1.2HTML的编程环境

HTML文档属于纯文本文件,任何文本编辑器都可以用来制作网页(记事本、写字板等)。但要看到所设计的网页

的效果,就必须安装一个浏览器(Internet Explorer,

Netscape Navigator等)。HTML具有跨平台处理能力,只

要有适当的浏览器,不管使用何种操作系统,都能阅读制

作的HTML文件。

1.3HTML的组成

1、标记

(1)单一标记。只要一个标记就能完成所要表示的功能。如:


,可显示出一条水平的分隔线。

(2)成对标记。需要两个标记组合才能完成所需的功能。如:,及。

2、文字与图形资料

www显示的图形都是以个别的文件存在的,如果要显示图形,就必须用特殊的标记指向图形文件。

3、统一的资源定位器URL

第二节网页的创建及其基本结构

2.1网页的创建过程

2.1.1编辑和保存网页

用最简单的记事本来编辑网页

(1)打开记事本。

(2)创建新文件,并按HTML语言规则编辑。在记事本中输入

HTML语言,如:

我的第一个网页

第一个网页

通向网页制作高手的必由之路

(3)保存网页。(注意要保存成*.html或*.htm。一般来说网站

的首页文件名为index.html或index.htm。)

2.1.2 预览网页

1、在浏览器中可以看到,HTML文件中任何一个以上的空格、回

车、键产生的效果都将被忽略。(多个空格和键只产生一个空格的作用,回车没有任何效果)

2、网页在浏览后有不满意的地方,此时可重新在记事本中打开.html文件修改或者在浏览器中直接打开源文件修改。

2.2 HTML的基本结构

2.2.1 标记及其属性

1、标记

HTML文件由标记和被标记的内容组成。

格式:

<标记>受标记影响的内容

(1)每个标记都用“<”和“>”围住。注意:“<”与标记之

间不能留有空格或其他字符。

(2)在标记名前加上符号“/”便是其结束标记。有的标记不

用结束标记,称为单一标记。

(3)标记字母大小写都可,没有限制。

(4)对同一段要标记的内容,可以用多个标记来共同作用,产

生一定的效果。此时,各个标记间的顺序也是任意的。

2、标记属性

标记只是规定这是什么信息,文本或是图片,但怎样显示或控制这些信息,就需要在标记后面加上相关的属性来表示,每个标记都有一系列的属性。格式:

<标记属性1=属性值属性2=属性值属性3=属性值…>受影响的内容

例如字体标记,有属性size和color等。表示为: 属性示例

注意:

(1)并不是所有标记都有属性。

(2)可以只使用标记的部分或全部属性,属性之间没有先

后顺序。

2.2.2 HTML文件的基本结构

基本结构为:

, <base>, <link>, <isindex>, <meta></p><p></HEAD></p><p><BODY></p><p>HTML 文件的正文写在这里... ...</p><p></BODY></p><p></HTML></p><p>例如:</p><p><html></p><!--/p4--><!--p5--><p><head></p><p><title>网页标题

网页的内容

2.2.3 文件结构的格式标记

1、HTML文档标记…(表示文档开始,

表示文档结束。

格式:

HTML文档内容

2、HTML文件头标记…

格式:

头部的内容

头部的内容可以是标题名,文本文件地址、创作信息等网页信息说明,对应的相应标记。标记不是必须的。

标记一般与某些标签一起使用:

描述文档的标题</p><!--/p5--><!--p6--><p><isindex> 表明可对文档进行检索</p><p><base> 显示文档的原始URL</p><p><nextid> 建立唯一的文档标识</p><p><link> 显示与其他文档的关系</p><p><meta> 嵌入任何附加信息</p><p>例如:</p><p><html></p><p><head>没有定义标题的网页</head></p><p><body></p><p>通向成功之路</p><p></body></p><p></html></p><p>如果没有定义标题,在浏览器的标题栏中显示的是该文件存放的路径和文件名。</p><p>3、HTML文件标题标记<TITLE>…

格式:

标题名

标题的内容不在浏览器窗口中显示,而在浏览器标题栏中显示。

给网页加上标题的原因:

(1)标题概括了网页的内容,能迅速了解网页的大意;

(2)当浏览者将网页加入书签或保存到磁盘上,标题就作为该

网页的标志或文件名;

(3)使用搜索引擎时显示的结果也是网页的标题。

例如:可不使用标记,而单独使用标记。</p><p><html></p><p><title>没有使用HEAD标记

无HEAD标记时,TITLE标记仍然起作用。

语言字符集(Charsets)的信息

content="text/html;charset=#">

#=

us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,

iso-2022-jp, x-sjis, x-euc-jp,

euc-kr, iso-2022-kr,

gb2312, gb_2312-80,

x-euc-tw, x-cns11643-1, x-cns11643-2, big5

例如:

可在 HTML 文件中设置 MIME 字符集信息。

您在浏览主页时,最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。

但是如果 HTML 文件里写明了设置,浏览器就会自动设置语言选项。

否则,您在浏览该主页时,若未正确设置语言选项,显示将可能混乱。

4、HTML文件主体标记…

格式:

网页的内容

的属性

background 设置网页的背景图像。

bgcolor 设置网页的背景颜色。

text 设置文本的颜色。

tink 设置尚未被访问过的超文本链接的颜色,

默认为蓝色。

vlink 设置已被访问过的超文本链接的颜色,默认为蓝色。

alink 设置超文本链接在被访问瞬间的颜色,默认为蓝色。

颜色值为:

#=rrggbb 16 进制数码,或者是下列预定义色彩:

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,

Fuchsia, , Green, Purple, Silver, Yellow, Aqua 例如:

CUUG——China Unix User</p><p>Group

alink=blue vlink=green>

中国UNIX用户协会

CUUG—China Unix User Group

第三节段落和文字标记

3.1 标题文字标记

在页面中,标题是一段文字内容的核心,所以总是用加强效果来表示。

格式:

标题文字

属性align用来设置标题在页面中的对齐方式:left(左对齐)、center(居中对齐)、right(右对齐)。

属性n用来指定标题文字的大小。n可以取1~6的数值,取1时文字最大,6时文字最小。

标记默认显示宋体,会自动插入一个空行。在一个标题行中无法使用不同大小的字体。。

例如:

设置标题

第1级标题(H1)

第2级标题(H2)

第3级标题(H3)

第4级标题(H4)(居左)

第5级标题(H5)(居中)
第6级标题(H6)(居右)

3.2 段落标记

3.2.1 注释标记

用于对代码进行说明,浏览器会忽略此标记中的文字不显示。格式:

注释内容可以在多行上。

3.2.2 强制换行标记


放在一行的末尾,可以使后面的文字、图片、表格的显示在下一行。

格式:

文字

例如:

强制换行标记的使用

学生之家

新闻

学习窗口

健康信息
聊天室

来       信

3.2.3 强制换段标记

换段标记有两个:一个为强制换段标记,另一个为设置段落标记(或称文字对齐标记)。

1、强制换段标记

格式:

文字

一个强制换段标记相当两个强制换行标记。

例如:

2、设置段落标记

格式:

文字

例如:

强制换行标记的使用

学生之家

新    闻        

学习窗口

健康信箱

聊天室

来信

3.2.4 显示预排格式标记

当使用其他编辑工具编排好一段文字后,其中很可能有一些HTML文件不支持的控制符号,如回车、多个空格、键等。如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格

式,可以使用

标记将预先排好的格式保留下来。

格式:

 预先排好的格式 

在预先排好的格式中,仍可使用HTML语言对文字的格式进行设置,如文字的颜色、大小等。

例如:

显示预排格式

唐诗二首

赋得古原草送别

唐.白居易

离离原上草,一岁一枯荣。

野火烧不尽,春风吹又生。

远芳侵故道,晴翠接荒城。

又送王孙去,萋萋满别情。

3.2.5分区显示标记

标记用来排版大块的html段落,也用于格式化表格。

格式:

文本或图像

例如:

分区显示标记的应用

分区显示标记的应用

居中center
居中
center

居左left
居左
left

居右right
居右
right

3.2.6水平线

格式:


color=横线颜色 noshade>

属性:

align 设定横线放置的位置

size 设定线条粗细,以象素为单位,默认为2

width 设定线段长度,可以是绝对值(以象素为单位)或相对值(相对于当前窗口的百分比)。

Color 设定线条的颜色,默认为黑色。颜色代码P31

noshade 设定线条为平面显示,若默认则有阴影或立体效果。

例如:

水平线段标记的应用

水平线








3.3文字标记

3.3.1设置文字的大小

格式:

被设置的文字

属性:

size 用来设置文字的大小。数字的取值范围从1~7,1最小,7最大。

face 用来设置字体。

color 用来设置文字颜色。

例如:

用font标记设置文字的大小

1 号字 size=1

2 号字 size=2

3 号字 size=3

4 号字 size=4

5 号字 size=5

6 号字 size=6

7 号字 size=7

3.3.2设置字体

例如:

</p><p>设置字体</p><p>

幼园

隶书

楷体

黑体

仿宋

宋体

方正舒体

华文彩云

华文琥珀

Times New

Roman

3.3.3设置字型

例如:

设置字型

物理字体 黑体

物理字体 斜体

物理字体 带下划线

物理字体 标准打印机字体

物理字体 带删除线

物理字体 下标

物理字体 上标

逻辑字体 设置字体为强调

逻辑字体 加重文本显示

逻辑字体代表一个HTML元素的示例文字

逻辑字体 输出示例中的文字

逻辑字体 代表一个键盘按键的文字
逻辑字体 定义变量或者值的文字

逻辑字体 定义文字

逻辑字体 输出引用方式的字体

逻辑字体 大字体文本

逻辑字体 小字体文本

指定“字体大小”的标记和“指定字型”的标记的组合使用

今天 天气 真好!

今天天气真好!

3.3.4设置文字的颜色

两种方法:

1、标记中的text属性

受影响的文字

例如:

文本预览