欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

【代码笔记】Web-HTML-链接

程序员文章站 2022-03-10 21:08:27
一,效果图。 二,代码。 参考资料:《菜鸟教程》 ......

一,效果图。

 

【代码笔记】Web-HTML-链接

二,代码。

 

【代码笔记】Web-HTML-链接
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html链接</title>
</head>

<body>
    <!--HTML链接语法-->
    <a href="https://www.baidu.com">百度</a>
    <!--HTMl target-->
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <!---id-->
    <a id="tips">有用的提示部分</a>
    <a href="#tips">访问有用的提示部分</a>
    <a href="https://www.baidu.com/html-links.htm#tips">访问有用的提示部分</a>
    <!--图片链接-->
    <p>
        创建图片链接:
        <a href="http://www.runoob.com/html/html-tutorial.html">
            <img src="smiley.gif" alt="html 教程" width="32" height="32">
        </a>
        <p>
            <!--跳出框架-->
            <p>跳出框架?</p>
            <a href="http:www.baidu.com/" target="_top">点击这里</a>
            <!--创建电子邮件链接-->
            <p>这是一个电子邮件链接:<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">发送邮件</a></p>
            <p>
                <b>注意:</b>单词直接空格使用%20代替,以确保浏览器可以正常显示文本
            </p>
            <!--建电子邮件链接2-->
            <p>这是另一个电子邮件链接:
                <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
            </p>
            <p>
                <b>注意:</b>单词直接空要使用%20代替,以确保浏览器可以正常显示文本。
            </p>
</body>

</html>
【代码笔记】Web-HTML-链接

 

参考资料:《菜鸟教程》