HTML5新增的其他常用元素

mark元素

作用： 主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。

<p>...<mark>...</mark>...</p>

mark,strong,em的区别
strong元素是作者对文档中某段文字的重要性进行的强调；
em元素是作者为了突出文章的重点而进行的设置；
mark元素是数据展示时，以高亮形式显示某些字符，与原作者本意无关。

ruby元素

rp元素，rt元素，ruby元素
ruby元素时由一个或多个字符（需要一个解释/发音）和一个提供该信息的rt元素组成，还包括可选的rp元素，定义当前浏览器不支持ruby元素是显示的内容。

例如拼音注释

<ruby>
   中 国<rt>zhong guo</rt>
</ruby>

若浏览器支持显示的内容，则rp内的内容不会显示

<ruby>
   中 国<rt><rp>(</rp>zhong guo<rp>)</rp></rt>
</ruby>

progress元素

作用： 表示运行中的进程，可以使用progress来显示JavaScript中耗费时间的函数进程
属性： max（整数或浮点数）：设置完成时的值，表示整体工作量。
value（整数或浮点数）：设置正在进行的值，表示已经完成的工作量。

<p>当前文件正在下载</p>
<progress max="100" value="50"></progress>

command元素

作用： 表示用户能够调用的命令，可以定义命令按钮，如单选按钮，复选框或者按钮。

<command type="command">...</command>

embed元素

作用： 用来插入各种多媒体，格式可以是MIDI，WAV，AU，MP3等。

<embed src="..." />

datalist元素

作用： 用来辅助文本框的输入功能，它本身是隐藏的，与表单文本框中的list属性绑定，即将list属性设置为datalist的ID号。

<form action="#">
   <fieldset>
      <legend>请输入职业</legend>
      <input type="text" list="dlid">
      <datalist id="dlid">
         <option value="程序员"></option>
         <option value="学生"></option>
         <option value="教师"></option>
         <option value="数据维护员"></option>
      </datalist>
   </fieldset>
</form>

details元素与summary元素的使用

作用： details元素表示用户要求得到并且可以得到的细节信息，与summary元素配合使用，summary元素提供标题或者图例。details的第一个子元素一定是summary

<details>
   <summary>苹果冰淇凌的制作</summary>
   <img src="...">
   <div>
      <h3>材料：...</h3>
      <p>制作步骤：...</p>
   </div>
</details>