HTML中使用&lt;a&gt;标签实现文本内链接-零基础自学网页制作

本内链接

最后这些关于html的内容有点查漏补缺的意思了，这一次是关于文本内链接的使用方法，简单来说就是我们的页面中有一个章节名称目录，如何点击目录中的名称，就能正好在页面中显示相应内容。

如图所示：

点击目录的"总体评价"跳转到相应内容，如图：

就是这样的一个效果。在很多网页中经常看到。

这个案例我们会分三部分来讲解。

今天主要学习如何使用<a>标签进行页面内链接，已及从其他网页链接该页面内的指定内容。

这里会有一个问题，就是点击链接后，文字内容会置顶显示，这个默认形式会给我们带来不便，解决方案较复杂，会在最后一次讲解中给出。

下一次我们来学习如何对图片添加映射超链接，映射超链接的意思是，假如我的图片中有两个人物或物象，考虑读者会感兴趣，想了解更多内容，如何框选出物象边缘来添加链接，这就是图像映射超链接。如图：使用一个平时不可见的边框来制作图片映射链接，确保感兴趣的读者能点击到画面中的目标物体。

最后一部分我们将回答今天结尾的问题，也就是如何解决置顶问题。这一部分也会作为HTML部分结束的综合练习，和css部分启蒙的预热练习。，

首先看一下今天的基础代码

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文内链接</title>
  </head> 
  <body >
  <a>试飞进程</a>
  <a>研制情况</a>
  <a>服役动态</a>
  <a>总体评价</a>
  <p>
  <h2><a>试飞进程</a></h2>
  歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试，13时08分成功着陆，历时18分钟。<br>整个首飞过程在歼-10S战斗教练机陪伴下完成 。2016年10月28日，首次发布"空军试飞员将驾歼-20飞机亮相中国航展"后，还陆续发布了"歼-20战机列装空军作战部队""空军歼-20战机首次开展海上方向实战化训练"等。
  <h2><a>研制情况</a></h2>
  在2016年11月1日，第十一届珠海航展，歼-20首次进行空中飞行展示。两架歼-20做了公开飞行，不仅在现场引起轰动，也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作，也进入了世界最先进的第五代战斗机行列，它是中国国防能力高速发展的一个象征。<br>2018年11月11日，第十二届中国航展在珠海迎来"高光时刻"：歼-20战机在公开飞行展示中挂弹开仓，震撼献礼人民空军成立69周年纪念日。 <br>2019年10月13日，庆祝人民空军成立70周年航空开放活动新闻发布上，空军新闻发言人申进科大校介绍歼-20战机列阵人民空军"王牌部队"
  <h2><a>服役动态</a></h2>
  2017年3月9日，中央电视台报道歼-20战斗机正式进入空军序列。<br>2017年3月13日，《中国日报》发布消息称，中国自主研制的歼-20近期将装配国产发动机。<br>2017年7月30日，歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来，3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>2017年9月28日，在中国国防部行记者会上，国防部新闻发言人吴谦大校介绍歼-20飞机已经列装部队。<br>2017年11月10日上午，中国空军发言人申进科大校表示，歼-20 列装部队后，已经开展编队训练。<br>2018年2月9日，中国空军新闻发言人申进科大校发布消息，歼-20开始列装空军作战部队。<br>2018年10月30日，中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br>2019年10月1日，歼-20现身庆祝中华人民共和国成立70周年阅兵式；阅兵中，歼-20与歼-16、歼-10C三型飞机分别以5机楔队组成战斗队形接受检阅；该三款歼击机被誉为中国空军歼击机家族的"三剑客"，是未来联合作战的骨干力量
  <h2><a>总体评价</a></h2>
  歼-20是眼下亚洲区域最先进的战机，这让中国空军在面对日本、韩国与印度等国家的空军时占有显著优势。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机由于研制进度几度推迟，尚未正式交付入役；美国F-35战斗机也多次出现飞机供氧不足的问题，大面积停飞，出口受阻；韩国KF-X隐形战机先是被爆出因掌握不了关键技术而被迫降成四代半战机的情况，后又传出了合作方印尼打算撤资并已告知韩国的消息。因此，中国歼-20战机成为亚太区域领跑的优势战机。<br>中国空军正向全疆域作战的现代化战略性军种迈进，成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队，将进一步提升空军综合作战能力，有助于空军更好的肩负起维护国家主权、安全和领土完整的神圣使命。<br>歼20是我国自主研制的第五代战斗机，它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机，是按照性能、技术和进度要求，研制开发我国自己的新一代隐身战斗机。引领技术发展，指通过自主创新实现强军兴军的目标。歼20在态势感知、信息对抗、协同作战等多方面取得了突破，这是中国航空工业从跟跑到并跑，再到领跑的必由之路。创新研发体系，是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制，我们建立了具有我国特色的数字化研发体系。建设卓越团队，是指通过型号研制，锤炼一支爱党爱国的研制队伍，这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来，我们将在战斗机的机械化、信息化、智能化发展征程上不断前行。
  </p>
  </body> 
  </html>

