HTML之超链接

这篇具有很好参考价值的文章主要介绍了HTML之超链接。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

功能

属性

1.herf    指定超链接跳转的地址

2.target    控制超链接新开页面的打开方式

补充

空链接的写法

锚点功能

音视频标签

补充

如何引用网络视频?


html的全称为超文本标记语言。

    <a href="#">空链接</a>
    <a href="JavaScript:;">空链接2</a>
    <a href="https://www.baidu.com/">百度</a>
    <a href="./03.列表标签.html">去列表</a>
    <a href="../0913网页结构/08.常用的标签.html">去常用标签</a>
    <a href="https://www.jd.com/" target="_self">京东</a>
    <a href="https://www.jd.com/" target="_blank">京东</a>

      我们一般向网页中添加a标签来实现超链接,它是行内元素,特殊的行内元素。它里面什么都能放,能放块元素,行内元素,行内块元素,除了它自己。超链接的可以是任何内容,可以是一个字,一段文字,图片,表格等等。超链接有2个属性,2个功能,1个补充。

功能

1.一个页面跳到另一个页面或当前页面的跳转(做楼梯导航)。

2.下载。

属性

1.herf    指定超链接跳转的地址

 绝对地址:完整的网址,无论你的超链接在哪里,只要点击,就可以跳到对应的网站。

 相对地址:指的是本地的页面,跟你的超链接文件的位置有关系。

 ./   你所在的文件跟你要去的文件在同一目录下 。(./ 可以省略)

../   从你所在的文件下,跳出当前的文件目录,来到上一级目录下。

注意:相对路径的跳转方式和很多标签标签的跳转都有关系,例如图片、音视频等等

    <a href="https://www.baidu.com/">百度</a>
    <a href="./03.列表标签.html">去列表</a>
    <a href="../0913网页结构/08.常用的标签.html">去常用标签</a>

2.target    控制超链接新开页面的打开方式

 可选值: _self   在当前页面打开超链接;    _blank   新开一个页面打开超链接(可重复新开页面);

                _news 新开一个页面打开超链接(新开页面唯一)

    <a href="https://www.jd.com/" target="_self">京东</a>
    <a href="https://www.jd.com/" target="_blank">京东</a>
    <a href="https://www.jd.com/" target="_news">京东</a>

补充

空链接的写法

    <a href="#">空链接</a>
    <a href="JavaScript:;">空链接2</a>

锚点功能

       锚点功能的作用是在当前页面进行跳转,点击超链接实现:去顶部、去底部、去中间或是任意的位置。[去任意的位置:给你要去位置打个id属性,设置任意id属性值。(例如:href="#id属性值")注意:href="#",默认是去顶部。]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点功能</title>
</head>
<body>
    <a href="#db">去底部</a>
    <a href="#zj">去中间</a>
    <a href="#ry">去2/3位置</a>
    <p>罪法落,办才否厅我。</p>
    <p>罪法落,办才否厅我。</p>
    <p>罪法落,办才否厅我。</p>
    <p>罪法落,办才否厅我。</p>
    <p>罪法落,办才否厅我。</p>
    <p id="#zj">罪法落,办才否厅我。</p>
    <p>罪法落,办才否厅我。</p>
    <p>罪法落,办才否厅我。</p>
    <p id="#ry">罪法落,办才否厅我。</p>
    <p>罪法落,办才否厅我。</p>
    <p id="#db">罪法落,办才否厅我。</p>
    <a href="#">去顶部</a>
</body>
</html>

       设置id属性值:1.id属性值,是独一无二的,不能重复使用。2.id属性值,是自定义设置,但不能以数字开头。3.id属性值,最好不要是汉字,因为不符合规范要求。

音视频标签

<audio  src="./source/达拉崩吧.mp3" controls loop></audio>
<video src="./source/绝地逢生.mp4" controls loop ></video>

       audio标签可以用来向页面中引入一个外部的音频文件,video标签可以用来向页面中引入一个外部的视频文件。一般有四个属性:

  1. src属性是引入音视频的路径,可以引入绝对路径、相对路径,规则与超链接相同。
  2. controls属性是用户控制是否可以播放,默认是不可以播放,需要用户点击播放。

  3. loop属性是对引入的音频文件进行循环播放。

  4. autoplay属性是自动播放引入的音频文件。(基本已被废止,除了IE浏览器)

网页加载流程: 

        第一次请求:加载网页本身和网页结构。第二次之后请求,加载外部资源、样式、图片。

补充

如何引用网络视频?

