- 新编网站设计与网页制作（Dreamweaver CC + Photoshop CC + Flash CC版）从入门到精通
- 龙马高新教育
- 3554字
- 2020-06-26 08:34:00
1.3 HTML常用标记
本节教学录像时间：34分钟
在HTML文档中，除了具有不可缺少的文档、头部和主体3对标记外，还有其他很多常用的标记，如<P>、<TABLE>、<DIV>和<ADDRESS>等。
1.3.1 链接标记<LINK>
<LINK>定义了文档的关联，在<HEAD>…</HEAD>中可包含任意数量的<LINK>，该标记可能用到的属性见下表。
1.3.2 段落标记<P>
<P>…</P>定义了一个段，是一种块级标记，其结尾标签可以省略。在使用浏览器的样式表单时为了避免出现差错，建议使用结尾标签。
小提示
块级标记是相对于行内标记来讲的，可以换行。在没有任何布局属性作用时，一对块级标记中的内容默认的排列方式是换行排列，而行内标记中的内容默认的排列方式则是同行排列，直到宽度超出包含它的容器宽度时才自动换行。
步骤01 将下述代码输入到记事本中，并保存为“1.html”。
<HTML>
<HEAD>
<TITLE>简单页面</TITLE>
</HEAD>
<BODY>
这是我的第一个段落。
<P>这是我的</P>
<P>第二个段落</P>
</BODY>
</HTML>
步骤02 在IE浏览器中打开保存的文档，即可看到显示效果。可以看到没有使用段落标记的文字同行排列显示，而使用段落标记的文字则是以一个段落的形式换行显示。
所使用的属性是通用属性中的“ID”属性和“LANG”属性，下面分别介绍。
小提示
通用属性适合大多数的标记，其中有“ID”“CLASS”“STYLE”“TITLE”“LANG”和“DIR”等属性。在本章后面讲解几种常用标记时，将先后用到这些通用属性。
1．“ID”属性
“ID”属性为文档中的元素指定了一个独一无二的身份标识，该属性的值的首位必须是英文字母，在英文字母的后面可以是任意的字母、数字和各种符号。使用格式如下。
<P ID=F1>My first Paragraph.</P>
<P ID=F2>My second Paragraph.</P>
以上代码指定了两个段落，其中第1段“My first Paragraph.”的标识为“F1”，第2段“My second Paragraph.”的标识为“F2”。
通过这些指定的标识ID，可以将段落与相应的样式规则联系起来，如下面的代码就定义了两段的各自颜色。
P#F1{
Color:navy;
Background:lime
}
P#F2{
Color: white;
Background: black
}
步骤01 将下述代码输入到记事本中，并保存为“2.html”。
<HTML>
<HEAD>
<style>
P#F1{
Color:navy;
Background:lime
}
P#F2{
Color:white;
Background:black
}</style>
<TITLE>简单页面</TITLE>
</HEAD>
<P ID=F1>第一个段落</P>
<P ID=F2>第二个段落</P>
</BODY>
</HTML>
小提示
由此段代码可以看出，第1段文字的颜色为海军蓝（Navy），背景色为浅绿色（Lime）；第2段文字的颜色为白色（White），背景色为黑色（Black）。
步骤02 在IE浏览器窗口中打开保存的文档，即可看到页面效果。
小提示
如果希望将第2段文字的背景色设置为红色（Red)，可以将“P#F2{Color:white; Back-ground:black}”修改为“P#F2{Color:white;Background:red}”。
2．“LANG”属性
“LANG”属性指定了内容所使用的语言，其属性值不区分大小写。使用格式如下。
<PLANG=en>This paragraph is in
Englis-h.</P>
1.3.3 通用块标记<DIV>
<DIV>…</DIV>定义了一个通用块级容器，可以把文档分割为独立的、不同的部分，为分块的内容提供样式或语言信息。<DIV>…</DIV>可以包含任何行内或块级标记，以及多个嵌套。
小提示
<DIV>…</DIV>与“CLASS”“ID”和“LANG”等通用属性联合使用则非常有效。这里以“CLASS”属性为例，介绍<DIV>…</DIV>标签的使用方法。
“CLASS”属性用于把一个一个元素指定为一个或者多个类的成员。和“ID”属性不同，“CLASS”类可以被任意数量的元素分享，而一个元素也可以属于多重的类，其属性值是一个类名称的列表。该属性在<DIV>…</DIV>标签中的使用方法如下。
<DIV CLASS="n1">
<P>这是第一条新闻</P>
</DIV>
<DIV CLASS="n2">
<P>这是第二条新闻</P>
</DIV>
通过这些指定的CLASS，可以对DIV分别进行格式设定。如下面的代码就定义了两个DIV （分别是n1和n2）的各自颜色，具体的代码详见随书光盘中的“素材\ch01\1.3\1.3.3\1.html”。
<style>
.n1{
color:red;
}
.n2{
color:black;
}
</style>
步骤01 打开随书光盘中的“素材\ch01\1.3\1.3.3\1.html”，即可看到第1段文字的颜色为红色，第2段文字的颜色为黑色。
步骤02 用记事本打开文档，将其中的<style>标记中的代码修改为如下的代码。
<style>
.n1{
color:navy;
}
.n2{
color:green;
}
</style>
步骤03 将“n1”DIV的文字颜色修改为海军蓝，将“n2”DIV的文字颜色修改为绿色，保存后在IE浏览器中打开，即可看到如下效果。
1.3.4 行内标记<SPAN>
<SPAN>…</SPAN>行内标记本身并没有结构含义，但可以通过使用“LANG”“DIR”“CLASS”和“ID”等通用属性来提供外加的结构。
小提示
这里结合“STYLE”属性来介绍<SPAN>…</SPAN>行内标记的使用方法。“STYLE”属性允许为一个单独出现的元素指定样式。
步骤01 用记事本打开随书光盘中的“素材\ch01\1.3\1.3.4\1.html”，即可看到其中的文字都是统一的显示格式。
步骤02 如果希望将其中的“龙马工作室”文字用黑体显示，可以在记事本中添加如下的代码对类“jiahei”进行格式设定，字体显示为黑体。
<style>
.jiahei {
font-family: "黑体";
}
</style>
步骤03 在<P>标记中加入以下代码，设置黑体显示的内容为“龙马工作室”。
<span class="jiahei">龙马工作室</span>
步骤04 将文档保存，然后用IE浏览器打开，即可看到用黑体显示的文字。
1.3.5 元数据标记<META>
元数据标记<META>的作用是定义HTML页面中的相关信息，例如文档关键字、描述以及作者信息等。可以在头部标记中使用多次。元数据标记<META>的语法格式如下。
<META NAME="" CONTENT="">
<META>标记的“NAME”属性用于给出特性名称，“CONTENT”属性则给出其对应的特性值。使用元数据标记还可以指定编码格式，以保证网页中的汉字正常显示。下面是使用该标记指定编码格式的例子。
<META http-equiv="Content-Type" content= "text/HTML; charset=gb2312" />
下面用一个实例介绍<META>标记的使用方法。以下是所使用的代码。
<HTML>
<HEAD>
<TITLE>元数据标记例子</TITLE>
<META http-equiv="Content-Type" content="text/HTML; charset=gb2312" />
<META NAME="keywords"CONTENT="计算机，编程语言，网页，网站">
</HEAD>
<BODY>
由龙马工作室策划的“我的第1本编程书——《从入门到精通》系列”隆重面市。此系列由
龙马工作室和专业的软件开发培训机构联手打造，旨在打造适合编程初学者的工具书。
</BODY>
</HTML>
使用上述代码编写的网页（随书光盘中的“结果\ch01\1.3\1.3.5\1.html”）的显示效果如下图所示。
1.3.6 图像标记<IMG>
<IMG>行内标记定义了一个行内图像，所要用到的属性见下表。
下面举例介绍<IMG>标记的使用方法和产生的效果。
步骤01 用记事本打开随书光盘中的文件“素材\ch01\1.3\1.3.6\1.html”。
由页面中如图所示的代码可以看出，网页中的图像文件为“pic.jpg”，对齐方式为左对齐，宽度和高度分别为108mm和134mm，图像的替换文本为“龙马工作室”。
<img src="pic.jpg"ALIGN="left"
width="108" heghit="134" alt="龙马工作
室">
小提示
在图片没有加载的情况下，即可看到“ALT”属性指定的替换文本“龙马工作室”。
步骤02 如果需要修改图像的对齐方式，可以将<img>标记中的“ALIGH="left"”修改为“ALIGH="right"”。
步骤03 将页面保存，然后在IE浏览器中打开文档，即可看到图片右对齐的显示效果。
1.3.7 框架容器标记<FRAMESET>
<FRAMESET>…</FRAMESET>是一个框架容器，框架是将窗口分成矩形的子区域。在一个框架设置文档中，<FRAMESET>…</FRAMESET>标签取代了<BODY>…</BODY>的位置，紧接在<HEAD>标签之后。
小提示
框架结构允许在一个窗口中展现多个独立的文档。<FRAMESET>…</FRAMESET>标记所要用到的属性见下表。
1.3.8 子框架标记<FRAME>
<FRAME>定义了一个框架设置文档中的子区域，包含在定义了框架尺寸的<FRAMESET>…</FRAMESET>中。
其中要用到的属性如下表所示。
步骤01 打开随书光盘中的“素材\ch01\1.3\1.3.8”文件夹中的HTML文档文件全部复制到一个文件夹中，然后新建记事本，输入以下代码，并保存为．html文件。
html>
<head>
<META http-equiv="Content-Ty
pe" content="text/html; charset=gb2312" />
<title>使用框架实例</title>
</head>
<frameset rows="60, *">
<frame name="top" src="1top.html"
scrolling="auto">
<frameset cols="20%, *">
<frame name="left" src="1left.html"
scrolling="auto">
<frame name="right" src="1right1.html"
scrolling="auto">
</frameset>
<noframes>
<body>
<p>此网页使用了框架，但您的浏览
器不支持框架。</p>
</body>
</noframes>
</frameset>
</HTML>
小提示
实例1页面实际上由6个文件组成：1个定义整个框架页面的框架集文件（1.html），3个框架文件（1top.html、1left.html、1right1.html），2个链接文件（1right2.html和1right3.html）。
步骤02 保存页面后即可在IE浏览器窗口中预览页面效果。
步骤03 如果需要将右侧框架的内容显示为“1right2.html”，只需将<frame>标记中的“<frame name="right" src="1right1.html" scrolling="auto">”修改为“<frame name="right" src="1right2.html" scrolling="auto">”即可。
步骤04 修改页面后保存，即可在I E浏览器中看到右侧框架的显示内容已经更改为文件“1right2.html”。
1.3.9 表格标记<TABLE>
<TABLE>…</ TABLE>标签用来定义HTML中的表格，一般处于<BODY>标记中。简单的HTML表格是由<table>标记以及一个或多个<tr>、<th>或<td>标记组成。
步骤01 打开随书光盘中的“素材\ch01\1.3\1.3.9\table.html”文件，即可看到页面中有一个4行4列的表格。
步骤02 用记事本打开“素材\ch01\1.3\1.3.9\table.html”文件。
步骤03 将文档中的代码“<table width="100%"border="1" cellspacing="0" cellpadding="0 ">”修改为“<table width="100%" border="3"cellspacing="2" cellpadding="2">”，即将边框粗细、单元格边距和间距分别修改为3、2和2。
步骤04 保存文档，然后在IE浏览器中打开文档，即可看到修改表格属性后的效果。
小提示
<table>标记中的代码“<table width="100%"border="1" cellspacing="0" cellpadding="0">”分别定义了表格的宽度为100%，边框粗细为1像素，单元格边距和间距都为0。由于<tr>标记定义表格行，<th>标记定义表头，<td>标记定义表格单元，所以4对<tr>标记定义了表格行数为4,16对<td>标记定义了表格是4行4列的表格。
1.3.10 浮动帧标记<IFRAME>
<IFRAME>标记是浮动帧标记，与<FRAME>最大的不同是，所用的HTML文件不与另外的文件相互独立显示，而可以直接嵌入在一个HTML文件中，与其内容相互融合，成为一个整体。还可以多次在一个页面内显示同一内容，就像“画中画”电视。
其中要用到的属性见下表。
下面用一个实例介绍IFRAME标记的使用方法。
步骤01 用记事本打开随书光盘中的HTML文档“素材\ch01\1.3\1.3.10\index.html”，在打开的窗口中可以查看文档的HTML代码，然后在<BODY>标签的后面加入如下代码。
<Iframe src="11.txt" width="120" hei
ght="100" scrolling="auto" frameborder="1">
</iframe>
步骤02 将文档保存，然后在IE浏览器中打开文档，即可看到“画中画”的效果。
如果需要修改“画中画”显示区域的大小，可以修改<Iframe>标记中的width和height属性的值，如在<BODY>标记的后面重新输入如下代码。
<Iframe src=" 11.txt" width="400"
height="200" scrolling="auto"
frameborder="1">
</Iframe>
显示的效果如下图所示。
1.3.11 容器标记<MARQUEE>
使用<MARQUEE>…</MARQUEE>标记可以实现滚动的文字或图片效果，该标记是一个容器标记，所要用到的属性见下表。
下面用一个实例介绍<MARQUEE>的使用方法。
1．实现滚动的文字效果
步骤01 用记事本打开随书光盘中的“素材\ch01\1.3\1.3.11\text.html”，即可在打开的记事本窗口中查看文档的代码。
步骤02 在代码中的<BODY>标记下插入如下代码。
<marquee id="affiche" align="left" be
havior="scroll" bgcolor="#FF0000"
direction="up" height="300" width=
"200" hspace="50" vspace="20" loop="-1"
scrollamount="10" scrolldelay="100"
onMouseOut="this.start()"
onMouseOver="this.stop()">
滚动的字幕实例
</MARQUEE>
小提示
由<marquee>标记中的代码可以看出，活动的内容的对齐方式为左对齐（align="left"），背景颜色为红色（bgcolor="#FF0000"），滚动方向为向上滚动（direction="up"）。
步骤03 保存文档，然后在IE浏览器中打开网页文档，即可看到所设置的滚动字幕效果。
小提示
如果将属性修改为“align=right”、“bgcolor=yellow”和“direction="down"”，修改属性后的显示效果则如图所示。
2．实现滚动的图片效果
步骤01 用记事本打开随书光盘中的“素材\ch01\1.3\1.3.11\pic.html”，即可在打开的记事本窗口中查看文档的代码。
步骤02 在代码中的<body>标记下插入如下代码。
<MARQUEE width=380 height=80
onmouseover=stop() onmouseout=
start() scrollAmount=3 loop=infinite
deplay="0"><img src="images/1.jpg">
<img src="images/2.jpg"><img src=
"images/3.jpg">
</MARQUEE>
步骤03 保存文档，然后在IE浏览器中打开网页文档，即可看到所设置的滚动字幕效果。
