Hey_Coder
Hey_Coder

【链接标签】

链接标签

  • 1. 链接标签
    • 1.1 链接标签 有哪些 ?
    • 1.2 ★ a 超链接/锚 标签
      • 1.2.1 a 超链接 标签的 属性
      • 1.2.2 a 超链接 标签的 HTML5 中的新属性
      • 1.2.3 a 超链接 标签的 属性详解
        • (1) charset 属性: 链接文档的 字符编码 (已废弃)
        • (2) coords 属性: 坐标 (已废弃, 搭配 shape 属性)
        • (3) download 属性: 指示 下载操作 和 预设文件名 (搭配 href 属性)
        • (4) href 属性: 超链接 地址 (值可搭配 # 和协议)
        • (5) hreflang 属性: 链接文档 语言 (搭配 href 属性)
        • (6) media 属性: 媒体设备
        • (7) name 属性: 名称 (已废弃, 使用 标签 #tag- id 代替)
        • (8) rel 属性: 文档间的关系 正向关系( 已废弃 rev 反向关系 属性)
          • 文档之间的关系 (链接类型)
        • (9) shape 属性: 形状 (已废弃 , 搭配 coords 属性)
        • (10) target 属性: 打开位置
        • (11) type 属性: 链接文档 类型 (搭配 href 属性)
    • 1.3 ★ link 链接 外部资源
      • 1.3.1 link 链接标签的 属性
        • ⑴ media 属性: 适用的 媒体类型 (媒体查询)
        • ⑵ rel 属性: 文档之间的关系 (搭配 href 属性)
        • ⑶ sizes 属性: (实验中, 搭配 rel=icon)
    • 1.4 ★ nav 定义 导航链接的部分
  • 结束语

1. 链接标签

1.1 链接标签 有哪些 ?

标签名 用于
① 定义 锚(超链接)。
② 定义文档与 外部资源 的关系。(链接 外部资源 ).
③ html5 标签,定义 导航链接。

1.2 ★ a 超链接/锚 标签

1.2.1 a 超链接 标签的 属性

属性名 属性值 用于
① href = URL 链接页面 地址. 规定链接 指向的页面的 URL。
② hreflang =language_code 规定 被链接文档 的语言。
③ rel =linked type 规定 当前 文档与被链接 文档之间的关系。
④ target =_blank , _parent , _self , _top , framename 打开位置. 规定 在何处打开 链接文档。
⑤ charset =char_encoding HTML5 中 已废弃,不支持。规定 被链接文档的 字符集。
⑥ coords =coordinates HTML5 中 已废弃,不支持。规定链接的 坐标。
⑦ name =section_name HTML5 中 已废弃,不支持。规定 锚的名称。
⑧ rev =text 已废弃. HTML5 中 已废弃,不支持。规定 被链接文档 与当前文档 之间的 关系。
⑨ shape =default , rect , circle , poly HTML5 中 已废弃,不支持。规定 链接的形状。
⑩ title 链接信息 提示文本 链接title提示文本 只在鼠标悬停时 显示，这意味着 依靠键盘控制 浏览网页的人很难访问标题信息。如果一个标题的信息 对页面的可用性 非常重要，那么应该以一种 所有用户都可以访问的方式 来呈现它，例如 把它放在 常规文本中。

1.2.2 a 超链接 标签的 HTML5 中的新属性

属性名 属性值 用于
① download =filename 规定 被下载的超链接目标。
② media =media_query 规定被链接文档 是为 何种媒介/设备优化的。
③ type =MIME type 规定被链接文档的 MIME 类型。
  • 示例1: 创建 电子邮件链接
    • 在安装邮件客户端程序后 才能工作: 可以安装一个网易邮箱大师 的客户端
    • href="mailto:[email protected]?subject=Hello%20again"
      • 替换空格: 使用 %20 来 替换 单词之间的空格
      • 分隔: 使用? 来分隔 邮箱收件人地址 和邮件主题
<p>
	这是邮件链接：
	<a href="mailto:[email protected]?subject=Hello%20again">发送邮件a>
p>

<p>
<b>注意：b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
p>

【链接标签】_第2张图片
【链接标签】_第3张图片

  • 测试
    • 在安装了 邮箱PC客户端的前提下, 点击 这个邮件链接
      • 会直接打开 默认的邮箱客户端,进入 写邮件的界面
      • 把 收件人 自动设置为 指定的邮箱 mailto:[email protected]
      • 自动填写好 设置的主题 ?subject=Hello%20again
<p>
可以使用图像来作链接：
	<a href="http://www.w3school.com.cn/example/html/lastpage.html">
		<img border="0" src="http://www.w3school.com.cn/i/eg_buttonnext.gif" />
	a>
p>

【链接标签】_第4张图片

  • 测试
  • 点击图片,会跳转页面

1.2.3 a 超链接 标签的 属性详解

(1) charset 属性: 链接文档的 字符编码 (已废弃)

<a charset="gb2312" href="http://www.w3school.com.cn">www.W3School.com.cna>

(2) coords 属性: 坐标 (已废弃, 搭配 shape 属性)
属性值 用于
① x1,y1,x2,y2 如果 shape 属性设置为 “rect”，则该值规定 矩形 左上角和右下角 的坐标。
② x,y,radius 如果 shape 属性设置为 “circ”，则该值规定 圆心的坐标和半径。
③ x1,y1,x2,y2,…,xn,yn 如果 shape 属性设置为 “poly”，则该值规定 多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加 最后一对坐标。