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优步司机奖励政策（8月10日到8月16日）
1) 工作日(周一到周五)早高峰时间段(7点到9:30点).晚高峰时间段(5点到8点)车费 2.0 倍,每单奖励部分上限35元 例:在高峰时段中,假设行程基本车费为￥15,只要达到奖励前提,最后你将获 ...
- ubuntu网卡
查看网卡类型 http://blog.csdn.net/eddy_liu/article/details/6578819 qii@ubuntu:~$ lspci | grep -i net 03:0 ...
- Linux命令应用大词典-第30章 审计系统
30.1 auditctl:控制内核的审计系统 30.2 aureport:生成审计信息报表 30.3 ausearch:搜索审计记录 30.4 autrace:跟踪指定进程 30.5 audit-v ...
- Codeforces Round #495 (Div. 2) Sonya and Matrix
正常没有正方形的限制下,值为i的点个数4i 那么从0开始遍历,第一个不为4i的值就是min(x, y) 由于对称性我们姑且令x为这个值 我们先列举n*m=t的各种情况 对于一对n, m.我们已经知道n ...
- 前端开发工程师 - 02.JavaScript程序设计 - 第2章.进阶篇
第2章--进阶篇 类型进阶 类型: Undefined Null Boolean String Number Object 原始类型(值类型):undefined, null, true, " ...
- 垃圾收集器与内存分配策略（深入理解Java虚拟机）
3.1 概述 垃圾收集器要解决哪些问题? 哪些内存需要回收 什么时候回收 如何回收 引用计数算法:当有一个地方引用,+1,引用失效,-1. 缺点:对象之间相互循环引用的问题. 可达性分析算法: ...
- [SHELL]输出目录下所有的可执行文件，批量创建用户
#!/bin/bash IFS=: for folder in $PATH #PATH变量分隔符为: do echo $folder echo ------------------ for file ...
- Android开发-API指南-<permission-tree>
<permission-tree> 英文原文:http://developer.android.com/guide/topics/manifest/permission-tree-elem ...
- EF中如何为表添加新的字段和映射
首先先了解一下ef生成的模型edmx的代码,传送门:http://www.cnblogs.com/yushengbo/p/4807715.html 一.添加新的字段 例子就用我现在项目的这个吧,首先在 ...
- python常用命令—‘\r’
# \r 默认表示将输出的内容返回到第一个指针,这样的话,后面的内容会覆盖前面的内容 如常用的显示程序完成进度!!