HTML+CSS第二课：格式标签、图像标签、链接标签的使用

知识点：格式标签、图像标签、链接标签的使用

一、格式标签

格式标签用来对文本的段落进行设置，常用有

,

,

,
,

等。使用这些标签，可以让网页显示效果看起来更接近于传统的阅读习惯。

1. P标签：段落标签，是常用的标签之一，在显示时，段落标签中的内容将显示为一个独立的段落，阅读时更清晰。语法：

   元素内容

2. center标签：将center标签内的所有元素水平居中显示。语法：元素内容
3. 列表标签：列表(List)，就是在网页中将相关资料以条目的形式有序或者无序排列而形成的表。常用的列表有无序列表、有序列表和定义列表三种。分为无序列表（ul），有序列表（ol）和自定义列表(dl)。

无序列表：无序列表：无序列表(Unordered List)是一个没有特定顺序的相关条目(或称为列表项)的集合。在无序列表中，各个列表项之间属并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。通过对

标签的type属相来指定列表前显示的项目符号。

语法：

    	
列表项内容
        ……
        
列表项内容
      

语法说明：在HTML中，可以使用成对的

标记插入无序列表，其中的列表项标记
(list-items)用来定义列表项序列。

Type属性值	说明
disc	项目符号显示为实体圆心，默认值
square	项目符号显示为实体方心
circle	项目符号显示为空圆心



有序列表：有序列表(Ordered List)是一个有特定顺序的相关条目(或称为列表项)的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。

语法：

    	
列表项内容
        ……
        
列表项内容
    

语法说明：在HTML中，可以使用成对的

标记插入有序列表，其中的列表项标记
(list-items)用来定义列表项序列。  使用有序列表标记的type属性，可以指定出现在列表项前的项目编号的样式

Type属性值	说明
1（数字）	使用数字作为项目符号，默认值
A/a	使用大写/小写字母作为项目符号
I/i	使用大写/小写罗马数字作为项目符号

注意：通常，在指定列表的编号样式后，浏览器会从1、a、A、ⅰ、Ⅰ开始自动编号。而在使用有序列表标记的start属性后，用户则可改变标号的起始值。start属性值是一个整数，表示从哪一个数字或字母开始编号。reversed属性可以设置降序排列。



定义列表：在HTML文件中，只要在适当的地方插入

标记，即可自动生成定义列表(Definition List)。它的每一项前既没有项目符号，也没有编号，它是通过缩进的形式使内容层次清晰。

语法：

	
项目名称
              
项目名称
               ……
              
项目名称
	
项目名称
              
项目名称
               ……
              
项目名称
        ……            

语法说明：

1. 标记用来创建定义列表。  
2. 标记用来创建列表中的上层项目，此标记只能在
   标记中使用。显示时，
   标记定义的内容将左对齐。  
3. 标记用来创建列表中的下层项目，此标记只能在
   标记中使用。显示时
   标记的内容将相对于
   标记定义的内容向右缩进。



嵌套列表：列表还可以嵌套使用，也就是一个列表中还可以包含有多层子列表。嵌套列表可以是无序列表的嵌套，也可以是有序列表的嵌套，还可以是有序列表和无序列表的混合嵌套。

 

二、图像标签

图像标签用于在页面中插入一个图像，其标签比较特殊，它没有开始、结束标签，只有一个标签（这里注意左斜杠写在右侧）。从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签创建的是被引用图像的占位空间。

1、语法：

src：用于指定图像的路径，用来设置链接的图像文件所在的位置。可以是相对路径，也可以是绝对路径。

width和height：用来设置图片显示时占用的宽度和高度，与图像本身的宽度与高度无关。用数值+像素表示，如400px。

alt：描述图片内容的关键字，用于帮助搜索引擎识别图片，另外图像无法正常显示时，用来文字代替。

title：图像提示文字，可省略。当鼠标停留到图片上时，会提示相关文字。

align：指定图片与文字混合排行时，图片的对齐方式。align属性的取值有top、middle、bottom，默认值为bottom。

 

2、相对路径与绝对路径

在HTML中，标签的src属性用于设置图片的位置，如果src的路径设置错误，则会导致标签引用的图片不能显示。因此，必须正确地引用文件路径及名称。在HTML中，从一个文件中指定另一个文件的位置有两种方式：相对路径和绝对路径。

图文解说中，Ioco.jpg是要引用的图片，info.html是网页文件

（1）相对路径：相对于当前页面的路径

同一目录：如果网页文件和要引用的图片，在同一个文件夹里，那么直接写要引用的图片名称即可。



上级目录：如果要引用的图片，放在网页文件的上级文件夹里，那么用../表示上一级目录。



下级目录：如果要引用的图片，放在网页文件的下级文件夹里，那么直接写目录名和图片名称即可。



注意：相对路径一般用于链接的文件和当前文件的位置关系固定的情况，当出现文件夹移动时两者都会整体移动，其相对位置关系不变。如果图片文件和网页文件的位置关系发生变化，则可能导致图片无法正常显示。

（2）绝对路径：文件所在位置的完整路径

表示文件在计算机或网络中的绝对位置，其中如果是计算机中的文件，则需要书写完整的路径名，如C盘下的a文件夹下的图片b,C:\a\b.jpg。如果文件位置在网络中，则需要书写其完整的URL路径，http://www.baidu.com/images/logo.png，绝对路径一般用于站外文件。

（3）相对根目录：相对网站根目录的路径

适用于链接到本站点下位置固定不变的文件。

 

三、链接标签

链接标签是网页中的一个重要标签，它的存在使HTML的网状关系得到实现，链接标签的作用是点击其标签元素之后，页面会转跳至另外一个页面或位置，以达到切换访问的目的。

1、语法：

被添加链接的元素

href：指定该链接被点击后会转跳到何处，可以是一个网址，也可以是一张图片，也可以是一个锚点链接或者功能性链接

target：该属性用来指定页面在哪个窗口打开，通常有_self 自身窗口打开， _blank新建窗口打开。

演示：点击转跳到百度页面

注意：

a href ="" 默认打开的还是当前页面，会刷新一下重新打开。
a href ="#" 浏览器地址栏网址后面会多显示1个#。不会刷新页面，会回到页面顶部。

2、锚点

在大量的网页中，都提供了回到顶部的链接，点击以后，可以从页面的任何地方回到当前页面的顶端，这种在页面内部定位显示位置的技术被称为锚点。

使用锚点的两个步骤：

   第一步：在目标页面中使用标签定义锚点。语法：               

   第二步：在网页中其他位置插入书签链接。点击跳回到顶部

   注意： 想要回到哪里就在哪里设置锚点，一般在页面头部位置插入锚点，即body里的前几行代码里设置。锚点名称用英文，如top等。第二个超链接标签的href属性指定的不是位置，而是锚点的名称。

 

3、邮件链接

在HTML中，链接除了用于链接到某个网页和网页中的某个锚点之外，还可以用于打开邮件客户端。

点击给张三发邮件

除此之外，链接地址还可以打开某个客户端软件，例如迅雷、QQ等。可以自己尝试一下。

 

延伸阅读：

1. 
   标签：可以实现强制换行，可以对比一下和

   标签的区别。

2. 图片格式：常见图片格式jpg、gif和png
3. 像素（Pixel）：我们可以形象的认为像素就是一个一个计算机可以显示的最小的点，例如我们常说的的屏幕分辨率是 1024*768 ，意思就是屏幕横着有 1024 个（像素）点，竖着有 768 个（像素）点。用作单位时一般默认写作 pix。