HTML讲堂第三课 HTML文字版面的编辑

甜馍馍
综合知识
2009-09-06
83热度
0评论

众所周知,我们的网页最终是要呈现给网友的,那么就涉及到了排版布局等问题.浏览器提供给所有网页的面积都一样,那么如何高效美观地利用这片空间,就成了网页设计里面抓取用户眼球的关键之所在了。本次讲堂将据悉详细讲述HTML版面设计.

首先来看换行

3-1 换行标签 

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

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

<html> <head> <title>无换行示例</title> </head> <body> 无换行标记：登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 有换行标记： 登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 </body> </html>

3-2 换段落标签及属性：

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

格式：

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

实例:3-2html

<html> <head> <title>测试分段控制标签</title> </head> <body> 花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨， 就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。 或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。 而美丽苦短的花期 却是那最后悲伤的秋风挽歌中的瞬间插曲。 </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> 《送孟浩然之廣陵》 故人西辭黃鶴樓， 煙花三月下揚州。 孤帆遠影碧山盡， 惟見長江天際流。 </CENTER> </BODY> </HTML>

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

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

实例：3-5html

<HTML> <HEAD> <TITLE>引文标签</TITLE> </HEAD> <BODY> 春 <PRE> <BLOCKQUOTE> 盼望着，盼望着，东风来了，春天脚步近了。 一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。 小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球,赛几趟跑，捉几 回迷藏。风轻悄悄的，草软绵绵的。 </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几种常见特殊字符及其代码表

特殊或专用字符	字符代码	特殊或专用字符	字符代码
<	<	©	©
>	>	×	×
&	&	®	®
"	"	空格

实例：3-8html

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

3-9注释标签

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

注释标签的格式有如下：

实例:3-9html

<HTML> <HEAD> <TITLE>注释标签</TITLE> </HEAD> <BODY>  <CENTER> <赋得古原草送别> <HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE> <PRE> <! pre代表原样显示排版格式> 离离原上草， 一岁一枯荣。 野火烧不尽， 春风吹又生。 </PRE> <HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE> <ADDRESS> 白居易 © </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标签的属性

属性	使用功能	默认值
face	设置文字使用的字体	宋体
size	设置文字的大小	3
color	设置文字的颜色	黑色

格式：

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

实例：3-10-2html

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

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

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

1、物理类型

(1) 粗体标签

放在与标签之间的文字将以粗体方式显示。

(2) 斜体标签

放在与标签之间的文字将以斜体方式显示。

(3) 下划线标签

放在与标签之间的文字将以下划线方式显示。

实例3-10-31html

<html> <head> <title>字体的物理类型</title> </head> <body> <center> 这些文字是粗体的 这些文字是斜体的 这些文字带有下划线 </center> </body> </html>

2、逻辑类型

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

实例3-10-32htrml

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