首页 >web前端 >html教程 >深入理解锚点_html/css_WEB-ITnose

深入理解锚点_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:32:401305浏览

目录

[1]href属性 [2]target属性 [3]download属性 [4]注意事项

概念

    -> anchor 锚点/链接

 

属性

【1】href:地址

  【a】链接地址

<a href="http://www.baidu.com">百度</a>

  【b】下载地址

<a href="test.zip">下载测试</a>

  【c】锚点

    (1)href:#id名

<a href="#test">目录</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div id="test" style="height: 200px;width: 200px; border: 1px solid black;margin-bottom: 300px;">内容</div>

    (2)href:页面地址#id名

<a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a>

  [注意]href属性一定不要留空,若暂时不需要写地址,则写#或javascript:;。若href留空,会刷新页面。

 

【2】target:链接打开方式

            【a】_self    当前窗口(默认)
            【b】_blank    新窗口
            【c】_parent 父框架集
            【d】_top 整个窗口
            【e】_framename 指定框架

//外层框架<frameset cols = "20%, *">    <frame src="left.html">    <frame src="right.html"></frameset>//里层框架<frameset rows = "50%,*">    <frame src="top.html">    <frame src="bottom.html" name="bottom">        </frameset>//锚点页<ul class="list">    <li class="in"><a href="chap1.html" target="_self">chap1(_self)</a></li>    <li class="in"><a href="chap2.html" target="_blank">chap2(_blank)</a></li>    <li class="in"><a href="chap3.html" target="_parent">chap3(_parent)</a></li>    <li class="in"><a href="chap4.html" target="_top">chap4(_top)</a></li>        <li class="in"><a href="chap5.html" target="bottom">chap5(framename)</a></li></ul>

【3】download:设置下载文件的名称(firefox/chrome/opera支持)

<a href="test.zip" download="gogo">test</a>

 

注意事项

        【1】标签的文本颜色只能自身进行设置,从父级继承不到

        【2】标签的下划线颜色跟随文本颜色进行变化

    【3】标签不可嵌套标签

<div style="color: red;">    <a href="#">[1]从父级继承不到红色字体</a>    <br>    <a href="#" style="color: green">[2]下划线颜色与文本同色</a>    <br>    <a href="#">前面<a href="#">[3]a标签不可嵌套</a></a></div>

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn