HTML 结构

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

例如：

<!--[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实体。它们都不是空白！&nbsp;在所有的浏览器中都有一个正常的space；其他的几种spaces(&zwnj;, &thinsp;, &ensp;, and &emsp;)在不同的浏览器中表现不同。

 

posted @ 2012-01-31 18:04  hlily  阅读(691)  评论(1)  编辑  收藏  举报