HTML5的超链接与文本格式化标签

97 阅读2分钟

一、路径

绝对路径

定义

就是电脑的盘符存储与访问的地址(从盘符开始写完图片的完整地址)

案例

<body>
    <img src="2.jpg">
    <img src="D:testHtml2.jpg">
</body>

相对路径

定义

相对于 html 文件的位置

  1. 同级关系:可以直接写图片名
案例
<body>
    <img src="2.jpg">
    <img src="img/2.jpg">
</body>
  1. 下级关系:从 html 文件目录开始往下写
案例
<body>
    <img src="D:testHtml/img/z.jpg">
    <img src="img/z.jpg">
</body>
  1. 父级关系:去当前目录的上一级目录
案例
<img src="../z.jpg">

二、超链接标签

<a> 双标签

  • 超链接

定义

一个网站由多个网页组成,网页之间的跳转需要使用超链接。超链接可以是一个字、一个词,或者一组词,也可以是一幅图像。

属性

  1. href 用于指定链接目标的 url 地址。当为 <a> 标记应用 href 属性时,它就具有了超链接的功能。

案例

<a href="http://www.baidu.com">跳转</a>
  1. target 用于指定链接页面的打开方式,其取值有 self 和 blank 两种。其中 self 为默认值,意为在原窗口中打开。blank 为在新窗口中打开。

案例

<a href="http://www.baidu.com" target="self">跳转 self</a>
<a href="http://www.baidu.com" target="blank">跳转 blank</a>

超链接的默认显示状态:

  1. 一个未访问过的超链接显示为蓝色字体并带有下划线,鼠标光标会变成一个小手形状
  2. 访问过的超链接显示为紫色并带下划线
  3. 点击超链接时,超链接显示为红色并带下划线,同时浏览器的左下角会出现一个网址,这个网址就是当你单击超链接时即将跳转到的页面

注意

  1. 当鼠标光标放在超链接上方时,鼠标光标会变成一个小手的形状。
  2. 当鼠标放在超链接上时,浏览器的左下角会出现一个网址,这个网址就是当你单击超链接后,将要跳转到的页面。

三、锚点链接

作用

HTML 语言提供了一种特殊的链接——锚点链接,通过创建锚点链接,用户能够快速定位到目标内容。

案例

<a href="#a">锚点</a><br>
<img src="2.jpg"><br>
<a href="http://www.baidu.com" id="a">需要跳转到百度</a>

四、文本格式化标签与特殊字符

文本格式化标签

  • <em><i>  定义斜体字(推荐使用em)
  • <b><strong> 定义粗体文本(推荐使用strong)
  • <s><del>  定义删除字(推荐使用del)
  • <u><ins>  定义文字的下划线(推荐使用ins)
  • <span>  元素没有特殊的含义

特殊字符标记

特殊字符描述字符代码
``空格符&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
¥人民币&yen;
©版权&copy;
®注册商标&reg;
°摄氏度&deg;
±正负号&plusmn;
×乘号&times;
÷除号&divide;
²平方(上标2)&sup2;
³立方(上标3)&sup3;

补充

文本 <font> 标签: 属性:浏览器默认字体大小。

  1. size 设置文字的大小
  2. color 设置字体颜色
  3. face 设置文字的字体

案例:

<font size="1" color="blue">
    这是</font>
<font size="7"></font><br/>
<font size="7" face="楷体">这是</font><br/>
</font>