第一节 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文件的基本结构
基本结构为:
HTML 文件的正文写在这里... ...
例如:
网页的内容
2.2.3 文件结构的格式标记
1、HTML文档标记…(表示文档开始,
表示文档结束。
格式:
HTML文档内容
2、HTML文件头标记
…格式:
头部的内容头部的内容可以是标题名,文本文件地址、创作信息等网页信息说明,对应的相应标记。
标记不是必须的。标记一般与某些标签一起使用:显示与其他文档的关系
嵌入任何附加信息
例如:
没有定义标题的网页通向成功之路
如果没有定义标题,在浏览器的标题栏中显示的是该文件存放的路径和文件名。
3、HTML文件标题标记
格式:
标题的内容不在浏览器窗口中显示,而在浏览器标题栏中显示。
给网页加上标题的原因:
(1)标题概括了网页的内容,能迅速了解网页的大意;
(2)当浏览者将网页加入书签或保存到磁盘上,标题就作为该
网页的标志或文件名;
(3)使用搜索引擎时显示的结果也是网页的标题。
例如:可不使用
标记,而单独使用无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 例如:
Group
alink=blue vlink=green>
中国UNIX用户协会
第三节段落和文字标记
3.1 标题文字标记
在页面中,标题是一段文字内容的核心,所以总是用加强效果来表示。
格式:
属性align用来设置标题在页面中的对齐方式:left(左对齐)、center(居中对齐)、right(右对齐)。
属性n用来指定标题文字的大小。n可以取1~6的数值,取1时文字最大,6时文字最小。
例如:
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
居右
right3.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设置字体
例如:
设置字体
幼园
隶书
楷体
黑体
仿宋
宋体
方正舒体
华文彩云
华文琥珀
Times New
Roman
3.3.3设置字型
例如:
设置字型 物理字体 黑体
物理字体 斜体
物理字体 带下划线
物理字体 标准打印机字体
物理字体
带删除线物理字体 下标
物理字体 上标
逻辑字体 设置字体为强调
逻辑字体 加重文本显示
逻辑字体
代表一个HTML元素的示例文字
逻辑字体 输出示例中的文字
逻辑字体 代表一个键盘按键的文字
逻辑字体 定义变量或者值的文字逻辑字体 定义文字
逻辑字体 输出引用方式的字体
逻辑字体 大字体文本
逻辑字体 小字体文本
指定“字体大小”的标记和“指定字型”的标记的组合使用
今天 天气 真好!
今天天气真好!
3.3.4设置文字的颜色
两种方法:
1、
标记中的text属性受影响的文字例如:
相关主题文本预览