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. LeetCode Hash Table 3. Longest Substring Without Repeating Characters

    HashMap的应用可以提高查找的速度,键key,值value的使用拜托了传统数组的遍历查找方式,对于判断一个字符或者字符串是否已经存在的问题可以非常好的解决.而本题需要解决的问题就是判断新遍历到的字 ...

  2. 在SAE安装原版WORDPRESS(图文讲解)

    wordpress下载:https://cn.wordpress.org/ 在Sina App Engine上搭建WordPress博客图文教程: 一.登录你的SAE账号以后.进入"我的应用 ...

  3. OpenCV实现图像颜色特征提取

    https://github.com/ictlyh/ImageFeature 链接:http://pan.baidu.com/s/1mhUoPxI 密码:3cnn

  4. VS中单元测试用法

    using System; using Microsoft.VisualStudio.TestTools.UnitTesting; namespace UnitTestProject1 { [Test ...

  5. 有一个数组a[N]顺序存放0~N-1,要求每隔两个数删掉一个数,到末尾时循环至开头继续进行,求最后一个被删掉的数的原始下标位置。以8个数(N=7)为例:{0,1,2,3,4,5,6,7},0->1->2(删除)->3->4->5(删除)->6->7->0(删除),如此循环直到最后一个数被删除。

    // ConsoleApplication12.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" // ConsoleApplication1 ...

  6. Web网页开发常见经典问题

    1.网络请求参数共享 转发dispatcher和重定向redirect 对于参数共享的区别 Redirect和Dispatcher 区别

  7. 【puppeteer+Node.js】学习

    总结了一下有关puppeteer的学习的网站,以后还会继续更新 puppeteer 介绍 Puppeteer是一个通过DevTools Protocol控制headless chromium的高级no ...

  8. TP 上传excel

    <?php class ExcelAction extends Action{ public function read($filename,$encode='utf-8'){ vendor(' ...

  9. android 集成QQ互联 (登录,分享)

    参考:http://blog.csdn.net/syz8742874/article/details/39271117 http://blog.csdn.net/woblog/article/deta ...

  10. 【BZOJ4198】[Noi2015]荷马史诗 贪心+堆

    [BZOJ4198][Noi2015]荷马史诗 Description 追逐影子的人,自己就是影子. ——荷马 Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅 ...