pre:来自书《Pro Html5 and Css3 Design Patterns 》的第2章 HTML Design Patterns, 不敢称为“设计模式”，尝试着用“结构”这个轻一些的词吧。
HTML结构
| Container | Contents |
| <html> | <head> <body> |
| <head> | <title> & (<meta> | <link> | <object> | <script> | <style> | <base> ) |
| <body> | <noscript> <div> |
| <noscript> | inline | block |
| <article> | inline | block |
| <section> | inline | block |
| <nav> | inline | block |
| <div> | inline | block |
| <h1> | inline |
| <p> | inline |
| <ol> or <ul> | <li> |
| <li> | inline | block |
| <dl> | <dt> <dd> |
| <dt> | inline |
| <dd> | inline | block |
| <table> | <caption> <colgroup> <thead> <tfoot> <tbody> |
| <caption> | inline |
| <colgroup> | <col> |
| <col> | null |
| <thead> | <tr> |
| <tfoot> | <tr> |
| <tbody> | <tr> |
| <tr> | <th> <td> |
| <th> | inline | block |
| <td> | inline | block |
| <form> | inline | block (excluding <form>) |
| <fieldset> | inline | block (excluding <form>) |
| <label> | inline (excluding <label>) |
| <input> | null |
| <textarea> | text |
| <select> | <optgroup> | <option> |
| <optgroup> | <option> |
| <option> | text |
| <button> | inline | block (excluding <a>, <form>, controls) |
| <address> | inline |
| <a> | inline (excluding <a>) |
| <img> | null |
| <canvas> | null |
| <audio> | null |
| <video> | null |
| <map> | <area> |
| <area> | null |
| <object> | <param> | inline | block |
| <param> | null |
| <br> | null |
| null |
没有内容，简单的用闭合标签 (e.g., <br />) |
| text | 文本 |
| block | 包括以下三种块元素 |
| structural block | <ol> <ul> <dl> <table> <tr> <thead> <tfoot> <tbody> <colgroup> <col> |
| multi-purpose block | <div> <li> <dd> <td> <th> <form> <noscript> |
| terminal block | <h1> <p> <dt> <caption> <address> <blockquote> |
| inline | 包括一下三种主要的和六种次要的行内元素 |
| inline-semantic | |
| importance | <span> <em> <strong> |
| phrase | <a> <cite> <code> <kbd> <samp> <var> |
| word | <abbr> <dfn> <cite> |
| char | <sub> <sup> |
| inline-flow | <br> <bdo> |
| inline-block | |
| replaced | <img> <object> <embed> <iframe> <audio> <video> <canvas> <svg> |
| controls |
<input> <textarea> <select> <button> <label> <video> (with controls |
HTML结构
HTML把元素组织成三个类别：结构元素、块元素、行内元素
HTML的核心结构
<!DOCTYPE DOCUMENT_TYPE_DEFINITION_USED_FOR_VALIDATION >
<html>
<head> METADATA </head>
<body> CONTENT </body>
</html>
XHTML
- HTML（HTML5）是大多数作者建议的格式
- XHTML（XHTML5）是一种XML的应用
一个XHTML5页面本质上就是一个简单的HTML5页面包含<!DOCTYPE html>的HTML文档类型声明。
DOCTYPE
HTML5的<!DOCTYPE> 是 <!DOCTYPE html>，使用它的好处是现在所有的浏览器（IE, FF, Opera, Safari）都支持它，并转换到标准模式，不管浏览器本身有没有实现对HTML5的支持。
Header Elements头元素
- 涉及 <head>中的<link>, <style>, <title>, <meta>, <base> 这些元素<script>
- link中的media属性：media 属性可以用来指定CSS用于的设备，all-->所有设备; print-->只是打印设备（比如，去掉背景色，恢复成白底黑字，去掉导航等等）；handheld-->手持设备（移动设备）
例如：
<head>
<base href="http://www.example.com/">
<link rel="stylesheet" href="FILE.CSS" media="ALL_PRINT_HANDHELD" type="text/css" />
<link rel="alternate stylesheet" type="text/css" title="NAME_TO_SHOW_USER" href="FILE.css" />
<style type="text/css" media="all"> STYLES </style>
</head>
Conditional Style Sheet条件 样式
- 条件样式一般写在最后，所以能覆盖前面的样式
- 条件样式只对IE浏览器适用
- 条件样式lte--->less than or equals(<=);lt--->less than(<);gt---->greater than(>);gte---->greater than or equals(>=)
例如：
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css" media="all" type="text/css" />
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" href="ie.css" media="all" type="text/css" />
<![endif]-->
Structural Block Elements 结构块元素
- 主要有四种结构元素<ol>，<ul>，<dl>，<table>，它们有结构信息，但是基本没有语义信息
- <ol>创建有序列表，包括一个或多个<li>列表
- <ul>创建无序列表，包括一个或多个<li>列表
- <dl>创建定义列表，包括一个或多个<dt>,一个或多个<dd>
- <table>创建表格，包括行<tr>和行中的元细胞(<th>和<td>);也可以选择性的包括行组：一个表头<thead>,一个表尾<tfoot>,一个或多个表体<tbody>;可以选择性的包含一个或多个列组<colgroup>，<colgroup>包含一个或多个<col>
- <div>多用途的块元素
- <article>代表页面中独立的或可重复使用的部分。比如杂志或者新闻的一个文章，博客的一个条目等。
- <section>代表内容的专题部分，通常有标题。例子有章节、论文的不同部分。一个网站的主页可以分为几个sections比如，介绍部分、新闻部分和联系人信息部分。
- <nav>导航部分
Terminal Block Elements终止块元素
- <h1>, <h2>, <h3>, <h4>, <h5>, 和 <h6>创建不同大小的标题
- <p> 创建段落
- <blockquote> 创建引用
- <dt>创建一个定义项
- <address> 创建一个文本本身的联系人记录。HTML规范允许包含任何类型的内容，如街道地址，e-mail地址，电话号码等。
- <caption> 创建一个表格标题
Multi-purpose Block Elements多用途块元素
- <div>
- <li>
- <dd>
- <td>和<th>
- <form>
- <noscript>当浏览器不支持脚本时，浏览器显示其中的部分。可能包含简单的内嵌内容，或者包含一个全结构化的内容。
Inline Elements内联元素
- 重要的有<span><em><strong>
- 流控制<br />
- 替代元素<img><object>
- 控件<input>, <textarea>,<select>, 和 <button>
Class and ID Attributes （Class和ID属性）
- 一个属性内部中不能有空格，用“_”或者“-”来连接前后两部分
- 多个属性之间用空格
- class和id名称都应该有语义信息
HTML Whitespace（HTML空格）
HTML提供了5种不同宽度的space实体。它们都不是空白！ 在所有的浏览器中都有一个正常的space；其他的几种spaces(‌,  ,  , and  )在不同的浏览器中表现不同。