行元素总是与其前后的其他元素保持在同一行中_六六互联

行元素总是与其前后的其他元素保持在同一行中

break-word; clear: both; text-indent: 28px; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">行元素总是与其前后的其他元素保持在同一行中。常用的行元素有br(强制换行)元素、img(图像) 元素、a(链接) 元素、span（通用行）元素和文字格式元素。

2.5.1 br元素

换行标记 ，在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记 。这时如果还像在word中直接敲回车键换行就不起作用了，如例2-21所示。

例2-21 example21.html

<!doctype html>

<html>

<head>

<title>使用br标记换行</title>

</head>

<body>

使用HTML制作网页时通过br标记 可以实现换行效果

如果像在word中一样敲回车换行就不起作用了

</body>

</html>

行元素总是与其前后的其他元素保持在同一行中

图2-21使用br标记换行

2.5.2 img(图像元素)

1．HTML图像文件类型

HTML的图像文件类型有gif、jpg或jpeg、png3种。

GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。但GIF只能处理256种颜色。在网页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。

PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。同时需要注意的是IE6是可以支持PNG-8的，但在处理PNG-24的透明时会显示为灰色。通常，图片保存为PNG-8会在同等质量下获得比GIF更小的体积，而半透明的图片只能使用PNG-24。

JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。JPG是特别为照片图像设计的文件格式，网页制作过程中类似于照片的图像比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。

2．图像标记

HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记<img />以及和它相关的属性。其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，它是img标记的必需属性。图像标记—<img />的属性如下表2-3所示：

表2-3图像标记<img />的属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（支持%百分比）	设置图像的宽度
height	像素（支持%百分比）	设置图像的高度
border	数字	设置图像边框的宽度
vspace	像素	设置图像顶部和底部的空白（垂直边距）
hspace	像素	设置图像左侧和右侧的空白（水平边距）
align	left	将图像对齐到左边
	right	将图像对齐到右边
	top	将图像的顶端和文本的第一行文字对齐，其他文字居图像下方
	middle	将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方

（1）图像的替换文本属性alt

由于一些原因图像可能无法正常显示，比如网速太慢，浏览器版本过低等。因此为页面上的图像加上替换文本是个很好的习惯，在图像无法显示时告诉用户该图片的内容,这就需要使用图像的alt属性。图像标记<img/>有一个和alt属性十分类似的属性title，title属性用于设置鼠标悬停时图像的提示文字，下面通过案例2-22来演示alt与title属性的用法，如图2-22所示。

例2-22 example12.html

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>图像</title>
</head>
<body>
 <img src="images/harp-seal-baby-1.jpg" alt="小海熊" >
 <img src="images/harp-seal-baby-2.jpg" title="小海熊">
</body>
</html>

行元素总是与其前后的其他元素保持在同一行中

图2-22 alt与title属性

注意：各浏览器对alt属性的解析不同，本书这里使用的是谷歌，如果使用其他的浏览器如IE、Firefox等，显示效果可能存在一定的差异。

（2）图像的宽度、高度属性width、height

通常情况下，如果不给<img/>标记设置宽和高，图片就会按照它的原始尺寸显示，当然也可以手动更改图片的大小。width和height属性用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。

（3）图像的边框属性border

默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但边框颜色的调整仅仅通过HTML属性是不能够实现的。

了解了图像的宽度、高度以及边框属性，接下来使用这些属性对图像进行修饰。

（4）图像的边距属性vspace和 hspace

在网页中，由于排版需要，有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

（5）图像的对齐属性align

图文混排是网页中的常见效果，默认情况下图像的底部会相对于文本的第一行文字对齐，如下图所示。但是在制作网页时经常需要实现图像和文字的环绕效果，例如图像居左文字居右等，这就需要使用图像的对齐属性align。

下面来实现网页中常见的图像居左文字居右的效果，如例2-23所示。

例2-23 example23.html

<!DOCTYPE html>
<html >
<head>
 <meta charset="utf-8">
 <title>图像的边距和对齐属性</title>
</head>
 <body>
 <img src="images/alpha.jpg" align="left" alt="谷歌PK李世石人机围棋大战最终战" title="AlphaGo人机围棋大战" width="200" height="120" border="1" hspace="30" vspace="20"/>
 专题摘要：尊严之战，李世石成功扳回一局，目前比分三比一，本周二棋圣聂卫平和创新工场创始人李开复将做客新浪科技直播收官之战，届时他们将为大家奉上最精彩的赛事解说！关注新浪科技，收看人机终极对决！
</body>

</html>

行元素总是与其前后的其他元素保持在同一行中

图2-23 图像的边距和对齐属性

3.相对路径与绝对路径

（1）绝对路径

绝对路径一般是指带有盘符的路径。

例如“D:\wz2019\模块2\images\alpha.jpg”，或完整的网络地址，例如“https://www.baidu.com/img/bd_logo1.png”。

网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器，这时图像文件可能在服务器的C盘，也有可能在D盘、E盘，可能在aa文件夹中，也有可能在bb文件夹中。也就是说，很有可能不存在“D:\HTML5+CSS3\images\logo.gif”这样一个路径。

（2）相对路径

相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。例如：

<imgsrc="images/alpha.jpg" alt="谷歌PK李世石人机围棋大战最终战" title="AlphaGo人机围棋大战" width="200"height="120" border="1" hspace="30" vspace="20"align="left"/>

相对路径的设置分为以下3种：

图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<imgsrc="img/img01/logo.gif" />。
图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。
元素

一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。

1．创建超链接