<iframe frameborder="0" src="你要引入视频的网络地址" allowFullScreen="true" 
width="500" height="400">
</iframe>

         注意:frameborder属性为是否显示边框。[1是(yes),0是(no)];allowfullscreen属性为是否允许iframe全屏。(默认为false)文章来源地址https://www.toymoban.com/news/detail-485753.html

到了这里,关于HTML之超链接的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Linux :: 【基础指令篇 :: 文件及目录操作:(7)】:: cp:指定文件或目录的拷贝及指定拷贝到指定路径(与重命名)

    前言:本篇是 Linux 基本操作篇章的内容! 笔者使用的环境是基于腾讯云服务器:CentOS 7.6 64bit。 学习集: C++ 入门到入土!!!学习合集 Linux 从命令到网络再到内核!学习合集 目录索引: 1. 基本语法及功能 2. 常用可选项说明 3. 文件基本拷贝操作 - - 3.1 指定文件拷贝到当前

    2024年02月03日
    浏览(68)
  • 详解超链接<a>href属性

    href属性规定链接的目标地址(URL) (1)绝对URL-其可以跳转到另外一个网址 (2)相对URL-其指向站点内的某个文件 eg(href = \\\"index.html\\\") (3)锚URL-指向页面中的锚 eg: 其可以指向本页面你设置锚的任意位置 特例 href = \\\"#top\\\"或者href = \\\"#\\\"链接都直接可以返回页面顶部 当href取空值

    2024年02月12日
    浏览(29)
  • git 拉取项目指定目录或者指定文件

    因为要做数据库自动更新,需要拉取Gitlab项目中/bm-server-biz/docs目录下的表更新sql文件,其他的都不需要,这时候可以利用git的“sparse checkout”方法(设置稀疏检出)来实现。 1、在项目目录下git 初始化  2、修改.git文件夹里面的 config 文件  .git/config  ,启用 sparse checkout(稀

    2024年02月11日
    浏览(46)
  • git选择指定分支中的指定目录进行合并

      先进入branch A : 将dir2中的变更转移至branchA: 所有变更将出现在branchA中的dir2中,检查后提交即可。 先进入branch A : 创建和branch A一样的临时分支 将dir2中的变更转移至tmp: 所有变更将出现在tmp中的dir2中,检查后提交即可。 merge tmp部分到branchA git指定路径进行分支合并_

    2024年02月08日
    浏览(48)
  • 前端如何创建超链接?a标签的属性

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月14日
    浏览(34)
  • VsCode指定插件安装目录

    VsCode安装的默认目录是在用户目录( %HomePath% )下的 .vscode 文件夹下的 extensions 目录下,随着安装插件越来越多会占用大量C盘空间。 Vscode安装目录: D:Microsoft VS CodeCode.exe Vscode插件安装目录: D:Microsoft VS Code extensions 修改Vscode快捷方式的目标为: \\\"D:Microsoft VS CodeCode.exe\\\" --ex

    2024年02月20日
    浏览(43)
  • 移动端预览指定链接的pdf文件流

    直接展示外部系统返回的获取文件流时出现了跨域问题:

    2024年02月12日
    浏览(37)
  • 跟老吕学Python编程——目录(含全教程链接)

    😐 !!! 记得先关注订阅本专栏【跟老吕学Python编程】!!!!!不然后续找不到了哦 !!! 😐 以下是老吕对本教程的目录内容梳理↓↓↓↓↓↓↓↓↓ 第一次编稿注释: 本教程以下内容不是定稿,会不断修改更新; 第二次编稿注释: 本教程每个章节都是暂定的,后

    2024年02月20日
    浏览(33)
  • cp命令 复制多个目录/文件夹下文件到指定目录

    可以使用cp命令的通配符和递归选项来复制多个目录下多个文件夹下的文件到指定目录。 如果目标目录不存在,可以使用 mkdir -p命令来创建目录。 -p 选项表示递归创建目录,如果目录已经存在,则不会报错。 例如,以下命令会复制 /path/to/dir1和 /path/to/dir2 下的所有子目录中的

    2024年02月12日
    浏览(67)
  • Linux挂载磁盘到指定目录

    某天突然发现文件夹下的东西都没有了! 使用命令 lsblk 查看,发现果然磁盘 sda 掉了,没有挂载点。(Linux lsblk 命令用法详解-Linux命令大全(手册)) 最后一列的mount points就表示挂载点。 随即搜索怎么挂载!——【Linux】磁盘分区和挂载 很幸运挂载磁盘其实很简单,只需要一

    2024年02月14日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包