链接标签
- 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.4 ★ nav 定义 导航链接的部分
- 结束语
1. 链接标签
1.1 链接标签 有哪些 ?
标签名 | 用于 |
---|---|
① <a> | 定义 锚(超链接)。 |
② <link> | 定义文档与 外部资源 的关系。(链接 外部资源 ). |
③ <nav> | html5 标签,定义 导航链接。 |
1.2 ★ a 超链接/锚 标签
-
HTML
<a>
超链接 元素(或称 锚元素 anchor element)的用途- 链接到 何处: 搭配 a-
href
属性, 可以创建 ( 通向 ❶ 其他网页、 ❷ 文件、❸ 同一页面内的位置、❹ 电子邮件地址 或任何 ❺ 其他 URL 的 ) 超链接。- ❶
<a>
超链接 标签内容:每个<a>
中的内容 应该指示 链接的 目的地 (链接到何处)。 - ❷ 页面 跳转: 如何 从一张页面 跳转到 另一张页面 ?
- 使用
<a>
超链接 标签 - 跳转页面 的位置: 通常 显示在哪里 ?
- 当前 浏览器窗口中
- 指定 跳转页面的 位置: 如果想 显示在别的位置 ,该如何设置?
- 使用
target
打开位置 属性
- 使用
- 使用
- ❸ 跳转到 指定目标:
<a>
超链接 标签 ,如何指定 链接跳转的目标 ?- 使用
<a>
超链接标签的href
超引用 目标地址 属性
- 使用
- abbr. 超文本引用(hypertext reference);超链接
- ❶
- 链接到 何处: 搭配 a-
-
搭配 属性: 如果 不使用
href
引用 目标地址 属性,则不可以使用 哪些属性 ?download, hreflang, media, rel, target
以及type
属性。- 很显然,如果不指定 跳转的目标地址
href
,那么就没有必要指定 以上的关于 目标地址的属性了,属性时相互依存的.
-
版本 差异:
<a>
超链接 标签,HTML 4.01 与 HTML5 之间的差异- 超链接 或锚: 在 HTML 4.01 中,
<a>
标签可以 是超链接 或锚。 - 只能是 超链接: 在 HTML5 中,
<a>
标签 始终是 超链接,但是如果 未设置href
属性,则只是超链接的 占位符。 - HTML5 提供了一些 新属性,同时 不再支持一些 HTML 4.01 属性。
- 超链接 或锚: 在 HTML 4.01 中,
-
链接 默认外观: 在浏览器中,链接 默认的外观
-
<a>
超链接 标签和属性的 浏览器支持
1.2.1 a 超链接 标签的 属性
属性名 | 属性值 | 用于 |
---|---|---|
① href | = URL | 链接页面 地址. 规定链接 指向的页面的 URL。 |
② hreflang | =language_code | 规定 被链接文档 的语言。 |
③ rel | =linked type | 规定 当前 文档与被链接 文档之间的关系。 |
④ target | =_blank , _parent , _self , _top , framename | 打开位置. 规定 在何处打开 链接文档。 |
⑤ | =char_encoding | HTML5 中 已废弃,不支持。规定 被链接文档的 字符集。 |
⑥ | =coordinates | HTML5 中 已废弃,不支持。规定链接的 坐标。 |
⑦ | =section_name | HTML5 中 已废弃,不支持。规定 锚的名称。 |
⑧ | =text | 已废弃. HTML5 中 已废弃,不支持。规定 被链接文档 与当前文档 之间的 关系。 |
⑨ | =default , rect , circle , poly | HTML5 中 已废弃,不支持。规定 链接的形状。 |
⑩ title | 链接信息 提示文本 | 链接title 提示文本 只在鼠标悬停时 显示,这意味着 依靠键盘控制 浏览网页的人很难访问标题信息。如果一个标题的信息 对页面的可用性 非常重要,那么应该以一种 所有用户都可以访问的方式 来呈现它,例如 把它放在 常规文本中。 |
1.2.2 a 超链接 标签的 HTML5 中的新属性
属性名 | 属性值 | 用于 |
---|---|---|
① download | =filename | 规定 被下载的超链接目标。 |
② media | =media_query | 规定被链接文档 是为 何种媒介/设备优化的。 |
③ type | =MIME type | 规定被链接文档的 MIME 类型。 |
- 示例1: 创建 电子邮件链接
- 在安装邮件客户端程序后 才能工作: 可以安装一个网易邮箱大师 的客户端
href="mailto:someone@microsoft.com?subject=Hello%20again"
- 替换空格: 使用 %20 来 替换 单词之间的空格
- 分隔: 使用? 来分隔 邮箱收件人地址 和邮件主题
<p>
这是邮件链接:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>
<p>
<b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</p>
- 测试
- 在安装了 邮箱PC客户端的前提下, 点击 这个邮件链接
- 会直接打开 默认的邮箱客户端,进入 写邮件的界面
- 把 收件人 自动设置为 指定的邮箱
mailto:someone@microsoft.com
- 自动填写好 设置的主题
?subject=Hello%20again
- 在安装了 邮箱PC客户端的前提下, 点击 这个邮件链接
- 如何将图像作为链接 ?
- 图像嵌套在超链接中
- 嵌套关系
<a> href
<img> src
- 示例2: 用图像做超链接,点击图像 进行页面跳转
- 嵌套关系
<p>
<a> href
<img> src
- 嵌套关系
<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>
- 测试
- 点击图片,会跳转页面
1.2.3 a 超链接 标签的 属性详解
(1) charset 属性: 链接文档的 字符编码 (已废弃)
- ⑴
<a>
超链接 标签的charset
字符集 属性<a>
超链接 标签的charset
字符集 属性的浏览器支持- 主流的浏览器 几乎都不支持
charset
属性 - 此属性已过时,不应由作者使用。在链接的URL上 使用 HTTP
Content-Type:
header。
- 主流的浏览器 几乎都不支持
- 用于
- 指定作为 链接目标的文档中 所使用的 字符编码。
charset
字符集 属性的值- 必须是 标准字符集的名称,例如
"UTF-8"
,默认值是"ISO-8859-1"
。
- 必须是 标准字符集的名称,例如
- 使用
- 在理论上,可以使用 任何字符集,但并不是 所有浏览器都能够理解它们。某种字符集使用的范围越广,浏览器就越有可能理解它。
- 已废弃: 在 HTML5 中该属性已作废,过时了,不应使用。 为了实现其效果,使用
HTTP content - type header
的链接资源。
- 字符集参考手册
- 在链接中使用 charset 属性:
<a charset="gb2312" href="http://www.w3school.com.cn">www.W3School.com.cn</a>
(2) coords 属性: 坐标 (已废弃, 搭配 shape 属性)
- ⑵
<a>
超链接 标签的coords
坐标 属性- 搭配属性
- 与
shape
形状 属性配合
- 与
- 链接的 尺寸 形状
- 规定
object
或img
元素中 链接的尺寸、形状和位置 ?- 使用
coords
坐标属性 - coordinate 美 [ko’ɔrdɪnet] n.坐标
- 使用
- 规定
- 使用说明
- 左上角的坐标是 多少 ?
- (0,0)。
- 如何创建 能够在所有浏览器中 运行的图像映射 ?
- 使用
<area>
区域 元素。(又称为 热点区,是 可点击的区域)
- 使用
- 左上角的坐标是 多少 ?
coords
坐标属性的 浏览器支持- 只有 Firefox 和 Opera 支持
coords
属性。
- 只有 Firefox 和 Opera 支持
coords
坐标 属性的属性值 (形状属性和坐标属性,必须搭配使用)- 一个逗号分隔的 坐标列表。
- 矩形: 矩形 左上角和右下角坐标
shape="rect" ,coords="x1,y1,x2,y2"
- 圆形: 圆心坐标和半径
shape="circ",coords="x,y,radius"
- 多边形: 各边的坐标(第一个坐标=最后一个坐标,封闭多边形)
shape="poly".coords="x1,y1,x2,y2,...,xn,yn"
- 搭配属性
属性值 | 用于 |
---|---|
① x1,y1,x2,y2 | 如果 shape 属性设置为 “rect”,则该值规定 矩形 左上角和右下角 的坐标。 |
② x,y,radius | 如果 shape 属性设置为 “circ”,则该值规定 圆心的坐标和半径。 |
③ x1,y1,x2,y2,…,xn,yn | 如果 shape 属性设置为 “poly”,则该值规定 多边形各边的坐标。如果第一个坐标和最后一个坐标不一致,那么为了关闭多边形,浏览器必须添加 最后一对坐标。 |
- 嵌套关系
object > map > a
<object> data alt type usemap
<map> name
<a> href,shape,coords
<object data="planets.gif" alt="Planets" type="image/gif" usemap="#Map1">
<map name="Map1">
<a href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
<a href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
<a href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>
</object>
- 测试
- 利用a-
coords
在图上定位 3个形状,但单击没反应,可能因为html5 中不支持了
- 利用a-
(3) download 属性: 指示 下载操作 和 预设文件名 (搭配 href 属性)
-
⑶
<a>
超链接的download
下载 属性 [HTML 5]- 浏览器支持
- IE 不支持
download
属性。
- IE 不支持
- 指定 下载文件的 文件名: 如何规定 被下载的超链接目标的 文件名 ?
- 使用
<a>
标签的download
下载属性
- 使用
- 下载文件的 地址: 在
<a>
标签中 必须设置href
超引用 属性,指明下载文件的 地址.- 下载文件 名称: 该
download
属性 也可以设置一个值 来规定 下载文件的名称。 download
属性值:- 设置属性值= 预设文件名:
download="filename"
没有限制,浏览器将自动检测 正确的文件扩展名 并添加到文件 (.img, .pdf, .txt, .html, 等等)。不过 最好加上后缀.(一般会 自动添加 后缀名)
download
不设置 属性值 = 浏览器产生 文件名- 如果没有值,浏览器将 建议一个文件名/扩展名,由各种来源产生:
- Content-Disposition HTTP header
- URL路径 path 中的最后一部分
- media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)
- 如果没有值,浏览器将 建议一个文件名/扩展名,由各种来源产生:
- 设置属性值= 预设文件名:
- 下载文件 名称: 该
- 浏览器支持
-
a-
download
下载 属性的用途: 指示 下载操作 + 预设 下载文件名- ❶ 指示 进行下载: 将
href
中指定的文件, 下载 ,保存为 本地文件- 指示浏览器 下载 文件, 而不是 导航到 资源地址.
- 提示用户 将其保存为 本地文件。
- ❷ 指定 下载文件的 预设文件名: a-
download
的属性值: = 预填充的 文件名- 属性值, 在下载保存过程中,作为预填充的文件名
- (如果用户需要,仍然可以 更改文件名)。
- a-
download
下载 属性 对允许的值 没有限制- 左右斜杠 / 和 \ 会被转换为 下划线。
- 文件名中的 标点符号: 一般不要在文件名中用.
- 大多数文件系统 限制了文件名中的 标点符号, 浏览器将 相应地调整 建议的文件名。
- 属性值, 在下载保存过程中,作为预填充的文件名
- ❶ 指示 进行下载: 将
-
download
使用范围 -
a-
download
下载属性, http 头的Content-Disposition
属性 和文件名- 不同的文件名: 如果 HTTP 头中的
Content-Disposition
内容处理 属性 赋予了一个 不同于此属性的文件名,HTTP 头属性 优先于 a-download
下载属性。 - 如果 HTTP 头属性
Content-Disposition
被设置为inline
(即Content-Disposition='inline'
)- Firefox 优先考虑 HTTP 头
Content-Dispositiondownload
属性 - Chrome 将优先处理
download
属性。
- Firefox 优先考虑 HTTP 头
- 不同的文件名: 如果 HTTP 头中的
- 示例1: 点击此链接 来下载图片:
download
下载属性 的属性值- = filename 文件名
- 下载文件的 预设文件名
download="filename"
- 嵌套关系
a > img
<a> href , download
<img> src alt
<p>点击 W3School 的 logo 来下载该图片:<p>
<a href="http://www.w3school.com.cn/i/w3school_logo_white.gif" download="w3logo">
<img border="0" src="http://www.w3school.com.cn/i/w3school_logo_white.gif" alt="W3School">
</a>
- 点击超链接的内容,会根据 a-
href
的属性值 下载 指定的资源- 超链接的内容,可以是一个图片,也可以是文字
- 下载文件的名字,预设为 a-
download
下载属性的属性值
- 点击+下载: 在
<a>
超链接元素中 设置子元素为 文字或者图片,能做到 点击文字或图片 实现下载的功能- 搭配属性:
<a>
标签的href
和download
,同时使用 - 指定 下载的资源地址: 下载的资源 = a
href
中指定的资源- 指定 进行下载操作: 不跳转,而进行下载操作,用a-
download
下载属性 来设置
- 指定 进行下载操作: 不跳转,而进行下载操作,用a-
- 下载 和跳转 区别: 如果 没有 a-
download
下载 属性,点击后 会跳转页面,而不是下载资源
- 搭配属性:
(4) href 属性: 超链接 地址 (值可搭配 # 和协议)
-
⑷
<a>
超链接 标签的href
超链接 属性-
href
- 超文本 引用(hypertext reference);
- 超链接 地址
-
指定 超链接地址: 指定 超链接目标的 URL。
href="url"
-
href
超链接地址 属性值- 任何有效文档的 相对或绝对 URL
- 片段标识符
- JavaScript 代码段
-
提示
<a>
标签中必须提供href
属性 或name
属性。
-
href
超链接属性的属性值- URL
- 超链接的 URL。
<a>
的href
的属性值:- ① 绝对 URL: (万维网上 的网站)
- 指向另一个站点(比如 href=“http://www.example.com/index.htm”)
- ② 相对 URL: (本网站 中的 )
- 指向站点内的某个文件(href=“index.htm”)
- ③ 锚 URL : (本页面 中的)
- 指向页面中的锚(href="#top")
- a-
href="#tag-id"
- 可用于 创建目录,跳转到 指定
id
的 标签的位置.
- ④ 协议: 电话,邮箱等
file:、ftp:, tel:
和mailto:
等 浏览器支持的 任何协议.
- ① 绝对 URL: (万维网上 的网站)
-
-
a
href
属性值 : url, url片段(#ID
),协议- url: 超链接指向的 URL
- url 片段: a-
href="#ID"
- 哈希标记(#)前面的名称,哈希标记 指定当前文档中的 内部目标位置
- (元素的 ID)。
- 返回页面顶部: 可以使用 a-
href="#top"
或者href="#"
链接返回到页面顶部。 - 这种行为是 HTML5 的特性。所以
id
最好别用top
,因为 a-href="#top"
有特别含义.
- 哈希标记(#)前面的名称,哈希标记 指定当前文档中的 内部目标位置
- 协议: URL 也可以使用 浏览器支持的 任何协议。
- 如,在大多数浏览器中 正常工作的
file:、ftp:
和mailto:
。
- 如,在大多数浏览器中 正常工作的
- a-
href
属性值 url的不同: 一个本地网页,一个是网上的网页 - 示例1: 跳转到 不同位置的网页
<a href="/index.html">指向 本网站中的 一个页面的链接</a>
<a href="http://www.microsoft.com/">指向 万维网上的 页面的链接</a>
- 示例2: 创建 一个可点击的图片,可以使用图像来作链接的内容,实现 点击图片,进行页面跳转
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
- 示例3: 一个人的联系方式,点击文字 实现网页跳转,发邮件等功能
- 创建 email 链接
- 创建 电话 链接
- 嵌套关系
ul > li > a
<p>
<ul>
<li>
<a> href
<p>You can reach Michael at:</p>
<ul>
<li><a href="https://example.com">Website </a></li>
<li><a href="mailto:m.bluth@example.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
- 相关 css
a[href^="https"]::before {
content: "? ";
}
a[href^="mailto"]::before {
content: "? ";
}
a[href^="tel"]::before {
content: "? ";
}
li {
margin-bottom: .5rem;
}
- 测试
- 个人的 网站,邮箱,电话
(5) hreflang 属性: 链接文档 语言 (搭配 href 属性)
- ⑸
<a>
超链接 标签的hreflang
链接文档语言 属性- 用于
- 指定 被链接文档的 语言 ?
- 使用
hreflang
链接文档 语言 属性
- 使用
- 指定 被链接文档的 语言 ?
- 使用
- 搭配属性: 仅在使用
href
属性时 才可以指定hreflang
属性。<a> href + hreflang
- 没有
href
链接文档,就没必要指定 链接文档的 语言了hreflang
.
- 搭配属性: 仅在使用
lang
和hreflang
的区别lang
语言属性和hreflang
链接文档 属性的值- 都是是 ISO 标准的 双字符 语言代码。
hreflang
属性和lang
属性不同的是 什么 ?lang
语言属性: 指定 标签中的内容 所使用的语言hreflang
链接文档属性 指定被href
属性 调用的文档 所使用的语言。
hreflang
链接文档语言 的浏览器支持- 主流的浏览器 都支持
hreflang
属性。
- 主流的浏览器 都支持
hreflang
的属性值- language_code
- 双字符 的 语言代码,指定 跳转到文档的语言。
hreflang="language_code"
- 用于
- 示例1: 表明链接文档 w3school 是一个中文网站:
hreflang="zh"
<a href=" " hreflang="">
<a href="http://www.w3school.com.cn" hreflang="zh">W3School</a>
(6) media 属性: 媒体设备
- ⑹
<a>
超链接 标签的media
媒体设备 属性 [HTML 5]- 媒体/设备 类型: 如何规定 被链接文档 是为 什么类型的 媒介/设备 进行优化的。
- 使用
media
媒体设备 属性 - 规定目标 URL 是为特殊设备(比如 iPhone)、语音 或打印媒介 设计的。
- 使用
media
媒体设备属性 可接受 多个值吗 ?- 可以
media
媒体设备属性的使用- 搭配属性: 只能在
href
属性存在时 使用。 <a href="" media="">
- 属性值 写法 详细介绍
- 搭配属性: 只能在
- 媒体/设备 类型: 如何规定 被链接文档 是为 什么类型的 媒介/设备 进行优化的。
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">打开用于打印的 media 属性页面</a>
(7) name 属性: 名称 (已废弃, 使用 标签 #tag- id 代替)
- ⑺
<a>
超链接 标签的name
名称 属性 [ HTML 5 中 已废弃]-
指定 锚的名称: 如何指定 锚(anchor)的名称 ?
- 使用超链接标签的
name
名称属性 - 创建 文档内 书签:
name
属性 可以 创建(大型)文档内的 书签
- 使用超链接标签的
-
搭配 属性:
<a>
超链接 标签内必须提供 哪些标签 ?href
超链接地址 属性 或name
名称 属性。
-
<a>
的name
名称 属性值- anchor_name
- 锚的名称。
<a name="anchor_name">
-
创建 目录 (页面内 跳转): 如何通过
name
名称 属性,我们可以制作一个 目录列表 ?<a>
超链接标签的href
超链接url 属性 =<a>
超链接标签的name
属性- 或者 任意标签的
id
属性 a-href=#a-name=#tag-id
-
已废弃: 该属性在 HTML5中是 过时的, 使用 全局属性
id
来代替。 -
关联关系
- 目录的位置:
a-href=#a-name=#tag-id
- 点击 目录列表,会跳转到 对应的详细介绍
- a-
href
属性和name,id
的搭配选择- ❶
name
属性 跳转:- 要想通过
name
属性跳转,必须是<a>
超链接 标签的name
,其他标签的name
属性,是不会跳转的 (不要使用,html 5 中已废弃,这个显得很多余,使用 要跳转到的标签的id
更简单明了.)
- 要想通过
- ❷
id
属性 跳转:- 所有主体内 标签的
id
,都可以跳转,不仅仅限制 在<a>
标签
- 所有主体内 标签的
- 总结:
- 建议使用 id : a-
href= = "#tag-id"
,来实现 页面内的跳转 - 好处:
- 不用额外添加
<a>-name
,直接用 要跳转位置的 标签的id
即可 - HTML 5 中,也不支持 a-
name
来实现 页面内 跳转 - 保证了 跳转位置的 唯一性 (
id
是唯一的,这样跳转的位置 就是唯一的了,不会出现相同名称name
的跳转位置,造成混淆)
- 不用额外添加
- 建议使用 id : a-
- ❶
- 目录的位置:
-
<!-- ul>li>a[href=#C$]*8{第章}*8 -->
<ul>
<li>
<a href="#C1">第一章</a>
<a href="#C2">第二章</a>
<a href="#C3">第三章</a>
<a href="#C4">第四章</a>
<a href="#C5">第五章</a>
<a href="#C6">第六章</a>
<a href="#C7">第七章</a>
<a href="#C8">第八章</a>
</li>
</ul>
<!-- ((h2>a[name=C$]*8{第章})+p{本章讲解的是...})*8 -->
<h2><a href="" >第一章</a>
</h2>
<p id="C1">本章讲解的是...</p>
<h2><a href="" name="C2">第二章</a>
</h2>
<p>本章讲解的是...</p>
<h2><a href="" name="C3">第三章</a>
</h2>
<p>本章讲解的是...</p>
<h2><a href="" name="C4">第章四</a>
</h2>
<p>本章讲解的是...</p>
<h2><a href="" name="C5">第五章</a>
</h2>
<p>本章讲解的是...</p>
<h2><a href="" name="C6">第六章</a>
</h2>
<p>本章讲解的是...</p>
<h2><a href="" name="C7">第七章</a>
</h2>
<p>本章讲解的是...</p>
<h2><a href="" >第八章</a>
</h2>
<p id="C8">本章讲解的是...</p>
- 点击第一章的目录,跳转到第一章的详情,而不是标题
- 因为使用
a-href=#p-id
,使用的是详情<p>
段落标签的id
,不是标题中<a>
超链接标签的name
属性值
- 因为使用
-
使用
name
名称 属性还是id
唯一 属性?- 在 HTML 4.0 之前的版本中
- 只有使用
<a>
标签的name
属性 才能创建 片段标识符。
- 只有使用
- 随着 HTML 4.0 中
id
属性 的出现- 所有 HTML 或 XHTML 元素都可以是 片段标识符。因为
id
标识符几乎可以用在所有的标签中。
- 所有 HTML 或 XHTML 元素都可以是 片段标识符。因为
<a>
超链接 标签为了能够和以前的版本 相兼容- 保留了
name
名称 属性,同时也可以使用id
属性。 name
和id
属性可以相互 交换使用,可以把id
属性看作是name
属性的升级版本。- ▲总结:
a-name
和tag-id
属性 都可以与<a>
标签的href
属性 结合使用- 建议使用 a-
href= = "#tag-id"
,来进行跳转,这样 被跳转到的位置 代码更加简单,只需要设置id
即可,不需要添加 多余的<a>
标签,当然,目录的位置 还都是需要设置 a-href
的.
- 保留了
- 在 HTML 4.0 之前的版本中
-
id
或name
属性值的唯一性- 字符串。
- 字符串必须是 唯一的 (同一文档中,不能出现第二次)
- 不能在 同一文档中的其他 name 或 id 属性中重复使用
- 可以在不同的文档中 再次使用。(两个相同值的话,无法判断 该跳转到哪里)
-
提示
- ▲ html5 中不支持
a
的name
属性,使用标签的id
属性 作为 锚的名称- 所以,一般还是使用
id
来作为跳转比较好 a-href=#tag-id
- 所以,一般还是使用
- ▲ html5 中不支持
(8) rel 属性: 文档间的关系 正向关系( 已废弃 rev 反向关系 属性)
- ⑻
<a>
超链接 标签的rel
正向关系 和rev
反向关系属性- 指定 文档间的关系
- 指定 当前文档 与被链接文档(跳转到的文档)的关系。
- 用于
<a>
标签的可选属性rel
和rev
分别表示- 当前文档 与跳转文档之间 关系和方向
- 正向关系:
rel
正向关系 属性 指定- 从当前文档到 跳转到文档的关系
- 反向关系 (已废弃):
rev
反向关系属性 指定- 从 跳转到文档 到当前文档的关系。
- html5中 已废弃该属性,
rel
属性 已经可以表明文档关系了,rev
属性 显得多此一举.
- 这两种属性可以在
<a>
标签中同时使用吗 ?- 可以 (
rev
已废弃.)
- 可以 (
- 正向关系:
rel
或rev
正反向关系 属性的属性值- 以 空格 分隔的 关系列表。
- 当前文档 与跳转文档之间 关系和方向
- 实际的关系名 和它们的含义 取决开发者:
- 因为,HTML 或 XHTML 标准并没有 正式提出 这两种属性。
- 使用
target
时,考虑添加rel="noopener norefferrer"
以防止针对window.opener API
的恶意行为。
- 指定 文档间的关系
- 示例1: 当前文档 和跳转文档 之间的关系是 移动到 下一个文档,反之, 则是 返回前一个文档。
<a href="part_12.html" rel="next" rev="prev">
- 示例2: 指明要跳转到的文档 是友情网站
- 带有
rel
正向关系 属性的链接:(作为 友情网站 链接)
- 带有
<a rel="friend" href="http://www.w3c.com/">w3c</a>
<a>
超链接 标签的 的rel
正向关系 和rev
反向关系属性的属性值rel=rev="alternate,stylesheet,start,next,prev,contents,index,glossary,copyright,chapter,section,subsection,appendix,help,bookmark,nofollow,licence,tag,friend"
文档之间的关系 (链接类型)
-
文档之间的关系 (链接类型)
- 页面(文档)跳转: 在两个文档之间 可以使用
<a>, <area>,<form>
或<link>
元素 使一个页面 链接到另一个页面。 - 这三个元素,都可以 使用
rel
文档间 正向关系 属性 (因为 都可以进行 文档间的跳转)
- 页面(文档)跳转: 在两个文档之间 可以使用
属性值 | 用于 | 适用的标签 |
---|---|---|
① alternate | 文档的 可选 版本(例如打印页、翻译页或镜像)。 | <a>, <area>, <link> |
② author | 文档的 作者 相关信息。 | <a>, <area>, <link> |
③ bookmark | 指示超链接是 最近的祖先<article> 元素的 永久链接。如果没有<article> ,它就是与元素关联 最紧密的 section 的永久链接。这允许 在包含多篇文章的页面(如 每月摘要博客页面 或博客集合)中 添加一篇文章的 书签。 | <a>, <area> |
④ canonical | 美 /kəˈnɑːnɪkl/, 一个规范的链接元素 是一个HTML元素,它通过指定一个web 页面的 “规范”或“首选”版本 作为 搜索引擎优化 的一部分,来帮助网站管理员 防止重复的内容问题。 | <link> |
⑤ external | 指示 超链接指向 当前页面的 站点外部的资源;也就是说,跟随链接 会让用户离开站点。 | <a>, <area>, <form> |
⑥ help | 帮助文档。 如果元素是<a> 或<area> ,则表示 该超链接 指向一个资源,该资源 提供关于元素的 父元素 及其后代的 进一步帮助。如果元素是<link> ,则表示 该超链接 指向一个资源,该资源提供 有关 页面整体的 进一步帮助。 | <a>, <area>, <form>, <link> |
⑦ icon | 用于在用户界面中 表示页面的资源,通常是 图标(听觉或视觉)。如果有多个<link rel="icon"> ,浏览器将使用它们的 媒体、类型和大小属性 media, type, sizes 来选择 最合适的图标。如果有几个图标 同样合适,则使用 最后一个。如果后来发现 最合适的图标不合适,例如 因为它使用了一种 不受支持的格式,那么浏览器将 继续处理 下一个最合适的图标,等等。 | <link> |
⑧ licence | 许可证. 指示超链接 指向描述 许可信息的文档。如果不在<head> 元素中,则标准 不区分应用于 文档特定部分的 超链接 和应用于整个文档的 超链接。只有页面上的数据 可以表明这一点。 | <a>, <area>, <form>, <link> |
⑨ manifest | 指示链接的文件 是 Web应用程序清单。 | <link> |
⑩ modulepreload | /ˈmɑːdʒuːl/, 启动 模块脚本的 早期(和高优先级)加载。 | <link> |
⑪ nofollow | Google 使用 “nofollow”,用于指定 Google 搜索引擎 不要跟踪链接。表示被链接的文档 没有得到本文 作者的认可,例如,它没有对 文档的控制权,它是一个糟糕的示例,或者两者之间 存在商业关系(sold link)。一些使用 流行度排名技术的 搜索引擎 可能会 使用这种 链接类型。 | <a>, <area>, <form> |
⑫ noopener | 指示浏览器打开链接,但不授予 打开该链接的文档 新的浏览内容 访问权限——通过不设置 打开的窗口上的 Window.opener 属性(它返回空值null )。这在打开 不可信链接时 特别有用,以确保它们 不能通过Window.opener 属性 篡改原始文档。 (关于 rel=noopener 的更多详情 ), 同时仍然提供Referer HTTP header (除非也使用noreferrer )。 注意,在使用noopener 时,除了_top、_self 和_parent 之外的 非空目标名 在决定是否打开新窗口/选项卡时 都被视为_blank 。 | <a>, <area>, <form> |
⑬ noreferrer | 防止浏览器 在导航到另一个页面时 通过Referer: HTTP header 作为Referer 发送此页面地址 或任何其他值。(在Firefox中,在Firefox 37之前,这只适用于 页面中的链接。在UI中单击的链接,如通过 上下文菜单“在新选项卡中打开”,会忽略这个)。 | <a>, <area>, <form> |
⑭ stylesheet | 文档的 外部样式表。定义 作为样式表 使用的外部资源。如果没有设置类型type ,在进一步检查之前,浏览器应该假定它是 text/css 样式表。 | <link> |
⑮ next | 集合中的 下一个 文档。指示 超链接指向 当前页面所在序列的 下一个资源。 | <a>, <area>, <form>, <link> |
⑯ prev | 集合中的 前一个 文档。指示 超链接指向 当前页所在序列的 之前的资源。虽然可以识别,但同义词 previous 是 不正确的,必须避免。 | <a>, <area>, <link>, <form> |
⑰ search | 指示 超链接引用的文档 及其资源的接口 是专门为 在此文档或站点中 搜索 而设计的。 如果type 属性设置为 application/opensearchdescription+xml ,则资源是一个 OpenSearch 插件,可以轻松地 添加到一些浏览器(如 Firefox或 Internet Explorer)的界面中。 | <a>, <area>, <link>, <form> |
⑱ shortlink | 一些网站 创建 短链接,使 通过即时消息 共享链接 更容易。 | <link> |
⑲ tag | 标签. 指示 超链接 指向 描述( 应用于 此文档的) 标签 的文档。 | <a>, <area> |
contents | 文档 目录。 | |
glossary | 美 /ˈɡlɑːsəri/ , 文档中所用字词的 术语表或解释。 | |
chapter | 文档的 章。 | |
section | 文档的 节。 | |
subsection | 文档的 子段。 | |
appendix | 美 /əˈpendɪks/ , 文档 附录。 | |
friend | 友情链接 | |
start | 集合中的 第一个 文档。 | |
html5 已废弃. 文档 索引。指示该页面 是层次结构的一部分,并且超链接 指向该 结构的顶级资源。如果还存在一个或多个 up 链接类型(也已废弃),则up 的数量 表示当前页面 在层次结构中的深度。 | <a>, <area>, <link> | |
包含 版权信息 的文档。虽然许可证licence 同义词版权copyright 得到了承认,但它是错误的,必须避免。 |
-
已废弃的 链接类型:
first, last,sidebar,up,index
-
部分关系 可以用在 文档的
<head>
头部标签中的<link>
链接标签 里。<link>
链接 标签- 无需创建一个 指向目标文档的链接(因为是指向外部文件的) 就可以创建关系;
<a>
超链接 标签- 则要 创建链接,并在其中 加入关系属性。
-
链接类型 浏览器支持
- 实验杯标志,表示 实验中的属性值,尚未标准化
- 三角中带感叹号: 非标准。跨浏览器支持 很差。
(9) shape 属性: 形状 (已废弃 , 搭配 coords 属性)
- ⑼
<a>
超链接 标签的shape
形状 属性 [HTML 5 中 已废弃] - 指定 链接文档的形状: 如何规定
object
或img
元素 中 链接的尺寸、形状和位置 ?- 使用
shape
形状属性与coords
坐标 属性配合
- 使用
- 创建 图像映射: 如何创建 能够在所有浏览器中 运行的图像映射
- 使用
<area>
区域标签(又称为 热点区,可点击的区域)
- 使用
<a>
超链接 标签的shape
形状 属性的浏览器支持- 只有 Firefox 和 Opera 支持
shape
属性。
- 只有 Firefox 和 Opera 支持
shape
形状 属性值- 形状默认值: 全部区域.
- 矩形
- 圆形
- 多边形
- 已废弃: a-
shape
形状属性 , 在 HTML 5中已废弃 过时了- 建议使用: 使用
map
属性在<img>
元素和相关的<map>
元素中的<area>
来定义热点而 不是用 a-shape
形状属性。
- 建议使用: 使用
属性值 | 用于 |
---|---|
① default | 规定 全部 区域。 |
② rect | 定义 矩形 区域。 |
③ circle | 定义 圆形。 |
④ poly | 定义 多边形 区域。 |
(10) target 属性: 打开位置
- ⑽
<a>
超链接 标签的target
目标 属性 - 链接文档 打开位置: 如何 规定 在何处打开 链接文档 ?
- 使用
target
打开位置属 性
- 使用
- 指定 打开位置: 如何让浏览器 在指定 框架或者窗口中 打开文档 ?
<a target="">
- 在一个
<a>
超链接 标签内包含一个target
打开位置 属性
- 在一个
- 无效值: 如果这个指定名称或 id 的框架或者窗口不存在 会怎么处理 ?
- 浏览器会在 新的窗口 打开链接文档
<a>
的target
打开位置 属性值- 打开位置 默认值: 在相同框架中
- ❶ 新窗口
- ❷ 整个窗口
- ❸ 相同的框架
- ❹ 父框架
- ❺ 指定的框架
target="_blank,_top,_self,_parent,framename"
属性值 | 用于 |
---|---|
① _blank | 在 新窗口 中打开被链接文档。 |
② _self | 默认。在 相同的框架 中打开被链接文档。 |
③ _parent | 在 父框架集 中打开被链接文档。 |
④ _top | 在 整个窗口 中打开被链接文档。 |
⑤ framename | 在 指定的框架 中打开被链接文档。 |
target="view_window"
- (没有这个属性值,怎么也可以指定 ?)
- 打开 新窗口
- 当用户 第一次选择 内容列表中的某个链接时
- 打开新窗口+标记窗口+显示文档
- 浏览器 会打开一个新的单独的窗口
- 将这个窗口 标记为
"view_window"
,标记是为了知道 在哪里显示 - 在这个窗口中 显示文档内容。
- 打开新窗口+标记窗口+显示文档
- 在整个过程中
- 这个包含了内容列表的窗口是: 用户可以访问的。
- 通过单击 窗口中的 一个链接,可使 : 另一个窗口的内容 发生变化。
- 当
<a>
标签的target="view_window"
时,- 始终是两个窗口
- 一个窗口,显示原来的文档
- 一个窗口,显示打开的链接文档(选定的文档 载入这个窗口,取代 之前的那些文档。)因为这个窗口 被标记了,所以一直在这个指定的 标记的窗口中 打开页面.
<h2>
<a href="https://www.baidu.com/" name="C3" target="view_window">第三章</a>
</h2>
<p>本章讲解的是...</p>
<h2>
<a href="http://www.w3school.com.cn/" name="C4" target="view_window">第章四</a>
</h2>
<p>本章讲解的是...</p>
- 在框架中 打开窗口:
a-target=frame-name
- 如何在一个
<frameset>
框架集中 将链接文档 定向 到 一个或者多个 框架中 ?- 使用
target
目标位置属性
- 使用
- 如何在一个
- 把内容列表 放在一个有两个框架的文档的其中一个框架中, 用另一个框架 来显示 选定的文档:
- ① 第一个框架中的 页面: 目录列表的页面 toc.html 的代码
- 嵌套关系
ul > li > a
<ul>
<li>
<a> href target
- 关联关系:
a-target=frame-name
- 每个链接
<a>
都指定了 打开位置target="view_frame"
,在框架名name="view_frame"
的<frame>
中打开.
- 每个链接
<html>
<body>
<h3>Table of Contents</h3>
<ul>
<li><a href="/example/html/pref.html" target="view_frame">Preface</a></li>
<li><a href="/example/html/chap1.html" target="view_frame">Chapter 1</a></li>
<li><a href="/example/html/chap2.html" target="view_frame">Chapter 2</a></li>
<li><a href="/example/html/chap3.html" target="view_frame">Chapter 3</a></li>
</ul>
</body>
</html>
- ② 第二个框架中的 页面: pref.html 的代码(默认显示的是: 目录列表的 第一个链接的内容)
<html>
<body bgcolor="#ff8888">
<h3>Preface</h3>
</body>
</html>
- ③ 整合两个框架的 框架集页面:
- 嵌套关系
frameset > frame
<frameset> cols
<frame> src
<frame> src name
- 关联关系: frame-src=x1/x2.html
<frameset cols="100,*">
<frame src="toc.html">
<frame src="pref.html" name="view_frame">
</frameset>
target
打开位置 属性值- ① 新窗口:
target=" _blank"
- 浏览器总在一个 新打开、未命名的窗口 中载入目标文档。(每次打开,都是一个新窗口)
- ② 相同框架或窗口:
target="_self"
(默认的目标位置值)- 这个目标的值 对所有 没有指定目标 的
<a>
标签是 默认目标位置,- 使得目标文档 载入并显示在 相同的框架或者窗口中作为源文档。
- 这个目标是 多余且不必要的,除非和文档标题
<base>
基准 标签中的target
目标位置 属性一起使用。
- 这个目标的值 对所有 没有指定目标 的
- ③ 父框架 或窗口:
target= "_parent"
- 这个目标使得文档载入 父窗口或者 包含超链接引用的 框架的框架集。
- 如果这个引用是在 窗口或者在顶级框架 中,那么它与目标
_self
等效。
- 如果这个引用是在 窗口或者在顶级框架 中,那么它与目标
- 这个目标使得文档载入 父窗口或者 包含超链接引用的 框架的框架集。
- ④ 整个窗口 (清除框架):
target="_top"
- 这个目标 让文档载入包含这个超链接的窗口, 清除所有 被包含的框架 并将文档载入 整个浏览器窗口。
- 使用说明
- 这些
target
的 4 个值都以 下划线 开始。 - 任何其他 用一个下划线 作为开头的 窗口或者目标 都会 被浏览器忽略.
- ▲ 总结:
- ① 框架名或id 不要带下划线: 任何 框架
name
或id
的第一个字符 不要是 下划线,因为带下划线 具有特别的意义. - ② 添加 文档关系(链接类型):
- ❶ 使用
target
时,添加rel="noreferrer"
以避免窗口window.opener API
被利用。 - ❷ 使用
target="_blank"
链接到另一个页面 将在与页面相同的进程中 运行新页面。如果新页面 执行JavaScript,您的页面的性能 可能会受到影响。避免这个, 可以使用rel="noopener"
,可以使用rel="noopener noreferrer"
。
- ❶ 使用
- ① 框架名或id 不要带下划线: 任何 框架
- 这些
- ① 新窗口:
(11) type 属性: 链接文档 类型 (搭配 href 属性)
- ⑾
<a>
超链接标签的type
类型 属性- 链接文档 类型: 如何规定 链接文档 的 MIME 类型 ?
- 使用 a-
type
类型属性
- 使用 a-
- 搭配属性
- 为什么 a-
type
只能在 a-href
属性 存在时使用? - 没有
href
,就没有 链接文档,就没必要指定 链接文档的类型了
- 为什么 a-
- 链接文档 类型: 如何规定 链接文档 的 MIME 类型 ?
- 示例1: 规定链接文档的 mime 类型为网页:
type="text/html"
<a href="http://www.w3school.com.cn" type="text/html">W3School</a>
1.3 ★ link 链接 外部资源
- 链接 外部资源
- 如何链接 外部资源 ?
- 使用
<link>
链接标签
- 使用
- 链接 样式表: 如何 链接样式表 ?
- 使用
<link>
链接标签
- 使用
- 创建 站点图标: 也
<link>
可以被用来 创建站点图标(“favicon”样式图标 和主屏幕图标 以及移动设备上的 应用程序图标) 。
- 如何链接 外部资源 ?
- 正确关闭:
<link>
链接标签,HTML 与 XHTML 之间的差异- 在 HTML 中,
<link>
标签 没有 结束标签。 - 在 XHTML 中,
<link>
标签 必须被 正确地关闭。
- 在 HTML 中,
- 使用说明
- 空元素 (空标签):
<link>
链接标签是 空元素吗 ?- 是的
- 什么是 空元素?
- 仅包含 属性,没有 元素内容 (添加不了 标签内容,因为没有 结束标签)。
- 标签 位置:
<link>
链接标签 位于什么位置 ?- 只能存在于
<head>
头部标签 中
- 只能存在于
- 不限 数量:
<link>
链接标签出现次数 有限制吗 ?- 没有限制,任意次数.
- 可以有多个
<link>
链接标签 同时存在.
<link>
链接标签的 浏览器支持- 用于样式表时,几乎所有浏览器的都支持
<link>
链接标签。 - 但是几乎没有浏览器 支持其他方面的用途。
- 用于样式表时,几乎所有浏览器的都支持
- 空元素 (空标签):
- 示例1: 链接一个 外部样式表
- 嵌套关系
head > link
<head>
(头部标签)<link> rel type href
(链接标签,正向关系属性,链接文档类型,超链接属性)
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
1.3.1 link 链接标签的 属性
属性名 | 属性值 | 用于 |
---|---|---|
① href | = URL | 链接文档 地址. 规定 被链接文档的 位置。 |
② hreflang | = language_code | 链接文档 语言.规定 被链接文档 中 文本的 语言。 |
③ media | =media_query(媒体查询) | 适用 媒体/设备.规定被链接文档将 被显示在 什么设备上。在media 属性内部 进行查询;这种资源 将只在 满足媒体条件的情况下 才被加载进来 |
④ rel | =alternate ,author ,help等 | 文档关系 (链接类型). 规定 当前文档与被链接 文档之间的关系。多个 链接类型值 用空格分隔. |
⑤ type | =MIME_type | 链接文档 类型. 规定被链接文档的 MIME 类型。最常用的值 是表明了CSS的text/css . |
⑥ | =char_encoding | HTML5 中不支持。字符编码. |
⑦ | =reversed relationship | HTML5 中不支持。已废弃. |
⑧ | =_blank, _self, _top,_parent , frame_name | HTML5 中不支持.打开位置. |
⑨ sizes | =heightx width any | 图标 尺寸. (实验中的属性,尚未标准化) html5 新属性. 规定被链接的 图标资源的 尺寸。仅适用于 rel="icon" 图标.。 |
rel
正向关系 属性,指示被链接的文档 是一个样式表:rel="stylesheet"
- 示例1: 引入一个 css 文件
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
- 示例2: 切换网页的样式,网页的 多种样式
- 提供 可替换的样式表
- 可以指定"可替换的 外部样式表"。
- 如何切换样式: 用户可以在浏览器菜单 “查看>页面样式” 来选择 网页的样式。通过这一办法,可以用多种样式 浏览网页。
- 备用 样式表: 通常使用具有
rel="stylesheet alternate"
和title="…"
属性的元素指定。
- 提供 可替换的样式表
- 1个基础样式表+ 3个替换的样式表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Alternative Style Sheet Example for MDC</title>
<!-- 1个基础样式表+ 3个替换的样式表 -->
<!--无论选择哪种样式,都将始终应用 reset.css 样式表中的规则。这个没有 alternate 的关键词-->
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
<link href="simple.css" rel="alternate stylesheet" type="text/css" title="Simple">
<link href="insane.css" rel="alternate stylesheet" type="text/css" title="Insane">
</head>
<body>
<h1>About alternative style sheets</h1>
<p>Firefox 3 offers support for <i>alternative style sheets</i>. Pages that provide alternative style sheets allow the user to select the style in which the page is displayed using the View>Page Style submenu. This provides a way for users to see multiple versions of a page, based on their needs or preferences.</p>
<p>A web page can use the <tt><a href="/en/docs/HTML:Element:link" title="HTML:Element:link">link</a></tt> element to add alternative style sheets to a document.</p>
<h1>Try it out!</h1>
<p>Go to the View>Page Style submenu and select a different style to watch this page's look change!</p>
</body>
</html>
- 指明是 备用的替换样式: 用 link-
rel
属性 指明是替换样式,添加'alternate'
关键词 - 设置 备用样式的名称: link-
title
= 在浏览器的 '查看-页面样式’中显示的样式名称 - 默认选择样式为:
titl="default style"
的样式表
⑴ media 属性: 适用的 媒体类型 (媒体查询)
- ⑴
<link>
链接 标签的media
媒体设备 属性- 规定了 外部资源 适用(针对)的 媒体类型。
media
属性值: 必须是"媒体查询"。- 针对 特定设备: 这个属性 使得用户代理 能选择 最适合设备运行的 媒体类型。
- 示例1: 对应两种 不同的媒介类型(计算机屏幕 和打印),设置 两种 不同的样式表:
media
媒体设备,默认是: 计算机屏幕media="print"
针对打印- 满足 媒体条件,才加载样式表
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>
⑵ rel 属性: 文档之间的关系 (搭配 href 属性)
- ⑵
<link>
链接 标签的rel
正向关系 属性- 文档 关系
- 如何规定 当前文档 与被链接文档 之间的关系 ?
- 使用 link-
rel
正向关系属性
rel
正向关系 属性值的 浏览器支持- 只有
rel="stylesheet"
得到了 所有浏览器的支持。 - 其他值 只得到了 部分地支持。
- 只有
- 文档 关系
rel
属性值- 必须是 链接类型值
- 多个 链接类型值 用空格分隔。
- 特殊 图标 类型:
rel
还有很多其他的 图标值,主要用于 表示 各种移动平台上 使用的 特殊图标类型,如:
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="apple-icon-114.png" type="image/png">
⑶ sizes 属性: (实验中, 搭配 rel=icon)
- ⑶
<link>
链接标签的sizes
尺寸 属性- 设置 图标尺寸
- 如何规定 被链接资源的尺寸 ?
- 使用 link-
sizes
尺寸属性
- 使用 link-
- 如何规定 被链接资源的尺寸 ?
- 搭配 属性: 什么时候 能使用 link-
sizes
尺寸属性- 只有当 被链接资源是 图标时 (
rel="icon"
),才能使用 该属性。 <link rel="icon" sizes=""/>
- 只能用于 设置图标的大小
- 只有当 被链接资源是 图标时 (
- 同时设置 多个 尺寸值: link-
sizes
尺寸属性 可接受多个值 吗 ?- 可以
- 多个值 用 空格 分隔。
- 可以
- link-
sizes
尺寸属性 的属性值- ① 高x宽 值对: height
x
width- 为被链接的图标 规定一个或多个 以像素计的 高度/宽度值对。
- 高度与宽度之间 由 “
x
” 或 “X
” 分隔。
- ② 可伸缩(任意大小):
any
- 规定图标是 可伸缩的(比如 SVG 图像)。
- 表示图标 可以 按矢量格式 缩放到任意大小,例如
image/svg+xml
。
- ① 高x宽 值对: height
- 使用说明
- 大多数的
icon
格式 只能存储 一个icon
。 - 通常 一个尺寸值: 因此绝大多数使用
sizes
时只包含一个值。微软的ICO
格式 和苹果的ICNS
格式都是这样,ICO使用得更加广泛,推荐你使用它。 - 苹果的IOS系统 特殊 链接类型值: 并不支持这个属性,于是苹果的 IPhone以及 IPad使用特殊的、非标准的
link
类型值 去定义作为Web Clip或开始占位符:apple-touch-icon
和apple-touch-startup-icon
。
- 大多数的
- 设置 图标尺寸
- 浏览器支持
- 图标尺寸 是 实验中属性, 目前几乎 没有主流浏览器支持
sizes
属性。
- 图标尺寸 是 实验中属性, 目前几乎 没有主流浏览器支持
- 示例1: 带有 指定尺寸的图标:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="http://www.w3school.com.cn/i/demo_icon.ico" type="image/gif" sizes="16x16" />
</head>
<body>
<h2>Hello world!</h2>
<p>在<a href="/example/html5/demo_html5_link_sizes.html" target="_blank">新窗口</a>打开该页会看到图标。</p>
</body>
</html>
- 测试
- 在
<link>
中添加 图片,会显示在 标签页的标题栏左边
- 在
1.4 ★ nav 定义 导航链接的部分
<nav>
导航标签 的浏览器支持- IE 8 以及更早的版本 不支持
<nav>
标签。 - Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持
<nav>
标签。
- IE 8 以及更早的版本 不支持
- 定义 导航链接
- 如何定义 导航链接的部分 ?
- 使用
<nav>
导航标签 - 表示页面的一部分,其目的是 在当前文档 或其他文档中 提供 导航链接。
- 导航部分的 常见示例: 是 菜单,目录和索引。
- 使用
- 前后 按钮
- 如果文档中有 “前后”按钮,则应该把它放到 什么标签中 ?
<nav>
导航 标签中
- 如果文档中有 “前后”按钮,则应该把它放到 什么标签中 ?
- 如何定义 导航链接的部分 ?
- 导航栏: 多个超链接.
- HTML导航栏 (
<nav>
) 表示 含有多个超链接的区域,这个区域 包含转到其他页面,或者 页面内部 其他部分的链接列表.
- HTML导航栏 (
<nav>
的使用范围: (常用到的) 热门链接- 并不是 所有的链接 都必须使用
<nav>
元素,它只用来将 一些 常用到的 热门的链接 放入导航栏 - 例如
<footer>
元素 就常用来 在页面底部 包含一个 不常用到,没必要加入<nav>
的链接列表.
- 并不是 所有的链接 都必须使用
<nav>
导航栏 标签 个数: 可以多个- 一个网页 也可能含有 多个
<nav>
元素 - 比如, 一个是 网站内的 导航列表,另一个是 本页面内的 导航列表.
- 对于屏幕阅读障碍的人,可以使用这个元素 来确定 是否 忽略初始内容.
- 一个网页 也可能含有 多个
- 示例1: 一个导航栏 ,页面内 主要内容的链接列表
- 嵌套关系
nav > a
<nav>
<a> href
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
结束语
- 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
- 捐助二维码:
- 参考文档
- 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
- 转载 请注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn.net/VickyTsai/article/details/89513410
- 版权声明:本文为博主原创文章,转载请附上博文链接!