一，先来个简单的练练手，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. 老曹眼中的Linux基础

    Linux 几乎无处不在,不论是服务器构建,还是客户端开发,对操作系统的基本理解和基础技能的掌握对全栈来说都是必备的. 系统的选择 Linux发行版本大体分为两类,一类是商业公司维护的发行版本,一类是 ...

  2. iOS 测试工具reveal可视化调试工具的使用

    简单翻译一下reveal可视化图形工具插入项目的官方文档(官方英文版file:///Applications/Reveal.app/Contents/SharedSupport/Documentati ...

  3. debian8+lnmp1.2一键安装+WordPress3.9

    下载并安装LNMP一键安装包 wget -c http://soft.vpser.net/lnmp/lnmp1.2-full.tar.gz && tar zxf lnmp1.2-ful ...

  4. requests，lxml爬启信宝

    首先, 添加requests模块: 然后, 添加lxml模块: 启信宝登录抓包: QiXinBao.py: import requestsfrom lxml import etree loginUrl ...

  5. linux部署MantisBT(三)部署MantisBT

    三.部署MantisBT 1.下载MantisBT https://www.mantisbt.org/download.php 2.将MantisBT安装包放在/apache/htdocs下并重命名为 ...

  6. (Python爬虫05)完善的爬虫学习大纲

  7. 【rich-text】 富文本组件说明

    [rich-text] 富文本组件可以显示HTML代码样式. 1)支持事件:tap.touchstart.touchmove.touchcancel.touchend和longtap 2)信任的HTM ...

  8. CSP201403-2：窗口

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  9. 一个简单的页面弹窗插件 jquery.pageMsgFrame.js

    页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处: ...

  10. js如何判断客户端是iOS还是Android等移动终端

    判断原理:JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来 ...