HTML非常用标签体验

2017-07-29 本文已影响0人人穷脸丑小前端

<abbr> : 标记一个缩写
此标签的title属性为必须，否则不生效。
<abbr title="中华人民共和国">中国</abbr> 于1949年成立
<address> ：标签定义文档或文章的作者/拥有者的联系信息
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。<address> 元素中的文本通常呈现为斜体。
<address>陕西省西安市未央区</address>
<map> <area> : 带有可点击区域的图像映射
与<img>元素一起用，图像映射（image-map）指带有可点击区域的一幅图像。<area> 元素永远嵌套在 <map> 元素内部。<area> 元素可定义图像映射中的区域。area元素属性有coords(坐标值,写法参考svg各个基本元素)、href(定义此区域的url)、nohref(此区域无映射)、shape(定义区域的形状,取值circle/rect/poly/default)、target(与a元素的target一样)
![](planets.jpg)
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
点击查看实例
<article> : 独立的自包含内容。
一段文本有独立意义则可以使用该标签,实际显示效果与div一样。
<aside> : 用作文章的侧边栏
现在多用作网页的左侧导航,语义化标签,显示效果与div一样。

<audio> : 定义声音插入音频

属性	值	说明
autoplay	autoplay	自动播放
controls	controls	显示控件(播放/暂停、声音、下载)
loop	loop	循环播放
preload	preload	预加载(autoplay出现时忽略)
src	src	音频的地址

<audio src="http://www.w3school.com.cn/i/horse.ogg"></audio>

<base> : 为页面上所有链接规定默认地址或默认目标。
base标签必须位于head标签内。影响的元素有<a>、<img>、<link>、<form>通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。此标签href属性为必须。下面代码中img实际地址为"http://img.taopic.com/uploads/allimg/131009/235013-13100ZP54561.jpg"
<head><base href="http://img.taopic.com/uploads/allimg/131009/"></head>
<body>![](235013-13100ZP54561.jpg)</body>
<bdo> : 覆盖默认的文本方向。
属性dir有两个值ltr和rtl，即从左到右还是从右到左。
<bdo dir="rtl">倒过来念的是猪</bdo>
<blockquote> : 定义块引用

标签内所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。常搭配伪元素作如下效果。
<q> : 定义短的引用
该标签用于简短的行内引用。显示效果为给标签内的文字加上引号。
这是<q>标签</q>

<caption> : 表格的标题

<table border="1">
  <caption>这是标题</caption>
  <tr><td>100</td><td>200</td><td>300</td></tr>
  <tr><td>400</td><td>500</td><td>600</td></tr>
 </table>

<datalist> : 定义选项列表
与input配合使用可以做出autocomplete功能。

<input list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

点击查看实例效果

属性	值	说明
autostart	true/false	自动播放
controls	console smallconsole playbutton pausebutton stopbutton volumelever	显示控件类型console：一般正常面板；smallconsole：较小的面板；playbutton：只显示播放按钮；pausebutton：只显示暂停按钮；stopbutton：只显示停止按钮；volumelever：只显示音量调节按钮。
loop	true/false	循环播放
hidden	false/true	是否隐藏
src	src	内容的地址
starttime	mm:ss(分:秒)	从指定时间开始播放
volume	0-100	音量大小

<mark> : 标记文本
<p>我是<mark>中国</mark>人</p>

<optgroup> : 对option进行分组

<select>
  <optgroup label="国产车">
    <option>比亚迪</option>
    <option>吉利</option>
  </optgroup>
  <optgroup label="日产车">
    <option>丰田</option>
    <option>本田</option>
  </optgroup>
</select>

_{^{: 下标文本和上标文本

在数学等式、科学符号和化学公式中非常有用。}}
<fieldset> <legend> : 表单分组
<figure> <figcaption> : 图文组合

HTML非常用标签体验

猜你喜欢

热点阅读