- 超链接锚点邮件地址 - html5 内联文本语义
HTML元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
浏览器支持
所有浏览器都支持
|
示例
链接到外部地址
external link
链接到本页的某个部分
description of same-page links
创建一个可点击的图片
这个小例子使用图像链接到MDN主页。主页将在新的浏览环境,这是一个新的页面或新标签中打开研究。
这是常见的创建按钮或链接,将用户的电子邮件程序打开,让他们发送新邮件。这是通过使用一个mailto链接完成的。这里有一个简单的例子:
send email to nowhere
生成这样的链接:Send email to nowhere.
创建电话链接
提供电话链接有助于用户查看连接到手机的网络文档和笔记本电脑。
+123456789
使用 download 属性将
保存为 PNG 格式
如果你想允许用户下载一个HTML画布,你可以创建一个下载属性和画布数据作为文件URL链接图像:
var link = document.createelement('a'); link.innerhtml = 'download image'; link.addeventlistener('click', function(ev) { link.href = canvas.todataurl(); link.download = "mypainting.png"; } , false); document.body.appendchild(link);
无障碍建议
锚点标签常常通过将href属性设置为"#"
或"javascript:void(0)"来创造一个能阻止页面刷新的伪按钮的方式
被滥用。这些属性值会在拖动/复制链接时导致意外行为,在新窗口/新标签打开链接,加入书签以及 JavaScript 仍在下载时会出现错误或被禁用。这也会向辅助技术(如屏幕阅读器)传达不正确的语义。在这些情况下,推荐使用来代替。通常情况下,您应该只将锚点用于正常的 URL 导航。
定义和用法
标签定义超链接,它用于从一个页面连接到另一个页面。
内容分类 | 流内容、文字内容、交互内容、可触摸内容。 |
---|---|
允许的内容 | 可见的内容(Transparent),包含流内容(不包括交互式内容)或文字内容(段落内容元素)。 |
标签省略 | 不允许,开始标签和结束标签都不能省略。 |
允许的父元素 | 接受短语内容的任何元素或接受流内容的任何元素,但始终不接受 元素(根据对称的逻辑原理,如果 标记作为父元素,不能具有交互内容,则相同的 内容不能具有 标记作为其父元素)。 |
Permitted ARIA roles | button ,checkbox ,menuitem ,menuitemcheckbox ,menuitemradio ,option ,radio ,switch ,tab ,treeitem |
DOM 接口 | HTMLAnchorElement |
属性
该元素的属性包含全局属性。
download
HTML5
此属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件。如果属性有一个值,那么此值将在下载保存过程中作为预填充的文件名(如果用户需要,仍然可以更改文件名)。此属性对允许的值没有限制,但是/
和会被转换为下划线。大多数文件系统限制了文件名中的标点符号,故此,浏览器将相应地调整建议的文件名。THML5中废弃。此功能已过时。尽量避免使用它。coords
THML5中废弃
对于使用对象的形状,此属性使用逗号分隔的数字列表来定义对象在页面上的坐标。name
THML5中废弃
该属性在页面中定义锚点的目标位置时是必须的。name的值类似于ID核心属性值,该属性值在文档中是唯一的且由数字字母标示符所组成的。在 HTML4.01 规范中,id和name都可以使用元素,只要他们有相同的值。THML5中废弃。此功能已过时。尽量避免使用它。
属性
属性 | 描述 | 4 | 5 |
---|---|---|---|
charset | 不赞成。规定目标 URL 的字符编码。 | 4 | |
coords | 不赞成。规定适于 shape 属性的坐标,为图像映射定义图像的区域。 | 4 | |
href | 链接的目标 URL。 | 4 | 5 |
hreflang | 规定目标 URL 的基准语言。仅在 href 属性存在时使用。 | 4 | 5 |
media | 规定目标 URL 的媒介类型。默认值:all。仅在 href 属性存在时使用。 | 5 | |
name | 不赞成。命名一个锚。不支持。使用 id 代替。 | 4 | |
ping | 由空格分隔的 URL 列表,当用户点击该链接时,这些 URL 会获得通知。 仅在 href 属性存在时使用。 | 5 | |
rel | 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。 | 4 | 5 |
rev | 不赞成。规定目标 URL 与当前文档之间的关系。 | 4 | |
shape | 不赞成。为当前 area 标签中的映射定义的地区类型。与 coords 属性一起使用。 | 4 | |
target | 在何处打开目标 URL。仅在 href 属性存在时使用。 | 4 | 5 |
type | 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。 | 4 | 5 |
HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中,标签既可以是超链接,也可以是锚。这取决于是否描述了 href 属性。
在 HTML 5 中,是超链接,但是假如没有 href 属性,它仅仅是超链接的一个占位符。
HTML 5 有一些新的属性,同时不再支持一些 HTML 4.01 的属性。
例子
链接到 qq344225443:
qq344225443
在新窗口中打开 qq344225443:
qq344225443
链接到 www.baikegou.com :
html
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!