HTML 链接3

简介: HTML 链接属性包括 `href`(定义链接目标)、`target`(定义打开方式)、`rel`(定义关系)、`download`(提示下载)、`title`(显示工具提示)、`id`(链接锚点)、`hreflang`(目标语言)、`type`(资源类型)、`class`(类名)和 `style`(内联样式)。这些属性帮助实现丰富的链接功能。

HTML 链接属性

href 属性描述了链接的目标。
1、href:定义链接目标。

这是超链接最重要的属性,用来指定链接的目的地,可以是另一个网页、文件、邮件、电话号码或 JavaScript。
实例
访问 Example
2、target:定义链接的打开方式。

_blank: 在新窗口或新标签页中打开链接。
_self: 在当前窗口或标签页中打开链接(默认)。
_parent: 在父框架中打开链接。
_top: 在整个窗口中打开链接,取消任何框架。

实例
新窗口打开 Example
3、rel:定义链接与目标页面的关系。

nofollow: 表示搜索引擎不应跟踪该链接,常用于外部链接。

noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题,尤其是使用 target="_blank" 时。

noopener: 防止新的浏览上下文(页面)访问window.opener属性和open方法。
noreferrer: 不发送referer header(即不告诉目标网站你从哪里来的)。
noopener noreferrer: 同时使用noopener和noreferrer。例子: <a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>

实例
安全链接
4、download:提示浏览器下载链接目标而不是导航到该目标。

如果指定了文件名,浏览器会提示下载并保存为指定文件名。
例如:
实例
下载文件
5、title:定义链接的额外信息,当鼠标悬停在链接上时显示的工具提示。
实例
访问 Example
6、id:用于链接锚点,通常在同一页面中跳转到某个特定位置。
实例

跳转到第1部分

这是第1部分

7、hreflang: 指定链接的目标URL的语言
实例
访问西班牙语网站
8、type: 指定链接资源的MIME类型
实例
样式表
9、class: 用于指定元素的类名(CSS中定义)
实例
外部链接
10、style: 直接在元素上定义CSS样式
实例
红色链接
相关文章
|
12月前
|
移动开发 小程序 JavaScript
小程序中加载html5地图界面链接
小程序中加载html5地图界面链接
94 0
|
3天前
|
JavaScript 前端开发
HTML 链接5
空链接是指在HTML中不指向任何实际资源的链接。常见设置方法包括:`href=&quot;#&quot;`(导航到页面顶部)、`href=&quot;javascript:void(0)&quot;`(阻止默认行为,不刷新页面)、`href=&quot;&quot;`(刷新当前页面)、`href=&quot;about:blank&quot;`(打开空白页面)和`role=&quot;button&quot;`(链接表现为按钮,无默认行为)。选择合适的方法取决于具体应用场景。注意:链接应始终包含正斜杠以避免不必要的HTTP请求。
|
4天前
|
前端开发
HTML 链接2
HTML 使用 `&lt;a&gt;` 标签创建超链接,链接可以是文字或图像,点击后可跳转至新文档或当前文档的特定部分。链接地址通过 `href` 属性指定。默认情况下,未访问的链接为蓝色带下划线,已访问的为紫色,点击时为红色。样式可通过 CSS 自定义。
|
4天前
|
JavaScript 前端开发
HTML 链接1
HTML 链接(Anchor)是网页间跳转的核心元素,通过 `&lt;a&gt;` 标签创建。链接用于导航至其他网页、文档、图像等资源,实现网页互联。基本语法为 `&lt;a href=&quot;URL&quot;&gt;链接文本&lt;/a&gt;`。例如:`&lt;a href=&quot;https://example.com&quot;&gt;本文本&lt;/a&gt;` 是一个指向万维网上页面的链接。
HTML 链接4
`id`属性用于在HTML文档中创建书签。书签在页面中不可见,但可以通过链接直接跳转到指定位置。例如,在页面内或从其他页面链接到带有`id=&quot;tips&quot;`的元素:`&lt;a href=&quot;#tips&quot;&gt;访问有用的提示部分&lt;/a&gt;` 或 `&lt;a href=&quot;https://www.runoob.com/html/html-links.html#tips&quot;&gt;访问有用的提示部分&lt;/a&gt;`。
|
2月前
|
前端开发 安全 UED
HTML 链接怎么写才能好看又拥有最好的性能
要编写既美观又性能优良的 HTML 链接,请遵循以下最佳实践:使用语义化 `&lt;a&gt;` 标签并优化链接文本,使其描述性和简洁;使用 `rel=&quot;noopener noreferrer&quot;` 和 `target=&quot;_blank&quot;` 属性提高安全性和性能;通过 CSS 美化链接样式;合理控制链接数量,避免分散用户注意力;使用图标增强视觉效果;确保链接对所有用户都可访问;利用 CDN 提升加载速度;最后,测试页面性能以保证整体加载速度。
|
2月前
|
JavaScript 前端开发 UED
HTML 链接的高阶写法
在 HTML 中,通过使用不同的属性和技术可以增强链接的功能性和可访问性。
|
4月前
HTML 链接- id 属性
【7月更文挑战第1天】HTML 链接- id 属性。
30 1
|
4月前
|
开发者
HTML 链接语法
【7月更文挑战第1天】HTML 链接语法。
41 1
|
5月前
|
前端开发 UED SEO
HTML基础-链接与图片插入:网页的连接与视觉元素
【6月更文挑战第2天】本文介绍了HTML中`<a>`和`<img>`标签的使用,包括链接的基本结构、目标类型以及图片的插入、尺寸调整和对齐方式。常见问题涉及链接和图片路径、缺失`alt`属性及尺寸不匹配,解决方案包括正确引用资源、使用绝对URL和重视`alt`属性。通过示例代码,展示了创建链接和图片的方法,强调了提升网页用户体验的重要性。
66 3