zoukankan      html  css  js  c++  java
  • HTML13_有语义的标签2_a标签(超链接,锚点,伪类)

    5.关于超链接(W3chool a标签用法介绍:http://www.w3school.com.cn/tags/tag_a.asp

      (1)所有浏览器都支持 <a> 标签。

      (2)在html4.01 与 html5.0之间的差异:

        在 HTML 4.01 中,<a> 标签可以是超链接或锚;

        在 HTML5 中,<a> 标签始终是超链接,但是如果未设置 href 属性,则只是超链接的占位符。

      3)注意的点:

        1. 如果不使用 href 属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属性;

        2. 被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性);

        3. 最好是使用 CSS 来设置链接的样式;

        4. 一般来说,如果不确定其链接,写在页面里面的时候都是这样子的:  <a href="#">一些文字</a>

      (4)禁止 a 标签的跳转:

        方法一(亲测有效): <a href="javascript:void(0);">一些文字</a>

        方法二(没试哇,暗暗觉得应该有用的): e.preventDefault();

      (5)基本用法: <a href="url">页面上的链接文字提示</a>               其中url 可以是本地的html文件,也可以是网页。

             进阶用法: <a href="url" target="_blank" title="xxx">页面上的链接文字提示</a>          

                 target = "_blank" 那部分意思是在一个新窗口打开链接;title的部分是,把鼠标放在链接提示文字上面时,会出现“xxx”的提示文字,如例2所示。

      如下例1所示,“http”千万不可以省略。

    例1

    效果如下,其中link5是没有办法连接到百度的,出现报错(因为在当前的目录下,找不到baidu)。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>链接练习</title>
     6 </head>
     7 <body>
     8     <a href="http://wwww.baidu.com/" target="_blank" title="百度首页">百度1ink 1</a>   <!完整的表示->
     9     <a href="http:www.baidu.com/">百度link 2</a>      <!去掉"//"->
    10 </body>
    11 </html>
    例2

       title的提示文字“百度首页”,注:在鼠标放在“百度link1”文字上时才会显示。

    新窗口打开效果:

      

    6.锚点

      语法:  <a name="xx"></a>    

    通过name后面的内容,对页面的某处做标记,利用锚点对标记处做链接,如下例所示,若页面过长,不方便浏览时,可以通过锚点建立链接。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>链接练习</title>
     6 </head>
     7 <body>
     8     <a href="link.html#锚点1">锚点1链接</a>  
     9     <a href="link.html#锚点2">锚点2链接</a>  
    10     <a href="link.html#锚点3">锚点3链接</a>  
    11 
    12     <a name="锚点1"></a>
    13     <p>锚点1</p>
    14     </br>
    15     </br>
    16     </br>
    17     </br>
    18     </br>
    19     </br>
    20     </br>
    21     </br>
    22     </br>
    23     <a name="锚点2"></a>
    24     <p>锚点2</p>
    25     </br>
    26     </br>
    27     </br>
    28     </br>
    29     </br>
    30     </br>
    31     </br>
    32     </br>
    33     <a name="锚点3"></a>
    34     <p>锚点3</p>
    35     </br>
    36     </br>
    37     </br>
    38     </br>
    39     </br>
    40     </br>
    41     </br>
    42     </br>
    43     </br>
    44     </br>
    45     </br>
    46     </br>
    47     </br>
    48     </br>
    49     </br>
    50     </br>
    51     </br>
    52 </body>
    53 </html>
    例3

     当点击链接文字时,页面会自动跳到相应锚点处 

              

    7.伪类

      CSS允许对a标签的4种状态进行设置各自的CSS特性,叫做CSS的伪类;

    四种状态(必须按照顺序写LVHA):一般的链接(link,这个link可以省略不写),点击后的链接(visited),鼠标放上去未点(hover),鼠标点下去还没放开(active,一般不太用)

    例子会在后续的网页实际制作中体现~

  • 相关阅读:
    IOS8定位
    ios通讯录基本操作2014-12月版
    ios悬浮按钮的实现
    MartinLiPageScrollView广告栏实现
    ios分享(友盟分享)
    vue2.0路由-适合刚接触新手简单理解
    git链接GitHub命令及基本操作
    Node
    JS数组sort()排序
    原生JS获取CSS样式并修改
  • 原文地址:https://www.cnblogs.com/Christeen/p/5683015.html
Copyright © 2011-2022 走看看