HTML/CSS基础知识（二）

Q：HTML5是什么？为什么要用HTML5？有什么新特性？移除了哪些元素？

  1. HTML5是HTML的最新版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是替换1999年制定的HTML4.01和XHTML1.0标准，以期望能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。HTML5指的是包括HTML，CSS和Javascript在内的一套技术组合。它希望能够减少网页浏览器对基于插件的网络应用服务（Plug-in-Based Rich Internet Application,RIA），例如：Adobe Flash、MicroSoft Silverlight和Oracle JavaFX 的需求，并且提供更多能有效加强网络应用的标准集。
  2. HTML4过于陈旧，不能满足日益发展的互联网需要，特别是移动互联网。此外，flash等插件由于种种原因不适合在移动端使用。HTML5增强了浏览器的原生功能，减少了web应用对插件的依赖。
  3. HTML5新增了27个元素，废弃了16个元素。根据现有的标准规范，把HTML5的元素按照优先级定义为结构性元素、块级元素、行内语义性元素和交互性元素4大类。
    • 结构性元素主要负责web上下文结构的定义

      • section：在web页面应用中，改元素也可以用于区域的章节描述

      • header:页面主题上的头部，header元素往往在一对body元素中

      • footer：页面的底部（页脚），通常会标出网站的相关信息

      • nav：专门用于菜单导航、链接导航的元素，是navigator的缩写

      • article：用于表现一篇文章的主题内容，一般为文字几种显示的区域

    • 块级元素主要完成web页面区域的划分，确保内容的有效分割
      • aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容
      • figure：是对多个元素进行组合并展示的元素，通常与ficaption联合使用
      • code：表示一段代码
      • dialog：用于表达人与人之间的对话，该元素包含dt和dd这两个组合元素，dt表示用于说话者，dd表示说话内容
    • 行内语义性元素主要完成web页面具体内容的引用和描述，丰富内容展示
      • meter：表示特定范围内的数值，可用于工资、数量、百分比
      • time：表示时间值
      • progress：用来表示进度条，可通过对其使用max、min、step等属性进行控制，完成对进度条的表示和监视
      • video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预加载和多种音频、视频媒体格式
      • audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预加载和多种音频媒体格式
    • 交互性元素只要用于功能性的内容表达，会有一定的内容和数据关联，是各种事件的基础
      • details：用于表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与legend交互才会显示出来
      • daragrid：用来控制客户端数据与显示，可以由动态脚本及时更新
      • menu：主要用于交互菜单
      • command：用来处理命令按钮

　　　4. 移除的元素

    • 纯表现型元素
      • <basefont>默认字体，不设置字体
      • <font>字体标签
      • <center>水平居中
      • <u>下划线
      • <strike>中横线
      • <tt>文本等宽
    • 框架集
      • <frameset>
      • <noframes>
      • <frame>

