Home > Web Front-end > HTML Tutorial > 深入理解锚点_html/css_WEB-ITnose

深入理解锚点_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:32:40
Original
1317 people have browsed it

目录

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

概念

    -> anchor 锚点/链接

 

属性

【1】href:地址

  【a】链接地址

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

  【b】下载地址

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

  【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>
Copy after login

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

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

  [注意]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>
Copy after login

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

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

注意事项

【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>
Copy after login

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template