html5--1.8超链接下

下面演示链接打开新网友不关闭原网页。


外部网站: 百度

这是用a标签的target属性实现的,用的target="_blank"
这样新出现的页面会另外再开一个页面
target属性的四个值:
_self:当前位置;默认的,没有效果
_blank:新窗口;
_top(最顶层框架),_parent(父框架),这两个属性咱不做讲解,后边的章节再说;

下面演示网页内部锚点


锚点1
锚点2
锚点3

锚点1

这里是用a标签的id属性来实现网页内部锚点的。
通过id链接到a标签引用位置的地址href
引用id的时候有#号。

代码:

<a href="#1">锚点1</a>

<a id="1">锚点1
网页内部使用锚点的方法:

1、设置目的位置a标签的id

2、将引用位置a标签的href设置为引用id

一个锚点需要用两个a标签实现

锚点2

html中的id和name属性的区别:
id属性:通用属性,可以理解为元素的身份证,一个html里面id不重复
name属性:可以理解为元素的名字,名字可重复,可同名

锚点3


学习要点:

target属性
id或name属性和创建文档内链接

1.target属性的四个值:
_self:当前位置(默认,加上不会有效果)
_blank:新窗口;
_top(最顶层框架),_parent(父框架),这两个属性咱不做讲解,后边的章节再说;

2.id属性:通用属性,可以理解为元素的身份证;name属性:可以理解为元素的名字

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接演示下</title>
</head>
<body bgcolor="Beige">
<h1 align="center">下面演示<mark>链接</mark>打开新网友不关闭原网页。</h1>
<hr>
外部网站: <a href="https://www.baidu.com" target="_blank">百度</a><br> <h5>
<p>
这是用a标签的target属性实现的,用的target="_blank"<br>
这样新出现的页面会另外再开一个页面<br>
target属性的四个值:<br>
_self:当前位置;默认的,没有效果<br>
_blank:新窗口; <br>
_top(最顶层框架),_parent(父框架),这两个属性咱不做讲解,后边的章节再说;
</p>
</h5> <h1 align="center">下面演示网页<mark>内部锚点</mark></h1>
<hr> <a href="#1">锚点1</a>
<a href="#2">锚点2</a>
<a href="#3">锚点3</a>
<br><br>
<a id="1">锚点1
<h5>
<p>
这里是用a标签的id属性来实现网页内部锚点的。<br>
通过id链接到a标签引用位置的地址href。<br>
引用id的时候有#号。<br>
</p>
</h5>
<br><br><br><br>
<a id="2">锚点2
<h5>
<p>
html中的id和name属性的区别:<br>
id属性:通用属性,可以理解为元素的身份证,一个html里面id不重复;<br>
name属性:可以理解为元素的名字,名字可重复<br>
</p>
</h5>
<br><br><br><br>
<a id="3">锚点3<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>
</body>
</html>

html5--1.8超链接下的更多相关文章

  1. PowerPoint超链接字体颜色修改、怎么去掉超链接下划线

    经常在做PPT幻灯片时会遇到这样一个问题,给文字加超链接后发现链接的颜色是蓝色的,而且还带有下划线,这种效果与主题的色彩搭配简直是太影响美观效果了.有没有什么办法可以去掉PPT中的超链接下划线?再将超 ...

  2. html5实现移动端下拉刷新(原理和代码)

    这篇文章给大家介绍的内容是关于html5实现移动端下拉刷新(原理和代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功 ...

  3. 轻松实现HTML5时钟(分享下自己对canvas的理解,原来没你想像的那么难哦)

    Hey,guys! 让我们一起用HTML5实现一下简易时钟吧! 接触canvas时, 我突然有一种非常熟悉的感觉------canvas的部分的功能其实和Photoshop中的 钢笔工具 是一样的.所 ...

  4. HTML5的一个写下拉文本框标签

    新的HTML5有个标签,能够下拉的文本框 代码如下 <input list="browsers"> <datalist id="browsers&quo ...

  5. html5+css3实现手机下拉和下拉刷新

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 来吧,HTML5之基础标签(下)

    <dialog> 标签 定义对话框或窗口. <dialog> 标签是 HTML 5 的新标签.目前只有 Chrome 和 Safari 6 支持 <dialog>  ...

  7. 移动端(html5)微信公众号下用keyup实时监控input值的变化无效

    搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公 ...

  8. 解决<a>文本本身带下划线和超链接下划线重合的问题

    <a style="padding-bottom: 1PX;border-bottom: 1PX #254fc5 solid;text-decoration: none;"& ...

  9. html5 标签在 IE 下使用

    (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datal ...

随机推荐

  1. Android--数据库数据显示至屏幕

    MainActivity.java 这段代码的作用是从数据库中获取到数据并显示在界面上 import java.util.ArrayList; import java.util.List; impor ...

  2. tomcat启动出现异常 Error filterStart

    tomcat启动中出现 Error filterStart异常, 没有任何堆栈信息,如下: SEVERE: Error filterStart Jul 6, 2012 3:39:05 PM org.a ...

  3. linq查询去重

    通过自定义扩展方法DistinctBy实现去重 public static IEnumerable<TSource> DistinctBy<TSource, TKey> (th ...

  4. android一步一步实现视频clientapp(一)

    我开发完毕了一个完整的视频clientapp.如今.分享出来.供刚開始学习的人学习參考(大神就不用看了,比較简单,仅供入门),大家相互交流相互学习. 项目有些功能,我时间也不是非常多.仅仅能时不时更新 ...

  5. 一起学Django之Day01

    创建项目 SimilarFacedeMacBook-Pro:PycharmProjects similarface$ django-admin startproject StudyDjango 创建A ...

  6. Java方法存在于哪一区

    Java运行时的数据区包括:(其中前两个是线程共享的) 1.方法区(Method Area)存储已被虚拟机加载的类信息.常量.静态变量.即编译器编译后的代码等数据 2.堆(Heap)存放对象实例,几乎 ...

  7. intellij 开发webservice

    最近项目中有用到WebService,于是就研究了一下,但是关于intellij 开发 WebService 的文章极少,要不就是多年以前,于是研究一下,写这篇博文.纯属记录,分享,中间有不对的地方, ...

  8. eclipse中三大利器

    eclipse中两大利器: 首先说下用eclipse开发工具.进行java代码,开发的时候,我们开发完成以后.需要测试.大部分我们用Junit测试工具.可是内部的代码覆盖率.和结构我们看的不是那么详细 ...

  9. 【bootstrap】右侧sidebar不跟着内容滚动的异常

    移动开发需要依赖于Web服务的接口,但是写这个接口文档实在是比较繁琐,所以今天我就写了个包解析程序自动生成接口文档. 内容显示我是借鉴Bootstrap的官方教程http://v3.bootcss.c ...

  10. window 安装 skywalking

    1.下载安装包 官网下载需要的安装包: https://github.com/OpenSkywalking/skywalking/releases 分别下载skywalking-collector.z ...