Heim > Web-Frontend > HTML-Tutorial > 深入理解锚点_html/css_WEB-ITnose

深入理解锚点_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:32:40
Original
1318 Leute haben es durchsucht

目录

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

概念

    -> anchor 锚点/链接

 

属性

【1】href:地址

  【a】链接地址

<a href="http://www.baidu.com">百度</a>
Nach dem Login kopieren

  【b】下载地址

<a href="test.zip">下载测试</a>
Nach dem Login kopieren

  【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>
Nach dem Login kopieren

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

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

  [注意]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>
Nach dem Login kopieren

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

<a href="test.zip" download="gogo">test</a>
Nach dem Login kopieren

注意事项

【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>
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage