这篇文章主要介绍和分析《疯狂HTML5/CSS3/JavaScript讲义》这本书中关于HTML5新增的功能部分。
第一章 HTML5简介
一、HTML5的优势
1，解决了跨浏览器的问题，目前各种主流浏览器如Internet Explorer、Chrome、Firefox、Opera、Safari都对HTML5表现出极大的热情。
2，部分代替了原来的JavaScript，HTML5增加了一些非常实用的功能，这些功能可以部分代替JavaScript，而这些功能只要通过标签增加一些属性即可。
3，更加明确的语义支持，在HTML5以前，如果要表达一个文档结构，可能只能通过<div.../>元素来实现。但是如今为页面布局提供 更明确的语义元素。
二、HTML5的基本结构和语法变化
1，HTML5 DTD(是一套关于标记符的语法规则)定义：<!DOCTYPE html>。
2、HTML5的语法变化，HTML5更宽容了，它就是最大限度地“兼容”互联网上随处可见的不规范页面。
（1）标签不再区分大小写
（2）元素可以省略结束标签
（3）允许省略属性值的属性
（4）允许属性值不适用引号
第二章HTML5的常用元素与属性
一、HTML5保留的常用元素
1、<!--...--> <html> <head> <title> <body> <style> <h1>到<h6> <p> <br> <hr> <div> <span>
2、文本格式化元素，<b>粗体文本 <i>斜体文本 <em>强调文本 <strong>粗体文本 与<b>标签的作用和用法基本相同 <sup>上标文本 <sub>下标文本 <bdo>文本显示方向
3、语义相关元素，<abbr>用于表示一个缩写 <address>表示一个地址 <blockquote>定义一段长的引用文本 <q>定义一段短的引用文本 <cite>表示作品的标题
<code>表示一段计算机代码 <dfn>定义一个专业术语 <del>定义文档中被删除的文本 <ins>定义文档中插入的文本 <pre>表示该元素所包含的文本已经进行了“预格式化” <samp>定义示范文本内容 <kbd>定义键盘文本 <var>表示一个变量
4、超链接和锚点，<href>指定超链接所关联的另一个资源 <target>指定使用框架集中的哪个框架来装载另一个资源 <media>指定目标URL所引用的媒体类型。
5、列表相关元素,<ul>定义无序列表 <ol>定义有序列表 <li>定义列表项目 <dl>也用于定义列表 <dt>定义标题列表项 <dd>定义普通列表项
6、图像相关元素 HTML5保留了<img.../>元素在页面中图像 <map>定义图片映射 <area>用于定义图片映射的内部区域。
7、表格相关元素<table>用于定义表格 <caption>定义表格标题 <tr>定义表格行 <td>定义单元格 <th>定义表格页眉的单元格 <tbody>定义表格的主体 <thead>定义表格头 <tfoot>定义表格脚 <col>用于为表格中的一个或多个列指定属性值 <colgroug>用于为表格中的一个或多个列指定属性值
8、框架相关元素 HTML5不在推荐在页面中使用框架集因此HTML5删除了<frameset.../>\<frame.../>和<noframes.../>这三个标签，但依然保留了一个与框架祥光的额元素：<iframe>元素用于生成一个内联框架。
二、HTML5新增的通用属性
1、contentEditable属性 如果该属性设为true，那么浏览器将会允许开发者直接编辑该HTML元素里的内容，此处的HTML元素并不是指那些原本就允许用户输入的表单元素，如文本框，文本域之类的，而是可以把<table.../>、<div.../>等元素变成可编辑状态。
2、designMode属性 相当于一个全局的contentEditable属性，如果把这个页面的designMode属性设为on时，该页面可支持contentEditable属性的元素都变成可编辑的状态，designMode属性默认为off。
3、hidden属性 支持true、false两个属性值，一旦某个HTML元素的hidden设为true，就一位着通知浏览器不显示该组件，浏览器也不会保留该组件所占用的空间。
4、spellcheck属性 苏果设置spellcheck=“true”浏览器将会负责对用户输入的文本内容执行输入检查，如果检查不通过浏览器会对拼错的单词进行提示。
三、HTML5新增的常用元素
1、文档结构元素 <article>用于代表页面上独立、完整的一篇文章 <section>该元素用于对页面的内容进行分块 <nav>用于定义页面上的“导航条” <aside>专门用于定义当前页面或当前文章的附属信息 <hgroup>用于组织多个<h1.../>到<h6.../>这样的标题元素 <footer>该元素主要用于为<article.../>元素定义"脚注"部分 <figue.../>用于表示一块独立的“图片区域”，该元素内部可包含一个或者多个<img.../>元素所代表的图片 <figcaption>该元素通常放在<figure.../>内部，用于定义"图片区域"的标题。
2、语义相关元素 <mark>用于显示HTML页面中需要重点“关注”的内容 <time>用来显示呗标注的内容的日期、时间或者日期时间。
注意：只有Chrome支持<details.../><semmary.../>元素
3、两个特殊功能的元素<meter>用于一个一直最大值和最小值的技术仪表 <progress>用于表示一个进度条
四、HTML5头部和元信息
<script> <style> <link> <title> <base>用于指定该页面中所有连接的基准链接 <meta>用于定义HTML页面的元数据
五、HTML5新增的拖放API
HTML新增了关于拖放的API，通过拖放API可以让HTML页面的任意元素都变成可拖动的，通过使用拖放机制可以开发出更有好的人机交互界面。
注：这篇文章主要是对这些章节进行了分类和归纳，如果您需要更加详细的信息，可以查阅《疯狂HTML5/CSS3/JavaScript讲义》这本书，或登陆登陆：http://www.crazyit.org
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
