HTML 标签-html教程-PHP中文网

HTML 标签

php中文网

发布： 2016-08-30 09:21:08

原创

1241人浏览过

一，定义和用法

所有浏览器都支持标签。

标签定义超链接，用于从一张页面链接到另一张页面。

元素最重要的属性是 href 属性，它指示链接的目标。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

若想链接外观与默认的链接外观非常不同。您可以使用 CSS 伪类向文本超链接添加复杂而多样的样式。

二，提示和注释

提示：如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。

提示：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。

提示：请使用 CSS 来设置链接的样式。

三，属性

属性	值	描述
charset	char_encoding	HTML5 中不支持。规定被链接文档的字符集。
coords	coordinates	HTML5 中不支持。规定链接的坐标。
download（5）	filename	规定被下载的超链接目标。
href	URL	规定链接指向的页面的 URL。
hreflang	language_code	规定被链接文档的语言。
media（5）	media_query	规定被链接文档是为何种媒介/设备优化的。
name	section_name	HTML5 中不支持。规定锚的名称。
rel	text	规定当前文档与被链接文档之间的关系。
rev	text	HTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape	default rect circle poly	HTML5 中不支持。规定链接的形状。
target	_blank _parent _self _top framename	规定在何处打开链接文档。
type（5）	MIME type	规定被链接文档的的 MIME 类型。

四，案例

本例演示如何在 HTML 文档中创建链接。

<html>

<body>

<p>
<a href=<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span>>本文本</a> 是一个指向本网站中的一个页面的链接。</p>

<p><a href=<span style="color: #800000;">"</span><span style="color: #800000;">http://www.microsoft.com/</span><span style="color: #800000;">"</span>>本文本</a> 是一个指向万维网上的页面的链接。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

</body>
</html>

登录后复制

本例演示如何使用图像作为链接。

<html>

<body>
<p><span style="color: #000000;">
您也可以使用图像来作链接：
</span><a href=<span style="color: #800000;">"</span><span style="color: #800000;">/example/html/lastpage.html</span><span style="color: #800000;">"</span>>
<img  border=<span   style="max-width:90%" alt="HTML  标签" >"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">/i/eg_buttonnext.gif</span><span style="color: #800000;">"</span> />
</a>
</p>

</body>
</html>

登录后复制

本例演示如何使用链接跳转至文档的另一个部分

<html>

<body>

<p>
<a href=<span style="color: #800000;">"</span><span style="color: #800000;">#C4</span><span style="color: #800000;">"</span>>查看 Chapter <span style="color: #800080;">4</span>。</a>
</p>

<h2>Chapter <span style="color: #800080;">1</span></h2>
<p>This chapter explains ba bla bla</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2077">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680265491072.png" alt="Tana">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2077">Tana</a>
                            <p>“节点式”AI智能笔记工具，支持超级标签。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Tana">
                                <span>33</span>
                            </div>
                        </div>
                        <a href="/ai/2077" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Tana">
                        </a>
                    </div>
                

<h2>Chapter <span style="color: #800080;">2</span></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter <span style="color: #800080;">3</span></h2>
<p>This chapter explains ba bla bla</p>

<h2><a name=<span style="color: #800000;">"</span><span style="color: #800000;">C4</span><span style="color: #800000;">"</span>>Chapter <span style="color: #800080;">4</span></a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter <span style="color: #800080;">5</span></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter <span style="color: #800080;">6</span></h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

登录后复制

本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。

<html>

<body>

<a href=<span style="color: #800000;">"</span><span style="color: #800000;">http://www.w3school.com.cn/</span><span style="color: #800000;">"</span> target=<span style="color: #800000;">"</span><span style="color: #800000;">_blank</span><span style="color: #800000;">"</span>>Visit W3School!</a>

<p>如果把链接的 target 属性设置为 <span style="color: #800000;">"</span><span style="color: #800000;">_blank</span><span style="color: #800000;">"</span>，该链接会在新窗口中打开。</p>

</body>

</html>

登录后复制

本例演示如何跳出框架，假如你的页面被固定在框架之内。

<html>

<body>

<p>被锁在框架中了吗？</p> 

<a href=<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span><span style="color: #000000;">
target</span>=<span style="color: #800000;">"</span><span style="color: #800000;">_top</span><span style="color: #800000;">"</span>>请点击这里！</a> 

</body>
</html>

登录后复制

本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

<html>

<body>

<p><span style="color: #000000;">
这是邮件链接：
</span><a href=<span style="color: #800000;">"</span><span style="color: #800000;">mailto:someone@microsoft.com?subject=Hello%20again</span><span style="color: #800000;">"</span>>发送邮件</a>
</p>

<p>
<b>注意：</b>应该使用 %<span style="color: #800080;">20</span><span style="color: #000000;"> 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</span></p>

</body>
</html>

登录后复制

本例演示更加复杂的邮件链接。

<html>

<body>

<p><span style="color: #000000;">
这是另一个 mailto 链接：
</span><a href=<span style="color: #800000;">"</span><span style="color: #800000;">mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!</span><span style="color: #800000;">"</span>>发送邮件！</a>
</p>

<p>
<b>注意：</b>应该使用 %<span style="color: #800080;">20</span><span style="color: #000000;"> 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</span></p>

</body>
</html>

登录后复制

大家都在看：

pre标签的作用是什么？预格式化文本怎么用？ HTML特殊字符怎么显示？避免转义的5种实体编码方案 html下划线怎么设置 html除号怎么打 html怎么添加空格