HTML5之链接标签

<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>

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值