• HTML学习5


    1、图片链接和超链接

    <img src="F:work_htmlch1imghtml.jpg" alt="html图片">
    <img src="imgjs1.jpg" alt="html图片" alt="html图片" height="50" width="50">
    <img src="imgjs2.jpg" alt="html图片" alt="html图片" height="10%" width="50%">

    如果用%表示则图片会随着浏览器的大小而改变;

    显示效果如下:

    /

    2、超链接既可以是文字也可以是图片,超链接内容可以是内部链接和外部链接外部的需要加HTTP;

    <a href="hello.html">打开这个刺激的连接吧!</a>
    <a href="http://www.baidu.com"><img src="imgjs2.jpg" alt="html图片" alt="html图片"></a>

    显示效果如下:

    3、超链接在新页面中打开还是在当前页面中打开可以用target这个参数来实现;

    <a href="http://www.baidu.com" target="_blank" title="baidu">blank</a>
    <a href="http://www.baidu.com" target="_self">self</a>

    4、超链接里面的锚:

    首先定义锚的位置和名称:

    <img src="imgjs2.jpg" alt="html图片">
    <a name="js2"></a>

    其次设置寻找锚的连接:

    <a href="#html">HTML</a>
    <a href="#js1">JavaScript初级</a>
    <a href="#js2">Javascript进阶</a>

    5、第四点的示例如下:

    <html>
    <head>
    <meta charset="UTF-8">
    <title>超级链接</title>
    </head>
    <body>
    <a name="backtop">这里是顶部</a><br />
    <!--设置水果锚点链接-->
    <a href="#fruit">水果</a>
    <br>
    <!--设置蔬菜锚点链接-->
    <a href="#vegetable">蔬菜</a>
    <br>
    <!--设置运动锚点链接-->
    <a href="#exercise">运动</a>
    <br>
    <!--设置水果标题-->
    <a name="fruit"><h2>水果</h2></a>
    <ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>葡萄</li>
    <li>梨</li>
    <li>西瓜</li>
    <li>樱桃</li>
    </ul>
    <!--设置返回顶部链接-->
    <a href="#backtop">返回顶部</a>
    <br>
    <!--设置蔬菜标题-->
    <a name="vegetable"><h2>蔬菜</h2></a>
    <ul>
    <li>西红柿</li>
    <li>黄瓜</li>
    <li>土豆</li>
    <li>芹菜</li>
    <li>蒜薹</li>
    <li>西葫芦</li>
    <li>香菇</li>
    <li>菠菜</li>
    </ul>
    <!--设置返回顶部链接-->
    <a href="#backtop">返回顶部</a>
    <br>
    <!--设置运动标题-->
    <a name="exercise"><h2>运动</h2></a>
    <ul>
    <li>篮球</li>
    <li>黄瓜</li>
    <li>土豆</li>
    <li>芹菜</li>
    </ul>
    <!--设置返回顶部链接-->
    <a href="#backtop">返回顶部</a>
    </body>
    </html>

     显示效果如下:

     6.注意当href属性值为空时,点击链接会自动刷新页面;

    7.如果是要链接到另外一个页面的锚点的话,可以是用户如下格式:

    <a href="chaolianjie.html#vegetable">打开这个刺激的连接吧!</a>

    8.在HTML5中name不再适用而适用ID来作为锚点属性;

  • 相关阅读:
    lintcode:Palindrome Partitioning 分割回文串
    lintcode:Add Binary 二进制求和
    lintcode :Count 1 in Binary 二进制中有多少个1
    lintcode : 二叉树的最小深度
    lintcode :二叉树的最大深度
    lintcode:Binary Tree Postorder Traversal 二叉树的后序遍历
    lintcode :Binary Tree Preorder Traversal 二叉树的前序遍历
    lintcode:二叉树的中序遍历
    lintcode:Binary Search 二分查找
    lintcode:1-10题
  • 原文地址:https://www.cnblogs.com/annjk/p/13251403.html
Copyright © 2020-2023  润新知