网页文本内容设计

来源：互联网发布：淘宝客服对话常用语编辑：程序博客网时间：2024/05/18 09:08

１.设置文字格式

１）设置文字大小：使用<font>标记中的size属性可以设置文字大小

语法：<font size=”文字大小”>……</font>

size标记的属性

属性值

说明

绝对整数

从1到7的整数，代表字体大小的绝对字号

相对整数

从-4到+4的整数(不包含0)，字体相对于3号的放大和缩小字号(+不能省略)

例如：

２）设置标题：html文档中包含有各种级别的标题，各种级别的标题由<h1>到<h6>标记来定义，其中<h1>代表最高级别的标题，依次递减，<h6>级别最低。（不同浏览器，标题确切的尺寸大小不相同的，但<h1>标题大约是标准文字高度的2到3倍，<h6>标题则比标准字体略小）

例如：<h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6>

注：有自动换行的功能，毕竟是标题么。

３）设置字体：face标记用于设置文本所采用的字体名称，使用者的浏览器中只有安装了设置的字体后，才可以正确显示，否则这些特殊字体会被水产品中的普通字体所代替。

语法：<font face=”字体的名称”>……</font>

说明：face属性的值可以是１个或多个，默认情况下，使用第1种字体显示，如果第1种字体不存在，则使用第2种字体代替，依此类推，如果都不存在，则以默认字体显示。

例如：<font size="7" face="华文新魏">华文新魏</font>

４）设置文字的颜色　语法：<font color=”字体的颜色”>……</font>

例如：<font size="7" face="华文新魏" color="green">华文新魏</font>

５）加大与缩小（行内元素）：big(small)标记所包含的文字在浏览器中显示会比普通文字大(小)一级，如果多个big(small)标记作用于同一文本，则字号会逐级增大(缩小)。

例如：<big><big><big><big>3</big></big></big></big>

注：最多能增大到7级，小的话大概是1级吧（最小的几级也没什么区别的了）

６）粗体与斜体（行内元素）：<b>和<strong>是html中格式化粗体文本的最基本元素。<i>、<em>和<cite>是html中格式化斜体文本的最基本元素。

例如：正常

　　<b>斜体b</b><strong>斜体strong</strong>

７）上标与下标：使用上标与下标可以将一段文字以小字体方式显示在另一段文字的右上角或右下角，在各种数学公式、日常计算、书籍文章注解，甚至某些外语脚本中都有广泛的运用。（上标与下标可以一起使用）

例如：正常内容<sup>上标内容</sup><sub>下标内容</sub>正常内容<sub>1<sup>1</sup></sub>

８）删除线与下划线：strike和s都可以用于为文字添加删除线效果，u和ins可以为文字添加下划线效果。（删除线与下划线可以一起使用）

９）设置等宽字体：code和samp标记用于设置网页中字体的等宽效果，常用于英文的设置。（等宽字的字体好像不受face设置的限制，好像有默认的规定的字体，如例子所示）

例如：<font face="微软雅黑">PMroportional<br/>pm<code>Monospaced</code>

２.设置段落格式

１）简单换行：在不另起一段的情况下将当前文本强制换行。<br/>

２）开始一个新段落：使用<p>标记来实现。

３）文字居左、居中与居右：align标记能够设置元素的左对齐、居中、右对齐和两端对齐方式。语法：<p align=”对齐方式”></p>

align的取值

属性值

说明

left

左对齐

center

居中对齐

right

右对齐

justify

两端对齐

justify有点问题

４）设置段落的文字方向：bdo标记是一种文字方向的双向算法，用来指定特殊的文字书写方向。语法：<bdo dir=文本方向>显示的内容</bdo>

说明：dir用来指定从左到右或从右到左的文字方向，它的属性有ltr(left to right)和rtl(right to left)两种。

例如：<bdo dir=rtl>双向算法</bdo>

５）水平线：可以分隔文档的内容，使文档结构清晰、层次分明、便于浏览。水平线自身具有很多属性，如宽度、高度、颜色和排列对齐等。

语法：<hr width=”宽度” size=”高度” color=”颜色” align=”对齐方式” noshade>