看着复杂，实际上主要都是些内容文字，简化后的代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文内链接</title>
  </head> 
  <body >
  <a>试飞进程</a>
  <a>研制情况</a>
  <a>服役动态</a>
  <a>总体评价</a>
  <p>
  <h2><a>试飞进程</a></h2>
    歼-20隐形........首次开展海上方向实战化训练"等。
  <h2><a>研制情况</a></h2>
    在2016年......"王牌部队"
  <h2><a>服役动态</a></h2>
    2骨干力量
  <h2><a>总体评价</a></h2>
    歼-20是眼下亚洲区域最先进的战机......不断前行。
  </p>
  </body> 
  </html>

就是在<body></body>中添加四个<a></a>标签来写入标题，并列写入一个<p></p>标签，并在<p></p>标签中添加文字内容和<h2></h2>标签。这时需要注意的是，<h2></h2>中还要用<a></a>标签夹住标题。

页面效果如下：

下面我们来添加文章内部链接

添加文章内部链接需要一前一后两个<a></a>标签。一个是目录中的<a></a>,如图：

一个是正文中的标题上的<a></a>,如图：

添加内部链接的办法非常简单，首先我们把目录中的标题<a></a>标签称为"召唤者"。把正文中的标题中的<a></a>标签称为"被召唤者"。如果您学过《》这篇教程就会知道，一个标签召唤或调用另一个标签需要能叫出被调用标签的名字！

所以先要给"被召唤者"起名字，起名字的方法有两种，一种是name=""，还有一种是id=""，建议大家都写上，因为有的浏览器不支持name属性。具体写法如下：

<h2><a name="chapter1" id="chapter1">试飞进程</a></h2>

在"召唤者"<a>标签中使用href属性来叫出"被召唤者"的名字！示例代码如下：需要在引号中添加#后再写名字。

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文内链接</title>
  </head> 
  <body >
  <a href="#chapter1">试飞进程</a><!--看这里-->
  <a>研制情况</a>
  <a>服役动态</a>
  <a>总体评价</a>
  </body> 
  </html>

<a>标签有点懒，只叫名字的话它会假装听不见，所以还要具体描述它的特征，让它不好意思偷懒，也就是前后两个<a></a>标签中间夹的文字内容要一致，比如上文中的两个<a>中间的内容都是"试飞进程"。如果字不一样，休想叫得动"被召唤者"。

效果如下：

点击后，试飞进程标签跳到了视窗的最顶端，如图：这种顶在视窗顶端的显示的方式我们称之为"置顶"。

下面我们使用这个方法，为剩下的标题添加页面内链接。

打开外部页面中指定信息位置的方法

首先，我们复制一下这个页面文件命名为"打开外部页面文件指定位置.html"，然后删掉<p></p>和其中内容。示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>打开外部页面文件指定位置</title>
  </head> 
  <body >
  <a href="#chapter1">试飞进程</a>
  <a href="#chapter2">研制情况</a>
  <a href="#chapter3">服役动态</a>
  <a href="#chapter4">总体评价</a>
  </body> 
  </html>

方法非常简单，在href中添加外部页面路径即可！示例代码如下：

<a href="文内链接ceshi.html#chapter1">试飞进程</a>

依次添加后，页面效果如下：

点击其中一个标题"研制情况"，页面跳转，如图：

这里，置顶的问题就出现了，如果我们的文章目录一直在视图的顶部，每次点击页面内链接时，顶部的目录就会和标题重叠，非常不美观，解决这个问题就要涉及到<div>布局的应用，我们以后再说。

OK！今天我们的内容结束了，下一次学习图片映射链接功能。

喜欢的朋友请关注我，点赞也会让我动力满满。

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

、<p> </p> 段落标签说明：

1、段落标签有两种写法：</p> 和 <br>

2、<p>标签需要写一对；<br> 标签只需要在文字后面写一个。

3、段落标签也是每个段落独占一行。

4、</p> 和 <br>区别：p 标签行与行之间的间距比br标签更大一些。

二、<p> 段落标签代码演示：不推荐

<!DOCTYPE html>

<head>

<title>我的第二个网页</title>

</head>

<p>白日依山尽,</p>

<p>黄河入海流。</p>

<p>什么千里目，</p>

<p>更上一层楼。</p>

<p>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</p>

</body>

</html>

家好，我是IT共享者，人称皮皮。这篇文章我们来讲讲CSS的文本样式。

