第03章 超文本标记语言HTML.docx
- 文档编号:3329232
- 上传时间:2022-11-21
- 格式:DOCX
- 页数:36
- 大小:377.92KB
第03章 超文本标记语言HTML.docx
《第03章 超文本标记语言HTML.docx》由会员分享,可在线阅读,更多相关《第03章 超文本标记语言HTML.docx(36页珍藏版)》请在冰豆网上搜索。
第03章超文本标记语言HTML
第3章超文本标记语言HTML
HTML语言是网页制作的一种规范,一种标准。
几乎所有的网页都是以HTML格式书写的,它通过标识符来标记网页的各个部分。
本章主要介绍了HTML语言的基本概念、基本结构、语法规则以及使用HTML制作网页的各种标记符的设置方法,包括网页文字和段落的设置、网页中表格的设计、图片和超链接的设置等。
通过本章的学习,用户可以使用HTML制作出精美的网页。
3.1HTML概述
3.1.1HTML的基本概念
1.HTML概述
HTML是HyperTextMarkupLanguage(超文本标记语言)的缩写,它是构成Web页面的基本元素,它是一种规范,一种标准,几乎所有的网页都是以HTML格式书写的。
HTML不是一种编程语言,而是一种描述性的标记语言,它通过标识符来标识网页内容的显示方式,比如图片的显示尺寸,文字的大小、颜色、字体等。
而WWW浏览器的功能就是对这些标记进行解释,显示出文字、图像、动画、媒体等网页内容。
一个HTML文件的后缀名是.html或者是.htm,由于HTML是一个纯文本格式的ASCII文件,因此,用任何文本编辑器都可以编写HTML网页文件。
HTML语言作为一种描述性的标记语言,易学易懂,能够制作出精美的网页效果,其主要功能如下:
(1)格式化文本。
如设置文本字体、字号、颜色以及文本段落、对齐方式等。
(2)创建列表。
把信息用一种易读的方式表现出来。
(3)建立表格。
表格为浏览者提供快速找到需要信息的显示方式,还可以用表格来布局网页。
(4)插入图片。
使网页图文并茂,还可设置图像的各种属性,如大小、边框、布局等。
(5)加入多媒体。
可在网页中加入音频、视频、动画等效果。
(6)添加交互式表单等。
2.标记符
标记符又称标签,它是用来控制网页内容显示效果的。
它在使用时必须用“<>”括起来。
绝大多数标记符都是成对出现的,包括开始标记符和结束标记符。
开始标记符和相应的结束标记符定义了标记符所影响的范围。
结束标记符与开始标记符的区别在于有一个斜线。
标记符是不区分大小写的,但通常约定标记符使用大写字母,这有利于HTML文档的维护。
其格式为:
<标记符>受影响的内容标记符>
3.标记符的属性
标识符仅仅用来标识所显示的内容,但如何控制这些内容,这就需要在标记符后面加上相关的属性来实现。
属性是用来描述标识符标识对象的特征。
在HTML中,所有的属性都放置在开始标记符的尖括号里,属性与标记符之间用空格分隔,属性的值放在相应属性之后,用等号分隔,而不同的属性之间用空格分隔,其格式为:
<标记符属性1=属性值1属性2=属性值2…>受影响的内容标记符>
例如:
表示字体标记有属性color和size。
属性color表示文字的颜色,属性size表示文字的大小。
3.1.2HTML的基本结构
HTML网页文件主要由文件头和文件体两部分内容构成。
其中,文件头是对文件进行一些必要的定义,文件体是HTML网页的主要部分,它包括文件所有的实际内容。
下面是HTML网页的基本结构。
HTML文件开始
文件头开始文件头
文件头结束
文件体开始文件体
文件体结束
HTML文件结束
1.HTML文件标记符
和标记符放在网页文档的最外层,表示这对标记符之间的内容是HTML文件。
处于文件的最前端,表示HTML文件的开始,即浏览器从开始解释。
而则位于文件的最后一行,这表示这一整份的文档都是HTML语法的文档。
2.HEAD文件头标记符
和是HTML文件头标记符,它用来说明文档的整体信息,所标记的内容并不会出现在WWW浏览器所看到的窗体中。…通常与某些标记符一起使用,下面是一些主要的标记符:(1)
(2)
标识符是用来提供文档的媒体信息,目的是便于浏览器识别网页内容或者便于搜索引擎进行查找和分类。
下面介绍几种常用用法:
用来标记网页的解码方式,即说明网页使用的文字和语言。
用来标记搜索引擎在搜索你的页面时所取出的关键字。
用来标记站点的主要内容。
用来标记文档的作者名称,即告诉搜索引擎你的站点的制作的作者。
3.BODY文件体标记符
是HTML文件的主体标记符。网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记符之间,它的格式为:
其主要属性含义如下:
(1)bgcolor:
标识HTML文档的背景颜色,默认设置为白色。
(2)background:
设置HTML文档的背景图片,可以使用的图片格式为GIF,JPG。
(3)text:
标识HTML文档的正文文字颜色,它定义的颜色将应用于整篇文档。
(4)超级链接颜色:
link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。
(5)topmargin和leftmargin:
设置网页主体内容距离网页顶端和左端的距离。
4.第一个网页
【实例3-1】HTML基本结构网页
Thisismyfirsthomepage!
浏览器显示效果如图3-1所示。
3.1.3HTML的语法规则
HTML应遵循以下的语法规则。
(1)HTML文件以纯文本形式存放,扩展名为“.HTM”或“.HTML”。
如果系统为UNIX系统,则扩展名必须为“.HTML”。
(2)HTML不区分大小写,例如和是相同的。
(3)多数HTML标记可以嵌套,但不可以交叉。
例如:
(4)HTML文件一行可以写多个标记,一个标记也可以分多行书写,不用任何续行符号。
例如:
网站开发与网页设计
和
face=”方正黑体”> 网站开发与网页设计
都是正确的,并且显示效果相同,值得注意的是在HTML标记中的一个单词不能分两行书写。
(5)HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。
显示内容如果要换行必须用
标记,换段使用
标记,如果源文件中有多个连续空格,显示时也只显示一个。
若需要多个空格,可使用多个 转义符号。
例如:
的使用
的使用 空 格
显示效果如下:
回车换行符
的使用
段落换行符
的使用
空 格
(6)网页中所有的显示内容都应该受限于一个或多个标记,不应有游离于标记之外的文字或图像等,以免产生错误。
3.2文字与段落标记
3.2.1标题字标记
功能:
用于定义文章内章节标题的显示格式。
格式:
属性:
n用来指定标题文字字号的大小。
n可以取1~6的整数值,数字越小,字号越大。
属性align用来设置标题在页面中的对齐方式,取值有:
left(左对齐)、center(居中)、right(右对齐)、bottom(位于底端)和top(位于顶端)。
【实例3-2】使用标题标记设置标题内容的大小与对齐方式。
第1级标题(H1)
第2级标题(H2)
第3级标题(H3)
浏览器显示效果如图3-2所示。
3.2.2文字格式标记
功能:
设置网页中普通文字的显示效果,如:
文字大小、字体、字型、颜色等。
格式:
属性:
face属性用来设置字体。
当文字为汉字时,格式中的“字体”可以为:
宋体、幼圆、隶书、楷体、黑体、仿宋等。
当文字为英文时,字体名可以为TimesNewRoman等约50种字体。
size属性用来设置文字的大小。
数字的取值范围从1~7,size取1时最小,取7时最大。
color属性用来设置文字的颜色,颜色的取值是十六进制的RGB颜色码或者HTML给定的颜色常量名。
【实例3-3】使用标记的size属性设置文字的大小;face属性设置字体。
color属性设置文字颜色。
设置文字的格式
浏览器显示效果如图3-3所示。 3.2.3字型设置标记 功能: 设置文字的风格,如: 如加粗、斜体、带下划线、上标、下标等。 格式: 这是一组标记,它们可以单独使用,也可以混合使用产生复合修饰效果,常用的标记格式如下: (1)…: 文字显示为粗体。 (2)…: 文字显示为斜体。 (3)…: 文字显示下划线。 (4) 删除字效果。 (5)…: 使文字大小相对于前面的文字增大一级。 (6)…使文字大小相对于前面的文字增大一级。 (7)…: 下标。 (8)…: 上标。 (9) 使文字显示闪烁效果。 (10)…: 以等宽体显示西文字符。 (11)…: 输出引用方式的字体,通常是斜体。 (12)…: 强调文字,通常用斜体加黑体。 (13)…: 强调文字,通常用斜体加黑体。 【实例3-4】使用字型标记设置文字的风格。 黑体 斜体 带下划线 粗体并且斜体 H2o X3 大字体 小字体 浏览器显示效果如图3-4所示。 3.2.4段落标记和强制换行标记 在HTML文档中,无法用多个回车、空格、〈Tab〉键来调整文档段落的格式。 要用HTML的标记来强制换行、分段。 1.段落标记 功能: 段落标记 定义一个新段落的开始,它不但能使后面的文字换到下一行,还可以使两段之间多一空行。 由于一段的结束意味着新一段的开始,所以使用 也可省略结束标记。 格式: 属性: 段落标记 的属性align用来设置段落的对齐方式,其取值可以为left、center或right,分别表示居左、居中、居右,缺省时默认为left。 2.强制换行标记 功能: 强制换行标记 格式: 文字 通常一个段落标记 可以看作是两个强制换行标记 【实例3-5】段落标记与强制换行标记的使用。…或者…:带删除线
通常单独出现,放在一行的末尾,可以使后面的文字、图片、表格等显示于下一行,而又不会在行与行之间留下空行。
。
段落标记
强制换行标记
强制换行标记
浏览器显示效果如图3-5所示。
3.2.5水平线标记
功能:
水平线标记
可以将不同功能的页面内容分隔开,使之整齐明了。
当浏览器执行HTML文件中的标记时,会在此处换行,并加入一条水平线段。
格式:
属性:
属性align设定横线放置的位置,可选择left、right或center。
属性size设定线条粗细,以像素为单位,默认为2。
属性width用于设定线段长度,可以是绝对值(像素为单位),也可以是相对值(百分比为单位)。
属性color用于设定线条颜色,默认值为黑色,颜色可以用相应英文单词或以“#”引导的十六进制数代码来表示。
属性noshade设定线条为平面显示(没有三维效果),若缺省则有阴影或立体效果。
【实例3-6】水平线标记的使用。
水平线
浏览器显示效果如图3-6所示。
3.2.6其它标记
1.分区显示标记
功能:
分区显示标记可以使文本块或一段文字在网页上:
左对齐、居中对齐和右对齐。
格式:
属性:
属性align的取值分别为:
left、center和right。
【实例3-7】分区显示标记的使用。
分区显示标记的应用
居中
center
居左
left
居右
right
浏览器显示效果如图3-7所示。
2.特殊符号标记
浏览器解释HTML文件时,首先根据“<”与“>”来识别HTML标记,然后再确定这两个符号中的内容是否为HTML标记,如果是HTML标记则按其规则解读。
所以,要在网页中显示“<”或“>”,就要使用特殊字符,表3-1介绍了一些特殊字符。
特殊字符
所代替的字符
说明
&
特殊字符的开始
;
特殊字符的结束
Lt
<
大于号
Gt
>
小于号
Quot
“
双引号
nbsp
空格
【实例3-8】特殊符号标记的使用。
这是一个<HTML>标记
它是一种"网页标识语言"
谢 谢
浏览器显示效果如图3-8所示。
3.3列表标记
HTLM语言经常使用列表标记来标识网页,合理的使用列表标记可以起到提纲和格式排序文件的作用。
通常,列表标记分为无序列表标记、有序列表标记和自定义列表标记,下面对它们进行介绍。
3.3.1无序列表标记
功能:
无序列表就是项目各条列间并无顺序关系,仅仅利用条列来呈现资料,此种无序列表标记,在各条列前面均有一符号以示区隔。
格式:
属性:
无序列表使用
- 和
type属性表示在每个项目前显示符号类型,共有三种选择:
type="disc"时,列表符号为“●”(实心圆);type="circle"时,列表符号为“○”(空心圆);type="square"时,列表符号为“■”(实心方块)。
- 和
- 都可以使用type属性,在
- 中,type属性表示所有列表项使用统一符号类型,在
- 中,type属性表示不同的列表项使用不同的符号类型。
【实例3-9】无序列表标记的使用。
无序列表标记 在<UL>中,type属性的使用
- 列表项目一
- 列表项目二
- 列表项目三
在<LI>中,type属性的使用
DISC CIRCLE SQUARE 浏览器显示效果如图3-9所示。
3.3.2有序列表标记
功能:
有序列表用来设置有前后顺序之分的列表项。
格式:
列表项目一 列表项目二 列表项目三 属性:
有序列表使用
- 和
- 中,type属性表示不同的列表项使用不同的符号类型。
- 标记表示每一个列表项目。
type属性表示在每个项目前显示的序号类型,其值可以为1(阿拉伯数字)、A(大写英文字母)、a(小写英文字母)、Ⅰ(大写罗马字母)、ⅰ(小写罗马字母)。
start属性用来设置序号的开始值,默认值为1。
【实例3-10】有序列表标记的使用。
有序列表标记 - 默认的有序列表
- 默认的有序列表
- 第1项
- 第2项
- 第3项
浏览器显示效果如图3-10所示。
3.3.3自定义列表标记
功能:
用于需要对列表条目进行简短说明的场合。
格式:
- 列表条目一
- 条目一的说明
- 列表条目二
- 条目二的说明
…
属性:
自定义列表使用
- 和
- 标记表示每项每项自定义条目名称,
- 标记表示每条自定义条目的说明,自动向右缩进。
【实例3-11】自定义列表标记的使用。
自定义列表标记 这是一个定义性列表:
- DL标记符
- 代表HTML自定义列表。
- DT标记符
- 表示每个自定义列表项的标题。
- DD标记符
- 用于描述自定义列表项的内容。
浏览器显示效果如图3-11所示。
3.4表格标记
表格在网站开发中应用非常广泛,用户可以通过表格方便灵活的排版,目前很多大型网站也都是借助表格排版。
表格可以把相互关联的信息元素集中定位,使浏览者浏览页面时一目了然。
因此要制作出优秀的网页,就应该熟练掌握