小工具      在线工具  汉语词典  css  js  c++  java

a标签实现重定位

a标签的超链接属性是最常见的属性,href=url可以帮助定位其他网页或外部网页。

<a href="http://www.baidu.com">百度</a>

会跳转到百度实现搬家功能。注意,如果是绝对定位,必须以http开头,否则会在当前目录添加后缀。

a标签实现转发

与重定位类似,转发跳转到当前目录下的其他html文件。

<a href="two.html"></a>
<a href="/two.html"></a>
<a href="./two.html"></a>
<a href="../two.html"></a>

上面四个都实现了页面的跳转,但有区别第一个是在当前路径后面拼接上two.html,如当前目录是C:\user\html
那么就会跳转到localhost:/user/html/two.html
第二个会忽略路径,也就是直接跳转到localhost:/two.html。**./**其定位功能表示在当前目录下和第一个一样 ……/ 表示在当前的上级目录下。

转发的uil可以携带参数如:

<a href="two.html?type=String&page=int>携带参数</a>

携带参数一般用于实现分页功能或者其他一些分类功能。 url中的参数只是起到传输作用,不会影响页面,所以页面还是tw.html。以下参数可以通过DOM或者后端获取。

a标签实现下载功能

当a的href指向某个文件时,就会以浏览器打开,如css,html,jpg,png,txt等。如果遇到浏览器无法识别的文件就会启动下载功能。如果不想以浏览器打开可以为a标签添加下载属性只想文件路径就会实现下载功能。

<a href="two.html" download="two.html"></a>

a标签实现锚链接

在网页中浏览到底部了想快速回到顶部,就使用锚链接 # ,用 #ID 属性结合快速定位到该容器的位置。#id实现id的定位。

<div style="position: fixed; top: 0px; right: 0px; left: 0px; background-color: red;">
	<h1 >通过id实现锚链接</h1>
	<a href="#box1">box1</a>
	<a href="#box2">box2</a>
	<a href="#box3">box3</a>
</div>
		
<div id="box1" style="background-color: #0000FF; height: 400px;">box1</div>
<div id="box2" style="background-color: #006400; height: 400px;">box2</div>
<div id="box3" style="background-color: #00FFFF; height: 400px;">box3</div>

请添加图片描述
单个#用于回到顶部。

a标签执行js代码

a除了上面的功能之外,还有执行js代码的功能。

<a href=javascript:代码片;> </a>

代码段可以是函数、表达式或三元运算;

<div>
	<a href="javascript:method(1);">用a标签执行js函数</a>
</div>
<script>
	function method(a){
    
		console.log(a);
	}
</script>

a标签充当按钮

a 标签与文本一样,几乎不占用任何格式。如果不想使用超链接属性,可以将href指向js代码段,让该代码段不执行任何东西,void(0)或者return flase禁用链接属性,然后添加事件即可绑定到其他属性。

<a href="javascript:void(0);">用a标签执行回调函数</a>
<a href="javascript:;">用a标签执行空代码</a>
<a href="javascript:return flase;">a标签返回false</a>

然后添加onclick、onburs等属性。

. . .

相关推荐

额外说明

什么是Scala(网上收集)

Scala是一个纯面向对象语言,在某种意义上来讲所有数值都是对象;Scala还是一个函数式语言,在某种意义上来讲所有函数都是数值;Scala配备了一套富有表现力的类型系统,该抽象概念以一种安全的和一致的方式被使用;Scala是可扩展的;Scala可与Ja

额外说明

超详细pytest教程(二)前后方法及fixture机制

前言 上一篇文章入门篇咱们介绍了pytest的基本使用,这一篇文章专门给大家讲解pytest中关于用例执行的前后置步骤处理,pytest中用例执行的前后置处理既可以通过测试夹具(fixtrue)来实现,也可以通过xunit 风格的前后置方法来实现。接下来

额外说明

一个简单完整的WEB系统

目录 一、功能描述 二、数据描述 三、参考示例 四、个人理解 1. 配置application.properites文件: 2. 编写资源类,对应数据库的表的数据。 3. 新建UserRepository接口,继承CrudRepository接口 4.

额外说明

appium爬取微信朋友圈 安卓模拟器版

环境: 安卓7,夜神模拟器,微信7.0.7 代码: import os import time from appium import webdriver from appium.webdriver.common.touch_action import T

额外说明

Java基础 第三节 第五课

包装类 概述 装箱与拆箱 装箱 拆箱 自动装箱与自动拆箱 基本类型与字符串之间的转换 字符串转换为基本类型 概述 Java 提供了两个类型系统, 基本类型与引用类型. 使用基本类型在于效率, 然而很多情况, 会创建对象使用, 因为对象可以做更多的功能.

额外说明

Java中关于时间日期的API

Java中关于时间日期的API JDK 8之前日期和时间的API 1.java.util.Date类 1.1两个构造器的使用 1.2两个方法的使用 2.java.sql.Date类 3.System类中的currentTimeMillis() 4.Sim

额外说明

librosa 语音库(四)librosa.feature.mfcc

基础概念 给定一个音频文件, 通过 Load 加载进来得打signal, shape 为(M ), 比如 sr = 22050, t = 10.62s; 通过分帧后, 将一维的 M 转化为 二维的分帧矩阵: 矩阵的行数 = 单帧的 帧长度 矩阵的列数 =

额外说明

小刀初试之使用idea开发vue

官网下载idea 2021.3.3 旗舰版,默认一步步安装即可。后面开始基于idea安装vue插件并开发: 安装Vue插件 在IntelliJ IDEA中安装Vue插件非常简单,只按照以下步骤操作即可: 打开IntelliJ IDEA,点击菜单栏中的“F

额外说明

Windows系统中,如何快速找到端口被占用的进程?

在本地调试代码时,经常遇到端口被占用导致启动失败的问题,又不能很快找到哪个进程占用了端口,很是恼火。 今天,我们用shell命令轻松搞定。 一、打开命令提示符 window+R 组合键,调出命令窗口。输入CMD回车,打开命令提示符。 二、查看被占用端口对

额外说明

电脑提示找不到mfc100ita.dll文件如何解决?

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或者损坏了,这时你只需下载这个mfc100ita.dll文件进行安装(前提是找到适合的版本)

ads via 小工具