【轻松前端之旅】<a>元素妙用
浏览器读取服务器内容时,通过URL(包含:协议+域名+绝对路径)如:https://www.baidu.com/index.html
浏览器从本地读取内容时,会用file协议。如:file:///E:/website/index.html
<a>标签中的href属性,可以通过URL或相对路径来链接到其他页面。最好自己网站的页面用相对路径,外部网站用URL。
用href也可以指定到页面中的某个位置,只需要在改位置元素加上id属性,使用#就可以做到。
如:<a href="home.html#elementId"> 、<a href="#elementId">
屏幕将自动滚动到elementId元素处。
<a>标签的title属性,可用户提供更多的信息,不同的浏览器对title有不同的响应,大部分浏览器是鼠标放到元素上一秒后,显示title,
针对视觉不好的用户,有些浏览器可能会大声读title出来。html所有元素都有title属性。
<a>的target属性,用户打开新窗口。
target值:
_blank 在新窗口中打开被链接文档。
_self 在被点击时的同一框架中打开被链接文档(默认)。
_parent 在父框架中打开被链接文档。
_top 在窗口主体中打开被链接文档。
不过还可以指向一个名字,如果几个a链接都指向同一个target名字,他们都会链接到同一个窗口。
例子:
<html>
<head></head>
<body>
<a href="http://www.w3school.com.cn/" target="w3">aaaaaaaaaaaaaaaaaaaa</a>
<a href="http://www.w3school.com.cn/" target="w3">aaaaaaaaaaaaaaaaaaaa</a>
</body>
</html>
【轻松前端之旅】<a>元素妙用的更多相关文章
- 【轻松前端之旅】元素,标记,属性,<html>标签
HTML文档是由HTML元素定义的. HTML元素(element)指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 有些元素会使用简写记法,如<img src=' ...
- 【轻松前端之旅】HTML的块元素、行内元素和空元素
块(block)元素 显示成一块,前后有换行.块元素常用于web页面的主要构造模块.例如:<div>,<p>,<h1>~<h6>,<blockqu ...
- 【轻松前端之旅】CSS选择器中的空格与尖括号有何区别?
CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...
- 【轻松前端之旅】CSS盒子模型
盒子模型,也叫框模型,在CSS里是很重要的概念. 每个元素都可以看做一个盒子.盒子包含四个部分:外边距(margin).边框(border).内边距(padding).元素内容(element con ...
- 【轻松前端之旅】CSS入门
编写css,很自然的思路: 1.给哪些元素添加样式呢?选择器技术就解决这个问题. 2.添加哪些样式?这就要了解css样式属性及它的值对应的显示规则了. 因此,学习css首先要学的就是选择器,至于样式属 ...
- 【轻松前端之旅】<!DOCTYPE>标签
前端学习,先学习HTML,CSS,Javascript HTML - HyperText Markup Language HTML-超文本标记语言,提供了一种标记网页内容的方法. 浏览器怎么知道如何显 ...
- 我的前端之旅--SeaJs基础和spm编译工具运用[图文]
标签:seajs nodejs npm spm js 1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我 ...
- 前端之旅HTML与CSS篇之a便签中放入其他块元素会撑大高度的原因
原因:a元素下有一个匿名文本,这个文本外有一个匿名行级盒子,它有的默认vertical-align是baseline的,而且往往因为上文line-height的影响,使它有个line-height,从 ...
- web前端之HTML中元素的区分
作为前端人员,我们就是要与各种超文本标记打交道,用到各种不同的标签元素.在使用的时候不知道有没有注意到他们的分类归属?现在就来说一说博主的见解: 目前博主总结了三种分类方法:一是按封闭来划分,一是按显 ...
随机推荐
- 数论卷积公式and莫比乌斯反演
数论卷积: 对于两个数论函数f(x),g(x) f(n)g(n)=∑ f(d)g(n/d) d|n 莫比乌斯函数: 设一个数n=(p1^k1)*(p2^k2)*(p3^k3)*..........*( ...
- Lepus监控之Oracle配置
1.安装cx_Oracle a.官网下载客户端组件包 oracle-instantclient12.2-basic-12.2.0.1.0-1.x86_64.rpmoracle-instantclien ...
- 杂谈2.cpp
Ostream类定义的插入运算符(<<)使数据插入到输出流,istream定义的抽取运算符(>>)能够从输入流中抽取信息 Cin和cout都是智能对象,能够根据程序上下文将信息 ...
- 【Linux】【Jenkins】配置过程中,立即构建时,maven找不到的问题解决方案
在Linux环境下配置Jenkins执行时,发现不能执行Maven,这个比较搞了. A Maven installation needs to be available for this projec ...
- OOM三种情况
第一种OutOfMemoryError: PermGen space发生这种问题的原意是程序中使用了大量的jar或class,使java虚拟机装载类的空间不够,与Permanent Generatio ...
- sqlserver 书查询 之二
WITH treeAS(SELECT ParentId, Organization_ID,1 AS x2level,Organization_Name,CAST(Organization_Name A ...
- Spring MVC @SessionAttributes注解
@SessionAttributes原理 默认情况下Spring MVC将模型中的数据存储到request域中.当一个请求结束后,数据就失效了.如果要跨页面使用.那么需要使用到session.而@Se ...
- 001之IP基础对话框
在TCP/IP协议中,建立连接的两个进程(客户端和服务器)各自用一个socket(IP地址+TCP/UDP端口号)标识.在MFC中流式套接字(SOCK_STREAM)和数据报套接字(SOCK_DGRA ...
- 关于ES6兼容IE 问题记录之一
这两天在做前端网页时,遇到一个问题,页面打开发生乱码,如下: 现象:360 浏览器,在急速模式下(即谷歌模式)是OK的显示,第一张图布局OK:在兼容模式下(即IE模式)是显示NG的,第二张图布局乱码 ...
- 数据库中多对多关系的处理 User---Role
--一个用户可以担任多个角色,如user1既是调度员又是分拣员--一个角色可以被多个用户担任,如user1是调度员,user2也是调度员--用户和角色之间的对应关系为多对多,所以会产生中间表 t_us ...