H5标签周期表（二）

JS：

var tdList = document.getElementById("element").getElementsByTagName("td");

for(var i = 0; i < tdList.length; i++){
    //隐藏的td不执行onmouseover
    if(tdList[i].className != "hidden"){
        tdList[i].onmouseover = function(ev){
            //其中oEvent.fromElement兼容IE，chrome
            var oEvent = ev||event;
            //oEvent.relatedTarget;兼容FF。
            var oFrom = oEvent.fromElement||oEvent.relatedTarget;
            //判断div是不是包含oFrom,如果包含就返回
            if(this.contains(oFrom)) {
                return;
            }
            mouseover(this);
        };
        tdList[i].onmouseout = function(){
            mouseout(this);
        }
    }
}
//标签数组
var desList = [
    {name:"html",des:"html 标签是用来描述网页的超文本标记语言 (Hyper Text Markup Language)"},{name:"col",des:"col 标签为表格中一个或多个列定义属性值。"},{name:"table",des:"table 标签定义 HTML 表格。</br></br></br></br>由 table 元素以及一个或多个 tr、th 或 td 元素组成。"},{name:"head",des:"head 标签用于定义文档的头部，它是所有头部元素的容器。head可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。</br></br></br></br>文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。"},{name:"span",des:"span 标签被用来组合文档中的行内元素"},
    {name:"div",des:"div 标签可定义文档中的分区或节（division/section）。</br></br></br></br>可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。</br></br></br></br>如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。"},{name:"filedset",des:"fieldset 标签可将表单内的相关元素分组。</br></br></br></br>fieldset标签将表单内容的一部分打包，生成一组相关表单的字段。</br></br></br></br>当一组表单元素放到fieldset标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。</br></br></br></br>fieldset标签没有必需的或唯一的属性。</br></br></br></br>legend标签为 fieldset 元素定义标题。"},{name:"form",des:"form 标签用于为用户输入创建 HTML 表单。</br></br></br></br>表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。 </br></br></br></br>表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 </br></br></br></br>表单用于向服务器传输数据。"},{name:"body",des:"body 元素定义文档的主体。 </br></br></br></br>body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）"},{name:"h1",des:"h1 - h6 标签可定义标题。h1 定义最大的标题。h6 定义最小的标题。 </br></br></br></br>由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。"},
    {name:"section",des:"section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。"},{name:"colorgroup",des:"colgroup 标签用于对表格中的列进行组合，以便对其进行格式化。 </br></br></br></br>如需对全部列应用样式，colgroup 标签很有用，这样就不需要对各个单元和各行重复应用样式了。 </br></br></br></br>colgroup 标签只能在 table 元素中使用。"},{name:"tr",des:"tr 标签定义 HTML 表格中的行。 </br></br></br></br>tr 元素包含一个或多个 th 或 td 元素。"},{name:"title",des:"title 元素可定义文档的标题。 </br></br></br></br>浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。"},{name:"a",des:"a 标签定义超链接，用于从一张页面链接到另一张页面。 </br></br></br></br>a 元素最重要的属性是 href 属性，它指示链接的目标。"},
    {name:"pre",des:"pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 </br></br></br></br>pre 标签的一个常见应用就是用来表示计算机的源代码。</br></br></br></br>可以导致段落断开的标签（例如标题、p 和 address 标签）绝不能包含在 pre 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。"},{name:"meter",des:"meter 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。"},{name:"select",des:"select 元素可创建单选或多选菜单。"},{name:"aside",des:"aside 标签定义其所处内容之外的内容。 </br></br></br></br>aside 的内容应该与附近的内容相关。"},{name:"h2",des:""},
    {name:"header",des:"header 标签定义文档的页眉（介绍信息）。"},{name:"caption",des:"caption 元素定义表格标题。 </br></br></br></br>caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。"},{name:"td",des:"td 标签定义 HTML 表格中的标准单元格。 </br></br></br></br>HTML 表格有两类单元格：</br></br></br></br>表头单元 - 包含头部信息（由 th 元素创建）</br></br></br></br>标准单元 - 包含数据（由 td 元素创建）</br></br></br></br>td 元素中的文本一般显示为正常字体且左对齐。"},{name:"meta",des:"meta 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 </br></br></br></br>meta 标签位于文档的头部，不包含任何内容。meta 标签的属性定义了与文档相关联的名称/值对。"},{name:"rt",des:"rt 标签定义字符（中文注音或字符）的解释或发音。 </br></br></br></br>ruby 注释是中文注音或字符。</br></br></br></br>在东亚使用，显示的是东亚字符的发音。</br></br></br></br>ruby 以及 rt 标签一同使用：</br></br></br></br>ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 ruby 元素时显示的内容。"},
    {name:"dfn",des:"dfn 标签可标记那些对特殊术语或短语的定义。 </br></br></br></br>现在流行的浏览器通常用斜体来显示 dfn 中的文本。将来，dfn 还可能有助于创建文档的索引或术语表。 </br></br></br></br>与其他许多基于内容的样式和物理样式标签一样，dfn 标签尽量少用为妙。作为一种通用样式，尤其在技术文档中，当第一次新的术语时，应该将它们与普通文本分开，这样读者可以更好地理解文章当前的主题，而从那以后就不要再对这个术语进行任何标记了。"},{name:"em",des:"em 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。</br></br></br></br>尽管现在 em 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义，将来的某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本。如果你只想使用斜体字来显示文本的话，请使用 i 标签。除此之外，文档中还可以包括用来改变文本显示的级联样式定义。"},{name:"i",des:"i 标签显示斜体文本效果。 </br></br></br></br>i 标签和基于内容的样式标签 em 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。</br></br></br></br>提示：&lt;i&gt; 标签一定要和结束标签 &lt;/i&gt; 结合起来使用。"},{name:"small",des:"small 标签呈现小号字体效果。 </br></br></br></br>small 标签和它所对应的 big 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 small 标签将不起任何作用。</br></br></br></br>与 big 标签类似，small 标签也可以嵌套，从而连续地把文字缩小。每个 small 标签都把文本的字体变小一号，直到达到下限的一号字。"},{name:"ins",des:"ins 标签定义已经被插入文档中的文本。</br></br></br></br>提示：请与 del 一同使用，来描述文档中的更新和修正。"},
    {name:"s",des:"s 标签可定义加删除线文本定义。 </br></br></br></br>s 标签是 strike 标签的缩写版本，Netscape 和 Internet Explorer 都支持它。但在 HTML 4 和 XHTML 中已经不再赞成使用它了，意思就是不再使用了；它早晚有一天将会消失。"},{name:"br",des:"br 可插入一个简单的换行符。 </br></br></br></br>br 标签是空标签（意味着它没有结束标签，因此这是错误的：&lt;br&gt;&lt;/br&gt;）。在 XHTML 中，把结束标签放在开始标签中，也就是 &lt;br /&gt;。</br></br></br></br>请注意，br 标签只是简单地开始新的一行，而当浏览器遇到 p 标签时，通常会在相邻的段落之间插入一些垂直的间距。"},{name:"p",des:"p 标签定义段落。 </br></br></br></br>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。"},{name:"blockquote",des:"blockquote 标签定义块引用。 </br></br></br></br>&lt;blockquote&gt; 与 &lt;/blockquote&gt; 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。"},{name:"legend",des:"legend 元素为 fieldset 元素定义标题（caption）。"},
    {name:"optgroup",des:"optgroup 标签定义选项组。 </br></br></br></br>optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。"},{name:"address",des:"address 标签定义文档或文章的作者/拥有者的联系信息。 </br></br></br></br>如果 address 元素位于 body 元素内，则它表示文档联系信息。</br></br></br></br>如果 address 元素位于 article 元素内，则它表示文章的联系信息。</br></br></br></br>address 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。"},{name:"h3",des:""},{name:"nav",des:"nav 标签定义导航链接的部分。"},{name:"menu",des:"menu 标签定义命令的列表或菜单。 </br></br></br></br>menu 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。"},
    {name:"th",des:"th 定义表格内的表头单元格。 </br></br></br></br>HTML 表单中有两种类型的单元格：</br></br></br></br>表头单元格 - 包含表头信息（由 th 元素创建）</br></br></br></br>标准单元格 - 包含数据（由 td 元素创建）</br></br></br></br>th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文"},{name:"base",des:"base 标签为页面上的所有链接规定默认地址或默认目标。 </br></br></br></br>通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。</br></br></br></br>使用 base 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 a、img、link、form 标签中的 URL。"},{name:"rp",des:"rp 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。"},{name:"abbr",des:"abbr 标签指示简称或缩写，比如 'WWW' 或 'NATO'。 </br></br></br></br>通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。"},{name:"time",des:"time 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。 </br></br></br></br>该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。"},
    {name:"b",des:"b 标签规定粗体文本。"},{name:"strong",des:"strong 标签和 em 标签一样，用于强调文本，但它强调的程度更强一些。"},{name:"del",des:"定义文档中已被删除的文本"},{name:"kbd",des:"kbd 标签定义键盘文本。"},{name:"hr",des:"hr 标签在 HTML 页面中创建一条水平线。 </br></br></br></br>水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。"},
    {name:"ol",des:"ol 标签定义有序列表。"},{name:"dl",des:"dl 标签定义了定义列表（definition list）。 </br></br></br></br>dl 标签用于结合 dt （定义列表中的项目）和 dd （描述列表中的项目）。"},{name:"label",des:"label 标签为 input 元素定义标注（标记）。 </br></br></br></br>label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。</br></br></br></br>label 标签的 for 属性应当与相关元素的 id 属性相同。"},{name:"option",des:"option 元素定义下拉列表中的一个选项（一个条目）。 </br></br></br></br>浏览器将 option 标签中的内容作为 select 标签的菜单或是滚动列表中的一个元素显示。</br></br></br></br>option 元素位于 select 元素内部。</br></br></br></br>注释：option 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。</br></br></br></br>注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。</br></br></br></br>提示：如果列表选项很多，可以使用 optgroup 标签对相关选项进行组合。"},{name:"datalist",des:"datalist 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 </br></br></br></br>datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。</br></br></br></br>请使用 input 元素的 list 属性来绑定 datalist。"},
    {name:"h4",des:""},{name:"article",des:"article 标签规定独立的自包含内容。 </br></br></br></br>一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。</br></br></br></br>article 元素的潜在来源：</br></br></br></br>论坛帖子 </br></br></br></br>报纸文章 </br></br></br></br>博客条目 </br></br></br></br>用户评论"},{name:"command",des:"command 元素表示用户能够调用的命令。 </br></br></br></br>command 标签可以定义命令按钮，比如单选按钮、复选框或按钮。</br></br></br></br>只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。"},{name:"tbody",des:"tbody 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。 </br></br></br></br>tbody 元素应该与 thead 和 tfoot 元素结合起来使用。</br></br></br></br>thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。</br></br></br></br>注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。</br></br></br></br>提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。</br></br></br></br>注释：thead 内部必须拥有 tr 标签！"},{name:"link",des:"link 标签定义文档与外部资源的关系。 </br></br></br></br>link 标签最常见的用途是链接样式表。"},
    {name:"noscript",des:"noscript 元素用来定义在脚本未被执行时的替代内容（文本）。 </br></br></br></br>此标签可被用于可识别 script 标签但无法支持其中的脚本的浏览器。"},{name:"q",des:"q 标签定义短的引用。"},{name:"var",des:"var 标签表示变量的名称，或者由用户提供的值。 </br></br></br></br>var 标签是计算机文档中应用的另一个小窍门，这个标签经常与 code 和 pre 标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。</br></br></br></br>用 var 标签标记的文本通常显示为斜体。"},{name:"sub",des:"sub 标签可定义下标文本。 </br></br></br></br>包含在 &lt;sub&gt; 标签和其结束标签 &lt;/sub&gt; 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。"},{name:"mark",des:"mark 标签定义带有记号的文本。请在需要突出显示文本时使用 m 标签。"},
    {name:"bdi",des:"bdi 指的是 bidi 隔离。 </br></br></br></br>bdi 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。</br></br></br></br>在发布用户评论或其他您无法完全控制的内容时，该标签很有用。"},{name:"wbr",des:"Word Break Opportunity (wbr) 规定在文本中的何处适合添加换行符。 </br></br></br></br>提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。"},{name:"figcaption",des:"figcaption 标签定义 figure 元素的标题（caption）。 </br></br></br></br>figcaption 元素应该被置于 figure 元素的第一个或最后一个子元素的位置。"},{name:"ul",des:"ul 标签定义无序列表。"},{name:"dt",des:"dt 标签定义了定义列表中的项目。"},
    {name:"input",des:"input 标签用于搜集用户信息。 </br></br></br></br>根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。"},{name:"output",des:"output 标签定义不同类型的输出，比如脚本的输出。"},{name:"keygen",des:"keygen 标签规定用于表单的密钥对生成器字段。 </br></br></br></br>当提交表单时，私钥存储在本地，公钥发送到服务器。"},{name:"h5",des:""},{name:"footer",des:"footer 标签定义文档或节的页脚。 </br></br></br></br>footer 元素应当含有其包含元素的信息。</br></br></br></br>页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。</br></br></br></br>您可以在一个文档中使用多个 footer 元素。"},
    {name:"summary",des:"summary 标签包含 details 元素的标题，'details' 元素用于描述有关文档或文档片段的详细信息。"},{name:"thead",des:"thead 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。"},{name:"style",des:"style 标签用于为 HTML 文档定义样式信息。 </br></br></br></br>在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。</br></br></br></br>type 属性是必需的，定义 style 元素的内容。唯一可能的值是 'text/css'。</br></br></br></br>style 元素位于 head 部分中。"},{name:"script",des:"script 标签用于定义客户端脚本，比如 JavaScript。 </br></br></br></br>script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。</br></br></br></br>必需的 type 属性规定脚本的 MIME 类型。</br></br></br></br>JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。"},{name:"cite",des:"cite 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。"},
    {name:"samp",des:"samp 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签。"},{name:"sup",des:"sup 标签可定义上标文本。"},{name:"ruby",des:"ruby 标签定义 ruby 注释（中文注音或字符）。"},{name:"bdo",des:"bdo 元素可覆盖默认的文本方向。"},{name:"code",des:"code 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。"},
    {name:"figure",des:"figure 标签规定独立的流内容（图像、图表、照片、代码等等）。 </br></br></br></br>figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。"},{name:"li",des:"li 标签定义列表项目。"},{name:"dd",des:"dd 在定义列表中定义条目的定义部分。"},{name:"textarea",des:"textarea 标签定义多行的文本输入控件。 </br></br></br></br>文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。</br></br></br></br>可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。</br></br></br></br>注释：在文本输入区内的文本行间，用 '%OD%OA' （回车/换行）进行分隔。</br></br></br></br>提示：可以通过 textarea 标签的 wrap 属性设置文本输入区内的换行模式。"},{name:"button",des:"button 标签定义一个按钮。 </br></br></br></br>在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。</br></br></br></br>&lt;button&gt; 控件 与 &lt;input type='button'&gt; 相比，提供了更为强大的功能和更丰富的内容。&lt;button&gt; 与 &lt;/button&gt; 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。</br></br></br></br>唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。</br></br></br></br>请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 'button'，而其他浏览器中（包括 W3C 规范）的默认值是 'submit'。"},
    {name:"progress",des:"progress 标签标示任务的进度（进程）。"},{name:"h6",des:""},{name:"hgroup",des:"hgroup 标签用于对网页或区段（section）的标题进行组合。"},{name:"details",des:"details 标签用于描述文档或文档某个部分的细节。"},{name:"tfoot",des:"tfoot 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。"},
    {name:"img",des:"img 元素向网页中嵌入一幅图像。 </br></br></br></br>请注意，从技术上讲，img 标签并不会在网页中插入图像，而是从网页上链接图像。img 标签创建的是被引用图像的占位空间。</br></br></br></br>img 标签有两个必需的属性：src 属性 和 alt 属性。"},{name:"area",des:"area 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。 </br></br></br></br>area 元素总是嵌套在 map 标签中。"},{name:"map",des:"定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。"},{name:"embed",des:"embed 标签定义嵌入的内容，比如插件。"},{name:"object",des:"定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。 </br></br></br></br>object 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。</br></br></br></br>object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。</br></br></br></br>浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。</br></br></br></br>而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 &lt;object&gt; 和 &lt;/object&gt; 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。"},
    {name:"param",des:"param 元素允许您为插入 XHTML 文档的对象规定 run-time 设置，也就是说，此标签可为包含它的 object 或者 applet 标签提供参数。"},{name:"source",des:"source 标签为媒介元素（比如 video 和 audio）定义媒介资源。 </br></br></br></br>source 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。"},{name:"iframe",des:"iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。"},{name:"canvas",des:"canvas 标签定义图形，比如图表和其他图像。 </br></br></br></br>canvas 标签只是图形容器，您必须使用脚本来绘制图"},{name:"track",des:"track 标签为诸如 video 元素之类的媒介规定外部文本轨道。"},
    {name:"audio",des:"audio 标签定义声音，比如音乐或其他音频流。"},{name:"video",des:"video 标签定义视频，比如电影片段或其他视频"}
];
//鼠标移入背景色提亮，显示右侧标签介绍
function mouseover(obj) {
    var overlist = [
        {name:"group1",color:"#86C58C"},{name:"group2",color:"#597ACD"},{name:"group3",color:"#B9B950"},
        {name:"group4",color:"#D88D4C"},{name:"group5",color:"#48B34D"},{name:"group6",color:"#4F73BC"},
        {name:"group7",color:"#B5B5BA"},{name:"group8",color:"#AB6E48"},{name:"group9",color:"#EB93EE"},
    ];
    for (var i = 0; i < overlist.length; i++) {
        if(obj.className == overlist[i].name){
            obj.style.backgroundColor = overlist[i].color;
        }
    }
    var showBox = document.getElementById("showBox");
    for(var i = 0; i < desList.length; i++){
        if(obj.innerHTML == desList[i].name){
            showBox.innerHTML = desList[i].des;
            return;
        }
    }
}
//鼠标移出后背景还原
function mouseout(obj) {
    var outlist = [
        {name:"group1",color:"#609765"},{name:"group2",color:"#4c579d"},{name:"group3",color:"#999949"},
        {name:"group4",color:"#be7946"},{name:"group5",color:"#419846"},{name:"group6",color:"#4c579d"},
        {name:"group7",color:"#98989d"},{name:"group8",color:"#8b5244"},{name:"group9",color:"#c572c8"},
    ];
    for (var i = 0; i < outlist.length; i++) {
        if(obj.className == outlist[i].name){
            obj.style.backgroundColor = outlist[i].color;
        }
    }
}

 

转载于:https://my.oschina.net/u/3695701/blog/1546830