html超链接

超链接标签a

超链接使用:<a></a>
超链接属性:
<strong>href</strong>- - -指明要跳转到的地址 eg:<a\ href="https://www.baidu.com/">\点击跳转到百度</a> ,此例表示点击链接后,跳转到百度首页
<strong>target</strong>- - -指明点击链接后,打开跳转页面的方式,target="_blank"表示在新窗口打开(点击链接后,点击链接的这个网页窗口还在,新增加了另外一个窗口),target="_self"表示在链接所在这个网页窗口打开(点击链接后,点击链接的这个网页窗口出现跳转到的页面,不会新增窗口)

超链接分类

1.外部链接:点击链接,跳转到其他网站的页面
2.内部链接:点击链接,跳转到该链接所在网站的页面
3.空链接:href="#"代表空链接,可用于暂时还未确定具体链接地址的情况等,先填写一个空链接,后面确定了再填写具体的跳转地址
4.下载链接:href="压缩包名.zip",点击链接后直接下载压缩文件
5.网页元素链接:其他网页元素,如图片<img><li>等等,都可以加上<a>
6.锚点连接

代码示例:

项目目录结构:


超链接demo.png

demo1.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>超链接练习</h1>
    <h4>1.外部链接:跳转到其他网站页面</h4>
    <a href="https://www.baidu.com/" target="_blank">点击跳转至其他网站页面---百度</a>
    <h4>2.内部链接:本网站页面间的跳转</h4>
    <a href="demo1-1.html" target="_self">点击跳转--本网站页面</a>
    <h4>3.空链接:#</h4>
    <a href="#">我是一条空链接,不会跳转到其他页面</a>
    <h4>4.下载链接:a标签中链接地址=压缩包名.zip,点击链接后直接下载文件</h4>
    <a href="cat1.zip">点击下载</a>
    <h4>5.网页元素的链接:如图片等,标签外面再套一层a标签</h4>
    <a href="cat1.jpg" target="_blank"><img src="cat1.jpg" width="300px"></a>
    <h4>6.锚点链接,点击后跳转到标记位置</h4>
    <h3 id="top">李白最著名的十首诗:</h3>
    <a href="#poem1"><strong>静夜思</strong></a>---点击查看该诗内容<br />
    <a href="#poem2"><strong>望庐山瀑布</strong></a>---点击查看该诗内容<br />
    <a href="#poem3"><strong>早发白帝城</strong></a>---点击查看该诗内容<br />
    <a href="#poem4"><strong>送孟浩然之广陵</strong></a>---点击查看该诗内容<br />
    <a href="#poem5"><strong>夜宿山寺</strong></a>---点击查看该诗内容<br />
    <a href="#poem6"><strong>望天门山</strong></a>---点击查看该诗内容<br />
    <a href="#poem7"><strong>赠汪伦</strong></a>---点击查看该诗内容<br />
    <a href="#poem8"><strong>独坐敬亭山</strong></a>---点击查看该诗内容<br />
    <a href="#poem9"><strong>春夜洛城闻笛</strong></a>---点击查看该诗内容<br />
    <a href="#poem10"><strong>渡荆门送别</strong></a>---点击查看该诗内容<br />
    <pre id="poem1">
        <h3>静夜思</h3>
        床前明月光,疑似地上霜。
        举头望明月,低头思故乡。
                                <a href="#top">返回顶部目录</a>
    </pre>
    <pre id="poem2">
        <h3>望庐山瀑布</h3>
        日照香炉生紫烟,遥看瀑布挂前川。
        飞流直下三千尺,疑是银河落九天。
                                <a href="#top">返回顶部目录</a>
    </pre>
    <pre id="poem3">
        <h3>早发白帝城</h3>
        朝辞白帝彩云间,千里江陵一日还。
        两岸猿声啼不住,轻舟已过万重山。             
                                <a href="#top">返回顶部目录</a>
    </pre>
    <pre id="poem4">
        <h3>送孟浩然之广陵</h3>
        故人西辞黄鹤楼,烟花三月下扬州。
        孤帆远影碧空尽,唯见长江天际流。
                                <a href="#top">返回顶部目录</a>
    </pre>
    <pre id="poem5">
        <h3>夜宿山寺</h3>
        危楼高百尺,手可摘星辰。
        不敢高声语,唯恐天上人。
                                <a href="#top">返回顶部目录</a>
    </pre>
    <pre id="poem6">
        <h3>望天门山</h3>
        天门中断楚江开,碧水东流至此回。
        两岸青山相对出,孤帆一片日边来。
                                <a href="#top">返回顶部目录</a>
    </pre>
    <pre id="poem7">
        <h3>赠汪伦</h3>
        李白乘舟将欲行,忽闻岸上踏歌声。
        桃花潭水深千尺,不及汪伦送我情。
                                <a href="#top">返回顶部目录</a>
    </pre>
    <pre id="poem8">
        <h3>独坐敬亭山</h3>
        众鸟高飞尽,孤云独去闲。
        相看两不厌,只有敬亭山。
                                <a href="#top">返回顶部目录</a>
    </pre>
    <pre id="poem9">
        <h3>春夜洛城闻笛</h3>
        谁家玉笛暗飞声,散入春风满洛城。
        此夜曲中闻折柳,何人不起故园情。
                                <a href="#top">返回顶部目录</a>
    </pre>
    <pre id="poem10">
        <h3>渡荆门送别</h3>
        渡远荆门外,来从楚国游。
        山随平野尽,江入大荒流。
        月下飞天镜,云生结海楼。
        仍怜故乡水,万里送行舟。
                                <a href="#top">返回顶部目录</a>
    </pre>
    
</body>
</html>

效果图如下:


超链接.jpg
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,277评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,689评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,624评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,356评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,402评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,292评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,135评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,992评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,429评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,636评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,785评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,492评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,092评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,723评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,858评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,891评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,713评论 2 354

推荐阅读更多精彩内容