当前位置:首页 > 前端技术 > html 标签属性总结

html 标签属性总结

该标签主要作用

-通过href属性来创建指向另一个文档的链接
-通过name属性创建文档内的书签
href或name是必选属性


href属性

href 规定了链接地址:

-文字链接

<a href="http://www.baidu.com">百度一下</a>

-图片链接:

<a href="http://www.baidu.com">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
</a>

href三种可能的值:

-绝对 URL - 指向另一个站点

href="http://www.example.com/index.htm"

-相对 URL - 指向站点内的某个文件

href="index.htm"

-锚 URL - 指向页面中的锚

href="#top"

用法-设置一个没有下划线的链接

<a href="http://www.baidu.com" style="text-decoration:none">这是一个链接</a>

name规定了锚的名称

相对链接

<a href="#h1">跳到第一章</a>
...
<h1>
<a name="h1">第一章</a>
<!--这里的name可以换成id-->
</h1>
<p>本章的内容有....</p>

绝对链接

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
<!--这段代码会让用户直接进入这个网站的这个anchor下-->

关于name和id

id和name都可以与href结合起来使用,同理name的值在同一文档必须是唯一的

关于图形映射:

<a href="http://www.baidu.com/xxx.html" shape="rect" coords="0,0,96,99">sun</a>

-只有图形可以添加映射,尽量用map元素和area元素设定图像映射
-<a>标签的shape和coords属性只支持opera和firefox浏览器

shape 规定链接的形状

shape的值:

default 全部区域
rect 矩形
circle 圆形
poly 多边形

coords 规定链接的坐标

coords的值:

如果shape是rect,coords的值为x1,y1,x2,y2,规定左上角和右下角的坐标
如果shape是circle,coords的值为x,y,radius,规定圆心的坐标和半径
如果shape是poly,coords的值为x1,y1,x2,y2,xn,yn,规定多边形各边的坐标,如果最后一个坐标和第一个不一致,浏览器为了关闭图形,会添加最后坐标

关于上下文关系

rel 指定从源文档到目标文档的关系
rev 指定从目标文档到源文档的关系
(rel和rev是写给浏览器看的,表明了上下文关系,w3school提出html和xhtml并没有正式提出这两种属性)
以下是一些值:

描述
alternate 文档的可选版本(例如打印页、翻译页或镜像)
stylesheet 文档的外部样式表
start 集合中的第一个文档
next 集合中的下一个文档
prev 集合中的前一个文档
contents 文档目录
index 文档索引
glossary 文档中所用字词的术语表或解释
copyright 包含版权信息的文档
chapter 文档的章
section 文档的节
subsection 文档的子段
appendix 文档附录
help 帮助文档
bookmark 相关文档
nofollow 用于指定 Google 搜索引擎不要跟踪链接
licence 授权
tag 标签
friend 友情链接

target定义被链接的文档在何处显示

<a href="http://www.baidu.com" target="_blank">这是一个链接</a>

target的值:

_top 跳出框架打开网页
_parent 在父窗口打开网页
_blank 在新窗口打开网页
_self 默认值,在同一框架中打开网页
framename 在指定的框架中打开网页

用法实例:

<a href="/index.html"
target="_top">请点击这里!</a>

其他

download 规定被下载的目标,即点击后直接下载某个目标 (H5)
media 规定目标文档是专为什么样的平台设计的,没有实际作用 (H5)
type 规定了文档的mime类型,比如”text/css”
X/charset 规定链接的字符集(w3shool标记为所有浏览器不支持)
X/hreflang 规定链接文档的语言(w3shool标记为所有浏览器不支持)

用mailto:创建邮件

一个完整的格式

<a href="mailto:jk.2013@qq.com?cc="sipallan@163.com&bbc="joe5213@qq.com&subject=这是一封邮件&body=我想你">发送邮件</a>

注意点
1、多个收件人,抄送和密件抄送人用分号;分割
2、收件地址和抄送地址用?号分割,其他用&号分割

作者:阿斯卡Asika
来源链接:https://blog.csdn.net/sipallan/article/details/51049925

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42302.html

标签: HTML
分享给朋友:
模板引擎 Thymeleaf  动态渲染 HTML

模板引擎 Thymeleaf 动态渲染 HTML

1、添加依赖 <!-- Thymeleaf 模板引擎 --> <dependency> <groupId>org.thymeleaf</gro...

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

html标签汇总

html标签汇总

文章目录 段落处理 图像标签 超链接 注释 特殊字符 表格 列表标签 无序列表 有序列表 自定义列表...

html5 video 视频标签详解

现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从...

HTML全部标签简介

HTML全部标签简介

XHTML1.0提供了几种DOCTYPE可选择: 1.过渡型(Transitional ) 2.严格型(Strict ) HTML是简单的文本标签语言,一个HTML网页文件都是有元素构成的,元素由开始标签、结束标签、属性和元素的内容4部分构成。再...

HTML-列表标签list与表格标签table

HTML-列表标签list与表格标签table

目录   列表标签 表格标签 列表标签      <ul>无序列表             ...

html中
标签的理解

1.HTML标准中对section的解释 The section element represents a generic section of a document or application. ...

标签添加不可用属性

1. 简单设置a标签的disabled属性就可以阻止事件(onclick)还有href吗? 锚标签本身不支持disabled,所以简单设置了disabled属性是没有任何效果的 2. 如何阻止href? 首先看一下 关于a标签的oncli...

HTML标签大全(常用)

转自:https://www.cnblogs.com/moije/p/6751624.html 文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。 HTM...

HTML-框架标签frame

HTML-框架标签frame

框架标签    <frameset>框架设置标签       属性:          &...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。