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. 微信小程序 - 答题进度条

    关于进度条的话,我是使用官方原生的progress的. 关于进度progress接受保留2位小数(从后端获取到平均值,再item循环出来) js wxml

  2. 动态载入Layout 与 论Activity、 Window、View的关系

    1)动态载入Layout的代码是 getWindow().setContentView(LayoutInflater.from(this).inflate(R.layout.main, null)); ...

  3. 无刷新URL 更新

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. Nonblocking Memory Refresh&2018ISCA/Security& 非阻塞内存刷新

    Abstract 我们提议的非阻塞刷新工作是一次刷新内存块中的一部分数据,并在内存块中使用冗余数据,如RS码,在块中计算块的刷新/不可读数据以满足读取请求.作为概念的证明,我们将非阻塞刷新应用于服务器 ...

  5. alibaba canal安装笔记

    canal是alibaba开源的基于mysql binlog解析工具,可利用它实现mysql增量订阅/消费,典型的应用场景如下图: 利用canal,可以将mysql的数据变化,通过解析binlog,投 ...

  6. 【BZOJ3091】城市旅行 LCT

    [BZOJ3091]城市旅行 Description Input Output Sample Input 4 5 1 3 2 5 1 2 1 3 2 4 4 2 4 1 2 4 2 3 4 3 1 4 ...

  7. android菜鸟学习笔记9----Activity(二)

    关于Activity的生命周期: 下面是Activity整个生命周期中,状态发生变化时所回调的方法,它们对应着Activity完整的生命过程. void  onCreate(Bundle savedI ...

  8. Linux Tomcat的安装

    inux版本:CentOS 6.2 iso文件下载地址:http://mirrors.163.com/centos/6.2/isos/i386/CentOS-6.2-i386-bin-DVD1.iso ...

  9. 使用jdk中keytool生成证书

    -genkey 在用户主目录中创建一个默认文件".keystore",还会产生一个mykey的别名,mykey中包含用户的公钥.私钥和证书 -alias 产生别名 -keystor ...

  10. java基本类型和包装类的区别(转)

    int 是基本类型,直接存数值 Integer是类,产生对象时用一个引用指向这个对象 Java把内存划分成两种:一种是栈内存,另一种是堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数 ...