HTML5——HTML5元素周期表
竺鸿骞
写在前面
其实自己看了HTML5好久了，主要标签多少也都有用过了，但是呢，缺少一定的总结。看了一遍相当于再读代码不会陌生，但是只有总结才能把知识整理成自己的，相当于对于这一块知识有了头绪。
HTML5元素周期表
发现HTML5元素周期表，整理一下：有两个版本：
源代码
这个直接可以查看别人的网页源代码，我在这里自己记一下，仅用于个人学习。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/periodic-table.css">
<script src="js/jquery-2.0.0.min.js"></script>
<title>HTML5元素周期表</title>
</head>
<body>
<div id="content">
<script type="text/javascript">
$(function(){
$('#elements td').click(function(){
var self = $(this).hasClass('active');
$('.active .info').fadeOut();
$('.active').removeClass('active');
if (!self) {
$(this).find('.info').fadeIn();
$(this).addClass('active');
}
});
$('#elements a').click(function(event){
window.open(event.target.href, 'table');
return false;
});
})
</script>
<h1 class="star">Periodic Table of the HTML5 Elements</h1>
<table id="elements" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="">
<div class="element root">
<div class="info" style="display: none;">
<h3><html></h3>
<p>Document root element.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/html">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-html-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">html</div>
</div></td><td></td><td></td><td></td><td class="active"></td><td></td><td></td><td class=""></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>
<div class="element table">
<div class="info">
<h3><col></h3>
<p>Columns in a table.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/col">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-col-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">col</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3><table></h3>
<p>Table of multi-dimensional data.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/table">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-table-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">table</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
<h3><head></h3>
<p>First element of the HTML document. Contains document metadata.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/head">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-head-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">head</div>
</div></td><td class="">
<div class="element text">
<div class="info" style="display: none;">
<h3><span></h3>
<p>Container with no semantic meaning.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/span">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">span</div>
</div></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>
<div class="element grouping">
<div class="info">
<h3><div></h3>
<p>Container with no semantic meaning.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/div">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-div-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">div</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><fieldset></h3>
<p>Set of form controls grouped by theme.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/fieldset">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-fieldset-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">fieldset</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><form></h3>
<p>Form.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/form">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/forms.html#the-form-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">form</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><body></h3>
<p>Document content.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/body">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-body-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">body</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><h1></h3>
<p>Heading for the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/hn/">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h1</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><section></h3>
<p>Contains elements grouped by theme, for example a chapter or tab box.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/section">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-section-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">section</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3><colgroup></h3>
<p>Defines a group of columns in a table.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/colgroup">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-colgroup-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">colgroup</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3><tr></h3>
<p>A row of cells.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/tr">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-tr-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">tr</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
<h3><title></h3>
<p>Document title.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/title">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-title-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">title</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><a></h3>
<p>Hyperlink.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/a">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">a</div>
</div></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>
<div class="element grouping">
<div class="info">
<h3><pre></h3>
<p>Text that is preformatted in the HTML code.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/pre">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-pre-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">pre</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><meter></h3>
<p>Control for entering a numeric value in a known range.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/meter">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-meter-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">meter</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><select></h3>
<p>Control for selecting from multiple options.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/select">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-select-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">select</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><aside></h3>
<p>Content related to surrounding elements that doesn't belong inline, such as a advertising or quotes.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/aside">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-aside-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">aside</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><h2></h3>
<p>Heading for the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/hn/">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h2</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><header></h3>
<p>Navigation or introductory elements for the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/header">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-header-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">header</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3><caption></h3>
<p>Title of a table.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/caption">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-caption-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">caption</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3><td></h3>
<p>Table cell.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/td">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-td-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">td</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
<h3><meta></h3>
<p>Document metadata that can't be represented with other elements.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/meta">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#meta">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">meta</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><rt></h3>
<p>Annotation of preceding text.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/rt">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-rt-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">rt</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><dfn></h3>
<p>Term being defined by the parent section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/phrase_elements">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-dfn-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">dfn</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><em></h3>
<p>Text that should be emphasised.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/phrase_elements">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-em-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">em</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><i></h3>
<p>Text in a alternate voice or mood, such as a technical term.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/i">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-i-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">i</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><small></h3>
<p>An aside, such as fine print.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/small">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">small</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><ins></h3>
<p>Text that has been inserted during document editing.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/ins">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/edits.html#the-ins-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">ins</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><s></h3>
<p>Text that is outdated or no longer accurate.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/s">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-s-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">s</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><br></h3>
<p>Line break.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/br">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">br</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><p></h3>
<p>Paragraph content.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/p">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-p-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">p</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><blockquote></h3>
<p>Quote from another source.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/blockquote">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-blockquote-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">blockquote</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><legend></h3>
<p>Define a name for a fieldset.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/legend">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/forms.html#the-legend-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">legend</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><optgroup></h3>
<p>Group of option.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/optgroup">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-button-element.html#the-optgroup-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">optgroup</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><address></h3>
<p>Contact information for the current article.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/address">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-address-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">address</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><h3></h3>
<p>Heading for the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/hn/">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h3</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><nav></h3>
<p>Contains a collection of links.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/nav">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-nav-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">nav</div>
</div></td><td>
<div class="element interactive">
<div class="info">
<h3><menu></h3>
<p>Set of commands.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/menu">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">menu</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3><th></h3>
<p>Table heading.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/th">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-th-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">th</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
<h3><base></h3>
<p>Specifies URL which non-absolute URLs are relative to.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/base">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-base-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">base</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><rp></h3>
<p>Contains semantically meaningless markup for browsers that don't understand ruby annotations.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/rp">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-rp-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">rp</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><abbr></h3>
<p>Abbreviation or acronym.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/abbr">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-abbr-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">abbr</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><time></h3>
<p>Time defined in a machine readable format.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/time">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-time-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">time</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><b></h3>
<p>Stylistically separated text of equal importance, such as a product name.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/b">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-b-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">b</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><strong></h3>
<p>Text that is important.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/phrase_elements">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-strong-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">strong</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><del></h3>
<p>Text that has been removed during document editing.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/del">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/edits.html#the-del-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">del</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><kbd></h3>
<p>Example input (usually keyboard) for a program.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/phrase_elements">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">kbd</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><hr></h3>
<p>Thematic break within a paragraph.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/hr">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-hr-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">hr</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><ol></h3>
<p>Ordered list.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/ol">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-ol-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">ol</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><dl></h3>
<p>List of term-description pairs.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/dl">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">dl</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><label></h3>
<p>Caption for a form control.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/label">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/forms.html#the-label-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">label</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><option></h3>
<p>Single option within a select control.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/option">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-button-element.html#the-option-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">option</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><datalist></h3>
<p>Define sets of options.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/datalist">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-button-element.html#the-datalist-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">datalist</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><h4></h3>
<p>Heading for the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/hn/">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h4</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><article></h3>
<p>Section of the page content, such as a blog or forum post.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/article">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-article-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">article</div>
</div></td><td>
<div class="element interactive">
<div class="info">
<h3><command></h3>
<p>Command the user can perform, such as publishing an article.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/command">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/interactive-elements.html#the-command">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">command</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3><tbody></h3>
<p>Contains rows that hold the table's data.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/tbody">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-tbody-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">tbody</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
<h3><link></h3>
<p>Other resources related to the document.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/link">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-link-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">link</div>
</div></td><td>
<div class="element document">
<div class="info">
<h3><noscript></h3>
<p>Contains elements that are part of the document only if scripting is disabled.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/noscript">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/scripting-1.html#the-noscript-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">noscript</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><q></h3>
<p>Quoted text.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/q">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">q</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><var></h3>
<p>Mathematical or programming variable.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/phrase_elements">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-var-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">var</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><sub></h3>
<p>Subscript text.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/sup">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-sub-and-sup-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">sub</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><mark></h3>
<p>Text highlighted for referencing elsewhere.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/mark">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-mark-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">mark</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><bdi></h3>
<p>Text that is separated from directional formatting of its surroundings.</p> <ul class="links"><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-bdi-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">bdi</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><wbr></h3>
<p>Opportunity for a line break.</p> <ul class="links"><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-wbr-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">wbr</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><figcaption></h3>
<p>Caption for a figure.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/figcaption">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-figcaption-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">figcaption</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><ul></h3>
<p>Unordered list.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/ul">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-ul-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">ul</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><dt></h3>
<p>Term which will be described.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/dt">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-dt-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">dt</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><input></h3>
<p>Generic form input.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/input">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-input-element.html#the-input-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">input</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><output></h3>
<p>Contains the results of a calculation.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/output">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-button-element.html#the-output-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">output</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><keygen></h3>
<p>Generates private-public key pairs.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/keygen">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-keygen-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">keygen</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><h5></h3>
<p>Heading for the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/hn/">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h5</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><footer></h3>
<p>Footer of the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/footer">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-footer-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">footer</div>
</div></td><td>
<div class="element interactive">
<div class="info">
<h3><summary></h3>
<p>Caption of a details element.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/summary">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/interactive-elements.html#the-summary-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">summary</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3><thead></h3>
<p>Contains rows with table headings.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/thead">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-thead-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">thead</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
<h3><style></h3>
<p>Styling defined inline data.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/style">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-style-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">style</div>
</div></td><td>
<div class="element document">
<div class="info">
<h3><script></h3>
<p>Inline or linked client side scripts.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/script">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/scripting-1.html#script">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">script</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><cite></h3>
<p>Title of a referenced piece of work.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/phrase_elements">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">cite</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><samp></h3>
<p>Sample output of a program.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/phrase_elements">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-samp-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">samp</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><sup></h3>
<p>Superscript text.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/sup">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-sub-and-sup-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">sup</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><ruby></h3>
<p>Contains text with annotations, such as pronounciation hints. Commonly used in East Asian text.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/ruby">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-ruby-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">ruby</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><bdo></h3>
<p>Defines directional formatting for content.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/bdo">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-bdo-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">bdo</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3><code></h3>
<p>Fragment of code.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/phrase_elements">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-code-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">code</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><figure></h3>
<p>Contains elements related to single concept, such as an illustration or code example.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/figure">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-figure-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">figure</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><li></h3>
<p>List item.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/li">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-li-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">li</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3><dd></h3>
<p>Description for the preceding term.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/dd">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-dd-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">dd</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><textarea></h3>
<p>Multiline free-form text input.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/textarea">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-textarea-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">textarea</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><button></h3>
<p>A button.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/button">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-button-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">button</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3><progress></h3>
<p>Control for displaying progress of a task.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/progress">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-progress-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">progress</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><h6></h3>
<p>Heading for the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/hn/">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h6</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3><hgroup></h3>
<p>Collection of headings for the current section. The highest ranked heading represents the group in the document outline.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/hgroup">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-hgroup-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">hgroup</div>
</div></td><td>
<div class="element interactive">
<div class="info">
<h3><details></h3>
<p>Contains additional information, such as the contents of an accordian view.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/details">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-details-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">details</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3><tfoot></h3>
<p>Contains rows with summary of data.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/tfoot">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-tfoot-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">tfoot</div>
</div></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td>
<div class="element embedding">
<div class="info">
<h3><img></h3>
<p>An image.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/img">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/embedded-content-1.html#the-img-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">img</div>
</div></td><td>
<div class="element embedding">
<div class="info">
<h3><area></h3>
<p>Hyperlink area in an image map.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/area">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-map-element.html#the-area-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">area</div>
</div></td><td>
<div class="element embedding">
<div class="info">
<h3><map></h3>
<p>Image map for adding hyperlinks to parts of an image.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/map">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-map-element.html#the-map-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">map</div>
</div></td><td>
<div class="element embedding">
<div class="info">
<h3><embed></h3>
<p>Reference to non-HTML content.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/embed">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-iframe-element.html#the-embed-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">embed</div>
</div></td><td>
<div class="element embedding">
<div class="info">
<h3><object></h3>
<p>External resource such as an image, iframe or plugin.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/object">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-iframe-element.html#the-object-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">object</div>
</div></td><td>
<div class="element embedding">
<div class="info">
<h3><param></h3>
<p>Parameters for the parent object.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/param">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-iframe-element.html#the-param-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">param</div>
</div></td><td>
<div class="element embedding">
<div class="info">
<h3><source></h3>
<p>Alternative sources for parent video or audio elements.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/source">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/video.html#the-source-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">source</div>
</div></td><td>
<div class="element embedding">
<div class="info">
<h3><iframe></h3>
<p>Nested browser frame.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/iframe">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-iframe-element.html#the-iframe-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">iframe</div>
</div></td><td>
<div class="element embedding">
<div class="info">
<h3><canvas></h3>
<p>Bitmap which is editable by client side scripts.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/canvas">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">canvas</div>
</div></td><td>
<div class="element embedding">
<div class="info">
<h3><track></h3>
<p>Specifies external timing track for media elements.</p> <ul class="links"><li><a href="http://www.w3.org/TR/html5/the-iframe-element.html#the-track-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">track</div>
</div></td><td>
<div class="element embedding">
<div class="info">
<h3><audio></h3>
<p>Audio file.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/audio">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-iframe-element.html#the-audio-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">audio</div>
</div></td><td>
<div class="element embedding">
<div class="info">
<h3><video></h3>
<p>Video.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/video">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-iframe-element.html#the-video-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">video</div>
</div></td></tr>
</tbody></table>
<ul id="legend">
<li class="root"><div class="icon"><!-- --></div>Root element 根元素</li>
<li class="text"><div class="icon"><!-- --></div>Text-level semantics 文本语义</li>
<li class="form"><div class="icon"><!-- --></div>Forms 表单</li>
<li class="table"><div class="icon"><!-- --></div>Tabular data 表格数据</li>
<li class="document"><div class="icon"><!-- --></div>Metadata and scripting 元数据脚本</li>
<li class="grouping"><div class="icon"><!-- --></div>Grouping content 分组内容</li>
<li class="sections"><div class="icon"><!-- --></div>Document sections 文档 块</li>
<li class="interactive"><div class="icon"><!-- --></div>Interactive elements 互动元素</li>
<li class="embedding"><div class="icon"><!-- --></div>Embedding content 嵌入内容</li>
</ul>
</div>
</body>
</html>
类似资料：