HTML网页制作:[10]制作锚点链接
1、先举个例子,说下下锚点链接的概念。如图所示,比如,如图所示是一个网页。锚点链接的意思说就是:“abc”就是一个链接,我点击“abc”之后,就会跳转到"123"的位置上。懂了吧。最常用的方式,在一个网页的开头,做一个目录,每一个目录都是一个锚点链接,然后链接到本页面相关的位置。
![HTML网页制作:[10]制作锚点链接](https://exp-picture.cdn.bcebos.com/2f2909e951e10ef8f6104f8e2324d8e9cdd2cc99.jpg)
2、锚点链接的语法:<挢旗扦渌;a name="锚点的名字"></a>意思是在网页中的某一个位置,插入一个锚点<a href="#锚点的名字">显示的字样</a>意思是在网页中的某一个位置链接之前设定的锚点,只要点击该链接,就会自动跳转到锚点处。
3、无图无真相。一边截图一边写。在bo蟠校盯昂dy中增加一行:<a name="ch"></a>hello,我在这里,来找我啊意思是创建一个锚点,锚点的名字为“ch”
![HTML网页制作:[10]制作锚点链接](https://exp-picture.cdn.bcebos.com/d9a8d2d2bb66515930068a998fe23ea23b42c799.jpg)
4、看下网页的效果图
![HTML网页制作:[10]制作锚点链接](https://exp-picture.cdn.bcebos.com/05a320a23a42a07a1b562680673834bb18efc199.jpg)
5、接着,在body中,再增加一行代码:<a href="#ch">我来找你啦</a>完整代码如图
![HTML网页制作:[10]制作锚点链接](https://exp-picture.cdn.bcebos.com/bd72f23834bb19ef621996a7497bd28287893a9e.jpg)
6、看网页效果图当点击网页上面的链接后,就会跳转到下面的那行字,简单吧。
![HTML网页制作:[10]制作锚点链接](https://exp-picture.cdn.bcebos.com/d3c39889a146b7b129bfe50ec77c34b33d41359e.jpg)
7、最后,给一个完整的例子代码如下:
![HTML网页制作:[10]制作锚点链接](https://exp-picture.cdn.bcebos.com/3d002dbad341037d2e7153c5a9bc7dc5ce672d9e.jpg)
8、网页效果如下
![HTML网页制作:[10]制作锚点链接](https://exp-picture.cdn.bcebos.com/d4071b96b814f4d06c455261cdfe474ec383239e.jpg)
9、点击“第一章”后,自动跳转到“第一章”所在的锚点
![HTML网页制作:[10]制作锚点链接](https://exp-picture.cdn.bcebos.com/51f9aa3ea8db574a1f74092fa7f7dfb2dd19179e.jpg)
10、“第二章”和“第三章”的效果同上。是不是很方便?