实现HTML页面内的跳转定位

最新推荐文章于 2024-04-21 00:34:45 发布

VIP文章在你隔壁的香飘飘

最新推荐文章于 2024-04-21 00:34:45 发布

阅读量858

点赞数 1

分类专栏： html基础入门页面内跳转定位

本文链接：https://blog.csdn.net/ZYuAYuLuuu/article/details/117487490

版权

以某电视剧剧情介绍为例，向大家演示在网页中一个实现页面内跳转定位的方法。

实现效果并不太难，首先介绍些简单HTML基础知识：

<hx>标题内容</hx> 标签（x代表数字，可以是1，2，3，4，5，6）为标题标签，字号由1开始到6逐渐变小，系统为其分配固定高度，设定了后再设定height基本难见效。

<p> 段落内容</p>标签，标签内的内容为一段落，可实现文字的分段效果。

<img src=" 图片位置" height="数字" width="数字" alt="给图片起的名字"> 该标签可以再网页中插入图片，建议src中的位置写为相对位置则较为方便，height与width设置图片宽高。

<a href="#目的ID号"> 链接的名字</a>

实现页面内跳转定位的方法为：先为链接目的段落设置一个ID号，在链接标签中使用目的ID号则可实现点击链接跳转到相应ID位置。

将代码放到下方，使用转载请注明出处哦~

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>楚乔传简介</title>
</head>

<body>
    <h1>楚乔传</h1>
    <p>中国大陆 67集（TV版）/58集（DVD版）</p>
    <p>《楚乔传》是由慈文传媒、蜜淘影业、克顿传媒联合出品的女性励志传奇古装剧。 由吴锦源执导，嘉纹、杨涛、陈岚编剧，赵丽颖、林更新、窦骁、李沁领衔主演， 邓伦、金士杰特邀出演， 王彦霖、牛骏峰、黄梦莹、田小洁、孙宁、金瀚、邢昭林、曹曦月、朱圣祎、阮圣文、李若嘉、苗苗等联合出演。[1]
        <br/>该剧改编自潇湘冬儿小说《11处特工皇妃》，讲述了西魏乱世中，一个特立独行的女奴楚乔，在协助建立新政权过程中关于守护，背叛，信仰，爱情的故事。
    </p>
    <img src="1.jpg" height="320" width="240" alt="楚乔演员">
    <p>
        <a href="#第一集">第一集</a>
        <a href="#第二集">第二集</a>
        <a href="#第三集">第三集</a>
        <a href="#第四集">第四集</a>
        <a href="#第五集">第五集</a>
    </p>

    <p id="第一集">
        <h3>第一集(分集以TV版为准)</h3>
    </p>
    <p> 摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔&