[HTML5]：超链接(a标签)、锚点定位和头部元素

最新推荐文章于 2024-06-04 17:34:22 发布

南纬的风

最新推荐文章于 2024-06-04 17:34:22 发布

阅读量2.2w

点赞数 5

分类专栏： H5/CSS/JS/jQuery 文章标签： a标签超链接锚点定位 meta base

本文链接：https://blog.csdn.net/fengwei4618/article/details/77879719

版权

H5/CSS/JS/jQuery 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

使用<a>标签

<a> 标签用于定义超链接，用于从一张页面链接到另一张页面。<a> 元素最重要的属性是 href 属性，它负责指示链接目标。也用于设置锚点，用于页面定位。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
如果想要更改默认样式，可以使用a元素伪类来定义样式。

属性	值	描述
charset	char_encoding	HTML5 不支持。规定目标 URL 的字符编码。
coords	coordinates	HTML5 不支持。规定链接的坐标。
download	filename	指定下载链接
href	URL	规定链接的目标 URL。
hreflang	language_code	规定目标 URL 的基准语言。仅在 href 属性存在时使用。
media	media_query	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。
name	section_name	HTML5 不支持。规定锚的名称。
rel	alternate author help license bookmark next noreferrer search nofollow prefetch tag prev	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
rev	text	HTML5 不支持。规定目标 URL 与当前文档之间的关系。
shape	default、rect、circle、poly	HTML5 不支持。规定链接的形状。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。仅在 href 属性存在时使用。
type	MIME_type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。MIME = Multipurpose Internet Mail Extensions。

简单实例：

<body>
    <p><a href="http://www.baidu.com">跳转到百度</a></p>
    <p><a href="http://www.baidu.com" target="_blank">新窗口打开</a></p>
    <!-- 把图片作为链接 点击跳转到指定URL-->
    <a href="http://www.taobao.com"> <img src="img/cat.png" alt=""> </a>
</body>

除了文字之外还能把图片作为链接，网页中点击Logo图标跳转网页就是这么完成的。

<a>标签除了通过URL找到目标网页这一方式之外，还能用URL来定位文件

<!-- 使用a标签定位文件地址 -->
    <p><a href="img/girl.jpg">查看女孩图片</a></p>
    <p><a href="media/SwordArtOnline.mp4">查看电影</a></p>

点击相应链接，就会找到对应文件，针对不同类型的文件作相应处理。但这样做看起来有点多余，一般浏览图片都是直接可视的，这还需要点击跳转多此一举，看视频或者听歌总不能让人点击跳转后去播放吧？所以在HTML5中，这种用URL定位文件可以用做下载链接了，加上download属性，如下：

  <!-- 使用download 标记链接为下载链接 -->
    <p><a href="img/girl.jpg" download>下载图片</a></p>
    <p><a href="media/SwordArtOnline.mp4" download>下载电影</a></p>

<a>标签锚点定位

锚点是一种特殊的超链接，它能直接帮我们定位到页面的指定位置，常用于那些内容庞大繁琐的网页，通过点击命名的锚点链接，不仅让我们能指向文档，还能指向页面里的特定段落，便于浏览者查看网页内容。

锚点目标有两种方式：一是通过ID。二是通过<a>标签本身的name属性来查找。建议使用ID方式，比较方便，无需重新定义一个新的<a>标签。

两种方式的实例如下：

<body>
    <!-- 设置锚点 -->
    <a href="#mark-1">跳转到区域一</a><br>
    <a href="#mark-2">跳转到区域二</a>
    <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <div id="mark-1">区域一</div>
     <!-- 如果要测试name效果，可以注销上面一段，然后点击锚点mark-2跳转到区域二 -->
     <a href="" name="mark-2"></a><div>区域二</div>
</body>

上面只是跳转同一页面，如果要跳到另一个页面的锚点目标，就需要先跳转页面。例如a.html跳到b.html中，在a.html这样设置锚点：

