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

最新推荐文章于 2024-09-22 01:16:28 发布

置顶清欢灬

最新推荐文章于 2024-09-22 01:16:28 发布

阅读量741

点赞数

文章标签： html

本文链接：https://blog.csdn.net/a754334599/article/details/110523052

版权

欢迎观看~

一、以下是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">如图：

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属性的这几个属性值的区别。

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

写的有点累~

三、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超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。

效果：

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

    <a href="http://www.baidu.com" target="_blank">点我点我</a>

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

上图中解释：

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

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

<a href="a.html#name1">回到顶部</a>

那就表示，点击之后，跳转到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：在顶级窗口中显示