一,先来个简单的练练手,target="_blank" 的作用是在新的tab中打开页面。href 是超链接的意思。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>

二,a标签指的是超链接跳转,a标签不能提交到数据库,它提交不到后台。

做锚 href='#某个标签的ID' 标签的ID不允许重复。这样就把“第一章”和“第一章的内容”关联起来了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id="i1" style="height:600px;">第一章的内容</div>
<div id="i2" style="height:600px;"> 第二章的内容</div>
<div id="i3" style="height:600px;">第三章的内容</div>
<div id="i4" style="height:600px;">第四章的内容</div>
</body>
</html>

三,添加了像素,使每一个div的像素都是300像素(占据的空间)。有了滚动条

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a >第一章</a>
<a >第二章</a>
<a >第三章</a>
<a >第四章</a>
<div style="height:300px;">第一章的内容</div>
<div style="height:300px;">第二章的内容</div>
<div style="height:300px;">第三章的内容</div>
<div style="height:300px;">第四章的内容</div> </body>
</html>

运行结果:

四,添加了跳转功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id="i1" style="height:300px;">第一章的内容</div>
<div id="i2" style="height:300px;">第二章的内容</div>
<div id="i3" style="height:300px;">第三章的内容</div>
<div id="i4" style="height:300px;">第四章的内容</div> </body>
</html>

运行结果:

html的body内标签之超链接的更多相关文章

  1. 6、html的body内标签之超链接

    一.超链接 <a href="https://www.baidu.com" target="_blank">某度</a> #target ...

  2. 前端1-----HTML了解,内联标签(图片,超链接锚点,超链接邮箱)

    前端1-----HTML了解,内联标签(图片,超链接锚点,超链接邮箱) 一丶自定制B/S # -*-coding:utf-8-*- # Author:Ds import socket IP_PORT= ...

  3. 关于html 中form表单的内标签和使用

    表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...

  4. HTML的BODY内标签介绍

    一.基本标签 <body> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线& ...

  5. 块级标签包含行内标签底部出现3px间隔的解决办法

    当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔: 代码如下: <!doctype html> <html lang="en& ...

  6. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  7. css块级标签,行内标签,行内块标签的转换(2)

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  8. 从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

    大家好,这里是 Daotin 从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享 ...

  9. 用html给div加类似a标签的超链接(转)

    今天项目中遇到用html给div加类似a标签的超链接,回想半天,万幸还是想出来了. 分享一下啊: 1.通过window.open函数 <div onclick="window.open ...

随机推荐

  1. 北京Uber优步司机奖励政策(4月7日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. Java:List判空的条件:List=null 和 List.size = 0

    当需要对一个LIst进行判空操作时我们可使用如下两个语句: if (list == null || list.size() == 0) {} if (list != null && l ...

  3. javasript 字符串 数组操作

    Javascript中经常涉及到对字符串和数组的处理,今天总结一下具体的用法 一 操作字符串 String对象有很多函数,可以以不同的方式访问和操作字符串,具体方法如下:   charAt(index ...

  4. UPA深度性能报告解读

    WeTest 导读 UPA作为腾讯WeTest与Unity官方联合打造的客户端性能分析工具,为开发者提供了极大的便利和效能提升.产出的分析报告内容详尽,但您是否真的读懂了报告?是否了解每项数据的含义? ...

  5. hdu1421搬寝室(动态规划)

    搬寝室 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  6. selenium--特殊元素定位

    该篇博客总结特殊元素(select.radio\checkbox.时间控件.文件上传.图片验证码.模拟鼠标操作.Js 或 JQuery调用)操作. 1.select @Test public void ...

  7. 初学Direct X(4)

    初学Direct X(4) 本文学着做出一个如下的小游戏 游戏方式是使用键盘控制红色的Bucket收集蓝色的炸弹 1.酝酿一下 现在我已经掌握: 将位图文件加载到内存 绘制位图到buckbuffer ...

  8. Python基础 之 数据类型

    数据类型 一.运算符 算数运算a = 10 * 10赋值运算a = a + 1 a+=1 布尔值:True 真 False 假 if True: pass while True: pass v = n ...

  9. 查找 二叉树中 k1 到 k2区间的节点

    vector<int> res; int key1, key2; void traverse(TreeNode * root){//采用前序遍历 if(root == NULL) retu ...

  10. 使用手机登录OWA修改密码的问题

    最近发现使用手机端登录OWA,安卓手机是可以修改密码的,如图1,但是iPhone就不成,safari和第三方都不可以,如图二. 图一 图二