a标签（a标签锚点）

目录：

• 1、web前端a标签、span标签、p标签、h标签有什么区别
• 2、HTML中a标签有什么用？
• 3、认识HTML一a标签基本使用
• 4、HTML a 标签的基本用法和常用属性
• 5、html的a标签是什么 html的a标签的定义
• 6、a标签其它属性

web前端a标签、span标签、p标签、h标签有什么区别

在html标准文档流里面，

1.

a，span标签属于行内元素，p，h标签属于块级元素

2.

a标签中的内容是页面链接形式，span标签往往是纯文本，p标签中可包含多个span标签文本，h标签内也主要是文本（在seo优化当中，h标签往往具有较高权重）

HTML中a标签有什么用？

a标签（anchor）定义超链接或锚点，通过href 属性指定从当前页面链接到另一个页面，或者链接到文档内的书签。通过target属性指定链接打开方式。

认识HTML一a标签基本使用

a标签基本使用

如上图所示：

实时热搜下面文字都是a标签

用于控制页面与页面之间的跳转的

a href="指定需要跳转的目标界面"需要展现给用户查看的内容/a

例题1   

!DOCTYPE html

html

head

meta charset="utf-8"

titlea标签/title

/head

body

a href="张韶涵 窦骁tn=02003390_2_hao_pg"张韶涵 窦骁/a

/body

/html

运行效果：

你可以试一试图片。

打开淘宝

模仿写一个简单例子

!DOCTYPE html

html

head

meta charset="utf-8"

titlea标签/title

/head

body

a href=""

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a

/body

/html

运行结果如下图

点击这张图片：

1.a标签不仅可以让文字可以点击，还可以让图片也能够被点击。

2.一个a标签必须有一个href属性，否则a标签不知道要跳转的地方。

3.如果通过a标签的href属性指定一个url地址，那么必须在地址前面加上http://或https://

HTML a 标签的基本用法和常用属性

1.href属性：用于指示链接的目标，该属性对于a标签来说必不可少。

言成科技2.title属性：当用户的鼠标移入超链接时，会显示title属性的具体属性值

言成科技3.target属性；用于控制链接页面打开的位置。

_blank：浏览器总在一个新打开、未命名的窗口中载入目标文档

言成科技_self：默认状态，在当前页面/目标中打开被链接文档

言成科技Tips：所有属性当中，使用最为频繁的是_self和_blank，由于默认打开方式为_self，所以，通常在需要打开新页面时才会使用target=“_blank”的属性设置。对于_parent、_top、framename，当前都已经不再使用，此处便不再提及。

想了解更多，请点击：《如何实现兼容IE6的a标签鼠标移入效果（hover效果）》

html的a标签是什么 html的a标签的定义

1、a是HTML语言标签。

2、a标签定义超链接，用于从一个页面链接到另一个页面。

3、a元素最重要的属性是 href 属性，它指定链接的目标。

4、在所有浏览器中，链接的默认外观是：未被访问的链接带有下划线而且是蓝色的已被访问的链接带有下划线而且是紫色的活动链接带有下划线而且是红色的。

a标签其它属性

例1 

!DOCTYPE html

html

head

meta charset="utf-8"

titlea标签/title

/head

body

a href=""

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a

a href="第一个网页.html"

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a

/body

/html

如图所示：

运行结果：

a标签的href属性除了可以指定一个网络地址以外，还可以指定一个本地地址。

a标签中有一个叫做target属性，这个属性的作用就是专门用于如何控制跳转？

_self：当前跳转

_blank

【实验1】尝试一下_self与_blank属性

!DOCTYPE html

html

head

meta charset="utf-8"

titlea标签/title

/head

body

a href=""

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a

a href="第一个网页.html" target="_self"

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a

!--a href="第一个网页.html" target="_self"

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a--

/body

/body

/html

如图所示：

运行结果如下图所示：

下面我们改为_blank属性

!DOCTYPE html

html

head

meta charset="utf-8"

titlea标签/title

/head

body

a href=""

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a

!--a href="第一个网页.html" target="_self"

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a--

a href="第一个网页.html" target="_blank"

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a

/body

/body

/html

如图所示：

运行结果：

a标签title属性

例2    !DOCTYPE html

html

head

meta charset="utf-8"

titlea标签/title

/head

body

a href="" title="一米轰趴"

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a

!--a href="第一个网页.html" target="_self"

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a--

a href="第一个网页.html" target="_blank"

img src="img/TB11iC2uAzoK1RjSZFlXXai4VXa-254-318.jpg"//a

/body

/body

/html