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

2020-09-07 本文已影响0人伊洛的小屋

重点强调

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

强调
斜体字体，用（emphasis）元素来标记这样的情况

<!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 importance) 元素来标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
</head>
<body>
<p> 公众号：<strong>伊洛的小屋</strong> 作者：<strong>伊洛Yiluo</strong>.</p>
</body>
</html>

斜体字、粗体字、下划线...
 被用来传达传统上用斜体表达的意义
用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）
被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

超链接

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

<!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>

添加支持信息

<!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的结尾使用一个井号指向它

<p>Test <a href="contacts.html#Mailing_address">mailing address</a>.</p>

下载链接时使用 download 属性

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

<!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的方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
</head>
<body>
<a href="mailto:yiluo@demo.org">发送邮箱演示（这是个非真实邮箱）</a>
</body>
</html>

欢迎下方【戳一下】【点赞】
Author：伊洛Yiluo
愿你享受每一天，Just Enjoy !