html5锚点 tab html锚点链接代码

转载

coolfengsy 2024-02-27 17:39:08

文章标签 html5锚点 tab html 前端锚点网页制作 文章分类 HTML5 移动开发

HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。

用法：

1、创建命名锚点，给该标签一个id

2、链接到命名锚点，其href属性的值为#命名锚点的id值

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>锚点链接</title>
    </head>
    <body>
        <ul>
            <li><a href="#lsy">查看李商隐的简介</a></li>
            <li><a href="#nlxd">查看纳兰性德的简介</a></li>
        </ul>
 
        <h2>辛弃疾</h2>
        <p>辛弃疾（1140－1207），南宋词人。原字坦夫，改字幼安，别号稼轩，汉族，历城（今山东济南）人。出生时，中原已为金兵所占。21岁参加抗金义军，不久归南宋。历任湖北、江西、湖南、福建、浙东安抚使等职。</p>
 
        <h2>王维</h2>
        <p>王维（701年－761年，一说699年—761年），字摩诘，号摩诘居士。汉族，河东蒲州（今山西运城）人，祖籍山西祁县，唐朝诗人，有“诗佛”之称。苏轼评价其：“味摩诘之诗，诗中有画；观摩诘之画，画中有诗。”</p>
 
        <h2><a name="nlxd">纳兰性德</a></h2>
        <p>纳兰性德（1655－1685），满洲人，字容若，号楞伽山人，清代最著名词人之一。其诗词“纳兰词”在清代以至整个中国词坛上都享有很高的声誉，在中国文学史上也占有光彩夺目的一席。</p>
 
        <h2><a name="lsy">李商隐</a></h2>
        <p>李商隐（约813年-约858年），字义山，号玉溪（谿）生、樊南生，唐代著名诗人，祖籍河内（今河南省焦作市）沁阳，出生于郑州荥阳。他擅长诗歌写作，骈文文学价值也很高，是晚唐最出色的诗人之一，和杜牧合称“小李杜”</p>
 
        <h2>陆游</h2>
        <p>陆游（1125年11月13日－1210年1月26日），字务观，号放翁，汉族，越州山阴（今浙江绍兴）人，尚书右丞陆佃之孙，南宋文学家、史学家、爱国诗人。陆游生逢北宋灭亡之际</p>
 
        <h2>陶渊明</h2>
        <p>陶渊明（约365～427年），字元亮，晚年更名潜，字渊明。别号五柳先生，私谥靖节，世称靖节先生。浔阳柴桑（今江西九江）人。东晋末到刘宋初杰出的诗人、辞赋家、散文家。</p>
    </body>
</html>

运行浏览器后得到的效果如图

html5锚点 tab html锚点链接代码_锚点