码迷,mamicode.com
首页 > 其他好文 > 详细

a,abbr,address,area,article, aside, audio标签文档

时间:2018-03-11 17:28:09      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:mime类型   foo   扩展名   inter   sheet   锚点   default   需要   oop   

<a>标签

download属性

<!-- 下载hello.txt -->
<a href="test.txt" download="hello">点击下载</a>

说明:hello为浏览器下载后文件的名字,浏览器会自动检测文件的扩展名

href属性

<a href="https://github.com/wmui">GitHub</a>

说明:href值可以是相对地址,绝对地址,锚点(#top)

media属性

<a href="https://github.com/wmui" media="print and (resolution:300dpi)">GitHub</a>
运算符

and运算符(相当于&&), not运算, ,运算符(相当于||)

设备

all是默认值,表示适合所有设备。aural表示语音合成器。braille表示盲文反馈装置。handheld表示手持设备。projection表示投影机。print打印预览模式或页面。screen计算机屏幕。tty电传打字机以及使用更宽字符网格的类似媒介。tv电视类型设备。

width: 目标显示区域的宽度(可使用min-, max-前缀),例如:media = "screen and (min-width: 300px)

height: 目标显示区域的高度(可使用min-, max-前缀),例如:media = "screen and (min-height: 300px)"

device-width: 目标显示器的宽度(可使用min-, max-前缀),例如:media = "screen and (device-width: 300px)"

device-height: 目标显示器高度 (可使用min-, max-前缀),例如:media = "screen and (device-height: 300px)"

orientation: 目标显示器取向(可能值:portrait, landspace,例如:media = "all and (orientation: landspace)"

aspect-ratio: 目标显示区域的宽高比(可使用min-, max-前缀),例如:media = "screen and (aspect-ratio: 16 / 9)"

device-aspect-ratio: 目标显示器的宽高比(可使用min-, max-前缀),例如:media = "screen and (device-aspect-ratio: 16 / 9)"

color: 规定目标显示器的bits per color(可使用min-, max-前缀),例如:media = "screen and (color: 3)"

color-index: 规定目标显示器能够处理的目标显示数(可使用min-, max-前缀),例如:media = "screen and (min-color-index: 256)"

monochrome: 规定在单色帧缓冲中的每像素比特(可使用min-,max前缀),例如: media = "screen and (monochrome: 2)"

resolution: 规定目标显示器的像素密度(dpi 或 dpcm,可使用min-, max-前缀),例如:media = "print and (resolution: 300dpi)"

scan: 规定tv显示器的扫描方法,可能值progressive和interlace,例如:media = "tv and (scan: interlace)

grid: 规定输出设备是网格还是位图,可能的值:1代表网格,0代表其让。例如:media = "handheld and (grid: 1)"

rel属性

<a rel="friend" href="https://github.com/wmui>wmui</a>

说明:rel属性表示了当前文档与目标文档的关系,属性值是以空格分割的关系列表,搜索引擎可以利用该属性获得更多相关信息,也可以根据w3c官方标准自定义一些值。

属性值

alternate: 文档的可选版本。

stylesheet: 文档的外部样式表。

start: 第一个文档。

next: 下一个文档。

prev: 上一个文档。

contents: 文档目录。

index文档索引。

glossary: 文档中所用字词的术语或解释。

copyright: 包含版权信息的文档。

chapter: 文档的章。

section: 文档的节。

subsection: 文档的子段。

appendix: 文档附录。

help: 帮助文档。

bookmark: 相关文档。

nofollow: 搜索引擎不要跟踪链接。

另外还用licence,tag,frined。

扩展:以上的属性值亦可以用在<link>标签的rel属性里

target属性

_blank在新窗口中打开文档

_self 默认值,在当前窗口或框架中打开文档

_parent 在父框架集中打开文档

_top 在整个当前窗口中打开文档

framename 在指定框架中打开文档

说明:_parent和_top用于在框架中内嵌的链接

type属性

<a href="https://github.com/wmui" type="text/html">wmui</a>

说明:只能在href属性存在时使用,用于规定type属性的MIME类型

<abbr>标签

The <abbr title="People‘s Republic of China">PRC</abbr> was founded in 1949.

The PRC was founded in 1949.

说明:abbr用于表示简写或者缩写

<address>标签

电话:1234567
邮箱:22337383@qq.com
<footer>
  <address>
  电话:1234567<br>
  邮箱:22337383@qq.com
  </address>
</footer>

说明:用于定义作者/拥有者的联系信息,不应该用于描述通讯地址,除非他是联系信息的一部分,该元素通常连同其他信息被包含在footer标签中。当位于body标签内是表示文档的联系信息,位于article标签内时表示文章的联系信息。

<area>标签

技术分享图片

wmui

<img src="http://www.86886.wang/public/1520049901259.jpg" usemap="#test" alt="test img" />

<map name="test" id="test">
  <area shape="rect" coords="0,0,100,200" href ="https://github.com/wmui" alt="wmui" target="_blank" alt="test img"/>
</map>

说明: 该标签用于定义图像映射,area标签必须嵌套到map标签内。img元素中的usemap属性与map元素的name属性和id属性相关联

必需的属性

alt: 定义此区域的替换文本(保证图片出错时仍可以点击)

可选属性

href: 规定区域中链接的目标,值可以是相对url, 绝对url, 锚点

nohref: 规定区域内中没有相关链接,值只有一个nohref

shape: 规定区域的形状,形状决定了coords属性的参数。浏览器默认形状为rect,如果找不到coords的四个参数,浏览器会忽略整个区域。<map>标签是采用“先来先得”的顺序结构,所以必须将默认区域放置到最后。shape的值为default表示整个区域, rect表示矩形区域,circ表示圆形区域, poly表示多边形区域。

coords:规定可点击区域的坐标。shape="circle", coods="x,y,z", x和y定义了圆形,z定义了半径。shape="rect", coods="x1, y1,x2,y2"第一个坐标定义矩形的顶点位置,第二个坐标是定义矩形对角的位置。shape="polygon", coods="x1,y2,x2,y2,x3,y3..."每一对坐标确定一个位置,定义三角形最少需要三对坐标。

target: 同<a>标签的target属性值相同

<article>标签

<article>
  <h3>>w\文章标题<h3>
  <p>文章正文</p>
</article>

说明:规定独立的自包含内容,如论坛帖子,文章,评论等等

<aside>标签

说明:定义所处内容之外的内容,但aside的内容却和所处内容有相关性

<audio>标签

a,abbr,address,area,article, aside, audio标签文档

标签:mime类型   foo   扩展名   inter   sheet   锚点   default   需要   oop   

原文地址:https://www.cnblogs.com/yesyes/p/8543937.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!