首页 html 正文

我要投稿

html锚-html网页中锚点（称为anchors）的使用介绍

bendan520 html

2023-08-21 0 8,389 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

html中的锚点你一定很熟悉。锚点是网页制作中超链接的一种，也称为命名锚点。下面通过例子来介绍锚点的使用。不知道的同学不要错过

以下资料整理自网络

1、锚点是网页制作中的一种超链接，也称为命名锚点。命名锚点是页面内的超链接，就像快速定位器一样，并且非常常用。

英文名称：锚

使用命名锚点在文档中设置标记，通常位于特定主题或文档底部。然后可以创建指向该命名锚点的链接，从而快速将访问者带到指定位置。

创建指向命名锚点的链接的过程分为两步。首先，创建一个命名锚点，然后创建指向该命名锚点的链接。

示例代码

在 HTML 页面中的适当位置定义以下锚点：

这是顶部部分

这是内容部分

这是脚的部分

（您可以使用 id 属性而不是 name 属性，命名锚点也同样有效。[1]）

有两种方法可以访问上面的锚点

一种是借助超链接标签制作锚链接，主要用于页面内的锚访问

另一种方法是直接在页面地址前面添加锚点标记，主要用于不同页面之间的锚点访问

如果该页面的地址是文件path/index.html，要访问脚锚点，只需访问以下链接

文件路径/index.html#foot

2. html锚点有什么用？

简单来说，比如一篇很长的文章，如果想分段阅读html锚，就可以使用锚点。

代码：

...省略文字

虽然锚点只需要一个名字，但是添加了id是为了更加兼容。

href的值必须与nameid一致，后面必须加“#”。以上代码在ie6/7、ff中兼容，但在ie8中不兼容。

由于我们的锚点的值为空，我们可以添加一个空格，以免影响外观，

如以下代码，可以兼容ie8

...省略文字

还有一个问题，如果想显示某个页面的锚点内容（如：123.html）怎么办？

代码如下所示

...省略文字

这是我今天在做后台的时候，想要实现“修改定位”，所以我把锚标记下移了（一般都被我忘记了）。

但程序说需要取值，而且必须有“？” 或连接中的“&”，所以我的锚点不兼容......

呵呵！稍后会有解决方案！

其实jsp页面中锚点兼容有问题，静态页面没有问题，还是值得学习的！

3、WEB开发中，会用到页面锚点。 HTML 页面锚点用于链接到页面的特定部分。 W3Schools 表示锚点是使用 (anchor) 标签和 name 属性创建的，但这并不是创建页面锚点的唯一方法。下面简单说一下HTML页面锚点的两种制作方法。

我们可以使用W3School的在线测试工具来测试。打开链接后的测试代码是“Chapter4”然后测试html锚，效果是一样的。

注意，制作页面锚点不仅要使用锚点标签的name属性，还要使用id属性。锚标记中 href 属性的值以 # 开头加上目标的名称或 id 值：

复制代码

代码如下所示：

方法一

使用锚标记的 href 和 name 属性

方式二

使用锚标签和 id 属性

使用HTML+CSS实现图片滚动的效果

之前用js实现了图片切换的效果html图片按钮，明天实现图片滚动的特效，这里不包括图片切换。

直接上代码：

<div class="loopimg">
       <ul>
        <li>
         <img src="img/运动/运动 - 21.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 32.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 51.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 75.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 77.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 95.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 96.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 21.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 32.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 51.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 75.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 77.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 95.jpg" height="200px"/>
        </li>
        <li>
         <img src="img/运动/运动 - 96.jpg" height="200px"/>
        </li>
       </ul>
      </div>

这里有 3 层嵌套。 div-ul-li，动画的效果放在ul中，li样式使用float-left来水平排列图片。总共有7张图片，再重复一遍，也就是总共有14张图片。

.loopimg{
 width: 4173px;
 height: 200px;
 margin: 0px auto;
 padding: 0px;
 overflow: hidden;
}
.loopimg > ul{ 
 width: 100%;
 /*动画名称*/
 animation-name: move;
 /*动画时间*/
 animation-duration: 15s;
 /*动画次数*/
 animation-iteration-count: infinite;
 /*匀速*/
 animation-timing-function: linear;
  }
.loopimg > ul > li{
 float: left;
 list-style: none;
 }
#foot{
 border: 1px solid black;
 height: 80px;
 width: 100%;
 text-align: center;
}
@keyframes move {
  /*动画起始位置*/
  0%{
  transform: translateX(0px);
  }
 /*动画结束状态*/
 100%{
  transform: translateX(-2086.24px);
  }
 }