论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > HTML教程
Tag:初学,入门,文字,链接,table,表单,框加,多媒体,标签,视频教程

第三章 文字版面的编辑

文章类别:HTML | 发表日期:2008-8-7 11:12:27

3-1 换行标签<br>
换行标签是个单标签,也叫空标签,不包含任和内容,在html文件中的任何位置只要使用了<br>标签,当文件显示在浏览器中时,该标签之后的内容将显示下一行。

请看下面的例子:3-1html

<html>

<head>
<title>无换行示例</title>
</head>

<body>
无换行标记:登鹳雀楼 白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
<br>有换行标记:<br>登鹳雀楼<br>白日依山尽,<br>黄河入海流。<br>欲穷千里目,<br>更上一层楼。
</body>

</html>

3-2 换段落标签<p>及属性:


由<p>标签所标识的文字,代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符,也就是要隔一行空白行,用以区别文字的不同段落。它可以单独使用,也可以成对使用。单独使用时,下一个<P>的开始就意味着上一个<P>的结束。良好的习惯是成对使用。

格式:

<P>
<P ALIGN= 参数>

其中,ALIGN是<p>标签的属性,属性有三个参数left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式.


实例:3-2html

<html>
<head>
<title>测试分段控制标签</title>
</head>
<body>
<p>花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨,
就像那受到了致命伤害的秋雁,悲哀无助地发出一声声垂死的鸣叫。</p>
<p align="right">或许,这便是花儿那短暂一生最凄凉、最伤感的归宿。</p>
<p align=center>而美丽苦短的花期</p>
<p align="left">却是那最后悲伤的秋风挽歌中的瞬间插曲。</p>
</body>
</html>

3-3 原样显示文字标签<pre>

要保留原始文字排版的格式,就可以通过<pre>标签来实现,方法是把制作好的文字排版内容前后分别加上始标签<pre>和尾标签</pre>.

实例:3-3html

<HTML>
<HEAD>
<TITLE>原样显示文字标签</TITLE>
</HEAD>
<BODY>
<PRE>
白日依山尽,

黄河入海流。

欲穷千里目,

更上一层楼。
</PRE>
</BODY>
</HTML>

3-4 居中对齐标签<center>


文本在页面中使用<center>标签进行居中显示,<center>是成对标签,在需要居中的内容部分开头处加<center>,结尾处加</center>

实例:3-4html

<HTML>
<HEAD>
<TITLE>居中对齐标签</TITLE>
</HEAD>
<BODY>
<CENTER>

《送孟浩然之廣陵》<p>

故人西辭黃鶴樓,

煙花三月下揚州。

孤帆遠影碧山盡,

惟見長江天際流。
</CENTER>
</BODY>
</HTML>

3-5 引文标签 (缩排标签)<blockquote>


<blockquote>标签可以用来建立一个引文,他特别适合较长文本的引用,引文显示时将会自动右移,左边空出几个格,加以区别。

实例:3-5html

<HTML>
<HEAD>
<TITLE>引文标签</TITLE>
</HEAD>
<BODY>
春 <BR>
<PRE>
<BLOCKQUOTE>
盼望着,盼望着,东风来了,春天脚步近了。<br>
一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水涨起来了,太阳的脸红起来了。
小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几
回迷藏。风轻悄悄的,草软绵绵的。
</BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE>
桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。红的像火,粉的像霞,白的像雪。花里带着甜味儿;闭了眼,村上仿佛已
经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着,大小的蝴蝶飞来飞去。野花遍地是:杂样儿,有名字的,没名字的,散在草
丛里像眼睛,像星星,还眨呀眨的。
“吹面不寒杨柳风”,不错的,像母亲的手抚摸着你。风里带来些新翻的泥土的气息,混着青草味儿,还有各种花的香,都在微微润湿的
空气里酝酿。鸟儿将巢安在繁花嫩叶当中,高兴起来了,呼朋引伴地卖弄清脆的喉咙,唱出宛转的曲子,跟轻风流水应和着。牛背上牧童
的短笛,这时候也成天嘹亮地响着。
雨是最寻常的,一下就是三两天。可别恼。看,像牛毛,像花针,像细丝,密密地斜织着,人家屋顶上全笼着一层薄烟。树叶儿却绿得发
亮。小草儿也青得逼你的眼。傍晚时候,上灯了,一点点黄晕的光,烘托出一片安静而和平的夜。在乡下,小路上,石桥边,有撑着伞慢
慢走着的人;地里还有工作的农民,披着蓑戴着笠。他们的房屋,稀稀疏疏的,在雨里静默着。
</BLOCKQUOTE></BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>
天上风筝渐渐多了,地上孩子也多了。城里乡下,家家户户,老老小小,也都赶趟儿似的,一个个都出来了。舒活舒活筋骨,抖擞
抖擞精神,各做各的一份事儿去。
“一年之计在于春”,刚起头儿,有的是工夫,有的是希望。
春天像刚落地的娃娃,从头到脚都是新的,它生长着。
春天像小姑娘,花枝招展的,笑着,走着。
春天像健壮的青年,有铁一般的胳膊和腰脚,他领着我们上前去。
</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
</PRE>
</BODY>
</HTML>

