2.2 常见的行级标签

与块级标签不同，行级标签在页面中可以和其他元素在同行显示，直到一行不能放下一个完整的元素，并且通常行级元素内不会包含其他元素。在HTML5中行级标签有很多，下面主要介绍图片标签、超链接标签和一些常用的行级标签。

2.2.1 ＜img/＞：图片标签

网页中除了文本，还有一种重要的传递信息的方式就是图片，适当地插入图片可以增加网页的展现力，吸引用户的注意。一般网页设计中选择的图片大小不会太大，图片过大会影响网页的加载速度，过小内容模糊不清就失去了图片存在的意义。网页中常用的图片格式为GIF、JPG和PNG等。

基本语法如下：

＜img src="img/logo.png"alt="杰瑞教育logo"title="杰瑞教育"/＞

图片标签主要有如下5个属性。

1. src属性

src属性表示引用图片的路径地址。路径地址的写法共有三种，分别为相对路径、绝对路径、网络地址。

1）相对路径：以当前文件为准，去寻找图片地址。

①与当前文件处于同一层的图片，直接写图片名。

②图片在当前文件下一层：文件夹名/图片名。

③图片在当前文件上一层：../图片名。

包含图片的项目结构如图2-11所示。

2）绝对路径：file：///盘符：/文件夹/图片.扩展名。但这种方式严禁使用，原因有两点：

①绝对路径只在当前计算机生效，若将网站转移服务器，则路径会失效。

②通过绝对路径打开图片使用的是file协议，但网页中使用的是http协议，因此会出现跨域问题，造成图片无法显示。代码示例如下：

＜img alt="杰瑞教育的logo"src="file：///C：/Users/jerehedu/Pictures/logo.png"/＞

当上述代码以http协议方式打开时，图片无法显示，如图2-12所示。

当网页直接通过本地浏览器以file协议打开时，图片可以正常显示，如图2-13所示。

3）网络地址：使用网络上的图片链接。但是，一般不使用网络地址，原因是网络图片可能由于各种原因被删除、转移位置，使图片无法打开。

2. height和width属性

height和width属性分别表示图片的宽度和高度，推荐用CSS（style="width：100px；height：100px；"）代替。

3. title属性

该属性用于设置图片的标题，即当鼠标指在图片上后显示的文字，如图2-14所示。

4. alt属性

该属性可设置由于图片无法加载时显示的文字，如图2-15所示。

5. align属性

该属性可设置图片周围文字相对于图片的位置。常用属性值有top、center、bottom，用处不大，推荐用CSS来控制样式，此处不再赘述。

2.2.2 ＜a＞＜/a＞：超链接标签

通常，一个网站是由多个页面组成的，而不同页面的跳转就需要使用链接。＜a＞标签可以设置一个超链接，单击超链接可以跳转到新的文档或者当前文档中的某个部分。

基本语法如下：

＜a href="#"＞这是一个超链接＜/a＞

1. 超链接标签的属性

（1）href属性

在＜a＞标签中使用href属性来描述链接的地址，这个地址可以是网络链接，也可以是本地文件。当用#时，表示这是一个空的超链接。

（2）target属性

使用target属性可以定义通过超链接打开的文档在何处显示。常用的两个属性值分别为_self（在与链接相同的框架中打开被链接文档）和_blank（在新窗口中打开链接），默认属性值为_self，其他属性值可以通过查阅帮助文档了解。

2. 锚链接的用法

（1）本页面锚链接

①设置锚点：＜a name="top"＞＜/a＞。

②在超链接上，使用#name跳转到对应锚点。基本语法如下：

＜a href="#top"target="_self"＞这是一个超链接＜/a＞

（2）页面间锚链接

①在即将跳转页面的指定位置，设置锚点。

②在超链接的href属性中，使用"页面地址.html#name"。基本语法如下：

＜a href="t.html#weixin"＞跳转到新页面指定部分＜/a＞

2.2.3 其他常用的行级标签

在介绍了比较重要的图片标签和超链接标签后，还有一些其他常见的行级标签需要介绍，如＜span＞、＜em＞、＜strong＞、＜i＞、＜b＞等。

其中，＜span＞标签常常被用来组合文档中的行内元素，无实际意义，用于包裹某部分文字，修改特定样式。

基本语法如下：

＜span＞这是由span包括的文字＜/span＞

由于篇幅限制，还有一些常见的行级标签不做具体介绍，仅简单列出其作用，见表2-3。

注意：块级标签与行级标签的特点与区别。

块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示。

块级标签的宽度默认是100%；行级标签的宽度由文字内容撑开。

块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性。