享受每一天,Just Enjoy !

0%

HTML基础5--强调及超链接

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

重点强调

HTML 也提供了相应的标签,用于标记某些文本,使其具有加粗、倾斜、下划线等效果

  • 强调
    斜体字体,用<em>(emphasis)元素来标记这样的情况
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>TITLE</title>
    </head>
    <body>
    <p> 公众号:<em>伊洛的小屋</em> 作者:<em>伊洛Yiluo</em>.</p>
    </body>
    </html>
  • 非常重要
    在HTML中我们用<strong>表示文本十分重要,一般用粗体显示。”) (strong importance) 元素来标记
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>TITLE</title>
    </head>
    <body>
    <p> 公众号:<strong>伊洛的小屋</strong> 作者:<strong>伊洛Yiluo</strong>.</p>
    </body>
    </html>
  • 斜体字、粗体字、下划线…
    <i> 被用来传达传统上用斜体表达的意义
    <b>用于吸引读者的注意到该元素的内容上(如果没有另加特别强调)
    <u>被用来传达传统上用下划线表达的意义:专有名词,拼写错误……
超链接

超链接使我们能够将我们的文档链接到任何其他文档,URL可以指向HTML文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<p>微信搜索:伊洛的小屋
<a href="https://yiluotalk.com">伊洛Yiluo个人网页</a>.
</p>
</body>
</html>
添加支持信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<p>微信搜索:伊洛的小屋
<a href="https://yiluotalk.com" title="跳转到伊洛Yiluo个人网页">
伊洛Yiluo个人网页
</a>
</p>
</body>
</html>

链接的标题仅当鼠标悬停在其上时才会显示

文档片段

超链接除了可以链接到文档外,也可以链接到HTML文档的特定部分,首先给要链接到的元素分配一个[id]属性。
在URL的结尾使用一个井号指向它

1
<p>Test <a href="contacts.html#Mailing_address">mailing address</a>.</p>
下载链接时使用 download 属性

使用 download 属性来提供一个默认的保存文件名

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<a href="https://yiluotalk.com/download/"
download="yiluo.pdf">
Download PDF
</a>
</body>
</html>
电子邮件链接

当点击一个链接或按钮时,打开一个新的电子邮件发送信息而不是连接到一个资源或页面
使用<a>元素和mailto:URL的方案

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<a href="mailto:yiluo@demo.org">发送邮箱演示(这是个非真实邮箱)</a>
</body>
</html>


关注公众号获取更多内容