一、文本颜色Color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如"＃FF0000"。
一个RGB值 - "RGB（255,0,0）"。
颜色的名称 - 如"红"。

一个网页的文本颜色是指在主体内的选择：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            body {
                color: blue;
            }


            h1 {
                color: #00ff00;
            }


            h2 {
                color: rgb(255, 0, 0);
            }
</style>
    </head>


    <body>
        <h2>hello world</h2>
        <h1>welcome to CaoZhou</h1>
    </body>


</html>

注：对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。

二、属性

1. text-align 文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐。

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            h1 {
                text-align: center;
            }


            p.date {
                text-align: right;
            }


            p.main {
                text-align: justify;
            }
</style>
    </head>


    <body>


        <p class="date">2015 年 3 月 14 号</p>
        <p class="main">　从前有个书生，和未婚妻约好在某年某月某日结婚。到那一天，未婚妻却嫁给了别人。书生受此打击， 一病不起。　　这时，路过一游方僧人，从怀里摸出一面镜子叫书生看。书生看到茫茫大海，一名遇害的女子一丝不挂地躺在海滩上。路过一人， 看一眼，摇摇头，走了。又路过一人，将衣服脱下，给女尸盖上，走了。再路过一人，过去，挖个坑，小心翼翼把尸体掩埋了。　　僧人解释道， 那具海滩上的女尸，就是你未婚妻的前世。你是第二个路过的人，曾给过他一件衣服。她今生和你相恋，只为还你一个情。但是她最终要报答一生一世的人，是最后那个把她掩埋的人，那人就是他现在的丈夫。书生大悟，病愈。


        </p>
        <p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
    </body>


</html>

2. text-decoration文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .none {}


            .del {
                text-decoration: none;
            }
</style>
    </head>


    <body>
        <p>原来的样子</p>
        <a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
        <p>去掉下划线</p>
        <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
    </body>


</html>

也可以这样装饰文字：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            h1 {
                text-decoration: overline;
            }


            h2 {
                text-decoration: line-through;
            }


            h3 {
                text-decoration: underline;
            }
</style>
    </head>


    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>


</html>

注：不建议强调指出不是链接的文本，因为这常常混淆用户。

3. text-transform文本转换

text-transform文本转换属性是用来指定在一个文本中的大写和小写字母。

uppercase:转换为全部大写。
lowercase：转换为全部小写。
capitalize ：每个单词的首字母大写。

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            p.uppercase {
                text-transform: uppercase;
            }


            p.lowercase {
                text-transform: lowercase;
            }


            p.capitalize {
                text-transform: capitalize;
            }
</style>
    </head>


    <body>
        <p class="uppercase">This is some text.</p>
        <p class="lowercase">This is some text.</p>
        <p class="capitalize">This is some text.</p>
    </body>


</html>

4. text-indent文本缩进

text-indent文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

5. letter-spacing 设置字符间距

增加或减少字符之间的空间。

<style>
     h1 {
       letter-spacing:2px;
}
      h2 {
        letter-spacing:-3px;
}
</style>

6. line-height设置行高

指定在一个段落中行之间的空间。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            p.small {
                line-height: 70%;
            }


            p.big {
                line-height: 200%;
            }
</style>
    </head>


    <body>
        <p>
            This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
        </p>


        <p class="small">
            This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
        </p>


        <p class="big">
            This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
        </p>


    </body>


</html>

7. word-spacing 设置字间距

增加一个段落中的单词之间的空白空间。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style type="text/css">
            p {
                word-spacing: 30px;
            }
</style>
    </head>


    <body>


        <p>
            This is some text. This is some text.
        </p>


    </body>


</html>

8. vertical-align 设置元垂直居中

设置文本的垂直对齐图像。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            img{
                width: 200px;
                height: 100px;
            }
            img.top {
                vertical-align: text-top;


            }


            img.bottom {
                vertical-align: text-bottom;


            }
</style>
    </head>


    <body>
        <p>An <img src="img/logo.png"  /> image with a default alignment.</p>
        <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
        <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
    </body>


</html>

9. text-shadow 设置文本阴影

设置文本阴影。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
         h1{
            text-shadow: 2px 2px #FF0000;
     }
</style>
    </head>


    <body>
    <h1>Text-shadow effect</h1>
    </body>


</html>

三、总结

本文主要介绍了CSS文本样式实际应用中应该如何去操作，通过讲解文本中对应的属性去改变文本的表现形式。使用丰富的效果图的展示，能够更直观的看到运行的效果，能够更好的理解。使用Html语言，代码结构更佳的清晰，能够帮助你更好的学习。

在线咨询

上一篇：国庆前夕，一起重温习近平这3篇重要讲话
下一篇：jsp第三天练习

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML中使用&amp;lt;a&amp;gt;标签实现文本内链接-零基础自学网页制作