3-6水平分隔线标签<hr>

<hr>标签是单独使用的标签,是水平线标签,用于段落与段落之间的分隔,使文档结构清晰明了,使文字的编排更整齐。通过设置<hr>标签的属性值,可以控制水平分隔线的样式。

<hr>标签的属性

 


属性

 

参数

 

功能

 

单位

 

默认值

 

size

 

 

 

设置水平分隔线的粗细

 

pixel(像素)

 

2

 

width

 

 

 

设置水平分隔线的宽度

 

pixel(像素)、%

 

100%

 

align

 

left enter right

 

设置水平分隔线的对齐方式

 

 

 

center

 

color

 

 

 

设置水平分隔线的颜色

 

 

 

black

 

noshade

 

 

 

取消水平分隔线的3d阴影

 

 

 

 

 

实例:3-6html

<HTML>
<HEAD>
<TITLE>测试水平分隔线标签</TITLE>
</HEAD>
<BODY>
<CENTER>
春 晓
<HR >
春眠不觉晓,
<hr size="6">
处处闻啼鸟。
<hr width="40%">
夜来风雨声,
<hr width="60" align="left">
花落知多少?
<hr size="6" width="30%" align="center" noshade color=red >
</CENTER>
</BODY>
</HTML>

3-7署名标签<address>

<address>署名标签一般用于说明这个网页是由谁或是由哪个公司编写的,以及其它相关信息。在<address></address>标签之间的文字显示效果是斜体字。

实例:3-7html

<HTML>
<HEAD>
<TITLE>署名标签</TITLE>
</HEAD>
<BODY>
<CENTER>
乐 游 原
<HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>
<PRE>
向晚意不适,
驱车登古原。
夕阳无限好,
只是近黄昏。
</PRE>
<HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>
<ADDRESS>
[唐] 李商隐
</ADDRESS>
</BODY>
</HTML>


3-8特殊字符

在HTML文档中,有些字符没办法直接显示出来,例如?. 使用特殊字符可以将键盘上没有的字符表达出来,而有些HTML文档的特殊字符在键盘上虽然可以得到,但浏览器在解析HTML文当时会报错,例如"<"等,为防止代码混淆,必须用一些代码来表示它们。

HTML几种常见特殊字符及其代码表

 

特殊或专用字符

 

字符代码

特殊或专用字符

 

字符代码

<

&lt;

©

&copy;

>

&gt;

×

&times;

&

&amp;

®

&reg;

"

&quot;

空格

&nbsp;

实例:3-8html

<HTML>
<HEAD>
<TITLE>特殊字符</TITLE>
</HEAD>
<BODY>
<CENTER>
&lt;赋得古原草送别&gt;
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<PRE>
离离原上草,
一岁一枯荣。
野火烧不尽,
春风吹又生。
</PRE>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<ADDRESS>
白居易 &copy;
</ADDRESS>
</BODY>
</HTML>

3-9注释标签

在HTML文档中可以加入相关的注释标记,便于查找和记忆有关的文件内容和标识,这些注释内容并不会在浏览器中显示出来。

注释标签的格式有如下:

<!--注释的内容-->


实例:3-9html

<HTML>
<HEAD>
<TITLE>注释标签</TITLE>
</HEAD>
<BODY>
<!--body标签是主体内容-->
<CENTER>
&lt;赋得古原草送别&gt;
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<PRE>
<! pre代表原样显示排版格式>
离离原上草,
一岁一枯荣。
野火烧不尽,
春风吹又生。
</PRE>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<ADDRESS>
白居易 &copy;
</ADDRESS>
</BODY>
</HTML>

3-10字体属性

3-10-1标题文字标签<hn>

