HTML 结构-CSDN博客

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 attribute present)

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(>=)

例如：




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>导航部分