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个中文宽度,而且基本上不受字体影响。


相关文章
|
8月前
|
存储 JavaScript 算法
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。
|
10月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
273 49
|
10月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
271 5
|
10月前
HTML 字符实体1
HTML 字符实体用于替代预留字符和键盘上无法输入的字符。例如,小于号 (&lt;) 和大于号 (&gt;) 必须用 `&lt;` 和 `&gt;` 替换,以避免被浏览器误认为标签。常用的字符实体还包括不间断空格 (`&nbsp;`),用于在页面中增加空格数量。
|
10月前
HTML 字符实体2
发音符号是加在字母上的字形,用于表示不同的发音。常见的变音符号有尖音符( ̀)、抑音符( ́)等,它们可以出现在字母的上方、下方或内部,甚至两个字母之间。这些符号可以与字母或数字字符组合使用,以改变其发音。例如:a&#768; 表示 à,O&#769; 表示 Ó。
|
10月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
10月前
HTML 字符实体3
HTML字符实体用于在网页中显示特殊字符。常见的字符实体包括空格(&nbsp;)、小于号(&lt;)、大于号(&gt;)、和号(&amp;)等。注意,实体名称对大小写敏感。例如,版权符号可以表示为 &copy; 或 &#169;。
|
10月前
|
存储 移动开发 前端开发
|
开发者
HTML 实体字符简介
HTML 实体字符简介
169 2
史上最全HTML实体字符整理
HTML字符实体 做开发的小伙伴们都知道,HTML有一些预留字符,浏览器在解析时不能正确的显示,这个时候我们就需要使用字符实体进行替换。同时,有一些键盘上找不见的符号我们也可使使用字符实体进行替换,下面是我整理的几类我们经常遇到的字符。 1.常见的HTML预留字符 字符 实体编号 实体名称 描述 空格 &nbsp; &#160; &lt; 小于号 &lt; &#60; | 大于号 | &gt; | &gt; & | 和号 | & | & &quot; | 引号 | &quot; | &quot; ’ | 撇号 | &#39; (IE不支持) | &#39; ¢ | 分 | ¢ | ¢ £ |