利用name或id属性设置页面跳转的锚点

理论准备

        网页中的链接按照链接路径的不同，可以分为3种类型，分别是内部类型、锚点链接和外部链接；

        按照使用对象的不同，网页中的链接又分为文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。

---

 

★  利用name或id实现网页跳转锚点的设置 （Anchor））

代码

1. <style>
2. body {
3. text-align: center;
4. }
6. a:nth-child(odd){
7. /*选取索引序号为基数的<a>标签*/
8. position: absolute;
9. top:2000px;
10. border:1px solid;
11. }
12. </style>
14. <h2>利用name或id实现网页跳转锚点的设置（Anchor）</h2>
15. <hr/>
16. <!--利用name属性-->
17. <!--<a href="#footer" name="top">Go footer</a>
18. <a href="#top" name="footer">Go top</a>-->
20. <!--利用id属性-->
21. <!--<a href="#footer" id="top">Go footer</a>
22. <a href="#top" id="footer">Go top</a>-->

总结：

       同一个网页内部不同位置的锚点实现，无论是使用name属性，还是id属性在链接href中都必须加上#；

       不同网页间跳转到的指定位置，利用id属性能够实现，而name属性是不能的。如下代码，

1. <!--原网页中的超链接-->
2. <a href="ClosureDemo.html#out">跳到另外一个文档name或id为out的位置</a>
4. <!--目标网页中的input设置-->
5. <input type="text" id="out">

 

★  利用<a>标签实现邮件发送

1. <mark>邮件链接</mark>
2. <a href="mailto:30726787@qq.com">使用OutLook或Foxmail等，发送邮件给30726787@qq.com</a>

     

 

---

 

注意点

    1.当链接对象为网站，则href属性值中的    “http://”     不可省略，否则链接会出现错误提示；

1. <!--正确的写法-->
2. <a href="http://www.baidu.com">百度</a>
3. <!--错误的写法-->
4. <a href="www.baidu.com">百度</a>

   2.当href不包含 “http://”  时，默认为当前页面所在的位置，即链接的对象与当前网页文件在同一文件夹的同一子菜单中；

 

转载于:https://www.cnblogs.com/Jener/p/5972297.html