html的body内标签之超链接
一，先来个简单的练练手，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内标签之超链接的更多相关文章
- 6、html的body内标签之超链接
一.超链接 <a href="https://www.baidu.com" target="_blank">某度</a> #target ...
- 前端1-----HTML了解,内联标签(图片,超链接锚点,超链接邮箱)
前端1-----HTML了解,内联标签(图片,超链接锚点,超链接邮箱) 一丶自定制B/S # -*-coding:utf-8-*- # Author:Ds import socket IP_PORT= ...
- 关于html 中form表单的内标签和使用
表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...
- HTML的BODY内标签介绍
一.基本标签 <body> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线& ...
- 块级标签包含行内标签底部出现3px间隔的解决办法
当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔: 代码如下: <!doctype html> <html lang="en& ...
- css块级标签、行内标签、行内块级标签
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- css块级标签，行内标签，行内块标签的转换（2）
css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...
- 从零开始学Web之HTML（二）标签、超链接、特殊符号、列表、音乐、滚动、head等
大家好,这里是 Daotin 从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享 ...
- 用html给div加类似a标签的超链接（转）
今天项目中遇到用html给div加类似a标签的超链接,回想半天,万幸还是想出来了. 分享一下啊: 1.通过window.open函数 <div onclick="window.open ...
随机推荐
- 北京Uber优步司机奖励政策（4月7日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Java：List判空的条件：List=null 和 List.size = 0
当需要对一个LIst进行判空操作时我们可使用如下两个语句: if (list == null || list.size() == 0) {} if (list != null && l ...
- javasript 字符串 数组操作
Javascript中经常涉及到对字符串和数组的处理,今天总结一下具体的用法 一 操作字符串 String对象有很多函数,可以以不同的方式访问和操作字符串,具体方法如下: charAt(index ...
- UPA深度性能报告解读
WeTest 导读 UPA作为腾讯WeTest与Unity官方联合打造的客户端性能分析工具,为开发者提供了极大的便利和效能提升.产出的分析报告内容详尽,但您是否真的读懂了报告?是否了解每项数据的含义? ...
- hdu1421搬寝室(动态规划)
搬寝室 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...
- selenium--特殊元素定位
该篇博客总结特殊元素(select.radio\checkbox.时间控件.文件上传.图片验证码.模拟鼠标操作.Js 或 JQuery调用)操作. 1.select @Test public void ...
- 初学Direct X（4）
初学Direct X(4) 本文学着做出一个如下的小游戏 游戏方式是使用键盘控制红色的Bucket收集蓝色的炸弹 1.酝酿一下 现在我已经掌握: 将位图文件加载到内存 绘制位图到buckbuffer ...
- Python基础 之 数据类型
数据类型 一.运算符 算数运算a = 10 * 10赋值运算a = a + 1 a+=1 布尔值:True 真 False 假 if True: pass while True: pass v = n ...
- 查找 二叉树中 k1 到 k2区间的节点
vector<int> res; int key1, key2; void traverse(TreeNode * root){//采用前序遍历 if(root == NULL) retu ...
- 使用手机登录OWA修改密码的问题
最近发现使用手机端登录OWA,安卓手机是可以修改密码的,如图1,但是iPhone就不成,safari和第三方都不可以,如图二. 图一 图二