文字的布局关系到一篇文章在网页中的美观与否,本文主要讲解HTML的布局标记。

1、行的控制

(1)换行控制

在《常用HTML标记和格式》中已经介绍过强制换行符<br>,表示一个段落中间另起一行。一个<br>标记表示换一行,如果在一行文字中出现多次<br>,就会换行多次。

同样,在《常用HTML标记和格式》中已经介绍过的段落标记<p></p>,也可以单独使用<p>,用作换行使用。换行<p>和强制换行<br>的区别在于,<p>换行中间会空一行,<br>不会空一行。

html5文字排版 html的文字排版_文字滚动

(2)不换行控制

格式:<nobr>菁瑞优智</nobr>

该标记中的文字,不会换行,不管有多长,都在一行里显示。不换行控制在实际中不会经常用到。

2、文字对齐

文字对齐很重要,是一种经常用到的文字布局方式。

语法:align="#"

#可以为left(向左)、right(向右)、center(居中)。

align需要配合<p></p>、<div></div>(后面会学到)等使用,表示文字在标记中向某个方向偏移,当然,除了文字,图片也是可以的。

如文字右对齐:<p align="right">菁瑞优智</p>

cener可不用align关键字,进行居中处理

<center>菁瑞优智</center>

3、列表

列表分为有序列表和无序列表。我们在浏览网页新闻时,有的新闻列表标题前是一个小圆点,这种表示无序列表,而有的标题前是有序的数字,这种表示有序的列表。

(1)无序列表

<ul>
<li>表项一</li>
<li>表项二</li>
<li>表项三</li>
</ul>

(2)有序列表
<ol>
<li>表项一</li>
<li>表项二</li>
<li>表项三</li>
</ol>

html5文字排版 html的文字排版_html5文字排版_02

通过上面代码可以看出,决定无序的是<ul>,决定有序的是<ol>,而<li>只是里面的列表项,如果想列出更多的列表项,那么就在里面添加多个<li>即可。

4、 制作滚动文字

通过前面的学习,相信大家已经能够很好地控制各种段落文字的显示方式,不过无论怎么设置,文字都是静态的。那怎样让文字动起来呢?

(1)设置文字滚动

格式:<marquee>菁瑞优智</marquee>

默认从右到左,循环滚动。

(2)设置文字滚动方向

格式:<marquee direction=“#”>菁瑞优智</marquee>

direction属性用于设置内容的滚动方向,#表示方向,属性值有left(向左)、right(向右)、up(向上)、down(向下)。

(3)设置文字滚动的速度和形式

scrollamount:用于设置内容滚动速度。

behavior:用于设置内容滚动方式,默认为scroll,即循环滚动。当其值为alternate时,内容将来回循环滚动;当其值为slide时,内容滚动一次即停止,不会循环。还有一个loop属性可设置其滚动循环次数,默认为没有限制。

scrolldelay:用于设置内容滚动的时间间隔。

bgcolor:用于设置内容滚动背景色(类似于body的背景色设置)。

width:用于设置内容滚动背景宽度。

height:用于设置内容滚动背景高度。