说明：width可以是以绝对的像素为单位，也可是以相对的百分比为单位。size只能使用绝对的像素来定义，color用来设置颜色，align用来设置水平线的对齐方式，noshade可以去掉水平线的阴影且设置为实心（默认的水平线是空心立体的效果）。

注：

情况

结果

没有设置color和noshade

ie,firefox：灰白; opera:同body文本颜色设置

没有color，有noshade

ie,firefox,opera：都是灰色，实心

color=””，没noshade

ie,firefox：灰白，opera：实心，黑色

color=””，有noshade

ie,firefox：灰色实心，opera：黑色实心

有color，没noshade

ie,firefox,opera：color颜色且实心

有color，有noshade

ie,firefox,oepra：color颜色且实心

注：firefox实心时，线条的角是圆角，其他是方角。空心时都方角。

例如：<hr width="100" color="orange" size="60" align="center" noshade />

６）不换行：在网页的显示过程中，如果某一行的文字宽度过长，浏览器会自动对这段文字进行换行处理。如果不希望被自动换行，则可以使用nobr标记来实现。（对住址、数学算式、一行数字、程式码等尤为有用。）<nobr>……</nobr>

注：对于一连串连续无空格的字母和数字的串字符类似于一个汉字，它再长也不会换行。

７）预定义格式：将html文件中的文字，通过浏览器显示时保留原始的排版方式。pre。

注：可以实现不换行的效果，即源代码中的一长行加pre后，就不会换行了。

８）长引用：blockquote标记引用的内容必须是块级元素，而不是简单的一句话或一个数字，不过列表或段落都可以进行长引用。

语法：<blockquote cite=”引用信息路径”>块级元素的长引用文字</blockquote>

说明：必须同时给出首尾标记以指明引用界线，cite用于指定引用的原文档或信息的URL路径。（浏览器把一个块级元素的长引用全部用缩进的方式进行显示，以表示和普通段落的不同。）

９）短引用：q和blockquote标记不同，是短引用，其中的内容是行内元素，例如一句话、一个单词或者一些数字等。（q标记在行内所引用的内容，显示文字和其他普通文本完全一样，但设计者可借助样式表css把引用内容和其他文字进行区分。）

语法：<q cite=”引用信息路径”>行内元素的短引用文字</q>

３.设置滚动效果

１）滚动标记：使用marquee标记可以将文字设置为滚动效果。（可在标记之间用font设置文字颜色、字体等）。

２）滚动方向：默认情况下，文字滚动的方向是从右向左，可以通过direction标记来设置滚动的方向。

语法：<marquee direction=”滚动方向”>滚动文字</marquee>

说明：滚动方向包括up、down、left和right四个取值，分别表示向上、向下、向左和向右滚动。其中向左滚动left的效果与默认默认效果相同。

３）滚动方式：可以通过behavior标记来设置滚动方式。

behavior标记的属性

属性值

说明

scroll

循环滚动，默认效果

slide

只滚动一次就停止

alternate

来回交替滚动

４）滚动次数：可以使用loop标记设置滚动的次数。（好像从一边滚到另一边算一次）

５）滚动速度：scrollamount标记用于设置文字滚动的快慢。（滚动的速度实际上是设置滚动文字每次移动的长度，以像素为单位）

６）滚动延迟：scrolldelay标记用于设置滚动文字的时间间隔，时间间隔单位是毫秒，如果设置的时间比较长，会产生走走停停的效果。

７）滚动区域的背景颜色bgcolor：设置滚动区域的背景颜色，以突出显示某部分。

８）滚动背景宽度和高度：如果不设置滚动背景的面积，默认情况下，水平滚动的文字背景与文字同高，与浏览器窗口同宽，使用width和height标记可以调整其水平和垂直的范围，可以调得比文字的大小还小，但这样一般没有什么意义了，因显示不了全部了。（以像素为单位设置滚动背景宽度和高度）

９）设置空白空间：hspace和vspace标记用于设置周围的文字与滚动背景之间的空白空间。（以像素为单位设置水平范围和垂直范围）

注：opera好像不支持这个功能或支持不完善的样子。