二 网页文本与段落排版
-
插入其它标记
- 空格符号
可以用许多不同的方法来分开文字，包括空格、标记和回车（即按Enter键）。这些都被称为空格，因为他们可以增加字与字之间的距离。
基本语法：
语法说明：
在网页中可以有多个空格，输入一个空格使用“ ”表示，输入多少个空格就添加多少个“nbsp;”。
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”uft-8”>
<title>输入空格符</title>
</head>
<body>
<p> 一个人的涵养，不在心平气和的时，而是心浮气躁时； 一个人的理性，不在风平浪静时，而是众声喧哗时；一个人的慈悲，不在居高临下时，而是人微言轻时； 情侣之间的尊重，不在闲情逸致时，而是观点左右时；夫妻间的恩爱，不在花前月下时，而是大难临头使。
</body>
</html>
2.特殊符号
除了空格以外，在网页的制作过程中，还有一些特殊的符号也需要使用代码进行代替。一般情况下，特殊符号的代码由前缀“&”、字符名称和后缀“;”组成。使用特殊符号可以将键盘上没有的字符输出来。
基本语法：
&...©
语法说明：
在需要添加特殊符号的地方添加相应的符号代码即可。常用符号及其对应代码如表所示。
| 特殊符号 | 符号代码 |
| “ | " |
| & | & |
| < | < |
| > | > |
| x | × |
| § | § |
| © | © |
| ® | ® |
| TM | ™ |
2.设置文字的格式
- face属性
face属性规定的是字体的名称，如中文字体的 宋体、楷体、隶书等。face属性用于设置文本所采用的字体名称，使用者的浏览器中只有安装了设置的字体后，才可以正确显示，否则这些特殊字体就会被浏览器中的普通字体所代替。
基本语法:
<font face=”字体样式”>...</font>
语法说明：
face属性用于定义该段文本所采用的字体名称。如果浏览器能够在当前系统中找到改字体，则使用该字体显示。
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”uft-8”>
<title>设置字体</title>
</head>
<body>
<p><font face=”黑体”>如何成为一个内心强大的人？</font></p>
<p><font face=”方正姚体”>成长就是不断挣扎与折腾</font></p>
<p><font face=”华文琥珀”>坚持是为了什么？</font></p>
</body>
</html>
2.size属性
文字的大小也是字体的重要属性之一。HTML语言提供了<font>标记的size属性来设置普通文字的字号。
基本语法：
<font size=”文字字号”>...</font>
语法说明:
size属性用来设置字体大小，他有绝对和相对两种方式。size属性通常有1到7个等级，1级最小，7级的字体最大，默认的字体大小是3号字。可以使用“size=?”定义字体的大小。（<font>标记和它的属性可以影响周围的文字，该标记可应用于文本段落、句子和单词，甚至单个字母）
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”uft-8”>
<title>设置字体</title>
</head>
<body>
<p><font face=”黑体” size=”7”>如何成为一个内心强大的人？</font></p>
<p><font face=”方正姚体” size=”7”>成长就是不断挣扎与折腾</font></p>
<p><font face=”华文琥珀” size=”7”>坚持是为了什么？</font></p>
</body>
</html>
3.color属性
在HTML页面中，还可以通过不同的额颜色表现不同的文字效果，从而增加页面的亮丽色彩，吸引浏览者的注意。
基本语法：
<font color=”字体颜色”>......</font>
语法说明：
它可以用浏览器承认的颜色名称和十六进制数值表示
实例代码:
<!doctype html>
<html>
<head>
<meta charset=”uft-8”>
<title>设置字体</title>
</head>
<body>
<p><font face=”黑体” size=”7” xolor=”#FF0000”>如何成为一个内心强大的人？</font></p>
<p><font face=”方正姚体” size=”7” color=”#3333CC”>成长就是不断挣扎与折腾</font></p>
<p><font face=”华文琥珀” size=”7” color=”#33CC00”>坚持是为了什么？</font></p>
</body>
</html>
4.b、strong、em、u标记
<b>和<strong>是HTML中格式化粗体文本的最基本元素。在<b>和</b>之间的文字或在<strong>和</strong>之间的文字，在浏览器中都会以粗体字显示。该元素的首尾标记都是必需的，如果没有结尾标记，则浏览器会认为从<b>开始的所有文字都是粗体。
基本语法：
<b>加粗的文字</b>
<strong>加粗的文字</strong>
语法说明：
在该语法中，粗体的效果可以通过<b>标记实现，也可以通过<strong>实现。<b>和<strong>是行内元素，它可以插入到一段文本的任何位置。
<i>、<em>和<cite>是HTML中格式化斜体文本的最基本元素。在<i>和</i>之间的文字、在<em>和</em>之间的文字或<cite>和</cite>之间的文字，在浏览器中都会以斜体字体显示。
基本语法：
<i>斜体字体</i>
<em>斜体字体</em>
<cite>斜体字体</cite>
<u>下划线的内容</u>
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”uft-8”>
<title>设置粗体、斜体、下划线：strong、em、u</title>
</head>
<body>
<p><strong>一生应该遗忘的十种人</strong></p>
<p><em>人生需要看透，但不能看破</em></p>
<p><u>走进内心深处的活法</u></p>
</body>
</html>
5.sup与sub标记
sup（上标文本）标记、sub（下标文本）标记都是HTML的标准标记，尽管使用的场合比较少，但是在数学等式、科学符号和化学公式中经常会用到。
基本语法：
<sup>上标内容</sup>
<sub>下标内容</sub>
语法说明：
在<sup>...</sup>中的内容的高度和以前后文本流定义的高度一半进行显示，sup文字上端和前面文字的上端对齐，但是与当前文本流定义的字体和字号都是一样的。
在<sub>...</sub>中的内容的高度和以前后文本流定义的高度一半进行显示，sup文字下端和前面文字的下端对齐，但是与当前文本流定义的字体和字号都是一样的。
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>设置上标与下标</title>
</head>
<body>
<p>A<sup>2</sup>+B<sup>2</sup>=(A+B)<sup>2</sup>-2AB
</p>
<p>H<sub>2</sub>SO<sub>4</sub>化学方程式硫酸分子
</p>
</body>
</html>
3.设置段落的格式
- p标记
基本语法：
<p>段落文字</p>
语法说明：
段落标记可以没有结束标记</p>，而每一个新的段落标记开始的同时也意味着上一个段落的结束。
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>段落标记</title>
</head>
<body>
<p>回头看看，还有多少人一直陪在身边；用心数数，还有几份情坚持着不离散。有缘的人不是说的，而是默默陪伴；无缘的情不是夸的，却是早已不见。
<p>不听信海枯石烂的誓言，只要睁开眼一切都没变；不相信天荒地老的永远，只要伸出手有把握的暖。
<p>谁陪你跨过一年又一年；谁对你不改初衷永如初见！好朋友，永不说分手；真感情，一生都相守！
</body>
</html>
2.段落对其属性align
在默认的情况下，文字是左对齐的。而在网页制作过程中，往往需要选择其他对齐方式。关于对齐方式的设置要使用align参数进行设置。
基本语法:
<align=对齐方式>
语法说明：
在该语法中，align属性需要设置在标题标记后面，其对齐方式的取值如表。
| 属性值 | 含义 |
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
代码实例：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>段落的对齐属性</title>
</head>
<body>
无所谓时空，牵挂一直变！
<p align=”right”>真正的朋友交的是心，连的是情</p>
<p align=”center”>善待朋友，珍惜拥有</p>
</body>
</html>
3.nobr标记
在网页中如果某一行的文本过长，浏览器会自动对这段文字进行换行处理。可以使用nobr标记来禁止自动换行。
基本语法：
<nobr>不换行文字</nobr>
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>段落的对齐属性</title>
</head>
<body>
<nobr>一见钟情，只是一个传说；日久生情，才是真拥有。没有天生适合的两个人，只有后来磨合的两颗心；没有一世不变的激情，只有一生不悔的深情。知道让步不是认输，而是在乎；懂得原谅不是没生气，而是放不下。</nobr>
</body>
</html>
4.br标记
在HTML文本显示中，默认是将一行文字连续的显示出来，如果想把一个句子后面的内容在下一行显示就会用到换行符<br>。换行符标记是个单标记，也叫空标记，不包含任何内容。在HTML文件中的任何位置，只要使用了<br>标记，当文件显示在浏览器中时，该标记之后的内容就将在下一行显示。
基本语法：
<br>
4.水平线标记
- hr标记：hr是水平线标记，用于在网页中插入一条水平标尺线，使页面看起来整齐明了。
基本语法：
<hr>
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>插入水平线</title>
</head>
<body>
<p>该放弃的放弃，造就理性的自己</p>
<hr>
<p>一见钟情，只是一个传说；日久生情，才是真拥有。没有天生适合的两个人，只有后来磨合的两颗心；没有一世不变的激情，只有一生不悔的深情。知道让步不是认输，而是在乎；懂得原谅不是没生气，而是放不下。</p>
</body>
</html>
2.水平线宽度与高度属性：width、size
在默认情况下，水平线的宽度为100%，也可以使用width手动调整水平线的宽度。size标记用于改变水平线的高度。
基本语法：
<hr width=”宽度”>
<hr size=”高度”>
语法说明：
在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口的百分比。水平线的高度只能使用绝对像素来定义。
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>设置水平线宽度高度属性值</title>
</head>
<body>
<p>该放弃的放弃，造就理性的自己</p>
<hr width=”650” size=”3”>
<p>一见钟情，只是一个传说；日久生情，才是真拥有。没有天生适合的两个人，只有后来磨合的两颗心；没有一世不变的激情，只有一生不悔的深情。知道让步不是认输，而是在乎；懂得原谅不是没生气，而是放不下。</p>
</body>
</html>
3.水平线颜色属性color
基本语法：
<hr color=”颜色”>
4.水平线的对齐方式属性align
基本语法：
<hr align=”对齐方式”>
5.水平线去掉阴影属性noshade
默认的水平线是空心立体效果，可以将其设置为实心且不带阴影的水平线。
基本语法：
<hr noshade>
语法说明：
noshade是布尔值的属性，他没有属性值，如果在<hr>元素中写上了这个属性，则浏览器不会显示立体形状的水平线；反之则无需设置该属性，浏览器默认显示一条立体形状带有阴影的水平线。
5.使用marquee设置滚动效果
滚动字幕的使用使得整个网页更有动感，显得很有生气。现在的网站中也越来越多到使用滚动字幕来加强网页的互动性。用JavaScript编程可以实现滚动字幕效果；用层也可以做出非常漂亮的滚动字幕。而用HTML的<marquee>滚动字幕标记所需的代码较少。
- marquee标记及其属性
使用marquee标记可以将文字、图片等设置为动态滚动的效果。
基本语法：
<marquee
aligh=left|right|up|bottom
bgcolor=#n
direction=left|right|up|down
behavior=type
height=n
hspace=n
scrollamount=n
scrolldelay=n
width=n
VSpace=n
loop=n>
语法说明：
只要在标记之间添加进行滚动的文字即可。而且可以在标签之间设置这些文字的字体、颜色等。
marquee标记的属性及其说明如表所示。
| 属性 | 说明 |
| direction | 文字滚动方向，滚动方向可以包含4个取值，分别为up、down、left和right |
| behavior | 设置文字滚动的方式，可以取值scroll、slide、alternate。scroll：循环滚动，默认效果；slide：之滚动一次就停止；alternate：来回交替进行滚动 |
| loop | 循环设置 |
| scrollamount | 滚动速度 |
| scrolldelay | 滚动延迟 |
| bgcolor | 滚动文字的背景设置 |
| width、height | 滚动背景面积 |
| hspace、vspace | 设置空白空间 |
- 使用marquee插入滚动公告
三 网页图像和多媒体
（1）网页中常见的图像格式
每天都在网络上交流的计算机数不胜数，因此使用的图像一定要能够被每一个平台所接受。当前万维网上流行的图像的格式通常以GIF和JPEG为主。另外还有一种被称为PNG的文件格式，也被越来越多的应用在网络中。线面就对这三种图像格式的特点分别予以介绍。
1.GIF
GIF是英文单词Graphic Interchange Format的缩写，即图像交换格式。文件最多可使用256中颜色，最适合显示色彩不连续或具有大面积单一色彩的图像，如导航条、按钮、图标、徽标或其它具有同一颜色和色调的图像。
GIF格式的最大优点就是可以制作动态图像，可以将数张静态文件作为动画帧串联起来，转换成一个动画文件。
GIF格式的另一个优点就是可以把图像以交错的方式在网页中呈现。所谓交错显示，就是当图像尚未下载完成时，浏览器会先以马赛克的形式将图像慢慢显示，让浏览者可以大略猜出下载图像的雏形。
2.JPEG格式
JPEG就是英文单词Joint Photographic Experts Group的缩写，它是一种图像压缩格式。此文件格式是用于与摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。
JPEG格式是一种压缩的非常紧凑的格式，专门用于不含大色块的图像。JPEG图像有一定的失真度，但是在正常的损失下肉眼分辨不出JPEG和GIF图像的区别，而JPEG文件只有GIF的1/4大小。JPEG格式对图标之类的含大色块的图像不是很有效，且不支持透明图和动态图，但他能保留全真的色调板格式。如果图像需要全彩模式才能表现效果的话，JPEG就是最佳选择。
3.PNG格式
PNG（Portable Network Graphics）图像格式是一种非常破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却不造成图像失真的技术。它不仅具备了GIF图像格式的大部分优点，还支持48-bit的色彩，更快的交错显示，跨平台的图像亮度控制，以及更多层的透明度设置。
- 图像标记及其属性
- img标记
| 属性 | 描述 |
| src | 图像的源文件 |
| alt | 提示文字 |
| width,height | 宽度和高度 |
| border | 边框 |
| vspace | 垂直间距 |
| hspace | 水平间距 |
| align | 排列 |
| dynsrc | 设定avi文件的播放 |
| loop | 设定avi文件循环播放次数 |
| loopdelay | 设定avi文件循环播放延迟 |
| start | 是定avi文件循环播放方式 |
| lowsrc | 设定低分辨率图片 |
| usemap | 影像地图 |
基本语法：
<img src=”图像文件的地址”>
语法说明：
在语法中，src参数用来设置图像文件所在的路径，这一路路径既可以是相对路径，也可以是绝对路径。
2.height属性
height属性用来定义图片的高度，如果<img>元素不定义高度，图片就会按照他的原始尺寸显示。（尽量不要通过height和width属性来缩放图像。如果通过height和width属性来缩小图像，那么用户就必须下载大容量的图像，即使看起来很小。正确的做法是，在网页上使用图像之前，应该通过团建把图像调整文合适的尺寸。）
基本语法：
<img src=”图像文件的地址” height=”图像的高度”>
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>设置图像高度</title>
</head>
<body>
<img src=”images/189727.jpg>
<img src=”images/189727.jpg” height=”209”>
</body>
</html>
3.width属性
基本语法：
<img src=”图像文件的地址” width=”图像的宽度”>
4.border属性
在默认情况下，图像是没有边框的，使用img标记的border属性，可以定义图像周围的边框。
基本语法：
<img src=”图像文件的地址” border=”图像边框的宽度”>
语法说明：
在该语法中，border的单位是像素，值越大边框越宽。HTML5.0不推荐使用图像的border属性。但是所有的主流浏览器均支持该属性。
5.hspace属性
通常图形浏览器不会在图像和其周围的文字之间流出很多空间。除非创建一个透明的图像边框来扩大这些间距，否则图像与其周围的文字之间默认认为两个像素的距离，对于大多数设计者来说太近了。可以在img标记符内使用属性hspace设置图像周围空白。通过调整图像的边距，可以使文字和图像的排列显得紧凑，看上去更加协调。
基本语法：
<img src=”图像文件的地址” hspace=”水平边距”>
语法说明：
通过hspace属性，可以以像素为单位，指定图像左边和右边的文字和图像之间的间距。设置水平边距的hspace属性的单位是像素。
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>设置图像水平边距</title>
</head>
<body>
家具是由材料、结构、外观形式和功能四种因素组成，其中功能是先导，<img src=”189727.jpg” width=”576” height=”350” hspace=”50”>是推动家居发展的动力；结构是主干，是实现功能的基础。这四种因素互相联系，又互相制约。由于家具是为了满足人们一定的位置需求和使用目的而设计与制作的，因此家具还具有材料和外观形式方面的因素。<br>...
</body>
</html>
6.vspace属性
vspace属性用来设置上面或下面文字与图像之间距离的像素数。
基本语法：
<img src=”图像文件的地址” vspace=”垂直边距”>
7.align属性
<img>标记的align属性定义了图像相对于周围元素的水平和垂直对齐方式。
基本语法：
<img src=”图像文件的地址” align=”对齐方式”>
| 属性 | 描述 |
| bottom | 把图像与底部对齐 |
| top | 把图像与顶部对齐 |
| middle | 把图像与中央对齐 |
| left | 把图像对齐到左边 |
| right | 把图像对齐到右边 |
2.添加背景音乐
- bgsound标记
基本语法：
<bgsound src=”背景音乐的地址”>
语法说明：
src是音乐文件的地址，可以是绝对路径，也可以是相对路径。背景音乐的文件可以是avi、mp3等声音文件。
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>无标题文档</title>
</head>
<body>
<bgsound src=”yingyue.mp3”>
</body>
</html>
2.loop属性
基本语法：
<bgsound src=”背景音乐的地址” loop=”播放次数”>
语法说明：
loop是循环次数，-1是无限循环
968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
