html标记

html标记

显示器变色-日记大全400字

HTML

学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML标记语言也

不例外，同样需要遵从一定的规范。接下来将具体讲解HTML文档的基本格式。

HTML文档的基本格式主要包括文档类型声明、根标记、头部标记、主体

标记，具体介绍如下：

（1）标记

标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML（可扩展超文

本标记语言）标准规范，必需在开头处使用标记为所有的XHTML文档指定XHTML版本和类型，只有这

样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。

（2）标记

标记位于标记之后，也称为根标记，用于告知浏览器其自身是一个HTML文档，

标记标志着HTML文档的开始，标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内

容。

在之后有一串代码“xmlns=""”用于声明XHTML统一的默认命名空间。

（3）标记

标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在标记之后，主要用来封装其他

位于文档头部的标记，例如、、及等，用来描述文档的标题、作者以及和其他文档的

关系等。

一个HTML文档只能含有一对标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

（4）标记

标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频

和视频等信息都必须位于标记内，标记中的信息才是最终展示给用户看的。

一个HTML文档只能含有一对标记，且标记必须在标记内，位于头部标记之

后，与标记是并列关系。

在HTML页面中，带有“”符号的元素被称为HTML标记，如上面提到的、、都

是HTML标记。所谓标记就是放在“”标记符中表示某个功能的编码命令，也称为HTML标签或HTML元素，本书

统一称作HTML标记。

为了方便学习和理解，通常将HTML标记分为两大类，分别是“双标记”与“单标记”。

（1）双标记

双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

该语法中“”表示该标记的作用开始，一般称为“开始标记（starttag）”，“”表示

该标记的作用结束，一般称为“结束标记（endtag）”。和开始标记相比，结束标记只是在前面加了一个关闭符“/”。

（2）单标记

单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

一篇结构清晰的文章通常都有标题和段落，HTML网页也不例外，为了使网页中的文字有条理地显示出来，

HTML提供了相应的标记。

（1）标题标记

为了使网页更具有语义化，经常会在页面中用到标题标记，HTML提供了6个等级的标题，即、、

、、和，从到重要性递减。其基本语法格式如下：标题

文本

该语法中n的取值为1到6，align属性为可选属性，用于指定标题的对齐方式，下面来演示标题标记的使用。

（2）段落标记

在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若

干个段落，而段落的标记就是

。其基本语法格式如下：

段落文本

该语法中align属性为

标记的可选属性，和标题标记~一样，同样可以使用align属性设置段落

文本的对齐方式。

制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了

一系列的标记，这些标记通常都写在标记内，因此被称为头部相关标记。

（1）标记

标记用于定义HTML页面的标题，即给网页取一个名字，必须位于标记之内。一个HTML文档

只能含有一对标记，之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：

网页标题名称

（2）标记

标记用于定义页面的元信息，可重复出现在头部标记中，在HTML中是一个单标记。

/>标记本身不包含任何内容，通过“名称/值”的形式成对的使用其属性可定义页面的相关参数，例如为搜索引擎提供

网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。

（3）标记

一个页面往往需要多个外部文件的配合，在中使用标记可引用外部文件，一个页面允许使用多

个标记引用多个外部文件。其基本语法格式如下：

属性

名

常用属性值描述

hrefURL指定引用外部文档的地址

relstylesheet

指定当前文档与引用外部文档

的关系，该属性值通常为stylesheet，

表示定义一个外部样式表

type

text/css

引用外部文档的类型为CSS样

式表

text/javascript

引用外部文档的类型为

javascript脚本

（4）标记

标记用于为HTML文档定义样式信息，位于头部标记中，其基本语法格式如下：

=”属性值”>样式内容

在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的CSS样式。

多种多样的文字效果可以使网页变得更加绚丽，为此HTML提供了文本样式标记，用来控制网页中文本

的字体、字号和颜色。其基本语法格式如下：

文本内容

标记常用的属性:

属性名含义

face设置文字的字体，例如微软雅黑、黑体、宋体等

size设置文字的大小，可以取1到7之间的整数值

color设置文字的颜色

使用HTML制作网页时，如果想让HTML标记提供更多的信息，例如希望标题文本的字体为“微软雅黑”且居

中显示，此时仅仅依靠HTML标记的默认显示样式已经不能满足需求了，需要使用HTML标记的属性加以设置。其基本

