html常见标签（二）

最新推荐文章于 2023-08-15 00:17:08 发布

陈周c

最新推荐文章于 2023-08-15 00:17:08 发布

阅读量189

点赞数

分类专栏：前端学习文章标签：前端 html5

本文链接：https://blog.csdn.net/vv926/article/details/123886244

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了HTML中的超链接标签使用，包括外部链接、内部链接、空链接、下载链接、网页元素链接和锚点链接的实例，并解释了注释标签的作用。同时，提供了包含超链接和锚点的示例代码，帮助读者理解如何在HTML中创建和管理链接。

摘要由CSDN通过智能技术生成

超链接标签：

<a href="url" target="目标窗口的弹出方式>链接文本</a>
href-指定的url的地址
target-其中_self为默认值，__blank为在新窗口的打开方式

链接分类：

1.外部链接，如<a href="https://www.baidu.com/?tn=49055317_12_hao_pg">百度</a>
2.内部链接，网站内部的链接
3.空链接，用于没有确定链接目标时，<a href="#">某页</a>
4.下载链接，点击该链接即可下载文件
5.网页元素链接：网页中的一些元素，如图片，视频等可以添加超链接
6.锚点链接：直接跳转到该页面进行定位

注释标签：

相当于c语言的//和python的#
：主要为了写代码的人和看代码的人理解，不会出现功能

特殊字符：

在html中，可以用一些命名实体来表示特殊的符号。可参见网址：https://tool.chinaz.com/Tools/htmlchar.aspx

练习代码及注释：

01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接练习</title>
</head>
<body>
    <h1 id="dingbu">外部链接</h1>
    <!--target中的属性blank表示在新的页面打开，如用_self会在当前页面直接打开，原页面会不见-->
    <a href="https://www.baidu.com/?tn=49055317_12_hao_pg" target="blank">百度</a>
    <h1>内部链接</h1>
    <!--进入内部链接时不需要输入url，因两个页面在同一目录下，所以直接输入名字即可-->
    <a href="02.html" target="blank"> dfa</a>
    <h1>空链接</h1>
    <a href="#" target="blank">这是一个空链接</a>
    <h1>下载链接</h1>
    <!--文件需要为exe执行文件，或者zip等压缩文件 href为该文件所在的位置-->
    <a href="C:\Users\img\壁纸.zip">点击下载</a>
    <h1>网络元素链接</h1>
    <!--点击图片即可跳转链接-->
    <a href="https://www.baidu.com/?tn=49055317_12_hao_pg">
        <img src="C:\Users\Jin Yao\OneDrive\桌面\学习\vscode\html\img\壁纸.jpg"></a>
    <h1>锚点标签</h1>
    <!--在href中定位，在段落中进行命名-->
    <a href="#food">点击这里进行定位到该页面的美食栏目</a>

    <p>HTML使用标签 <a>来设置超文本链接。

        超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，
        <br>您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
        
        当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。<br>
        
        在标签<a> 中使用了href属性来描述链接的地址。<br>
        
        默认情况下，链接将以以下形式出现在浏览器中：<br>
        
        一个未访问过的链接显示为蓝色字体并带有下划线。<br>
        访问过的链接显示为紫色并带有下划线。
        点击链接时，链接显示为红色并带有下划线。</p>
    
    <p>答主说，自己是个没有感情的干饭工具，从小到大也没有真正喜欢的人。<br>

        虽然谈过几段恋爱，但起因都是“他人不错，好像挺合适的”，自己却从来没有过对任何人有过动心的感觉。<br>
        
        答主最开始也觉得，这辈子一定要找一个自己很爱很爱的人。但毕业后经不住家里催婚，一直流连在相亲和去相亲的路上。<br>
        
        这个过程让她渐渐觉得，不一定非得找一个很爱的人，毕竟感情再好也会慢慢逝去，倒不如从一开始就过平淡的生活，这样也不会在日后感情变淡时感到难过。<br>
        
        于是，答主遇到了现在的老公，也是她的初中同学。<br>
        
        以前没怎么来往，因为相亲碰到一起聊了聊，发现挺聊得来，于是就慢慢接触起来，直到走入婚姻。<br>
        
        由于两人性格相合，婚后生活虽然平淡，却很和谐。家务自觉一人一半，一个人做饭，另一个人就主动洗碗。<br>
        
        有时老公和朋友出去吃饭喝酒，要很晚回来，答主也不会打电话去催，最多就是对方结束了，打电话给自己，自己再开车去接他。<br>
        
        对方要是喝多了难受，答主会主动照顾。老公第二天醒来，也会很愧疚地主动承包一星期的所有家务。<br>
        
        夫妻生活可以说是相敬如宾、平淡如水，但两人关系并不冷漠。</p>
        <br>
        <br>
        <br>
        <br><br>
        <br>
        <br><br><br><br><br>

    <p>HTML 是用来描述网页的一种语言。

        HTML 指的是超文本标记语言: HyperText Markup Language<br>
        HTML 不是一种编程语言，而是一种标记语言<br>
        标记语言是一套标记标签 (markup tag)
        HTML 使用标记标签来描述网页<br>
        HTML 文档包含了HTML 标签及文本内容
        HTML文档也叫做 web 页面</p>

    <h4>这里是美食栏目，以上随便粘贴复制的</h4>
    <p id="food">美食是一个治愈疲惫和痛苦的良药，希望看到这里的你能好好吃饭，好好爱自己</p>
    <!--以下是一个跳转到顶部的锚点标签-->
    <a href="#dingbu">返回顶部</a>
</body>
</html>

02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>dafs</h1>
    <h2>dfas</h2>
    <h4>空连接</h4>
    <p>
        这个页面啥也没有，主要用来链接的，啥也没有！
    </p>
</body>
</html>

陈周c

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html常见标签（二）

超链接标签：<a href="url" target="目标窗口的弹出方式>链接文本</a>href-指定的url的地址target-其中_self为默认值，__blank为在新窗口的打开方式链接分类：1.外部链接，如<a href="https://www.baidu.com/?tn=49055317_12_hao_pg">百度</a>2.内部链接，网站内部的链接3.空链接，用于没有确定链接目标时，<a href="#"&g..
复制链接

扫一扫

专栏目录