<a>标签
常用属性:
[href]: 最重要的属性,它指定链接的目标。没有使用 href 属性,则不能使用 hreflang、media、rel、target 以及 type 属性
[target]: 规定在何处打开目标URL ,可与iframe标签中的name属性配合使用 (仅在href属性存在时使用)
[type]: 规定目标URL的MIME类型 (仅在href属性存在时使用)
[rel]: 规定当前文档与目标URL之间的关系 (仅在href属性存在时使用)
类别:
文本级标签
作用:
定义超链接,用于从一个页面链接到另一个页面
说明:
未被访问的链接带有下划线而且是蓝色的,已被访问的链接带有下划线而且是紫色的,活动链接带有下划线而且是红色的。通常在当前浏览器窗口中显示被链接页面,除非规定了其他target,标签既可以是超链接,也可以是 锚。在HTML5中, <a> 标签是超链接,但是假如没有 href 属性,它仅仅是超链接的一个占位符
全局属性: 支持
事件属性: 支持
<a>标签的几种常用用法,代码示例:
<!--普通超链接-->
<a href="http://www.baidu.com/" target="_blank" rel="search">去提问</a>
<!--图像超链接-->
<a href="http://www.baidu.com/" target="_blank" rel="search"><img src="" alt="这张图片可能有问题"/></a>
<!--邮箱超链接-->
<a href="mailto:someone@example.com?Subject=Hello%20again&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件</a>
<!--锚点定位-->
<a href="#跳转位置对应标签的id值">
<!--返回顶部-->
<a href="#">
<!--
失效超链接:
使用javascript:void(0)的目的是为了阻止a链接的默认行为,方便让js绑定事件不受干扰
-->
<a href="javascript:void(0)">失效超链接</a>
<link>标签
常用属性:
[href]: 定义被链接文档的位置
[type]: 规定被链接文档的MIME类型
[rel]: 必需。定义当前文档与被链接文档之间的关系
作用:
定义文档与外部资源的关系
说明:
该标签最常见的用途是链接样式表 (CSS),它只能存在于 <head> 部分,不过它可出现任何次数
全局属性: 支持
事件属性: 支持
代码示例:
<link href="./resources/PageStyle.css" type="text/css" rel="stylesheet"/>
<nav>标签
类别:
容器级标签
作用:
定义导航链接的部分
说明:
语义化标签,更 有利 于 代码的 阅读 和 搜索引擎 的 识别,并不是所有的HTML文档都要使用到 <nav> 标签。<nav>标签只是作为标注一个导航链接的区域(代替DIV布局中的 <div id=“nav”>)
全局属性: 支持
事件属性: 支持
注意:
1.如果文档中有 “前后” 按钮,则应该把它放到 <nav> 标签中
代码示例:
<nav id="nav">
<ul>
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</nav>