<a href="b.html#mark">跳到b页面</a>

头部元素介绍与使用说明

头部元素标签	功能描述
<head>	作为所有头部元素的容器。和form元素差不多，嵌套其他头部元素。
<title>	定义该HTML文档的标题。HTML先显示该信息
<base>	定义HTML文档中所有链接的基准地址(默认地址)和打开目标方式(target)
<link>	定义HTML文档与外部资源的关系。通常用于引入外部CSS样式表
<style>	为HTML文档定义一个内部样式表。
<script>	为HTML文档定义一个脚本，通常是javascript类型。也可以链接外部js文件
<meta>	描述HTML文档的隐藏信息，例如作者、日期和时间、网页描述、关键词、页面刷新等。

一个简单的头部元素实例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我是标题</title>
    <!-- 链接外部CSS -->
    <link rel="stylesheet" href="./all.css">
    <!-- 引入外部JS -->
    <script src="./My.js"></script>
    <!-- 内部样式表，仅供当前文档使用 -->
    <style></style>
</head>

<base>标签

<base>标签可以为HTML文档中所有使用URL的地方加上一个基准地址，简单来说就是浏览器会自动把基准地址放在相对URL之前。例如指向图片或者文件时，无需填完整地址，浏览器会以base的目标URL来补齐填写的相对URL。同时，相对URL也就变成绝对URL了。

实例

   <!-- 定义基准URL地址 和所有链接的打开窗口方式-->
    <base href="前端学习" target="_blank">
</head>
<body>
    <a href="girl.png" id="a1">链接1</a><br>
    <button οnclick="javascript:document.getElementById('addr1').innerHTML = document.getElementById('a1').href">地址</button>  
    <div id="addr1">显示地址</div>
    <a href="img/girl.png" id="a2">链接2</a><br>
    <button οnclick="javascript:document.getElementById('addr2').innerHTML = document.getElementById('a2').href">地址</button>
    <div id="addr2">显示地址</div>
</body>

执行结果：

因为HTML文件是放在本地系统上，所以URL是以访问本地文件的方式来定位资源的，如果想看到类似网址的效果，可以使用Web服务器(tomcat、nginx等)，用127.0.0.1的形式来访问。

<meta>标签

必填属性	值	描述
content	some_text	定义 http-equiv 或 name 属性相关的元信息。作为它们的值

可选属性	值	描述
http-equiv	content-type expires refresh set-cookie cookie-control	把 content 属性关联到 HTTP 头部。指示服务器在发送实际文档之前，先要把传送给浏览器的文档头部中包含指定的名称/值对。
name	author keywords description generator revised others	把 content 属性关联到一个名称。
scheme	some_text	定义用于翻译 content 属性值的格式。

实例

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="read, blog, news"> <!-- 定义网页关键字，方便搜索引擎收集 -->
    <meta name="author" content="Mr.feng"> <!-- 网页文档作者 -->
    <meta http-equiv="context-type" context="text/html"> <!-- 就算不写这个，服务器也会发送给浏览器一个 text/html -->
    <meta http-equiv="context-language" content="zh-CN"> <!-- 网页使用的文字、语言-->
    <meta http-equiv="Refresh" content="3" url="./jsArray.html">   <!-- 3s后跳转到指定的URL-->
</head>

南纬的风

关注

5
点赞
踩
34

收藏

觉得还不错? 一键收藏
0
评论
[HTML5]：超链接(a标签)、锚点定位和头部元素

使用标签标签用于定义超链接，用于从一张页面链接到另一张页面。元素最重要的属性是 href 属性，它负责指示链接目标。也用于设置锚点，用于页面定位。在所有浏览器中，链接的默认外观是：未被访问的链接带有下划线而且是蓝色的已被访问的链接带有下划线而且是紫色的活动链接带有下划线而且是红色的如果想要更改默认样式，可以使用a元素伪类来定义样式。
复制链接

扫一扫