当前位置:网络资源中心文章中心网页设计HTML/CSS → 文章内容

HTML语言剖析(四)排版标记 (1)

减小字体 增大字体 作者:小猪  来源:网咯收集  发布时间:2008-5-16 15:43:49
%26lt;!--注解--%26gt; ; %26lt;P%26gt; ; %26lt;BR%26gt; ; %26lt;HR%26gt; ; %26lt;CENTER%26gt; ; %26lt;PRE%26gt; ; %26lt;DIV%26gt; ; %26lt;NOBR%26gt; ; %26lt;WBR%26gt; ; ■%26lt;!--注解--%26gt;▲Top像很多电脑语言一样,HTML 文件亦提供注解功能。浏览器会忽略此标记中的文字(可以 是很多行)而不作显示,一般使用目的 为文中不同部份加上说明,方便日后修改。
这对较复杂或非私人网页尤其重要,它不单是提醒自已,亦提醒你的同事这部分 做什么、那部分做什么。
例子
%26lt;!--由这处开始是产品订购表格--%26gt;

用作版权声明。
假如你不希望别人使用或复制你的网页,可加上警告字眼。
例子
%26lt;!--本文版权为 1998, Creation of Webpage 所拥有,未经许,请勿抄摘--%26gt; ■ %26lt;P%26gt; ▲Top%26lt;P%26gt;称为段落标记。作用为字、画、表格等之间留一空白行。

本来%26lt;P%26gt;是一围堵标记,标于一段落的头尾,但从 HTML 2.0 开始己不需要%26lt;/P%26gt;作结尾。

%26lt;P%26gt; 的常用参数 如%26lt;p align="center"%26gt; align="center"
可选值right, left, center。
内定值 align="left"

例子 原始码Here is the text for my paragraph. It does't matter how long it is,
how many space are between the words or when I decide to hit the return key.
It will create a new paragraph only when I begin the tag with another one.
%26lt;P%26gt;Here's the next paragraph. 显示结果

Here is the text for my paragraph. It does't matter how long it is, how many space are between the words or when I decide to hit the return key. It will create a new paragraph only when I begin the tag with another one.

Here's the next paragraph.

■ %26lt;BR%26gt; ▲Top%26lt;BR%26gt;称为换行标记。作用令字、画、表格等显示于下一行。

由于浏览器会自动忽略原始码中空白和换行的部分,这令到%26lt;BR%26gt;成为最常用的标记之 一。因为无论你在原始码中编好了多漂亮的文章,若不适当地加上换行标记段落标记, 浏览器只会将它显示成一大段。

错误示范(邮局可不会接受一行过的地址) 原始码566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America 结果566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America

正确例子 原始码566 E Boston Post RD
%26lt;BR%26gt;Mamaroneck NY 10543-9982
%26lt;BR%26gt;United States of America 结果566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America

■ %26lt;HR%26gt; ▲Top%26lt;HR%26gt;称为水平线。作用插入一条水平线。

