第二章 网页制作的排版方法（超详细版）

文字与图像 

1、设置文字字体、大小与颜色

语法:<font face=”宋体” size="1” color="red”>文字</font>

1)设置文字的字体、大小、颜色需要使用<font>标签

2) Face属性设置文字字体，多种字体用逗号隔开

3) Size属性设置文字大小

4) Color属性设置文字颜色，参数值可以是RGB颜色值，如#000000，也可以用颜色的单词表示，如

red

2、设置正文的标题

语法:<h#>主题文字</h#>，其中“#”代表数字1-6中的任意一个，从数字1到数字6，标题大小排

列由大到小(数字越大，标题字号就越小)。

3、设置段落

语法:<p>这里表示段落</p>

4、强制换行与不换行

1)强制换行:<br/>

2) 强制不换行:<nobr/>

5、字体标记

1)物理字体

<b>...</b> 设置成粗体 <i>...</i> 设置成斜体 

<u>...</u> 增加下划线 <s>...</s> 增加删除线 

^... 设置成上标字体 _... 设置成下标字体 

<tt>...</tt> 设置成打字机字体 

2)逻辑字体

<em>...</em> 强调文字 <strong>...</strong> 字体加重 

<code>...</code> 显示编程代码 <samp>...</samp>显示救命文字 

<kbd>...</kbd> 显示键盘按键文字 <small>...</small>缩小文字 

<big>...</big> 放大文字 

6、文字对齐

1)文字对齐使用标签的align属性，例如:<palign="#”>对齐文字</p>，其中“#”代码表示方位，

可选择”left”(向左)、”right”(向右)、”center”(居中)。Align属性可用于<p>、<div>、<table>、

<td>等标签。

2) 居中对齐可使用<center>标签，例如:<center>居中文字</center>

7、列表

1) 无序列表

<ultype=" #" >

<li>表项一</li>

<li>表项二</li>

</ul>

Type=” #"取值可为disc(默认，实心黑点)、square(实心黑方块)、circle(空心圆)

2) 有序列表

<ol type="#">

<li>表项一</li>

<li>表项二</li>

</ol>

Type=”#”取值可为 A、a、I、i、1等3)定义列表

<dl>

<dt>项目</dt>

<dd>描述一</dd>

<dd>描述二</dd>

</dl>

<dt>标签定义了定义列表中的项目，<dd>标签在定义列表中定义条目的定义部分，可以理解为对定义条

目进行特征描述。

4)无序列表、有序列表、定义列表间可以相互嵌套，但一定要注意嵌套时不能交叉

8、其它方式修饰文本

1)欲格式化文本:<pre>...</pre>

2)代码样式斜体字渲染:<var>...</var>

3) 表示它所包含的文本对某个参考文献的引用:<cite>...</cite>

9、图像

1) 插入图像基本语法:<imgsrc="#”/>，其中#代表图像的URL路径，示例:<img src=" c.jpg"

/>

2)图像无法显示时的提示信息，使用alt属性，如:<img src=”cjpg” alt=”风景” />

3) 图像的大小:<img src=" cjpg"width="400px" height="300px" /> ， width属性定义图

像的宽度，height属性定义图像的高度 

4)图像和文字对齐:<img src=" cjpg" align=" top”/>,align属性的取值为top(顶部)、middle(中

间)、bottom(默认，底部)

5)图像的边框:<img src="c.jpg" border=" 0" />，border设置为0时表示图像不显示边框，

否则设置成需要的边框大小

10、移动的字体和图片

1) 移动基本语法:<marquee>移动文字或图片</marquee>，默认是向左循环移动，移动范围在其父

对象的有效区域内。

2) 文本移动的方向:<marquee direction=" #">...</marquee>，其中#可以选择left、right、up、

down

3) 文本的滚动循环:<marquee behavior=" #" >...</marquee>，其中#可以选择scroll(循环移动)、

slide(只移动一个回合)、alternate(来回移动)。

4)如果设置文本来回移动，还可以设置循环次数:<marquee loop="#">...</marquee>，其中#为

代表循环的次数。

5)文本的移动速度:<marquee scrollamount=" #">...</marquee>，其中#设置移动的速度，取正

整数。数值越大，速度越快。

6) 移动对象的延时:<marquee scrolldelay="1000”>我走一走，停一停</marquee>,scrolldelay

以时间为单位，用毫秒表示。

7)移动的区域和背景:<marquee width=" 100" height=" 100” bgcolor=" pink" >...</marquee>

 

超级链接

1、基本概念

1)统一资源定位器(URL):每一个网页的唯一地址，一个URL构成为

protocol://machinename[:port]/directory/filename。其中protocol是访问协议，如http、https、ftp

等，machinename是存放资源的主机IP地址，通常以域名的形式出现，port是服务器使用的端口，

directory和filename 是资源的路径和文件名。

2)绝对路径:HTML绝对路径指带有域名文件的完整路径

3) 文档相对路径:当前文档与在的位置与其他文件或文件夹的关系。用../表示源文件所在目录的上一级

目录。

4)站点根目录相对路径:提供从站点的根文件夹到文档的路径。站点根目录相对路径以”/”开始，表

示站点根文件夹。

2、文字链接

语法:<a href=”URL” target="target”>链接文字</a>

1) href属性表示链接跳转地址

2) target 属性定义链接网页的打开方式，其值可以为_blank(新窗口)、_parent(父框架)、_self(当前窗

口)、_top(清除所有被包含的框架并将文档载入整个浏览器窗口)

3、链接的注释 title属性

<a href=" URL" title=”注释信息”>链接文字</a>

4、图片链接

<a href=" URL”><img src=" c.jpg”></a>将链接文字改成插入图像即可

5、锚点链接

定义锚点:<a name="锚点”></a>

链接锚点:<ahef=”#

6、 邮箱地址链接 mailto

<a href="mailto:邮箱地址”>链接文字</a>

7、图像映射

<img src=" 1.jpg" usemap=" #map" /><map name=" map">

<area shape=" rect" href=" 1.html"coords=" 140,20,280,60">

<area shape=" poly" href=" 2.html"coords=" 100,100,180,50,200,140”>

<area shape="circle" href="3.html"coords=" 80,100,60”>

</map>

1)图像映射实现单击同一图像中的不同位置，出现不同的链接，有矩形、圆形和多边形，分别用rect、

circle、poly 表示。