这是HTML常用几个标签详细解析！！！

淡淡的烟草味﹌ 2022-12-26 04:41 127阅读 0赞

**目录**

文章目录

一、以下是html常用标签介绍

二、img标签

1、img作用:

2、能插入的图片类型：

3、src属性：图片的相对路径和绝对路径

4、img标签的其他属性

三、a标签

1、作用介绍

2、这是a标签的详情介绍

3、邮件链接：

4、超链接的属性

四、table标签

1、作用介绍

2、详情介绍

3、表格单元格合并

--------------------

欢迎观看~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][]

--------------------

# 一、以下是html常用标签介绍 #

## 二、img标签 ##

### **1、img作用:** ###

*  代表的就是一张图片。在当前页面中引入一个外部的图片，是单边标记。

### **2、能插入的图片类型：** ###

*  能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。
 *  不能往网页中插入的图片格式是：psd、ai

### **`3、src`属性：**图片的相对路径和绝对路径 ###

*  `src`属性：指图片的路径。
 *  在写图片的路径时，有两种写法：相对路径、绝对路径
 *  1、**写法一：相对路径**
 *  相对当前页面所在的路径。两个标记 `.` 和 `..` 分表代表当前目录和父路径。
 *  举例1：
 *      
        <img src="2.jpg">如图：
        <img src="./2.jpg">
        
        <img src="../2.jpg">如图：
 *  ![20201203185752969.png][]
 *  img 是image“图片”的简写，src 是英语source“资源”的缩写。
 *  `./`要么不写，要么就写在开头。
 *  **2、写法二：绝对路径**
 *  **绝对路径包括以下两种：**
 *  （1）以盘符开始的绝对路径。举例：
 *      <img src="C:\Users\smyhvae\Desktop\html\images\1.jpg">
 *  （2）网络路径。举例：
 *      <img src="http://img.smyhvae.com/2016040102.jpg">
 *  **相对路径和绝对路径的总结**
 *  相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。 相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

### 4、img标签的其他属性 ###

*  `width`：宽度
 *  `height`：高度
 *  `Align`：指图片的水平对齐方式，属性值可以是：left、center、right
 *  `title`：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
 *  `border`：给图片加边框（描边），单位是像素，边框的颜色是黑色
 *  `Hspace`：指图片左右的边距
 *  `Vspace`：指图片上下的边距
 *  `Alt`：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

图片的`align`属性：图片和周围文字的相对位置。属性取值可以是：bottom（默认）、center、top、left、right。我们来分别看一下这`align`属性的这几个属性值的区别。

1.  `align=""`，图片和文字低端对齐。即默认情况下的显示效果
2.  `align="center"`：图片和文字水平方向上居中对齐
3.  `align="top"`：图片与文字顶端对齐。
4.  `align="left"`：图片在文字的左边
5.  `align="right"`：图片在文字的右边

写的有点累~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1][]

--------------------

## 三、a标签 ##

### 1、作用介绍 ###

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

### 2、这是a标签的详情介绍 ###

**1、外部链接**：链接到外部文件。举例：

<a href="02页面.html">点击进入另外一个文件</a>

a是英语`anchor`“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。

超链接有三种形式：

**1、外部链接**：链接到外部文件。举例：

<a href="02页面.html">点击进入另外一个文件</a>

a是英语`anchor`“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2][]![20201203191756955.png][]

当然，我们也可以直接点进链接，访问一个网址。举例如下；

**2、锚链接**： 指给超链接起一个名字，作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。 首先我们要创建一个**锚点**，也就是说，使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 3][]

![20201203192129336.png][]

上图中解释：

11行代码表示，顶部这个锚的名字叫做name1。 然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了`#name1`）。注意**上图中红框部分的`#`号不要忘记了**，表示跳到名为name1的特定位置，这是规定。如果少了`#`号，点击之后，就会跳到name1这个文件或者name1这个文件夹中去。

如果我们将上图中的第28行代码写成：

那就表示，点击之后，跳转到`a.html`页面的`name1锚点`中去。

说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。

### **3、邮件链接**： ###

代码举例：

<a href="mailto:smyhvae@163.com">点击进入我的邮箱</a>

效果：点击之后，会弹出outlook，作用不大。

### 4、超链接的属性 ###

