HTML常用标签

一、文本格式化标签

在网页中有时需要为文字设置粗体、斜体或下划线等效果，这时就需要文本格式化标签，使文字以特殊方式显示。

目的是为了突出重要性

加粗：<strong></strong><></>

倾斜：推荐使用<em></em>、<i></i>

删除线：推荐使用<del></del>或<s></s>

下划线：推荐使用<ins></ins>或<u></u>

 二、div和span标签

div和span这两个是盒子标签，用来装内容的可以放置图片和文字，用来布局网页

特点：

div 标签用来布局，一个div单独占据一行

span 标签也是用来布局的，一行可以放置多个span

三、图像标签和路径

1.图像标签：

<img src="图像URL" />

src是该标签的必须属性，用于指定图片名字和路径。

常用属性：

alt:当图像显示不出来的时候，显示文字

title：提示文本，鼠标放到图像上提示的文字

width:设置图像宽度（建议修改一个，另外一个会等比例缩放）

height:设置图像高度

border:设置边框

注意点：

标签属性必须放在标签后面

标签属性无先后顺序

2.路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径，这里简单来说，图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像文件和HTML文件位于同一级，如<img src="nn.jpg"/>
下一级路径	/	图像文件位于HTML文件的下一级，如<img src="imges/nn.jpg" />
上一级路径	../	图像文件位于HTML文件的上一级，如<img src="../nn.jpg"/>

绝对路径：是指目录下的绝对位置，从盘符开始直接到达目标位置。

四、链接标签

a标签:<a>用于定义超链接，用于链接另一个网页

语法格式：<a href="跳转目标" target=“目标窗口的弹出方式”>文字或者图像</a>

target：打开窗口的方式，默认值为_self，意思是当前窗口打开页面；_blank 新窗口打开页面

锚点标签：当我们点击链接，可以快速定位到页面中的某一位置

(1)在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two"></a>

(2)找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two"></h3>

五、表格标签

表格的主要作用：

表格主要用于显示和展示数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。

<table>

　　<tr>

　　　　<td></td>

　　</tr>

</table>

1.<table></table>使用来定义表格的标签

2.<tr></tr>定义表格的行

3.<td></td>定义表格的单元格

4.<th></th>表头单元格，此单元格的文字会居中加粗显示

表格属性：

属性名	属性值	描述
align	left,center,right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为"",表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellapacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或者百分比	规定表格的宽度

表格结构标签：

<thead></thead>：用于定义表格的头部。内部必须拥有<tr>标签，一般是位于第一行

<tbody></tbody>：用于定义表格的主体，主要用于放数据本体

合并单元格

合并单元格方式：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

目标单元格：用来写合并代码

当跨行合并时，最上侧单元格为目标单元格，写合并代码

当跨列合并时，最左侧单元格为目标单元格，写合并代码

合并单元格步骤：

1.先确定是跨行还是跨列合并

2.找到目标单元格，写上合并方式=合并单元格的个数

3.删除多余的单元格

六、列表标签

用来布局，列表最大的特点就是整齐，整洁、有序。

列表分为三类：

有序列表、无序列表、自定义列表。

无序列表：<ul>标签标示HTML页面中项目的无序列表，一般会有项目符号呈现列表项，列表项用<li>标签定义

<ul>

　　<li></li>

　　<li></li>

　　<li></li>

</ul>

1.列表项之间没有顺序之分

2.ul标签里面只能放li标签，直接在ul标签里面放其他标签或者文字是不允许的。

3.li标签里面可以放任何元素

4.无序列表会带有自己的样式属性（li标签前面的黑点），在实际使用中，可以通过css设置。

有序列表：即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

<ol>

　　<li></li>

　　<li></li>

　　<li></li>

</ol>

1.ol标签里面只能放li标签，直接在ul标签里面放其他标签或者文字是不允许的。

2.li标签里面可以放任何元素

3.有序列表会带有自己的样式属性（li标签前面的数字），在实际使用中，可以通过css设置。

自定义列表：

自定义列表的使用场景：常用语对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

在HTML标签中，<dl>标签常用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目、名字）一起使用

基本语法如下：

<dl>

　　<dt>名词1</dt>

　　<dd>名词1解释1</dd>

　　<dd>名词1解释2</dd>

</dl>

1.dl标签只能包含dt标签和dd标签

2.dt标签和dd标签个数没有限制，通常一个dt标签对应多个dd标签