Q：HTML(含H5）块级元素、内联元素和空元素

  • 块级元素特点：display:block
    • 总是在新行开始；
    • 高度、行高以及内外边距都可控制
    • 宽度缺省为容器的100%
    • 可以容纳内联元素和其他元素
  • 内联元素特点：display:inline
    • 可以和其他元素显示在同一行
    • 高度、行高以及内外边距部分可改变
    • 宽度为内容宽度
    • 只能容纳其他内联元素和文本　
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，
只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

　块级元素：
  • <address> 标签定义文档或文章的作者/拥有者的联系信息。 
    <address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
  • <area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。注释：所有主流浏览器都支持 <area> 标签。 
    <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>

  • <article> 标签规定独立的自包含内容。注释：Internet Explorer 8 以及更早的版本不支持 <article> 标签。H5新

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

  • <aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。注释：Internet Explorer 8 以及更早的版本不支持 <aside> 标签。H5新

    <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>
  • <audio> 标签定义声音，比如音乐或其他音频流。注释：Internet Explorer 8 以及更早的版本不支持 <audio> 标签。H5新 
    <audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

  • <blockquote> 标签定义块引用。

    <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。注释：所有主流的浏览器均支持 <blockquote> 标签，没有浏览器能够正确地显示 cite 属性（引用的来源）。

    <blockquote>
Here is a long quotation here is a long quotation here is a long quotation 
here is a long quotation here is a long quotation here is a long quotation 
here is a long quotation here is a long quotation here is a long quotation.
</blockquote>
  • body 元素定义文档的主体。 
    <html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>
  • <br> 换行符。空标签——没有结束标签，应该把结束标签和开始标签写在一起，记做<br />

  • <canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，必须使用脚本来绘制图形。H5新

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

  • <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>
  • <col> 标签为表格中一个或多个列定义属性值。空标签 
    <table width="100%" border="1">
  <col align="left" />
  <col align="left" />
  <col align="right" />
  <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>

  • <colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

    <colgroup> 标签只能在 table 元素中使用。两个 colgroup 元素为表格中的三列规定了不同的对齐方式和样式（注意第一个 colgroup 元素横跨两列）

    <table width="100%" border="1">
  <colgroup span="2" align="left"></colgroup>
  <colgroup align="right" style="color:#0000FF;"></colgroup>
  <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>　

  • command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。注释：目前没有浏览器支持。H5新

    <menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

  • <datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。(id要与input中list属性值绑定)，H5新

    <input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>
  • dl:列表 dt:列表项目 dd:项目描述 
    <dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
  • <del> 定义文档中已被删除的文本;<ins>标签定义已经被插入文档中的文本，组合使用！ 
    a dozen is <del>20</del> <ins>12</ins> pieces
  • <details> 标签用于描述文档或文档某个部分的细节。<summary> 标签包含 details 元素的标题。注释：目前只有 Chrome 和 Safari 6 支持 <details> 标签。H5新 
    <details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
  • <div>定义文档中的分区或节（division/section） 
    <div></div>　
  • <dialog> 标签定义对话框或窗口。注释：目前只有 Chrome 和 Safari 6 支持 <dialog> 标签。 
    <table border="1">
<tr>
  <th>一月 <dialog open>这是打开的对话窗口</dialog></th>
  <th>二月</th>
  <th>三月</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>

  • fieldset 元素可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

    <form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

  • <figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。注释：Internet Explorer 8 以及更早的版本不支持 <figure> 标签。H5新

    <figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

  • <figcaption> 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。注释：Internet Explorer 8 以及更早的版本不支持 <figure> 标签。H5新

    <figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

  • <footer> 标签定义文档或节的页脚。<footer> 元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。您可以在一个文档中使用多个 <footer> 元素。注释：Internet Explorer 8 以及更早的版本不支持 <footer> 标签。H5新

    <footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

  • <form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。

    <form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

  • <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

    <h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>　
  • <head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

    文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

    下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>（title必不可少）。

    <html>
<head>
  <title>文档的标题</title>
</head>
<body>
  文档的内容... ...
</body>
</html>
  • <header> 标签定义文档的页眉（介绍信息）。H5新 
    <header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>

  • <hr> 标签在 HTML 页面中创建一条水平线。<hr />空标签

    <h1>This is header 1</h1>
<hr />
<p>This is some text</p>
  • <html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。
  • <iframe> 元素会创建包含另外一个文档的内联框架（即行内框架）。提示：把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
  • <legend> 元素为 fieldset 元素定义标题（caption）。 
    <form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

  • <li> 标签定义列表项目。<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

    <ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>　　

  • <link> 标签定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表。

    <head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>　　
  • <map>定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。 
    <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>　

  • <menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。注释：目前所有主流浏览器都不支持 <menu> 标签。

  • <menuitem> 标签定义用户可以从弹出菜单调用的命令/菜单项目。注释：Firefox 8.0 以及更高的版本支持 <menuitem> 标签。H5新 
    <menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
  </menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png"
    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
    </menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png"
    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
    </menuitem>
  </menu>
  <menuitem label="Email This Page"
  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>　

  • <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

  • <nav> 标签定义导航链接的部分。H5新 
    <nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>
  • <ol> 标签定义有序列表。 
    <ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

  • <optgroup> 标签定义选项组。optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

    <select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

  • option 元素定义下拉列表中的一个选项（一个条目）。浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。

    <select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>　　
  • <p> 标签定义段落。 
    <p>This is some text in a very short paragraph</p>

  • pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。

    输出结果：

    <pre>
<html>

<head>
  <script type="text/javascript" src="loadxmldoc.js">
</script>
</head>

<body>

  <script type="text/javascript">
    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");
    document.write("xmlDoc is loaded, ready for use");
  </script>

</body>

</html>
</pre>
  • <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 
    <section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>

  • <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。H5新

    <audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio> 　　
  • <summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。H5新 
    <details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>

  • <table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

    更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

  • <tr> 标签定义 HTML 表格中的行。<th>定义表格内的表头单元格。<td> 标签定义 HTML 表格中的标准单元格。

    <table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
  • <tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。<thead> 标签定义表格的表头。<tfoot> 标签定义表格的页脚（脚注或表注）。 
    <table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
  • <title> 元素可定义文档的标题。不可或缺！

  • <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。H5新

    <video width="320" height="240" controls="controls">
  <source src="forrest_gump.mp4" type="video/mp4" />
  <source src="forrest_gump.ogg" type="video/ogg" />
  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
  • <ul> 标签定义无序列表。 
    <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • <video> 标签定义视频，比如电影片段或其他视频流。H5新 
    <video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

　　内联元素：

  • <a> 标签定义超链接，用于从一张页面链接到另一张页面。注释：所有浏览器都支持 <a> 标签。 
    <a href="http://www.baidu.com">百度</a>　　
  • <abbr> 标签指示简称或缩写，比如 "WWW" 或 "NATO"。注释：IE 6 或更早版本的 IE 浏览器不支持 <abbr> 标签 
    The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
  • <address> 标签定义文档或文章的作者/拥有者的联系信息。注释：所有浏览器都支持 <address> 标签。 
    <address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
  • <bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。注释：目前只有 Firefox 和 Chrome 支持 <bdi> 标签。H5新 
    <ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>
  • <bdo> 元素可覆盖默认的文本方向。注释：所有浏览器都支持 <bdo> 标签。 
    <bdo dir="rtl">Here is some text</bdo>

  • <button> 标签定义一个按钮。在 button 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。请为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。注释：所有浏览器都支持，如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

    <button type="button">Click Me!</button>
  • <embed> 标签定义嵌入的内容，比如插件。H5新 
    <embed src="helloworld.swf" />　　
  • img 元素向网页中嵌入一幅图像。<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。<img> 标签有两个必需的属性：src 属性 和 alt 属性。空标签 
    <img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />　　

  • <input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。空标签

    <form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

  • <keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。空标签

    <form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>　
  • <label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。 
    <form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>　
  • <mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。注释：Internet Explorer 8 以及更早的版本不支持 <mark> 标签。H5新 
    <p>Do not forget to buy <mark>milk</mark> today.</p>

  • <meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

    例子：磁盘用量、查询结果的相关性，等等。注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。注释：IE不支持。H5新

    <meter value="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter> 　
  • <output> 标签定义不同类型的输出，比如脚本的输出。注释：IE不支持。H5新 
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form> 　
  • <progress> 标签标示任务的进度（进程）。H5新 
    <progress value="22" max="100"></progress>

  • <ruby> 标签定义 ruby 注释（中文注音或字符）。在东亚使用，显示的是东亚字符的发音。与 <ruby> 以及 <rt> 标签一同使用：

    ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。H5新                <rt> 标签定义字符（中文注音或字符）的解释或发音。<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

    <ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>　
  • <span> 标签被用来组合文档中的行内元素。 
    <p><span>some text.</span>some other text.</p>
  • <sub> 标签可定义下标文本。<sup> 标签可定义上标文本。提示：无论是 <sub> 标签还是和它对应的 <sup> 标签，在数学等式、科学符号和化学公式中都非常有用。 
    <sub>下标</sub>
    <sup>上标</sup>　
  • <time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。H5新 
    <p>我们在每天早上 <time>9:00</time> 开始营业。</p>

<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

  • Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

    提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。

    <p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>

  • <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签

    <em>	把文本定义为强调的内容。
<strong>	把文本定义为语气更强的强调的内容。
<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite>	定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

  • <tt> <i> <b> <big> <small> 标签

    <tt>	呈现类似打字机或者等宽的文本效果。
<i>	显示斜体文本效果。
<b>	呈现粗体文本效果。
<big>	呈现大号字体效果。
<small>	呈现小号字体效果。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/bestchenyan/p/9296937.html