*  `href`：目标URL
 *  `title`：悬停文本。
 *  `name`：主要用于设置一个锚点的名称。
 *      target
 *  ：告诉浏览器用什么方式来打开目标页面。
 *      target
 *  属性有以下几个值：
 *  `title`属性举例：
 *      <a href="09_img.html" title="我是亚索">亚索</a>
 *  `target`属性举例：
 *      <a href="1.html" title="悬停文本" target="_blank">链接的内容</a>
 *  blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个\_ ，就是规定，没啥好解释的。 也就是说，如果不写`target=”_blank”`那么就是在相同的标签页打开，如果写了`target=”_blank”`，就是在新的空白标签页中打开。
 *  `_self`：在同一个网页中显示（默认值）
 *  `_blank`：在新的窗口中打开。
 *  `_parent`：在父窗口中显示
 *  `_top`：在顶级窗口中显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 4][]

--------------------

## 四、table标签 ##

### 1、作用介绍 ###

*  **<table**> 标签用来定义表格。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

### **2、详情介绍** ###

**HTML 表格中标签介绍和边框属性**

**2.1**

*  1.展示数据。
 *      2.布局。很早之前的用法，现在已经废弃，改为使用div+css。
 *      table 定义一个表格
 *      tr 定义表格中的一行
 *      td 定义表格中一行中的一个单元格
 *      th 定义表头
 *      td th 是一个容器级标签。
 *  常用属性：
 *      table
 *          border 边框
 *          width 宽 height 高
 *          align 表格水平对齐方式
 *          cellpadding 设置单元格内的空间
 *          cellspacing 单元格之间的空间
 *      tr
 *          align 内容水平对齐方式
 *              left 左对齐
 *              center 居中对齐
 *              right 右对齐
 *          valign 内容垂直对齐方式
 *              top 顶部对齐
 *              middle 中间对齐
 *              bottom 底部对齐

**2.2**

*  如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
 *  使用边框属性来显示一个带有边框的表格：
 *  实例
 *  <table border="1">
 *  <tr>
 *  <td>Row 1, cell 1</td>
 *  <td>Row 1, cell 2</td>
 *  </tr>
 *  </table>

--------------------

**HTML 表格表头**

*  表格的表头使用 <th> 标签进行定义。
 *  大多数浏览器会把表头显示为粗体居中的文本：
 *  实例
 *  <table border="1">
 *  <tr>
 *  <th>Header 1</th>
 *  <th>Header 2</th>
 *  </tr>
 *  <tr>
 *  <td>row 1, cell 1</td>
 *  <td>row 1, cell 2</td>
 *  </tr>
 *  <tr>
 *  <td>row 2, cell 1</td>
 *  <td>row 2, cell 2</td>
 *  </tr>
 *  </table>

### 3、表格单元格合并 ###

*   单元格标签：td th是特殊的单元格。
 *          有两个属性用来合并单元格。
 *          rowspan 跨行合并单元格 垂直
 *  ![20201203194604358.png][]
 *          colspan 跨列合并单元格 水平
 *  ![20201203194624875.png][]
 *          rowspan 合并时 保留上面的单元格，删除下面的单元格
 *          colspan 合并时，保留任一一个即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 5][]

结果演示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 6][]

感谢观看~![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 7][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221120/00be62edc3524f6793b4343eb729ed51.png
[20201203185752969.png]: /images/20221120/16bf62d64d5b489caf92fd5cd00af5af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1]: /images/20221120/47bb484f77ff4e0fa0febcd2d0e6e42f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201203191615901.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk=,size_16,color_FFFFFF,t_70
[20201203191756955.png]: /images/20221120/68e8c2e1837845c09aa399be136d1c34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 3]: /images/20221120/b0d08d3c272f49cab6d1e800e7dcf802.png
[20201203192129336.png]: /images/20221120/2fbf8b170836450aa259b65a5d72d822.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 4]: /images/20221120/a7a304d58327485498691ffd118be1f6.png
[20201203194604358.png]: /images/20221120/613ed5300cbd4181a2b30e084fb237b1.png
[20201203194624875.png]: /images/20221120/656d752dd3774d3a92c9974ce472e7dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 5]: /images/20221120/7b9e7f83351042979487b29887bceaea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 6]: /images/20221120/f2e0a1b3116746daa96f2ede008e0fd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 7]: /images/20221120/a0c698e4540244e8a781503ac04ec746.png