HTML常用标签

div

div标签用于组合其他HTML元素，本身无实在意义。常用于页面的布局，比如一个展开式的广告页面框架大致如下：

  1. <body>
  2.     <div id="wrap-container">
  3.         <div id="collapsed-container"></div>
  4.         <div id="expanded-container"></div>
  5.     </div>
  6. </body>

h1~h6, p, span, strong, em…

此类标签用于设置文本，常见的使用方式是填充段落，比如弹出的legal框文字HTML结构如下:

  1. <div id="legal-window">
  2.     <h4>LEGAL</h4>
  3.     <img id="legal-close" src="img/embed/legal-close.png" alt="close window">
  4.     <p>*Requires a system with Intel<sup>&reg;</sup> Turbo Boost Technology. Intel<sup>&reg;</sup> Turbo Boost Technology and Intel<sup>&reg;</sup> Turbo Boost Technology 2.0 are only available on select Intel<sup>&reg;</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 &copy; 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>
  5. </div>

ul, li, ol, dl, dt, dd

此类标签用于设置带有列表内容的，比如导航栏的下拉菜单，多视频的缩略图等：

  1. <ul class="nav-tools-list">
  2.     <li>
  3.         <div>
  4.             <img src="shoppingtools-icon-1.png" alt="">
  5.             <span>Build & Price</span>
  6.         </div>
  7.     </li>
  8.     <li>
  9.         <div>
  10.             <img src="shoppingtools-icon-2.png" alt="">
  11.             <span>Incentives & Offers</span>
  12.         </div>
  13.     </li>
  14.     <li>
  15.         <div>
  16.             <img src="shoppingtools-icon-3.png" alt="">
  17.             <span>Request a Local Quote</span>
  18.         </div>
  19.     </li>
  20.     <li>
  21.         <div>
  22.             <img src="shoppingtools-icon-4.png" alt="">
  23.             <span>Search Dealer Inventory</span>
  24.         </div>
  25.     </li>
  26. </ul>

form表单相关

页面中涉及到表单时候，需要使用到form相关标签：

  1. <form name="frm-sample" class="frm-sample" action="try" method="post">
  2.     <input type="text" class="form-control" placeholder="Name">
  3.     <div id="status-message"></div>
  4.     <div id="sample-captcha"></div>
  5.     <a id="check-is-filled" class="info-btn">Check if visualCaptcha is filled</a>
  6.     <button type="submit" name="submit-bt" class="submit">Submit form</button>
  7. </form>

table表格相关

页面中涉及到table结构，需要使用到table相关标签:

  1. <talbe></talbe>

img, canvas

用于图像显示。一般不直接操作img,canvas元素，而是在它的外层包裹一层父级元素（可以为span,div等)，对父级元素进行操作：

  1. <div class="preload" data-src="CheddarBacon.png">
  2.     <img src="CheddarBacon.png" alt="">
  3. </div>
  4. <!-- or -->
  5. <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">
  6.     <canvas class="cw-renderer" width="460" height="130"></canvas>
  7. </div>

a

a标签用于打开链接，发送邮件，段落跳转等功能。使用时需要注意阻止掉标签的默认事件。

链接跳转，常见的关于分享按钮的HTML结构如下：

  1. <div id="shareBox">
  2.     <ul>
  3.         <li id="facebook">
  4.             <a target="_blank" rel="nofollow" data-shareWay="facebook">
  5.                 <img alt="Post on Facebook" src="img/embed/f4Icon3.png" alt="Facebook" />
  6.             </a>
  7.         </li>
  8.         <li id="twitter">
  9.             <a target="_blank" rel="nofollow" data-shareWay="twitter">
  10.                 <img alt="Tweet this" src="img/embed/f4Icon4.png" />
  11.             </a>
  12.         </li>
  13.         <li id="pinterest">
  14.             <a data-pin-do="buttonPin" data-pin-config="none" target="_blank" rel="nofollow" data-shareWay="pinterest">
  15.                 <img alt="Pin it" src="img/embed/f4Icon5.png" />
  16.             </a>
  17.         </li>
  18.         <li id="email">
  19.             <a target="_blank" rel="nofollow" data-shareWay="email">
  20.                 <img src="img/embed/f4Icon6.png" />
  21.             </a>
  22.         </li>
  23.     </ul>
  24.     <p></p>
  25. </div>

发送邮件的代码片段如下：

  1. <div class="button">
  2.   <a class="mail" data-img="mail.png" href="mailto:example@gmail.com?subject=xxx&body=xxx"></a>
  3. </div>

段落跳转代码片段如下：

  1. <div id="html5"></div>
  2. <a name="user-content-html5" href="#html5" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>

HTML5标签查询

W3School: 点击查询

html5-cheat-sheet

原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/common-tag.html