div
div标签用于组合其他HTML元素，本身无实在意义。常用于页面的布局，比如一个展开式的广告页面框架大致如下：
<body>
<div id="wrap-container">
<div id="collapsed-container"></div>
<div id="expanded-container"></div>
</div>
</body>
h1~h6, p, span, strong, em...
此类标签用于设置文本，常见的使用方式是填充段落，比如弹出的legal框文字HTML结构如下:
<div id="legal-window">
<h4>LEGAL</h4>
<img id="legal-close" src="img/embed/legal-close.png" alt="close window">
<p>*Requires a system with Intel<sup>®</sup> Turbo Boost Technology. Intel<sup>®</sup> Turbo Boost Technology and Intel<sup>®</sup> Turbo Boost Technology 2.0 are only available on select Intel<sup>®</sup> processors. Consult your PC manufacturer. Performance varies depending on hardware, software, and system configuration. For more information, visit http://www.intel.com/go/turbo. Copyright © 2014 Intel Corporation. All rights reserved. Intel, the Intel logo, Intel Core, Look Inside, Intel Inside, and Pentium are trademarks of Intel Corporation in the U.S. and/or other countries. Other names and brands may be claimed as the property of others.</p>
</div>
ul, li, ol, dl, dt, dd
此类标签用于设置带有列表内容的，比如导航栏的下拉菜单，多视频的缩略图等：
<ul class="nav-tools-list">
<li>
<div>
<img src="shoppingtools-icon-1.png" alt="">
<span>Build & Price</span>
</div>
</li>
<li>
<div>
<img src="shoppingtools-icon-2.png" alt="">
<span>Incentives & Offers</span>
</div>
</li>
<li>
<div>
<img src="shoppingtools-icon-3.png" alt="">
<span>Request a Local Quote</span>
</div>
</li>
<li>
<div>
<img src="shoppingtools-icon-4.png" alt="">
<span>Search Dealer Inventory</span>
</div>
</li>
</ul>
form表单相关
页面中涉及到表单时候，需要使用到form相关标签：
<form name="frm-sample" class="frm-sample" action="try" method="post">
<input type="text" class="form-control" placeholder="Name">
<div id="status-message"></div>
<div id="sample-captcha"></div>
<a id="check-is-filled" class="info-btn">Check if visualCaptcha is filled</a>
<button type="submit" name="submit-bt" class="submit">Submit form</button>
</form>
table表格相关
页面中涉及到table结构，需要使用到table相关标签:
<talbe></talbe>
img, canvas
用于图像显示。一般不直接操作img,canvas元素，而是在它的外层包裹一层父级元素（可以为span,div等)，对父级元素进行操作：
<div class="preload" data-src="CheddarBacon.png">
<img src="CheddarBacon.png" alt="">
</div>
<!-- or -->
<div id="sprite-car" class="cw-sprite sprite-car" cw-interval="30" cw-loops="1" cw-auto-play="false" cw-texture="images/sprites/expanded/car-texture.png" cw-mapper="car">
<canvas class="cw-renderer" width="460" height="130"></canvas>
</div>
a
a标签用于打开链接，发送邮件，段落跳转等功能。使用时需要注意阻止掉标签的默认事件。链接跳转，常见的关于分享按钮的HTML结构如下：
<div id="shareBox">
<ul>
<li id="facebook">
<a target="_blank" rel="nofollow" data-shareWay="facebook">
<img alt="Post on Facebook" src="img/embed/f4Icon3.png" alt="Facebook" />
</a>
</li>
<li id="twitter">
<a target="_blank" rel="nofollow" data-shareWay="twitter">
<img alt="Tweet this" src="img/embed/f4Icon4.png" />
</a>
</li>
<li id="pinterest">
<a data-pin-do="buttonPin" data-pin-config="none" target="_blank" rel="nofollow" data-shareWay="pinterest">
<img alt="Pin it" src="img/embed/f4Icon5.png" />
</a>
</li>
<li id="email">
<a target="_blank" rel="nofollow" data-shareWay="email">
<img src="img/embed/f4Icon6.png" />
</a>
</li>
</ul>
<p></p>
</div>
发送邮件的代码片段如下：
<div class="button">
<a class="mail" data-img="mail.png" href="mailto:[email protected]?subject=xxx&body=xxx"></a>
</div>
段落跳转代码片段如下：
<div id="html5"></div>
<a name="user-content-html5" href="#html5" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>
HTML5标签大全
| Tag | Description |
|---|---|
| <!--...--> | Defines a comment |
| <!DOCTYPE> | Defines the document type |
| <a> | Defines a hyperlink |
| <abbr> | Defines an abbreviation or an acronym |
| <acronym> | Not supported in HTML5. Use <abbr> instead. Defines an acronym |
| <address> | Defines contact information for the author/owner of a document |
| <applet> | Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet |
| <area> | Defines an area inside an image map |
| <article> | Defines an article |
| <aside> | Defines content aside from the page content |
| <audio> | Defines embedded sound content |
| <b> | Defines bold text |
| <base> | Specifies the base URL/target for all relative URLs in a document |
| <basefont> | Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <bdo> | Overrides the current text direction |
| <big> | Not supported in HTML5. Use CSS instead. Defines big text |
| <blockquote> | Defines a section that is quoted from another source |
| <body> | Defines the document's body |
| <br> | Defines a single line break |
| <button> | Defines a clickable button |
| <canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
| <caption> | Defines a table caption |
| <center> | Not supported in HTML5. Use CSS instead. Defines centered text |
| <cite> | Defines the title of a work |
| <code> | Defines a piece of computer code |
| <col> | Specifies column properties for each column within a<colgroup> element |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <data> | Adds a machine-readable translation of a given content |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <dd> | Defines a description/value of a term in a description list |
| <del> | Defines text that has been deleted from a document |
| <details> | Defines additional details that the user can view or hide |
| <dfn> | Specifies a term that is going to be defined within the content |
| <dialog> | Defines a dialog box or window |
| <dir> | Not supported in HTML5. Use <ul> instead. Defines a directory list |
| <div> | Defines a section in a document |
| <dl> | Defines a description list |
| <dt> | Defines a term/name in a description list |
| <em> | Defines emphasized text |
| <embed> | Defines a container for an external application |
| <fieldset> | Groups related elements in a form |
| <figcaption> | Defines a caption for a<figure> element |
| <figure> | Specifies self-contained content |
| <font> | Not supported in HTML5. Use CSS instead. Defines font, color, and size for text |
| <footer> | Defines a footer for a document or section |
| <form> | Defines an HTML form for user input |
| <frame> | Not supported in HTML5. Defines a window (a frame) in a frameset |
| <frameset> | Not supported in HTML5. Defines a set of frames |
| <h1> to <h6> | Defines HTML headings |
| <head> | Contains metadata/information for the document |
| <header> | Defines a header for a document or section |
| <hr> | Defines a thematic change in the content |
| <HTML> | Defines the root of an HTML document |
| <i> | Defines a part of text in an alternate voice or mood |
| <iframe> | Defines an inline frame |
| <img> | Defines an image |
| <input> | Defines an input control |
| <ins> | Defines a text that has been inserted into a document |
| <kbd> | Defines keyboard input |
| <label> | Defines a label for an<input> element |
| <legend> | Defines a caption for a<fieldset> element |
| <li> | Defines a list item |
| <link> | Defines the relationship between a document and an external resource (most used to link to style sheets) |
| <main> | Specifies the main content of a document |
| <map> | Defines an image map |
| <mark> | Defines marked/highlighted text |
| <meta> | Defines metadata about an HTML document |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links |
| <noframes> | Not supported in HTML5. Defines an alternate content for users that do not support frames |
| <noscript> | Defines an alternate content for users that do not support client-side scripts |
| <object> | Defines a container for an external application |
| <ol> | Defines an ordered list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <output> | Defines the result of a calculation |
| <p> | Defines a paragraph |
| <param> | Defines a parameter for an object |
| <picture> | Defines a container for multiple image resources |
| <pre> | Defines preformatted text |
| <progress> | Represents the progress of a task |
| <q> | Defines a short quotation |
| <rp> | Defines what to show in browsers that do not support Ruby annotations |
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
| <Ruby> | Defines a Ruby annotation (for East Asian typography) |
| <s> | Defines text that is no longer correct |
| <samp> | Defines sample output from a computer program |
| <script> | Defines a client-side script |
| <section> | Defines a section in a document |
| <select> | Defines a drop-down list |
| <small> | Defines smaller text |
| <source> | Defines multiple media resources for media elements (<video> and <audio>) |
| <span> | Defines a section in a document |
| <strike> | Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text |
| <strong> | Defines important text |
| <style> | Defines style information for a document |
| <sub> | Defines subscripted text |
| <summary> | Defines a visible heading for a<details> element |
| <sup> | Defines superscripted text |
| <svg> | Defines a container for SVG graphics |
| <table> | Defines a table |
| <tbody> | Groups the body content in a table |
| <td> | Defines a cell in a table |
| <template> | Defines a container for content that should be hidden when the page loads |
| <textarea> | Defines a multiline input control (text area) |
| <tfoot> | Groups the footer content in a table |
| <th> | Defines a header cell in a table |
| <thead> | Groups the header content in a table |
| <time> | Defines a specific time (or datetime) |
| <title> | Defines a title for the document |
| <tr> | Defines a row in a table |
| <track> | Defines text tracks for media elements (<video> and <audio>) |
| <tt> | Not supported in HTML5. Use CSS instead. Defines teletype text |
| <u> | Defines some text that is unarticulated and styled differently from normal text |
| <ul> | Defines an unordered list |
| <var> | Defines a variable |
| <video> | Defines embedded video content |
| <wbr> | Defines a possible line-break |
下一节：语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。