<hn>标签用于设置网页中的标题文字,被设置的文字将以黑体或粗体的方式显示在网页中。

标题标签的格式:<hn align=参数〉标题内容</hn>

说明:<hn>标签是成对出现的,<hn>标签共分为六级,在<h1>...</h1>之间的文字就是第一级标题,是最大最粗的标题;<h6>...</h6>之间的文字是最后一级,是最小最细的标题文字。align属性用于设置标题的对齐方式,其参数为 left(左), enter(中), right (右)。<hn>标签本身具有换行的作用,标题总是从新的一行开始。

实例 3-10-1html

<HTML>
<HEAD>
<TITLE>设定各级标题</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">一级标题。</H1>
<H2>二级标题。</H2>
<H3>三级标题。</H3>
<H4>四级标题。</H4>
<H5 ALIGN="RIGHT">五级标题。</H5>
<H6 ALIGN="LEFT">六级标题。</H6>
</BODY>
</HTML>

3-10-2文字格式控制标签<FONT>

<FONT>标签用于控制文字的字体,大小和颜色。控制方式是利用属性设置得以实现的。

FONT标签的属性

属性

 

使用功能

 

默认值

face

 

设置文字使用的字体

 

宋体

size

 

设置文字的大小

 

3

color

 

设置文字的颜色

 

黑色

格式:<font face=值1 size=值2 color=值3〉文字 </font>

说明:如果用户的系统中没有face属性所指的字体,则将使用默认字体。size属性的取值为1~7。也可以用"+"或"-"来设定字号的相对值。color属性的值为:rgb颜色"#nnnnnn"或颜色的名称

实例:3-10-2html

<html>
<head>
<title>控制文字的格式</title>
</head>
<body>
<center>
<font face=黑体 size=6 color="red" >盼望着,盼望着,东风来了,春天脚步近了。</font> <p>
<font face=隶书 size=+3 color="green">
一切都像刚睡醒的样子,欣欣然张开了眼。<p>山朗润起来了,水涨起来了,太阳的脸红起来了。
</font><p>
<font face=楷体 size=4 color="#ff00ff">
小草偷偷地从土里钻出来,嫩嫩的,绿绿的。<p>园子里,田野里,瞧去一大片一大片满是的。<p>坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。<p>风轻悄悄的,草软绵绵的。
</font>
</center>
</body>
</html>

3-10-3特定文字样式标签

在有关文字的显示中,常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。在html中用于这种功能的标签可以分为两类,物理类型和逻辑类型。

1、物理类型

(1) 粗体标签<b>
放在<b>与</b>标签之间的文字将以粗体方式显示。

(2) 斜体标签<i>
放在 <i>与</i>标签之间的文字将以斜体方式显示。

(3) 下划线标签<u>
放在 <u>与</u>标签之间的文字将以下划线方式显示。

实例3-10-31html

<html>
<head>
<title>字体的物理类型</title>
</head>
<body>
<center>
<font color="#FF0000" size="+2"><b>这些文字是粗体的</b></font><br><br>
<i>这些文字是斜体的</i> <br><br>
<u>这些文字带有下划线</u>
</center>
</body>
</html>

2、逻辑类型

逻辑类型是使用一些标签来改变字体的形态和式样,以便产生一些浏览者习惯的或约定的显示效果,常用的逻辑类型标签有八种,放在标签之间的文字受其控制。下面请看常用逻辑标签的实例

实例3-10-32htrml

<html>
<head>
<title>字体的逻辑类型</title>
</head>
<body>
<pre>
em标签: <em>用于强调的文本,一般显示为斜体字</em>
strong标签: <strong>用于特别强调的文本,显示为粗体字</strong>
cite标签: <cite>用于引证和举例,通常是斜体字</cite>
code标签: <code>用来指出这是一组代码</code>
small标签: <small>规定文本以小号字显示</small>
big标签: <big>规定文本以大号字显示</big>
samp标签: <samp>显示一段计算机常用的字体,即宽度相等的字体</samp>
kbd标签: <kbd>由用户输入文本,通常显示为较粗的宽体字</kbd>
var标签: <var>用来表示变量,通常显示为斜体字</var>
dfn标签: <dfn>表示一个定义或说明,通常显示为斜体字</dfn>
sup标签:12 <sup>2</sup>=144
sub标签:硫酸亚铁的分子式是Fe <sub>2</sub>SO<sub>4</sub>
</pre>
</body>


 
视频教程列表
文章教程搜索
 
HTML推荐教程
HTML热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058