HTML图片标签和列表标签

1.img标签

img标签用于在网页中插入图片，基本语法如下：

<img src="图片路径">

常用属性如下：

属性	描述
alt	指定图片的替换信息
height	定义图片的高度
width	定义图片的宽度
title	定义图片的提示信息

注意：默认情况下图片和父级元素的下边框会存在一个小空隙，解决办法：一种是设置父元素的的高度等于图片的高度，第二种方法是给img标签添加vertical-align垂直对齐属性，属性值可以取top(向上对齐)、middle(垂直居中对齐)、bottom(向下对齐)。另外设置height和width的时候，如果在img标签里只设置一个另一个属性会同比缩放，也可以同时设置两个属性。

2.使用CSS设置图片样式

使用CSS可以设置图片的大小、边框、边距、对齐方式等样式，其中大小、边框、边距的样式使用盒子模型的相关属性设置，而图片的对齐方式又分为水平对齐和垂直对齐，其中，水平对齐相对于包含的容器窗口来说的，主要是使用text-align属性(当窗口中只有图片时)或浮动和定位来实现(当图片周围有其他兄弟对象时)，而垂直对齐属性则主要使用CSS属性vertical-align来设置，元素的vertical-align属性定义了行内元素的基线对齐相对于该元素所在行的基线的垂直对齐，需要注意的是vertical-align属性设置的对齐方式只对显示方式为inline(行内)、inline-block(行内块)和table-cell(表格单元的元素有效)，对block(块)类型元素没有效。vertical-align属性的设置语法如下：

vertical-align:align_value;

参数如下表所示：

参数值	描述
length	以px、em等为单位的数值，可取正、负值。正值表示元素相对于基线升高指定值的距离，负值则降低指定值的距离。0px等效于basline
%	相对于继承的line-height的百分数。
baseline	默认对齐方式。元素的基线于父元素的基线对齐
bottom	元素的底部与line-box(行框)的底端对齐(每一行称为一个line-box)
middle	元素放在父元素的中部(当元素不是单元格时，只有父元素为table-cell且父元素也设置为垂直居中时这个属性值才能体现元素垂直居中效果)
text-top	元素的顶部与父元素的文本的顶部对齐

3.列表标签

3.1创建有序列表

创建有序列表需要使用 ol 和 li 标签，具体语法如下：

<ol>
    <li>列表项一</li>
    <li>列表项二</li>
    ……
</ol>

• type属性
  type属性用来设置项目符号，设置语法如下：

<ol type="项目符号">

属性值	描述
1	项目符号为数字1、2、3…(默认符号)
a	项目符号为小写字母a、b、c…
A	项目符号为大写字母A、B、C…
i	项目符号为小写罗马数字i、ii、iii…
I	项目符号为大写罗马数字I…

3.2无序列表

以无次序含义的符号等为项目符号来排列列表项的列表，称为无序列表，创建语法如下：

<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    ……
</ul>

• type属性
  type属性用来设置项目符号，设置语法如下：

<ul type="项目符号">

属性值	描述
disc	项目符号为实心圆点
circle	项目符号为空心圆点
square	项目符号为实心小方块

3.3创建定义列表

定义列表用于对名词进行描述说明，是一种具有两个层次的列表，其中名词为第一层次，解释为第二层次，创建定义列表需要使用dl、dt和dd3种标签，基本语法如下：

<dl>
 <dt>名词一</dt>
    <dd>解释1</dd>
    <dd>解释2</dd>
    …
   <dt>名词二</dt>
    <dd>解释1</dd>
    <dd>解释2</dd>
    …
  …
</dl>

3.4使用CSS列表属性

CSS列表属性主要用于设置列表项目类型，常用的列表属性如下表所示：

属性	属性值	描述
list-style	其他任意的列表属性值	简写属性。用于把所有用于泪飙的属性设置于一个声明中
list-style-type	disc	默认值，实心圆点
list-style-type	circle	列表项目符号是空心圆点
list-style-type	square	列表项目符号是实心方块
list-style-type	decimal	列表项目符号是普通的阿拉伯数字
list-style-type	lower-roman	列表项目符号是小写的罗马数字
list-style-type	upper-roman	列表项目符号是大写的罗马数字
list-style-type	lower-alpha	列表项目符号是小写的英文字母
list-style-type	upper-alpha	列表项目符号是大写的英文字母

注：上述列表中的两个属性在实际应用中，主要用来取消列表的默认样式，列表项目符号因为存在浏览器兼容问题，所以一般不需要使用属性设置，而是通过设置背景作为列表项目符号。