h5jibenshuxing
/
index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>H5基本属性表格</title>
	<meta charset="utf-8" />
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            /*position:absolute;*/
            text-align:center;
            font-family:"微软雅黑";

        }
        body{
           min-width:1000px;
           background-color:rgb(28,29,38);
           height:100%;

        }
        .tab_qianru{

           /*width:50vw;*/
           /*height:10vw;*/
           margin: 0 auto 0;

        }
        td{
            width:4vw;
             height:4vw;
                border-radius:10%;
        }
        .tab_qianru tr td{
             background-color:rgb(209,125,211);
           /*border-right:2px solid rgb(246,145,246);*/

        }

        .tab_biaozhu{
            margin:0 auto 0;
            width:40vw;
            height:10vh;
        }
        .tab_biaozhu td{
            height:3vh;
           color:aliceblue;
           text-align:left;
        }
        .tab_zhuti{
           width:85vw;
           height:40vh;
           margin:0vh auto 0;
        }
        .td_lv{
            background-color:rgb(85,209,87);
        }
         .td_cheng{
            background-color:rgb(209,125,71);
        }
        .td_anhuang{
            background-color:rgb(209,209,87);
        }
        .td_lan{
            background-color:rgb(133,145,211);
        }
        .td_anlan{
            background-color:rgb(101,117,211);
        }
        .td_anbai{
            background-color:rgb(209,209,211);
        }
        td:hover{
          filter: brightness(1.3);
        }
        div{
           border-radius:10%;
           min-height:8vw;
           max-width:20vw;
           max-height:70vh;
            min-height:10vh;
             position:absolute;
             display:none;
             top:initial;
             left:initial;
             background-color:burlywood;
             padding:5px 5px 5px 5px;
        }
    </style>
    <script type="text/javascript">
        function dianji(wid, mid) {
            var wid =document.getElementById(wid);
            var mid = document.getElementById(mid);
            var sdiv = document.getElementsByTagName('div');
            for (var i = 0; i < sdiv.length; i++) {
                sdiv[i].style.display = "none";
            }
            var x;
            mid.style.display = "block";
            if (wid.getBoundingClientRect().left < 150) {
                mid.style.maxWidth = "30vw";
                x = wid.getBoundingClientRect().left + wid.offsetWidth / 2;
            }
            else {
                x = wid.getBoundingClientRect().left - mid.offsetWidth / 2 + wid.clientWidth / 2;
            }
            mid.style.display = "block";
            mid.style.left = x + "px";
            var y= wid.getBoundingClientRect().top+wid.clientHeight;
            mid.style.top = y + "px";
            //mid.style.display = "block";
        }
    </script>
