HTML基础教程5——链接标签和字符实体

121 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第17天,点击查看活动详情

HTML基础教程5——链接标签和字符实体

跳转超链接

跳转超链接时通过<a>标签定义的,链接用于跳转页面或者跳转书签等等,<a href="#">元素</a>标签a中的元素为自定义内容,一般用于提示点击链接着跳转链接后的东西,或者跳转链接的作用之类的。

<a>标签中最为重要的属性为href为跳转后地址(可以是具体的URL,也可以是相对路径),如果暂时还没确定跳转后的地址,建议href的属性值设为#后续确定了再进行修改,比较常用的属性还有target,默认属性值为_self为更换为新窗口(即原页面直接变成新页面),比较常用的值_blank打开新窗口(即原页面保留,新开一个窗口为跳转后的页面)。

不同状态下的的链家元素样式不同。例如:

  • 未被访问的链接带有下划线而且是蓝色的\color{blue}{未被访问的链接带有下划线而且是蓝色的}
  • 已被访问的链接带有下划线而且是紫色的\color{purple}{已被访问的链接带有下划线而且是紫色的}
  • 活动链接带有下划线而且是红色的\color{red}{活动链接带有下划线而且是红色的}

URL跳转

下面我们以4399小游戏为例子,我们想要点击链接后跳转到4399小游戏的地址去就应该把它的URL (www.4399.com) 填写到href中。

QQ图片20220402211204.png

相对路径跳转

相对路径跳转只需要把文件通过相对路径写入href中即可,这里路径详细参考上一期路径讲解。

QQ图片20220403224828.png

书签

可以通过使用name或者id制作一个跳转书签,下面我们以id为例。

QQ图片20220403225719.png

点击链接跳转后为下图所示,可以看到不仅跳转到了text.html文件同时也通过书签跳转到了第五格段落的位置。

QQ图片20220403225734.png

电子邮件链接

电子邮件链接只需要在href属性值的最前面加上mailto: 例如:href="mailto:xxxxxxxxxxx@qq.com", 邮件链接中单词与单词之间有空格应该用%20代替。以确保浏览器可以正常显示文本。

字符实体

为什么要使用字符实体?

在 HTML 中,某些字符是预留的。不能使用小于号<和大于号>,这是因为浏览器会误认为它们是标签,如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体,例如上面所讲到的%20是地址的空格符。

常用的三个空格类的字符实体

 (半角的不断行的空格,最为常用):相当于按下space键产生的空格。但是在HTML中,如果你用空格键敲出这个空格,空格是不会累加的(只算1个)。要使用html代码 表示才可累加。这个空格占据的宽度受字体影响很明显。

 (半角的空格):占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。所以是中文排版的首选空格字符之一。

 (全角的空格):这个空格是 的升级版本,当然它也有个相当稳健的特性,就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。

(点击进入专栏查看详细教程)