HTML5新标签及陌生标签的备忘录_个人备忘录htmldemo-CSDN博客

本文链接：https://blog.csdn.net/ding2425/article/details/39966749

1.<abbr>与<acronym>标签

<abbr>/<acronym>指示简称或缩写，如“WTO”/“USA”等。

<abbr>在主流浏览器中均得到支持，而<acronym>在Html5中已不支持。（PS:建议使用<abbr>）

使用示例：（当鼠标移动到“PRC”上时，会显示出title属性中的文本信息）

<span style="white-space:pre">	</span>The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

2.<address>标签

<address>标签定义文档或文章的作者的联系方式

如果<address>元素在<body>元素内部，则表示文档的作者的联系方式

如果<address>元素在<article>元素内部，则表示文章的作者的联系方式
（PS：HTML4.01不支持<article>元素，所以，你懂的*^ο^*）

提示：<address>标签通常被包含在<footer>元素中

使用示例：

    <footer>
      <address>
        <p><a href="http://www.w3.org/Consortium/contact-mit">MIT</a></p>
      </address>
    </footer>

3.<area>标签

<area>标签定义图像映射中的区域（图像映射指的是带有可点击区域的图像）

<area>标签总嵌套在<map>元素中使用。

使用示例：

    <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets"/>
    <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>

说明： img标签中的属性与map标签中的name属性相关联

（由于不同浏览器，可能会与id属性关联，所以建议将map元素中的id和name属性均写上并设置一样的值）

4.<article>标签

<article>标签代表着一个独立的内容部分，可以独立于站点的其余部分而对其进行分发使用。

<article>标签主要使用于：论坛帖子、报纸杂志文章、博客条目、用户评论等。

（PS：article标签是HTML5的新标签，支持多数主流浏览器，IE8及更早版本不支持）

使用示例：

     <article>
       <h1>Internet Explorer 9</h1>
       <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
     </article>

5.<aside>标签

<aside>标签表现为分离于所处内容之外的部分。

<aside>标签常用于侧边栏、引文、广告、导航元素等。

（PS：aside标签是HTML5的新标签，支持多数主流浏览器，IE8及更早版本不支持）

使用示例：（以下例子aside用作引文）

     <p>Me and my family visited The Epcot center this summer.</p>
     <aside>
        <h4>Epcot Center</h4>
        The Epcot Center is a theme park in Disney World, Florida.
     </aside>

6.<audio>标签

<audio>标签定义声音，如音乐或者音频流。

（PS：audio标签是HTML5的新标签，支持多数主流浏览器，IE8及更早版本不支持）

使用示例：

     <audio src="someaudio.wav" controls="controls">
     您的浏览器不支持audio标签！
     </audio>

说明：标签中的文本，会在不支持audio元素的浏览器中显示。

7.<b>标签

<b>标签仅定义粗体文本，不做任何强调修饰。（HTML4.01与HTML5均支持）

*注：HTML5规范建议，在没有其他合适标签时，才考虑使用<b>标签。

规范声明：应该使用<h1>~<h6>来表示标题，用<em>来表示强调的文本，用<strong>来表示重要文本，用<mark>来表示标注的/突出显示的文本。

当使用<b>标签是，建议带上能表达其含义的class属性，以作为与其他使用<b>的部分的区别。

使用示例：

    <p>这是普通文本<b>这是粗体文本</b></p>

8.<base>标签

<base>标签为页面上的所有链接规定默认地址或目标。

通常情况下，浏览器会从当前文档的URL中提取基URL来填补文档中的相对URL中的空白。

使用<base>标签可以改变这一点。浏览器将不再抽取当前文档的URL，而使用base中指定的基URL来解析所有的相对URL。其中包括但不限于<a>、<img>、<link>、<form>标签中的URL。

使用示例：

    <head>
      <base href="http://www.baidu.com/" target="_blank"/>
    </head>
    <body>
      <img src="demo.jpg"/>
      <a href="index.html">baidu首页</a>
    </body>

*注：①base中的href为必要属性，而target可选

②base元素必须包含在head元素中

③一个文档中最多含有1个base元素

9.<bdo>标签

<bdo>标签可设置（覆盖默认的）文本方向。（支持所有主流浏览器）

其dir属性规定文本方向：ltr（从左到右），rtl（从右到左）

使用示例：

    <bdo dir="rtl">Here is some text</bdo>

10.<blockquote>标签

<blockquote>标签定义引用部分。

blockquote标签之间的所有文本都会从常规文本中脱离出来，且左右两边进行缩进（增加外边距），且有时会使用斜体。

blockquote元素的内容必须引用与其他源。如果该源有地址，则需要使用cite属性。

使用示例：

    <blockquote cite="http://www.quote.com/index.html">
      <p>The quote is input here.</p>
    </blockquote>

说明：<q>与<blockquote>标签的区别在于，<q>用于短引用，而<blockquote>一般用于长引用。也就是所含引文文本的长短。

11.<canvas>标签（需要作为一个单独部分讲解）

<canvas>标签提供了可使用脚本来渲染图像的独立解决方案。

<canvas>只是图形容器，绘制图形必须使用脚本进行。

（PS：canvas标签是HTML5的新标签，支持多数主流浏览器，IE8及更早版本不支持）

使用示例：

    <canvas id="myCanvas"></canvas>

    <script type="text/javascript">
      var canvas=document.getElementById('myCanvas');
      var ctx=canvas.getContext('2d');
      ctx.fillStyle='#FF0000';
      ctx.fillRect(0,0,80,100);
    </script>

12.<caption>标签

<caption>标签定义表格标题。必须紧跟在table标签之后，一个表格只能定义一个标题，默认标题居中。

使用示例：

    <table border="1">
      <caption>Monthly savings</caption>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>

13.<cite>标签

<cite>标签表示其所含文本为某一个作品的标题，比如书籍或杂志的标题。一般其所含文本以斜体显示。

使用示例：

    <p>My favorite movie is <cite>star wars</cite>.</p>

14.拥有特定语义的短语元素/标签

<em>：把文本定义为强调的内容

<strong>：把文本定义为语气更强的强调的内容

<dfn>：一个术语的定义

<code>：定义计算机代码文本

<samp>：展示程序或者计算机系统的输出

<kbd>：定义用户输入（即键盘文本），常用于计算机的文档或手册中

<var>：定义变量

<cite>：定义作品的标题引用（如参考文献）

15.<col>标签

<col>标签为表格中的一个或多个列定义属性值（使用CSS来设置列的样式）

适用于需要对多个列应用样式时，就不需要重复对多个单元进行应用了

只能在table或colgroup元素中使用col标签

使用示例：

    <table width="100%" border="1">
      <col align="left"/>
      <col span="2" align="right"/><!-- span属性：合并列（非负整数） -->
      <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
      </tr>
    </table>