a元素用于产生超链接，即从一个页面链接到另一个页面。超链接虽然在网页中占有不可替代的地位，但是在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

在上面的语法中，<a>标记是一个行内标记，用于定义超链接，href和target为其常用属性，具体解释如下：

（1）href：用于指定链接目标的url地址，当为<a>标记应用href属性时，它就具有了超链接的功能。

（2）target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。

下面来创建一个带有超链接功能的简单页面，如例2-24所示。

例2-24 example24.html

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<ul>

<li><a href="example1.html">我喜欢的唐诗</a></li>

<li>

<a href="example18.html" target="_self">我最喜欢的诗</a>

</li>

<li>

</li>

<li><a href="images/harp-seal-baby.jpg">可爱的小海熊</a>

</li>

</ul>

<a href="mailto:abc@yahoo.com">请与我联系</a>

</body>

</html>

行元素总是与其前后的其他元素保持在同一行中

图2-24 超级链接

行元素总是与其前后的其他元素保持在同一行中

图2-25 锚点链接

注意：

（1）暂时没有确定链接目标时，通常将<a>标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

（2）不仅可以创建文本超链接，在网页中各种网页元素，如图像、音频、视频等都可以添加超链接。

（3）链接图像在低版本的IE浏览器中会添加边框效果，去掉链接图像的边框只需将边框定义为0即可。

2．锚点链接

如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条，来查看所需要的内容，这样效率较低且不方便。为了提高信息的检索速度，HTML语言提供了一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

（1）使用“<a href="#id名">链接文本</a>”创建链接文本。

（2）使用相应的id名标注跳转目标的位置。

下面通过案例2-25来演示页面中创建锚点链接的方法，如图2-25所示。

例2-25example25.html

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>锚点链接</title>
</head>
<body>
课程介绍:
 <ul>
 <li><a href="#one">平面广告设计</a></li>
 <li><a href="#two">网页设计与制作</a></li>
 <li><a href="#three">Flash互动广告动画设计</a></li>
 <li><a href="#four">用户界面（UI）设计</a></li>
 <li><a href="#five">Javascript与JQuery网页特效</a></li>
 </ul>
 <h3 id="one">平面广告设计</h3>
 课程涵盖Photoshop 图像处理、Illustrator 图形设计、平面广告创意设计、字体设计与标志设计。
 
 <h3 id="two">网页设计与制作</h3>
 课程涵盖DIV+CSS实现web标准布局、Dreamweaver 快速网站建设、网页版式构图与设计技巧、网页配色理论与技巧。
 
 <h3 id="three">Flash互动广告动画设计</h3>
 课程涵盖Flash动画基础、Flash高级动画、Flash互动广告设计、Flash商业网站设计。
 
 <h3 id="four">用户界面（UI）设计</h3>
 课程涵盖实用美术基础、手绘基础造型、图标设计与实战演练、界面设计与实战演练。
 
 <h3 id="five">Javascript与JQuery网页特效</h3>
 课程涵盖Javascript编程基础、Javascript网页特效制作、JQuery编程基础、JQuery网页特效制作。
</body>
</html>

2.5.4 span元素

span元素与div元素类似，也是用于包住一些元素和文字内容，以便进一步用CSS进行排版处理；区别在于span元素表示的是行元素，而div元素表示的是块元素。它的作用在网页的效果上看不出什么意义，好像只是在所需要显示的文字外面加了一对span标签而已，但是通过id属性、style属性、class属性设置和JavaScript可以改变span元素内容的排版布局。其基本语法格式如下：

文本和其他内联元素

1．元素也没有特定的含义，可用作文本的容器，用来组合文档中的行内元素。

2．当与 CSS 一同使用时，元素可为部分文本设置样式属性。

3．只能包含文本和其他内联元素，不能将块级元素放入其中。

下面通过案例2-26来演示span元素的方法，如图2-26所示。

例2-26example26.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>span元素</title>
</head>
<body>
 <div >
 酒店价格
 不限<input type="radio">
 100元以下<input type="radio">
 100-300元<input type="radio">
 300-600元<input type="radio">
 600-1500元<input type="radio">
 </div>
</body>
</html>

行元素总是与其前后的其他元素保持在同一行中

图2-26 span元素

2.5.5 文本格式化元素

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示，文本格式化元素包括sup元素、sub元素、b元素、i元素、em元素、strong元素、mark元素和br元素等，它们用于网页中的文字格式效果，以上文本格式化标记均可使用标记配合CSS样式替代,常用文本格式化标记如下表所示。

表2-4文本格式化元素

标记	显示效果
<b></b>和<strong></strong>	文字以粗体方式显示（b定义文本粗体，strong定义强调文本。）
<i></i>和<em></em>	文字以斜体方式显示（i定义斜体字，em定义强调文本。）
<s></s>和<del></del>	文字以加删除线方式显示（HTML5不赞成使用s）
<u></u>和<ins></ins>	文字以加下划线方式显示（HTML5不赞成使用u）

下面通过案例2-27来演示其中某些标记的效果，如图2-27所示。

例2-27 example27.html

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>文本格式化标记的使用</title>
 </head>
<body>
 我是正常显示的文本
 我是使用b标记定义的加粗文本
 我是使用strong标记定义的强调文本
 我是使用i标记定义的倾斜文本
 我是使用em标记定义的强调文本
 <del>我是使用del标记定义的删除线文本</del>
 <ins>我是使用del标记定义的下划线文本</ins>
</body>
</html>

行元素总是与其前后的其他元素保持在同一行中

图2-27文本格式化标记

行元素总是与其前后的其他元素保持在同一行中

图2-28 表格元素

行元素元素保持