%26lt;HR%26gt; 之参数修改
以 %26lt;HR align="LEFT" size="2" width="70%" color="#0000FF" noshade%26gt; 为例。

  • align="LEFT"
    设定线条置放位置,可选择left;right;center 三种设定值。

  • size="2"
    设定线条厚度,以像素作单位,内定为 2。

  • width="70%"
    设定线条长度,可以是绝对值(以像素作单位)或相对值,内定为 100%。

  • color="#0000FF" 『只适用于IE』
    设定线条颜色,内定为黑色。 #0000FF 代表蓝色,亦可以采用颜色的名称,即 text="blue" 。

  • noshade
    设定线条为平面显示,若删去则具阴影或立体,这是内定值。

    例子 原始码%26lt;HR%26gt;
    %26lt;HR align="LEFT" size="4"%26gt;
    %26lt;HR align="LEFT" size="2" width="70%" color="#0000FF" noshade%26gt;
    %26lt;HR align="LEFT" size="4" width="70" color="#008000"%26gt; 显示结果





    ■ %26lt;CENTER%26gt; ▲Top%26lt;CENTER%26gt;称为居中标记。作用令字、画、表格等显示于中间。

    这标记原先是 Netscape 所定义,后来其它浏览器都支持它,但你会发现很多标记已有 align="CENTER" 的参数,%26lt;CENTER%26gt;似乎多馀了,事实上它还是常用的标记之一,其简单 易用,常用于文字上,对于己加有 align="CENTER" 参数的 %26lt;TABLE%26gt; 标记亦要不厌其烦 地加上居中标记,因有狻多浏览器不支持%26lt;TABLE%26gt; 标记中的 align="CENTER" 参数。

    例子 原始码%26lt;CENTER%26gt;Chris's First Homepage%26lt;/CENTER%26gt;
    %26lt;CENTER%26gt;What's new%26lt;/CENTER%26gt;
    %26lt;CENTER%26gt;My profile%26lt;/CENTER%26gt; 结果

    Chris's First Homepage
    What's new
    My profile

    ■ %26lt;PRE%26gt; ▲Top%26lt;PRE%26gt;称为预设格式标记。作用令文件按照原始码的排列方式显示。

    这标记答应保留你于原始码中输入的空白及 Return。细看以下例子你便可体会到此标记的 威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。

    能以%26lt;PRE%26gt;标记产生对 效果,或产生多于一行的空白才算上乘!

    例子 原始码

    %26lt;pre%26gt;Creation of Webpage Log Analysis IComposer Learning  459 407 480 522 547 586 673HTML Advanced      200 268 296 358 385 453 506%26lt;/pre%26gt;
    显示结果
     Creation of Webpage Log Analysis IComposer Learning  459 407 480 522 547 586 673HTML Advanced      200 268 296 358 385 453 506

    ■ %26lt;DIV%26gt; ▲Top%26lt;DIV%26gt;称为区隔标记。作用设定字、画、表格等的摆放位置。

    %26lt;DIV%26gt;应用于 Style Sheet(式样表)方面会更显威力,它最终目的是给设计者另一种组织 能力,有 Class ; Style ; title ; ID 等属性,将会于一节才作详述,这处只介绍 一个属性设定。
    以 %26lt;DIV align="center"%26gt; 为例

  • align="center"
    可选值center ; left ; right 。决定字、画、表格等居中、靠左或靠右。
    %26lt;DIV align="center"%26gt; 的作用和居中标记 %26lt;CENTER%26gt;一样,前者是由 HTML3.0 开始 的标准,后者是通用己久的标示法。

    例子 原始码%26lt;DIV align="center"%26gt;Chris's First Homepage
    %26lt;br%26gt;What's new
    %26lt;br%26gt;My profile%26lt;/DIV%26gt; 结果Chris's First Homepage
    What's new
    My profile

    ■ %26lt;NOBR%26gt; ▲Top%26lt;NOBR%26gt;称为不折行标记。作用令某些文字不因太长而绕行,一 显示于同一行或下一 行。它对住址、数学算式、一行数字、程式码等尤为有用。

    例子(其中 Chris's Creation of Webpage 将不被分开而显示于同一行。) If you want to know how to create you own homepage quickly, don't miss %26lt;NOBR%26gt;Chris's Creation of Webpage%26lt;/NOBR%26gt; which will help you a lot. 结果If you want to know how to create you own homepage quickly, don't miss Chris's Creation of Webpage which will help you a lot.

    ■ %26lt;WBR%26gt; ▲Top%26lt;WBR%26gt;称为建议折行标记。作用预设折行部位。
    它没有侵犯到 %26lt;BR%26gt; 的责任,只是作建议而已,若观者的系统解像度够高的话,那么它是 不会折行的。

    例子(若不加%26lt;WBR%26gt;标记,整个网址会显示于下一行。) 原始码Please visit my other homepage which locate at http://www.geocities.com/SiliconValley/%26lt;WBR%26gt;Sector/8234/index.html There are many softwares for download. I think you will really love that place. 结果Please visit my other homepage which locate at http://www.geocities.com/SiliconValley/Sector/8234/index.html There are many softwares for download. I think you will really love that place.