超链接语法介绍、路径部分应用(萌新必看)
《个人学笔记六》
超链接的语法
超链接,即超级链接,就是指按内容链接。超级链接在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后,才能真正构成一个网站。在超文本文档中,超链接用标记语言的标签指出。
超链接是Web页面区别于其他媒体的重要特征之一,网页浏览者只要单击网页中的超链接就可以自动跳转到超链接的目标对象,且超链接的数量是不受限制的。文本超链接是分配目标URL的字或短语,图片超链接是为整个图片分配默认超链接,也可以为图片分配一个或多个热点。(借鉴于百度知道)
1.语法说明
超链接a标记以< a><开头< /a>结尾.期间内容位超链接标题。超链接由目的地址、链接标题、打开位置三部分组成。
2.属性说明
- href:超链接指向的目标文件。
- name:规定锚(anchor)的名称。
- title:指向链接的提示信息。
- target:指定打开的目标文件,如表所示:
属性值 | 说明 |
---|---|
_self | 带当前框架中打开链接 |
_blank | 在一个全新的空白窗口中打开链接 |
_top | 在顶层框架中打开链接,也可以理解为在根跟框架中打开链接 |
_parent | 在当前框架的上一层打开链接 |
_framename | 在指定的框架或浮动的框架中打开链接,框架名称可以自定义 |
练习参考代码如下:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接演示</title>
</head><body><h3>超链接演示</h3><a href="http://www.baidu.com" title="BaiDu">百度一下</a><br><a href="http://www.edu.cn" target="_blank" title="CERNET">教育课与科研计算机网</a><br><a href="http://www.sina.com.cn" target="_self" title="Sina">新浪</a>
</body></html>
浏览器显示结果
注释:刚启动浏览器是,超链接的标题默认是红色的,只要一点进去标题会变紫色,如现图所示。
路径介绍
当我们需要跳转一个服务器内部页面时,一般我们会使用相对路径
相对路径都会使用.或. .开头
./
. ./(两点之间没空格)
./可以省略不写。如果不写./也不写…/则就相当于写了./
./表示当前文件所在的目
. ./当前文件所在目录的上一级目录
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="./restudy6.html">点击此进入另一个文件</a><br><a href="restudy6.html">点击此进入另一个文件</a><br><a href="../CSS/css1.html">进入上一级CSS文件中的css1.html</a>
</body></html>
浏览器显示结果:
点击第一个链接或第二个链接进入
点击第三个链接进入
部分应用
可以直接将超链接的href属性设置为#,这样点击超链接后页面不会发生跳转,而是转到当前页面的顶部位置
可以跳转到页面的指定位置,只需要将href属性设置 #目标元素的id属性值
id属性 (唯一不重复的)
每一个标签都可以增添一个id属性
id属性就是元素的唯一标识,同一个页面不能出现出现重复的id属性
在开发中可以将#作为超链接的展位符使用
也可以使用 javascript: ;来作为超链接的占位符
本人学习图片:
超链接语法介绍、路径部分应用(萌新必看)相关推荐
- 同济大学计算机系拿奖学分绩点,萌新必看NO.8|关于学分绩点奖学金,你想知道的都在这里...
原标题:萌新必看NO.8|关于学分绩点奖学金,你想知道的都在这里 结束高考,来到武汉大学,是否意味着你能够彻底放松呢?正在埋头苦读的小帮告诉你,对于大学生来说, 学习仍然非常重要.每个期末考试周,图书 ...
- 一篇文章指明做JavaWeb项目需要的前置知识+完整项目初解读(萌新必看,十分友好)
前言 过了web这个阶段了,项目也完成了的我想给各位后来者总结一下我整个项目从开始到结束的经验,当然,也不是一帆风顺,报错有时候折磨的要死,废话不多说,现在就开始吧. 本文一共分为两个部分:纯理论科普 ...
- 为什么刀剑总显示服务器繁忙,刀剑乱舞萌新必看攻略 常见问题篇
(为了方便下文均用 太=太刀 大太=大太刀 打=打刀 脇=脇差 薙=薙刀 作为简称,均为游戏内刀的类别) 1左上角的玩家等级有什么用处吗? 随着等级上升,四样材料的自动恢复上限会提高.在演习中遇到的对 ...
- 计算机的外设配置,CSGO萌新必看电脑配置及外设选择建议心得分享
最近社区看到好几个萌新帖子求电脑选配,我也是从一个电脑萌新不停的上网百度,问朋友然后总结了很多经验今天跟大家分享下,因为社区很多都是学生党,所以我选的配置尽量会是选我觉得性价比比较高的来说,本人也是菜 ...
- 灵山奇缘服务器一直维护,灵山奇缘萌新必看FAQ 新手常见问题解答
灵山奇缘作为一款继承传统回合制的基本玩法,也颠覆了传统回合制网游的特色玩法,对于玩过回合制网游的玩家而言,可能以为回合制游戏都是一个样,其实不然,灵山奇缘里也有本身的特色玩法,如果你想玩得更出色快人一 ...
- 萌新必看——10种客户端存储哪家强,一文读尽!
转载请注明出处: 葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 数据持久 数据持久指将内存中的数据模型转化为存储模型,和将存储模型转化为内存中的数据模型这一过程的统称.在 ...
- 萌新必看—10种前端存储哪家强,一文读尽!
作者:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文链接:https://segmentfault.com/a/1190000040147911 点击上方 程序员成长指 ...
- excel自动保存_萌新必看!python处理excel实例
电脑上必安装的办公软件三大软件:word.excel.ppt,其中excel是在处理数据效率最高,也是最为繁琐的,因此高效快捷使用excel尤为重要,以下为大家介绍使用python更自动化处理exce ...
- 音频、视频Flash文件(萌新必看)
<个人学习笔记八> embed标记 使用embed标记,可以播放的文件类型有MiNi.Mav.AIFF.SWF.AV.MP3.MOV.AVI等 语法说明 width . height:整型 ...
最新文章
- 安卓饼状图设置软件_话单及银行卡交易智能分析软件
- 如何把2d目标检测的bbox转化到现实世界坐标系的?
- 我是如何拿到蚂蚁金服 offer ?
- ASP.NET设置数据格式与String.Format和DataFormatString使用总结
- java hibernate dto_java – 正确使用Entity和DTO在Restful Web服务中...
- 项目实战大全,提升经验的最好办法(一)
- JavaScript--模拟网络爬虫
- 前方两万字高能预警!SMBGhost SMBleed 漏洞深入研究
- linux命令 chmod_Linux chmod命令示例
- mysql复制表原理_MySQL 主从复制原理与实践详解
- 基于confd和etcd的tuxedo中间件容器化方案
- 基于RS485通讯总线的ModbusRtu协议 上位机项目源代码
- 易辅客栈第一套从零学辅助系列教程
- prosody IM cert证书安装
- php 微信公众号开发,基于 PHP 的微信公众平台开发
- AltiumDesigner 18 菜单中英文对照表
- opencv 将Mat转为图片数据
- Java 学习笔记 —— 基础部分
- Python Tkinter 之Radiobutton控件(Python GUI 系列8)
- 电脑网络被别的计算机控制,电脑被别人远程控制了,怎么办?
热门文章
- 通过JS实现判断数字正负
- 互联网各大厂的中台建设怎么样了?腾讯/百度/头条/滴滴/小米...
- jai-core-1.1.3.jar was cached in the local repository 问题解决(maven)
- java 遥控_用树莓派和JAVA实现4路遥控控制
- Ubuntu 18.04 网速慢解决办法
- Unity3D Shader :水滴效果
- python sdk 获取新浪微博签到信息
- 解决Pyppeteer下载chromium慢或者失败的问题
- echarts饼图显示引导线,图例过多翻页
- 京东电器“220V带电新人类”:找寻狂拽炫酷吊炸天的科技感