</head>
<body>
    <h1>H5基本属性表格</h1>
    <h5>下面的表格是目在HTML5 working draft中的104个元素与两 proposed 元素(marked with an asterisk)。单击每个元素可以查看元素说明</h5>
    <header>
        <table class="tab_qianru">
            <tbody>
                <tr>
                    <td  id="wimg" onclick="dianji('wimg', 'mimg')">img</td>
                    <td id="warea" onclick="dianji('warea', 'marea')">area</td>
                    <td id="wmap" onclick="dianji('wmap','mmap')">map</td>
                    <td id="wembed" onclick="dianji('wembed', 'membed')">embed</td>
                    <td id="wobject" onclick="dianji('wobject', 'mobject')">object</td>
                    <td id="wparam" onclick="dianji('wparam', 'mparam')">param</td>
                    <td id="wsource" onclick="dianji('wsource', 'msource')">source</td>
                    <td id="wiframe" onclick="dianji('wiframe', 'miframe')">iframe</td>
                    <td  id="wcanvas" onclick="dianji('wcanvas', 'mcanvas')">canvas</td>
                    <td id="wtrack" onclick="dianji('wtrack', 'mtrack')">track</td>
                    <td id="waudio" onclick="dianji('waudio', 'maudio')">audio</td>
                    <td id="wvideo" onclick="dianji('wvideo', 'mvideo')">video</td>
                </tr>
               </tbody>
            </table>
        <!--<table class="tab_biaozhu">
            <tbody>
                <tr>
                    <td colspan="4">根元素</td>
                    <td colspan="4">文本级别语义</td>
                    <td colspan="4">表单</td>
                </tr>
                <tr>
                    <td colspan="4">交互元数</td>
                    <td colspan="4">嵌入式内容</td>
                    <td colspan="4">表格数据</td>
                </tr>
                <tr>
                    <td colspan="4">元数据和脚本</td>
                    <td colspan="4">组合内容</td>
                    <td colspan="4">文档章节</td>
                </tr>
            </tbody>
        </table>-->
    </header>
    <table class="tab_zhuti">
        <tbody>
            <tr>
                <td class="td_lv" id="whtml" onclick="dianji('whtml', 'mhtml')" >html</td>
                <td colspan="15"></td>
                <td class="td_cheng" id="wcol" onclick="dianji('wcol', 'mcol')">col</td>
                <td class="td_cheng" id="wtable" onclick="dianji('wtable', 'mtable')">table</td>
            </tr>
            <tr>
                <td class="td_anlan" id="whead" onclick="dianji('whead', 'mhead')">head</td>
                <td class="td_anhuang" id="wspan" onclick="dianji('wspan', 'mspan')">span</td>
                <td colspan="8"></td>
                <td class="td_cheng" id="wdiv" onclick="dianji('wdiv', 'mdiv')">div</td>
                <td class="td_lv" id="wfieldset" onclick="dianji('wfieldset', 'mfieldset')">fieldset</td>
                <td class="td_lv" id="wform" onclick="dianji('wform', 'mform')">form</td>
                <td class="td_lan" id="wbody" onclick="dianji('wbody', 'mbody')">body</td>
                <td class="td_lan" id="wh1" onclick="dianji('wh1', 'mh1')">h1</td>
                <td class="td_lan" id="wsection" onclick="dianji('wsection', 'msection')">section</td>
                <td class="td_cheng" id="wcolgroup" onclick="dianji('wcolgroup', 'mcolgroup')">colgroup</td>
                <td class="td_cheng"id="wtr" onclick="dianji('wtr', 'mtr')">tr</td>
            </tr>
            <tr>
                <td class="td_anlan" id="wtitle" onclick="dianji('wtitle', 'mtitle')">title</td>
                <td class="td_anhuang" id="wa" onclick="dianji('wa', 'ma')">a</td>
                <td colspan="8"></td>
                <td class="td_cheng" id="wpre" onclick="dianji('wpre', 'mpre')">pre</td>
                <td  class="td_lv" id="wmeter" onclick="dianji('wmeter', 'mmeter')">meter</td>
                <td  class="td_lv" id="wselect" onclick="dianji('wselect', 'mselect')">select</td>
                <td class="td_lan" id="waside" onclick="dianji('waside', 'maside')">aside</td>
                <td class="td_lan" id="wh2" onclick="dianji('wh2', 'mh1')">h2</td>
                <td class="td_lan" id="wheader" onclick="dianji('wheader', 'mheader')">header</td>
                <td class="td_cheng" id="wcaption" onclick="dianji('wcaption', 'mcaption')">caption</td>
                <td class="td_cheng" id="wtd" onclick="dianji('wtd', 'mtd')">td</td>
            </tr>
            <tr>
                <td class="td_anlan" id="wmeta" onclick="dianji('wmeta', 'mmeta')">meta</td>
                <td class="td_anhuang" id="wrt" onclick="dianji('wrt', 'mrt')">rt</td>
                <td class="td_anhuang" id="wdfn" onclick="dianji('wdfn', 'mdfn')">dfn</td>
                <td class="td_anhuang" id="wem" onclick="dianji('wem', 'mem')">em</td>
                <td class="td_anhuang" id="wi" onclick="dianji('wi', 'mi')">i</td>
                <td class="td_anhuang" id="wsmall" onclick="dianji('wsmall', 'msmall')">small</td>
                <td class="td_anhuang" id="wins" onclick="dianji('wins', 'mins')">ins</td>
                <td class="td_anhuang" id="ws" onclick="dianji('ws', 'ms')">s</td>
                <td class="td_cheng" id="wbr" onclick="dianji('wbr', 'mbr')">br</td>
                <td class="td_cheng" id="wp" onclick="dianji('wp', 'mp')">p</td>
                <td class="td_cheng" id="wblockquot" onclick="dianji('wblockquot', 'mblockquot')">blockquot</td>
                <td  class="td_lv" id="wlegend" onclick="dianji('wlegend', 'mlegend')">legend</td>
                <td  class="td_lv" id="woptgroup" onclick="dianji('woptgroup', 'moptgroup')">optgroup</td>
                <td class="td_lan" id="waddress" onclick="dianji('waddress', 'maddress')">address</td>
                <td class="td_lan" id="wh3" onclick="dianji('wh3', 'mh1')">h3</td>
                <td class="td_lan" id="wnav" onclick="dianji('wnav', 'mnav')">nav</td>
                <td class="td_anbai" id="wmenu" onclick="dianji('wmenu', 'mmenu')">menu</td>
                <td class="td_cheng" id="wth" onclick="dianji('wth', 'mth')">th</td>
            </tr>
            <tr>
                <td class="td_anlan" id="wbase" onclick="dianji('wbase', 'mbase')">base</td>
                <td class="td_anhuang" id="wrp" onclick="dianji('wrp', 'mrp')">rp</td>
                <td class="td_anhuang" id="wabbr" onclick="dianji('wabbr', 'mabbr')">abbr</td>
                <td class="td_anhuang" id="wtime" onclick="dianji('wtime', 'mtime')">time</td>
                <td class="td_anhuang" id="wb" onclick="dianji('wb', 'mb')">b</td>
                <td class="td_anhuang" id="wstrong" onclick="dianji('wstrong', 'mstrong')">strong</td>
                <td class="td_anhuang" id="wdel" onclick="dianji('wdel', 'mdel')">del</td>
                <td class="td_anhuang" id="wkbd" onclick="dianji('wkbd', 'mkbd')">kbd</td>
                <td class="td_cheng" id="whr" onclick="dianji('whr', 'mhr')">hr</td>
                <td class="td_cheng" id="wol" onclick="dianji('wol', 'mol')">ol</td>
                <td class="td_cheng" id="wdl" onclick="dianji('wdl', 'mdl')">dl</td>
                <td class="td_lv" id="wlabel" onclick="dianji('wlabel', 'mlabel')">label</td>
                <td class="td_lv" id="woption" onclick="dianji('woption', 'moption')">option</td>
                <td class="td_lv" id="wdatalist" onclick="dianji('wdatalist', 'mdatalist')">datalist</td>
                <td class="td_lan" id="wh4" onclick="dianji('wh4', 'mh1')">h4</td>
                <td class="td_lan" id="warticle" onclick="dianji('warticle', 'marticle')">article</td>
                <td class="td_anbai"id="wcommand" onclick="dianji('wcommand', 'mcommand')">command</td>
                <td class="td_cheng"id="wtbody" onclick="dianji('wtbody', 'mtbody')">tbody</td>
            </tr>
            <tr>
                <td class="td_anlan"id="wlink" onclick="dianji('wlink', 'mlink')">link</td>
                <td class="td_anlan"id="wnoscript" onclick="dianji('wnoscript', 'mnoscript')">noscript</td>
                <td class="td_anhuang"id="wq" onclick="dianji('wq', 'mq')">q</td>
                <td class="td_anhuang"id="wvar" onclick="dianji('wvar', 'mvar')">var</td>
                <td class="td_anhuang"id="wsub" onclick="dianji('wsub', 'msub')">sub</td>
                <td class="td_anhuang"id="wmark" onclick="dianji('wmark', 'mmark')">mark</td>
                <td class="td_anhuang"id="wbdi" onclick="dianji('wbdi', 'mbdi')">bdi</td>
                <td class="td_anhuang"id="wwbr" onclick="dianji('wwbr', 'mwbr')">wbr</td>
                <td  class="td_cheng"id="wfigcaption" onclick="dianji('wfigcaption', 'mfigcaption')">figcaption</td>
                <td  class="td_cheng"id="wul" onclick="dianji('wul', 'mul')">ul</td>
                <td  class="td_cheng"id="wdt" onclick="dianji('wdt', 'mdt')">dt</td>
                <td class="td_lv"id="winput" onclick="dianji('winput', 'minput')">input</td>
                <td class="td_lv"id="woutput" onclick="dianji('woutput', 'moutput')">output</td>
                <td class="td_lv"id="wkeygen" onclick="dianji('wkeygen', 'mkeygen')">keygen</td>
                <td class="td_lan"id="wh5" onclick="dianji('wh5', 'mh1')">h5</td>
                <td class="td_lan"id="wfooter" onclick="dianji('wfooter', 'mfooter')">footer</td>
                <td  class="td_anbai"id="wsummary" onclick="dianji('wsummary', 'msummary')">summary</td>
                <td class="td_cheng"id="wthead" onclick="dianji('wthead', 'mthead')">thead</td>
            </tr>
            <tr>
                <td class="td_anlan" id="wstyle" onclick="dianji('wstyle', 'mstyle')">style</td>
                <td class="td_anlan" id="wscript" onclick="dianji('wscript', 'mscript')">script</td>
                <td class="td_anhuang"  id="wcite" onclick="dianji('wcite', 'mcite')">cite</td>
                <td class="td_anhuang" id="wsamp" onclick="dianji('wsamp', 'msamp')">samp</td>
                <td class="td_anhuang" id="wsup" onclick="dianji('wsup', 'msup')">sup</td>
                <td class="td_anhuang" id="wruby" onclick="dianji('wruby', 'mruby')">ruby</td>
                <td class="td_anhuang" id="wbdo" onclick="dianji('wbdo', 'mbdo')">bdo</td>
                <td class="td_anhuang" id="wcode" onclick="dianji('wcode', 'mcode')">code</td>
                <td  class="td_cheng" id="wfigure" onclick="dianji('wfigure', 'mfigure')">figure</td>
                <td  class="td_cheng" id="wli" onclick="dianji('wli', 'mli')">li</td>
                <td  class="td_cheng" id="wdd" onclick="dianji('wdd', 'mdd')">dd</td>
                <td class="td_lv" id="wtextarea" onclick="dianji('wtextarea', 'mtextarea')">textarea</td>
                <td class="td_lv" id="wbutton" onclick="dianji('wbutton', 'mbutton')">button</td>
                <td class="td_lv" id="wprogress" onclick="dianji('wprogress', 'mprogress')">progress</td>
                <td class="td_lan"id="wh6" onclick="dianji('wh6', 'mh1')">h6</td>
                <td class="td_lan" id="whgroup" onclick="dianji('whgroup', 'mhgroup')">hgroup</td>
                <td class="td_anbai" id="wdetails" onclick="dianji('wdetails', 'mdetails')">details</td>
                <td class="td_cheng" id="wtfoot" onclick="dianji('wtfoot', 'mtfoot')">tfoot</td>
            </tr>
        </tbody>
    </table>
   <!--最上面-->
    <div id="mimg">添加图片<br /><a href="http://www.w3school.com.cn/tags/tag_img.asp">img</a></div>
    <div id="marea">标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。area 元素总是嵌套在 map标签中。<br />注释：img标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。<a href="http://www.w3school.com.cn/tags/tag_area.asp">area</a></div>
    <div id="mmap">
        带有可点击区域的图像映射
        注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
        注释：img中的 usemap 属性可引用 map
        中的 id 或 name 属性（取决于浏览器），所以我们应同时向
        map 添加 id 和 name 属性。
        <a href="http://www.w3school.com.cn/tags/tag_map.asp">
            map
        </a>
    </div>
    <div id="membed">
        embed 标签定义嵌入的内容，比如插件。
        <a href="http://www.w3school.com.cn/tags/tag_embed.asp">embed</a>
    </div>
    <div id="mobject">
        定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。
        object
        标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
        object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。
        浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。
        而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 object 和 /object 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。
        <a href="http://www.w3school.com.cn/tags/tag_object.asp">object</a>
    </div>
    <div id="mparam">
        param 元素允许您为插入 XHTML 文档的对象规定 run-time 设置，也就是说，此标签可为包含它的 object
        或者 applet
        标签提供参数。
        <a href="http://www.w3school.com.cn/tags/tag_param.asp">param</a>
    </div>
    <div id="msource">
        拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）：
        <a href="http://www.w3school.com.cn/tags/tag_source.asp">source</a>
    </div>
    <div id="miframe">
        iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
        <a href="http://www.w3school.com.cn/tags/tag_iframe.asp">iframe</a>
    </div>
    <div id="mcanvas">
        HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
        画布是一个矩形区域，您可以控制其每一像素。
        canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
        <p style="color:red;">
            画图
        </p>
        <a href="http://www.w3school.com.cn/html5/html_5_canvas.asp">canvas</a>
    </div>
    <div id="mtrack">
        播放带有字幕的视频。track 标签为诸如 video 元素之类的媒介规定外部文本轨道。
        用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。目前所有主流浏览器都不支持 track标签
        <a href="http://www.w3school.com.cn/tags/tag_track.asp">track</a>
    </div>
    <div id="maudio">
        audio
        标签定义声音，比如音乐或其他音频流。
        <a href="http://www.w3school.com.cn/tags/tag_audio.asp">audio</a>
    </div>
    <div id="mvideo">
        video
        标签定义视频，比如电影片段或其他视频流。
        可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息
        <a href="http://www.w3school.com.cn/html5/html5_video.asp ">video</a>
    </div>
    <!--第一行-->
    <div id="mhtml">
        此元素可告知浏览器其自身是一个 HTML 文档。
        html
        与
        /html 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由
        head
        标签定义，而主体由
        body
        标签定义。
        <a href="http://www.w3school.com.cn/tags/tag_html.asp">html</a>
    </div>
    <div id="mcol">
        col标签为表格中一个或多个列定义属性值。
        如需对全部列应用样式，col标签很有用，这样就不需要对各个单元和各行重复应用样式了。
        您只能在 table 或 colgroup 元素中使用 col 标签。
        <a href="http://www.w3school.com.cn/tags/tag_col.asp">col</a>
    </div>
    <div id="mtable">
        table
        标签定义 HTML 表格。
        简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
        tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
        更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
        <a href="http://www.w3school.com.cn/tags/tag_table.asp">table</a>
    </div>
    <!--第二行-->
    <div id="mhead">
        head
        标签用于定义文档的头部，它是所有头部元素的容器。
        head
        中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
        文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
        下面这些标签可用在 head 部分：
        base,
        link，
        meta,
        script
        , style, 以及 title。
        title定义文档的标题，它是 head 部分中唯一必需的元素。
        <a href="http://www.w3school.com.cn/tags/tag_head.asp">head</a>
    </div>
    <div id="mspan">
        span
        标签被用来组合文档中的行内元素。
        请使用 span
        来组合行内元素，以便通过样式来格式化它们
        <a href="http://www.w3school.com.cn/tags/tag_span.asp">span</a>
    </div>
    <div id="mdiv">
        div
        可定义文档中的分区或节（division/section）。
        div
        标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
        如果用 id 或 class 来标记 div
        ，那么该标签的作用会变得更加有效。
        用法
        div
        是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 div
        固有的唯一格式表现。可以通过 div
        的 class 或 id 应用额外的样式。
        不必为每一个 div
        都加上类或 id，虽然这样做也有一定的好处。
        可以对同一个 div
        元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
        <a href="http://www.w3school.com.cn/tags/tag_div.asp">div</a>
    </div>
    <div id="mfieldset">
        fieldset 元素可将表单内的相关元素分组。
        fieldset
        标签将表单内容的一部分打包，生成一组相关表单的字段。
        当一组表单元素放到 fieldset
        标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
        fieldset
        标签没有必需的或唯一的属性。
        legend
        标签为 fieldset 元素定义标题。
        <a href="http://www.w3school.com.cn/tags/tag_fieldset.asp">fieldset</a>
    </div>
    <div id="mform">
        form
        标签用于为用户输入创建 HTML 表单。
        表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
        表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
        表单用于向服务器传输数据。
        <a href="http://www.w3school.com.cn/tags/tag_form.asp">form</a>
    </div>
    <div id="mbody">
        body 元素定义文档的主体。
        body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
        <a href="http://www.w3school.com.cn/tags/tag_body.asp">body</a>
    </div>
    <div id="mh1">
        h1 - h6
        标签可定义标题。h1
        定义最大的标题。h6
        定义最小的标题。
        由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
        <a href="http://www.w3school.com.cn/tags/tag_hn.asp">h1-h6</a>
    </div>
    <div id="msection">
        section
        标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
        <a href="http://www.w3school.com.cn/tags/tag_section.asp">section</a>
    </div>
    <div id="mcolgroup">
        colgroup
        标签用于对表格中的列进行组合，以便对其进行格式化。
        如需对全部列应用样式，
        colgroup
        标签很有用，这样就不需要对各个单元和各行重复应用样式了。
        colgroup
        标签只能在 table 元素中使用。
        <a href="http://www.w3school.com.cn/tags/tag_colgroup.asp">colgroup</a>
    </div>
    <div id="mtr">
        tr
        标签定义 HTML 表格中的行。
        tr 元素包含一个或多个 th 或 td 元素。
        <a href="http://www.w3school.com.cn/tags/tag_tr.asp">tr</a>
    </div>
    <!--第三行-->
    <div id="mtitle">
        title
        元素可定义文档的标题。
        浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
        <a href="http://www.w3school.com.cn/tags/tag_title.asp">title</a>
    </div>
    <div id="ma">
        a
        标签定义超链接，用于从一张页面链接到另一张页面。
        a
        元素最重要的属性是 href 属性，它指示链接的目标。
        <a href="http://www.w3school.com.cn/tags/tag_a.asp">a</a>
    </div>
    <div id="mpre">
        pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
        pre 标签的一个常见应用就是用来表示计算机的源代码。
        可以导致段落断开的标签（例如标题、p 和 address 标签）绝不能包含在 pre 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。
        pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 a 标签）放到 pre 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。
        <a href="http://www.w3school.com.cn/tags/tag_pre.asp">pre</a>
    </div>
    <div id="mmeter">
        meter
        标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
        例子：磁盘用量、查询结果的相关性，等等。
        注释：meter
        标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 progress
        标签。
        <a href="http://www.w3school.com.cn/tags/tag_meter.asp">meter</a>
    </div>
    <div id="mselect">
        select 元素可创建单选或多选菜单。
        select
        元素中的 option
        标签用于定义列表中的可用选项。
        <a href="http://www.w3school.com.cn/tags/tag_select.asp">select</a>
    </div>
    <div id="maside">
        aside
        标签定义其所处内容之外的内容。
        aside 的内容应该与附近的内容相关。
        <a href="http://www.w3school.com.cn/tags/tag_aside.asp">aside</a>
    </div>
    <div id="mheader">
        header 标签定义文档的页眉（介绍信息）。
        <a href="http://www.w3school.com.cn/tags/tag_header.asp">header</a>
    </div>
    <div id="mcaption">
        caption 元素定义表格标题。
        caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上
        <a href="http://www.w3school.com.cn/tags/tag_caption.asp">caption</a>
    </div>
    <div id="mtd">
        td
        标签定义 HTML 表格中的标准单元格。
        HTML 表格有两类单元格：
        表头单元 - 包含头部信息（由 th 元素创建）
        标准单元 - 包含数据（由 td 元素创建）
        td 元素中的文本一般显示为正常字体且左对齐。
        <a href="http://www.w3school.com.cn/tags/tag_td.asp">td</a>
    </div>
    <!--第四行-->
    <div id="mmeta">
        meta元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
        meta 标签位于文档的头部，不包含任何内容。meta 标签的属性定义了与文档相关联的名称/值对。
        <a href="http://www.w3school.com.cn/tags/tag_meta.asp">meta</a>
    </div>
    <div id="mrt">
        rt
        标签定义字符（中文注音或字符）的解释或发音。
        ruby 注释是中文注音或字符。
        在东亚使用，显示的是东亚字符的发音。
        与 ruby
        以及 rt
        标签一同使用：
        ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
        <a href="http://www.w3school.com.cn/tags/tag_rt.asp">rt</a>
    </div>
    <div id="mdfn">
        dfn
        标签可标记那些对特殊术语或短语的定义。
        现在流行的浏览器通常用斜体来显示 dfn
        中的文本。将来，dfn
        还可能有助于创建文档的索引或术语表。
        与其他许多基于内容的样式和物理样式标签一样，dfn标签尽量少用为妙。作为一种通用样式，尤其在技术文档中，当第一次新的术语时，应该将它们与普通文本分开，这样读者可以更好地理解文章当前的主题，而从那以后就不要再对这个术语进行任何标记了。
        <a href="http://www.w3school.com.cn/tags/tag_dfn.asp">dfn</a>
    </div>
    <div id="mem">
        em
        标签告诉浏览器把其中的文本表示为强调的内容.
        <a href="http://www.w3school.com.cn/tags/tag_em.asp">em</a>
    </div>
    <div id="mi">
        i
        标签显示斜体文本效果。
        i
        标签和基于内容的样式标签 em
        类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。
        提示：i 标签一定要和结束标签 /i结合起来使用。
        <a href="http://www.w3school.com.cn/tags/tag_i.asp">i</a>
    </div>
    <div id="msmall">
        small
        标签呈现小号字体效果。
        small
        标签和它所对应的 big
        标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 small
        标签将不起任何作用。
        与 big
        标签类似，small
        标签也可以嵌套，从而连续地把文字缩小。每个 small
        标签都把文本的字体变小一号，直到达到下限的一号字。
        <a href="http://www.w3school.com.cn/tags/tag_small.asp">small</a>
    </div>
    <div id="mins">
        ins
        标签定义已经被插入文档中的文本。
        <a href="http://www.w3school.com.cn/tags/tag_ins.asp">ins</a>
    </div>
    <div id="ms">
        s
        标签可定义加删除线文本定义。
        s
        标签是 strike
        标签的缩写版本，Netscape 和 Internet Explorer 都支持它。但在 HTML 4 和 XHTML 中已经不再赞成使用它了，意思就是不再使用了；它早晚有一天将会消失。
        <a href="http://www.w3school.com.cn/tags/tag_s.asp">s</a>
    </div>
    <div id="mbr">
        br 可插入一个简单的换行符。
        br 标签是空标签（意味着它没有结束标签，因此这是错误的：br/br）。在 XHTML 中，把结束标签放在开始标签中，也就是 br/。
        请注意，br 标签只是简单地开始新的一行，而当浏览器遇到 p
        标签时，通常会在相邻的段落之间插入一些垂直的间距。
        <a href="http://www.w3school.com.cn/tags/tag_br.asp">br</a>
    </div>
    <div id="mp">
        p标签定义段落。
        p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
        <a href="http://www.w3school.com.cn/tags/tag_p.asp">p</a>
    </div>
    <div id="mblockquot">
        blockquote
        标签定义块引用。
        blockquote 与 /blockquote之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
        <a href="http://www.w3school.com.cn/tags/tag_blockquote.asp">blockquot</a>
    </div>
    <div id="mlegend">
        legend 元素为 fieldset 元素定义标题（caption）。
        <a href="http://www.w3school.com.cn/tags/tag_legend.asp">legend</a>
    </div>
    <div id="moptgroup">
        optgroup标签定义选项组。optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。<a href="">optgroup</a>
    </div>
    <div id="maddress">
        address
        标签定义文档或文章的作者/拥有者的联系信息。
        如果 address
        元素位于 body
        元素内，则它表示文档联系信息。
        如果 address
        元素位于 article
        元素内，则它表示文章的联系信息。
        address
        元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
        <a href="http://www.w3school.com.cn/tags/tag_address.asp">address</a>
    </div>
    <div id="mnav">
        nav
        标签定义导航链接的部分。
        <a href="http://www.w3school.com.cn/tags/tag_nav.asp">nav</a>
    </div>
    <div id="mmenu">
        目前所有主流浏览器都不支持 menu标签。
        menu
        标签定义命令的列表或菜单。
        menu
        标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
        <a href="http://www.w3school.com.cn/tags/tag_menu.asp">menu</a>
    </div>
    <div id="mth">
        定义表格内的表头单元格。
        HTML 表单中有两种类型的单元格：
        表头单元格 - 包含表头信息（由 th 元素创建）
        标准单元格 - 包含数据（由 td 元素创建）
        th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
        <a href="http://www.w3school.com.cn/tags/tag_th.asp">th</a>
    </div>
    <!--第五行-->
    <div id="mbase">
        base 标签为页面上的所有链接规定默认地址或默认目标。
        通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
        使用 base 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 a、img、link、form
        标签中的 URL。
        <a href="http://www.w3school.com.cn/tags/tag_base.asp">base</a>
    </div>
    <div id="mrp">
        rp
        标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
        ruby 注释是中文注音或字符。
        在东亚使用，显示的是东亚字符的发音。
        与 ruby
        以及 rt
        标签一同使用：
        ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
        <a href="http://www.w3school.com.cn/tags/tag_rp.asp">rp</a>
    </div>
    <div id="mabbr">
        abbr
        标签指示简称或缩写，比如 "WWW" 或 "NATO"。
        通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
        abbr
        标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。
        <a href="http://www.w3school.com.cn/tags/tag_abbr.asp">abbr</a>
    </div>
    <div id="mtime">
        time
        标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
        该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
        <a href="http://www.w3school.com.cn/tags/tag_time.asp">time</a>
    </div>
    <div id="mb">
        b 标签规定粗体文本。注释：根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 b
        标签作为最后的选项。HTML5 规范声明：应该使用 h1
        - h6
        来表示标题，使用 em
        标签来表示强调的文本，应该使用 strong
        标签来表示重要文本，应该使用 mark
        标签来表示标注的/突出显示的文本。
        提示：您也能够使用 CSS "font-weight" 属性来设置粗体文本
        <a href="http://www.w3school.com.cn/tags/tag_b.asp">b</a>
    </div>
    <div id="mstrong">
        strong
        标签和 em
        标签一样，用于强调文本，但它强调的程度更强一些。
        浏览器通常会以不同于 em
        标签的方式来显示 strong
        标签中的内容，通常是用加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个标签区分开来了。
        如果常识告诉我们应该较少使用 em
        标签的话，那么 strong
        标签出现的次数应该更少。如果说用 em
        标签修饰的文本好像是在大声呼喊，那么用 strong
        标签修饰的文本就无异于尖叫了。沉默寡言的人说出的话总是一诺千金，与此相同，限制 strong
        的使用可以令应该更加引人注意，而且更加有效。
        举一个例子，经常访问 W3school 的用户可以注意到了，许多教程页面的第一句摘要都是以粗体显示的，而实际上，我们对这一句摘要使用了 strong
        标签。使用这个标签的理由是，我们认为教程摘要不仅概括了其所在页面的内容，而且位于页面的最重要的位置，其内容自然是非常重要的且值得强调的。
        <a href="http://www.w3school.com.cn/tags/tag_strong.asp">strong</a>
    </div>
    <div id="mdel">
        定义文档中已被删除的文本。
        <a href="http://www.w3school.com.cn/tags/tag_del.asp">del</a>
    </div>
    <div id="mkbd">
        kbd
        标签定义键盘文本。
        说到技术概念上的特殊样式时，就要提到 kbd
        标签。正如你已经猜到的，它用来表示文本是从键盘上键入的。
        浏览器通常用等宽字体来显示该标签中包含的文本。
        kbd
        标签经常用在于计算机相关的文档和手册中。例如：
        <a href="http://www.w3school.com.cn/tags/tag_kbd.asp">kbd</a>
    </div>
    <div id="mhr">
        hr标签在 HTML 页面中创建一条水平线。
        水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
        <a href="http://www.w3school.com.cn/tags/tag_hr.asp">hr</a>
    </div>
    <div id="mol">
        ol    标签定义有序列表。
        <a href="http://www.w3school.com.cn/tags/tag_ol.asp">ol</a>
    </div>
    <div id="mdl">
        dl
        标签定义了定义列表（definition list）。
        dl
        标签用于结合
        dt （定义列表中的项目）和
        dd
        （描述列表中的项目）。
        <a href="http://www.w3school.com.cn/tags/tag_dl.asp">dl</a>
    </div>
    <div id="mlabel">
        label
        标签为 input 元素定义标注（标记）。
        label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
        label
        标签的 for 属性应当与相关元素的 id 属性相同。
        <a href="http://www.w3school.com.cn/tags/tag_label.asp">label</a>
    </div>
    <div id="moption">
        option 元素定义下拉列表中的一个选项（一个条目）。
        浏览器将 option
        标签中的内容作为 select
        标签的菜单或是滚动列表中的一个元素显示。
        option 元素位于 select 元素内部。
        <a href="http://www.w3school.com.cn/tags/tag_option.asp">option</a>
    </div>
    <div id="mdatalist">
        datalist
        标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
        datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
        请使用 input 元素的 list 属性来绑定 datalist。
        <a href="http://www.w3school.com.cn/tags/tag_datalist.asp">datalist</a>
    </div>
    <div id="marticle">
        article
        标签规定独立的自包含内容。
        <a href="http://www.w3school.com.cn/tags/tag_article.asp">article</a>
    </div>
    <div id="mcommand">
        没有浏览器支持 command标签。
        <a href="http://www.w3school.com.cn/tags/tag_command.asp">command</a>
    </div>
    <div id="mtbody">
        tbody 标签表格主体（正文）。
        tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
        <a href="http://www.w3school.com.cn/tags/tag_tbody.asp">tbody</a>
    </div>
    <!--第六行-->
    <div id="mlink">
        link标签定义文档与外部资源的关系。<br />
        link 标签最常见的用途是链接样式表。
        <a href="http://www.w3school.com.cn/tags/tag_link.asp">link</a>
    </div>
    <div id="mnoscript">
        noscript 元素用来定义在脚本未被执行时的替代内容（文本）。
        此标签可被用于可识别
        script
        标签但无法支持其中的脚本的浏览器。
        <a href="http://www.w3school.com.cn/tags/tag_noscript.asp">noscript</a>
    </div>
    <div id="mq">
        q   标签定义短的引用。
        浏览器经常在引用的内容周围添加引号。
        <a href="http://www.w3school.com.cn/tags/tag_q.asp">q</a>
    </div>
    <div id="mvar">
        var  标签表示变量的名称，或者由用户提供的值。
        <a href="http://www.w3school.com.cn/tags/tag_var.asp">var</a>
    </div>
    <div id="msub">
        包含在 sub 标签和其结束标签 /sub 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。
        <a href="http://www.w3school.com.cn/tags/tag_sub.asp">sub</a>
    </div>
    <div id="mmark">
        mark
        标签定义带有记号的文本。请在需要突出显示文本时使用 m
        标签。
        <a href="http://www.w3school.com.cn/tags/tag_mark.asp">mark</a>
    </div>
    <div id="mbdi">
        bdi
        标签允许您设置一段文本，使其脱离其父元素的文本方向设置。
        在发布用户评论或其他您无法完全控制的内容时，该标签很有用。
        <a href="http://www.w3school.com.cn/tags/tag_bdi.asp">bdi</a>
    </div>
    <div id="mwbr">
        如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr元素来添加 Word Break Opportunity（单词换行时机）。
        <a href="http://www.w3school.com.cn/tags/tag_wbr.asp">wbr</a>
    </div>
    <div id="mfigcaption">
        标签定义 figure 元素的标题（caption）。
        "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
        <a href="http://www.w3school.com.cn/tags/tag_figcaption.asp">figcaption</a>
    </div>
    <div id="mul">
        ul
        标签定义无序列表。
        <a href="http://www.w3school.com.cn/tags/tag_ul.asp">ul</a>
    </div>
    <div id="mdt">
        标签定义了定义列表中的项目（即术语部分）。
        <a href="http://www.w3school.com.cn/tags/tag_dt.asp">dt</a>
    </div>
    <div id="minput">
        input标签用于搜集用户信息。
        根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
        <a href="http://www.w3school.com.cn/tags/tag_input.asp">input</a>
    </div>
    <div id="moutput">
        标签定义不同类型的输出，比如脚本的输出。
        <a href="http://www.w3school.com.cn/tags/tag_output.asp">output</a>
    </div>
    <div id="mkeygen">
        keygen标签规定用于表单的密钥对生成器字段。
        当提交表单时，私钥存储在本地，公钥发送到服务器。
        <a href="http://www.w3school.com.cn/tags/tag_keygen.asp">keygen</a>
    </div>
    <div id="mfooter">
        标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
        <a href="http://www.w3school.com.cn/tags/tag_footer.asp">footer</a>
    </div>
    <div id="msummary">
        只有 Chrome 以及 Safari 6 支持。summary
        标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
        <a href="http://www.w3school.com.cn/tags/tag_summary.asp">summary</a>
    </div>
    <div id="mthead">
        标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
        <a href="http://www.w3school.com.cn/tags/tag_thead.asp">thead</a>
    </div>
    <!--第七行-->
    <div id="mstyle">
        style标签用于为 HTML 文档定义样式信息。
        在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
        type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
        style 元素位于 head 部分中。
        <a href="http://www.w3school.com.cn/tags/tag_style.asp">style</a>
    </div>
    <div id="mscript">
        script
        标签用于定义客户端脚本，比如 JavaScript。
        script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
        必需的 type 属性规定脚本的 MIME 类型。
        JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
        <a href="http://www.w3school.com.cn/tags/tag_script.asp">script</a>
    </div>
    <div id="mcite">
        cite
        标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
        <a href="http://www.w3school.com.cn/tags/tag_cite.asp">cite</a>
    </div>
    <div id="msamp">
        samp
        标签表示一段用户应该对其没有什么其他解释的文本字符。
        <a href="http://www.w3school.com.cn/tags/tag_samp.asp">samp</a>
    </div>
    <div id="msup">
        标签可定义上标文本。
        <a href="http://www.w3school.com.cn/tags/tag_sup.asp">sup</a>
    </div>
    <div id="mruby">
        标签定义 ruby 注释（中文注音或字符）。
        <a href="http://www.w3school.com.cn/tags/tag_ruby.asp">ruby</a>
    </div>
    <div id="mbdo">
        bdo 元素可覆盖默认的文本方向。
        <a href="http://www.w3school.com.cn/tags/tag_bdo.asp">bdo</a>
    </div>
    <div id="mcode">
        code
        标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
        <a href="http://www.w3school.com.cn/tags/tag_code.asp">code</a>
    </div>
    <div id="mfigure">
        figure
        标签规定独立的流内容（图像、图表、照片、代码等等）。
        figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
        <a href="http://www.w3school.com.cn/tags/tag_figure.asp">figure</a>
    </div>
    <div id="mli">
        li
        标签定义列表项目。
        <a href="http://www.w3school.com.cn/tags/tag_li.asp">li</a>
    </div>
    <div id="mdd">
        在定义列表中定义条目的定义部分。
        <a href="http://www.w3school.com.cn/tags/tag_dd.asp">dd</a>
    </div>
    <div id="mtextarea">
        标签定义多行的文本输入控件。
        <a href="http://www.w3school.com.cn/tags/tag_textarea.asp">textarea</a>
    </div>
    <div id="mbutton">
        标签定义一个按钮。
        <a href="http://www.w3school.com.cn/tags/tag_button.asp">button</a>
    </div>
    <div id="mprogress">
        标签标示任务的进度（进程）。
        <a href="http://www.w3school.com.cn/tags/tag_progress.asp">progress</a>
    </div>
    <div id="mhgroup">
        标签用于对网页或区段（section）的标题进行组合。
        <a href="http://www.w3school.com.cn/html5/tag_hgroup.asp">hgroup</a>
    </div>
    <div id="mdetails">
        标签用于描述文档或文档某个部分的细节。目前只有 Chrome 和 Safari 6 支持 标签。
        <a href="http://www.w3school.com.cn/tags/tag_details.asp">details</a>
    </div>
    <div id="mtfoot">
        标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。
        <a href="http://www.w3school.com.cn/tags/tag_tfoot.asp">tfoot</a>
    </div>
</body>
</html>
<!--所有链接均为W3C网址，原网页为“http://demo.yanue.net/HTML5element/”-->