语法格式如下：

内容

在上面的语法中，标记可以拥有多个属性，必须写在开始标记中，位于标记名后面。属性之间不分先后顺序，

标记名与属性、属性与属性之间均以空格分开，任何标记的属性都有默认值，省略该属性则取默认值。

其中align为属性名，center为属性值，表示标题文本居中对齐，对于标题标记还可以设置文本左对齐或右对齐，

对应的属性值分别为left和right。如果省略align属性，标题文本则按默认值左对齐显示。标

题文本

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文

字以特殊的方式显示，常用文本格式化标记如下表所示。

标记显示效果

和

文字以粗体方式显示（XHTML推荐使用strong）

和

文字以斜体方式显示（XHTML推荐使用em）

和

文字以加删除线方式显示（XHTML推荐使用del）

和

文字以加下划线方式显示（XHTML不赞成使用u）

一个引人入胜的网页，往往包含很多图片。合理地使用图文混排，能使枯燥的网页变得丰富多彩。本节将使用

“图像标记”，并通过设置其“相对路径”来制作一个图文混排页面，如下图所示。

HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详

细介绍图像标记以及和它相关的属性。其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，它是img标记的必需属性。

（1）图像的替换文本属性alt

由于一些原因图像可能无法正常显示，比如网速太慢，浏览器版本过低等。因此为页面上的图像加上替换文本

是个很好的习惯，在图像无法显示时告诉用户该图片的内容。这就需要使用图像的alt属性，接下来通过一个案例来演

示alt属性的用法。

注意：各浏览器对alt属性的解析不同，本书这里使用的是Firefox，如果使用其他的浏览器如IE、谷歌等，显示

效果可能存在一定的差异。

各浏览器对alt属性的解析不同，本书这里使用的是Firefox，如果使用其他的浏览器如IE、谷歌等，显示效果可

能存在一定的差异。

多学一招：使用title属性设置提示文字

图像标记有一个和alt属性十分类似的属性title，title属性用于设置鼠标悬停时图像的提示文字，下面来

演示title属性的使用。

（2）图像的宽度、高度属性width、height

通常情况下，如果不给标记设置宽和高，图片就会按照它的原始尺寸显示，当然也可以手动更改图片

的大小。width和height属性用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。

如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。

（3）图像的边框属性border

默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但边框颜色的调整仅

仅通过HTML属性是不能够实现的。

了解了图像的宽度、高度以及边框属性，接下来使用这些属性对图像进行修饰。

（4）图像的边距属性vspace和hspace

在网页中，由于排版需要，有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图

像的垂直边距和水平边距。

（5）图像的对齐属性align

图文混排是网页中的常见效果，默认情况下图像的底部会相对于文本的第一行文字对齐，如下图所示。但是在

制作网页时经常需要实现图像和文字的环绕效果，例如图像居左文字居右等，这就需要使用图像的对齐属性align。

网页中的路径通常分为两种，具体如下：

（1）绝对路径

绝对路径一般是指带有盘符的路径。

例如：

“D:HTML+CSS+JavaScript网页制作案例教程教材案例”，或完整的网络地

址。

例如：

“”。

（2）相对路径

相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

例如：

相对路径的设置分为以下3种：

•图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如。

•图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如

src="images/img01/"/>。

•图像文件位于html文件的上一级文件夹：在文件名之前加入“../”，如果是上两级，则需要使用“../../”，

以此类推，如。

（1）GIF格式

GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎

没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。但GIF只能处理256种颜色。在网

页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。

（2）PNG格式

PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha

透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。同时需要注意的是IE6是可以支持PNG-8

的，但在处理PNG-24的透明时会显示为灰色。通常，图片保存为PNG-8会在同等质量下获得比GIF更小的体积，而半

透明的图片只能使用PNG-24。

（3）JPG格式

JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的

图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。JPG是特别为照片图像设计的文件格式，网页制

作过程中类似于照片的图像比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。

2.3

HTML为这些特殊字符准备了专门的替代代码

特殊字符描述字符的代码

空格符

<小于号<

>大于号>

&和号&

￥人民币¥

©

版权©

®

注册商标®

°摄氏度°

±正负号±

×乘号×

÷除号÷

²

平方2（上标2）²

³

立方3（上标3）³