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

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

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


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中。

1.png

相对路径跳转


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

1.png

书签


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

1.png

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

1.png

电子邮件链接


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


字符实体


为什么要使用字符实体?


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


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


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


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


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


相关文章
|
2天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
24 13
|
1天前
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
2天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3天前
|
JavaScript 前端开发 UED
HTML 链接的高阶写法
在 HTML 中,通过使用不同的属性和技术可以增强链接的功能性和可访问性。
|
15天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
29 4
HTML中font标签用法
这篇文章详细介绍了HTML中`<font>`标签的用法,包括如何分别设置字体风格(`font-style`)、字体粗细(`font-weight`)、字体大小(`font-size`)和字体类型(`font-family`),并通过实例代码演示了如何综合使用这些属性来定义文本的字体样式。
HTML中font标签用法
|
11天前
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
8 1
|
15天前
|
移动开发 前端开发 JavaScript
HTML与CSS二三事
HTML与CSS二三事
|
21天前
|
前端开发 JavaScript
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?