HTML5相比较以前的HTML的语法变化：

一、标签不再区分大小写。例如：<p>标题</P> 是合法的

二、元素可以省略结束标签。

1、空元素语法的元素：area、base、br、col、command、embed、hr、img、input、keygen、link、mata、param、source、wbr。空元素标签不允许将开始标签和结束标签分开写，例如<img.../>不能写成<img src="a.gif" alt="a"></img>的形式，但是HTML5不要求遵循XML规范，因此<img.../>标签可以写成<img src="a.gif" alt="a">.

2、可以省略结束标签的元素：colgroup、dt、dd、li、optgroup、option、p、rt、rp、thread、tbody、tffot、tr、td、th。

3、可以省略全部标签的元素：html、head、body、tbody。

三、允许省略属性值的属性：checked、readonly、disabled、selected、defer、ismap、nohref、noshade、nowrap、multiple、noresize。

四、允许属性值不引用引号（但是容易引起浏览器误会的属性值，还是需要使用引号）。

HTML5的常用元素与属性：

一、保留的基本元素：

是HTML5注释；

<html>是HTML5文档的根元素，允许完全省略；

<head>是用于定义HTML5文档的页面头部分，允许完全省略；

<title>用于定义HTML5文档的页面标题；

<body>用于定义HTML5文档的页面主题部分，该标签可以指定id、class、style等核心属性，还可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件属性，这些属性用于指定JavaScript脚本；

<style>用于引入样式定义，会用到CSS；

<h1>到<h6>用于定义标题一到标题六；

<p>定义段落，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。

<br>表示插入一个换行，该标签可以指定id、class、style等核心属性；

<hr>定义水平线，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性，html5中<hr/>还代表了主题结束的语义；

<div>定义文档中的节，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性；

<span>与<div>基本相似，区别是该定义的节默认不会换行，属性和<div>一样；

其中<span.../>元素和<p.../>元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等内容，<p.../>元素可以包含<span.../>元素，但是反过来不可以；<div.../>元素出来可以包含上面这些内容之外（包括<p.../>和<span.../>），还可以包含<h1.../>到<h6.../>、<form.../>、<table.../>、列表元素和<div.../>；

二、文本格式化元素：

<b>定义粗体文本，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性；

<i>定义斜体文本，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性；

<em>定义强调文本，实际效果与斜体文本差不多，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性；

<strong>定义粗体文本，与<b>标签的作用和用法基本相同；

<small>定义小号字体文本，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性；

<sup>定义上标文本，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性；

<sub>定义下标文本，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性；

<bdo>定义文本的相识方向，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性，还可以指定dir属性值，该属性值只能是ltr或者rtl；

三、超链接和锚点

<a.../>元素是定义超链接的元素，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性，还可以以下三个重要属性：

href：指定超链接所关联的另一个资源（网址）；

target：指定使用框架集中的哪一个框架来装载另一个资源，该属性的属性值可以是_self、_blank、_top、_parent四个值，分别代表使用自身、新窗口、顶层框架、父框架来装载新资源；

media：指定目标URL所引用的媒体类型。默认值为all，只有当指定了href属性时该属性才有效。

<a.../>标签还可以用于生成一个命名锚点，命名锚点用于在HTML页面中生成一个定位点，这样允许超链接直接链接到指定页面的该定位点。插入定位锚点需要指定name属性，name属性值就算是该命名锚点的名称。

例如：<a name="test"></a>，即生成一个命名锚点，该命名锚点在浏览器中不会显示任何内容，可以使用超链接定位到该锚点。

例如：<a href="anchor.html#test" target="_blank" rel="external nofollow" >定位到test锚点</a>，锚点名和URL资源之间用#隔开。

四、列表相关元素

<ul>定义无序列表，该元素可以指定id、style、class等属性，还可以指定onclick等事件属性，该元素只能包含<li.../>子元素；

<ol>定义有序列表，该元素可以指定id、style、class等属性，还可以指定onclick等事件属性，该元素只能包含<li.../>子元素；

<li>定义列表项目，该元素可以指定id、style、class等属性，还可以指定onclick等事件属性，该元素能包含与<div.../>完全类似的内容，因此可以包含较多类型的子元素；

<dl>也用于定义列表，该元素只能包含<dt.../>和<dd.../>两种子元素，该元素可以指定is、style、class等属性，还可以指定onclick等事件属性，该元素只能包含<li.../>子元素；

<dt>定义标题列表项，该元素可以指定id、style、class等属性，还可以指定onclick等事件属性，该元素只能包含<li.../>子元素，该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等；

<dd>定义普通列表项，该元素可以指定id、style、class等属性，还可以指定onclick等事件属性，该元素里可以包含与<div.../>完全类似的内容，英雌可以包含较多类型的子元素；

五、图像相关元素

<img.../>元素在页面中定义图像，这个元素只能是一个空元素，他不可以包含任何内容，该元素可以指定id、style、class等属性，还可以指定onclick等事件属性，不仅如此，使用该元素必须指定如下两个属性：

src：指定图片文件所在的位置，可以是相对路径，也可以是绝对路径；

alt：指定一段文本，改文本将作为该图片的提示信息；

除此以外，该元素还可以指定如下两个可选属性：

height：指定图片的高度，可以是百分比，也可以是像素值；

width：指定图片的宽度，可以是百分比，也可以是像素值；

除此以外，与图片相关的还有如下两个标签：

<map>：用于定义图片映射，该元素主要可以包含一个或多个<area.../>子元素，每个<area.../>子元素定义一个区域，不同区域可链接到不同的URL；

<area.../>：用于定义图片映射的内部区域，该元素只能是一个空元素，该元素除了可以指定id、style、class等属性外，还可以指定onclick等事件属性，还可以指定onfocus、onblur等焦点相关属性。还可以指定shape（形状，有rect、circle、ploy）、coords（指定坐标值，确定区域的位置）、href（指定区域所连接的资源）、alt（指定一段文本，作为该图片的提示信息）、targer、media等属性；

HTML5学习笔记第一天HTML5相比较以前的HTML的语法变化：HTML5的常用元素与属性： <figcaption.../>通常放在<figure.../>内部，用于定义“图片区域”的标题；HTML5的绘图支持HTML5的多媒体支持级联样式与CSS选择器

六、表格相关元素

<table>用于定义表格，<table.../>只能包含0或1个<caption.../>子元素（定义表格标题），0或1个<thead.../>子元素（定义表格头），0或1个<tfoot.../>子元素（定义表格脚），多个<tr.../>子元素（定义表格行），多个<tbody>子元素（定义表格体），指定id、style、class等属性外，还可以指定onclick等事件属性，除此以外，还可以指定以下几个属性：

cellpadding：指定单元格内容和单元格边框之间的间距，可以是像素，也可以是百分比；

cellspacing：指定单元格之间的间距，可以是像素，也可以是百分比；

width：指定表格的宽度可以是像素，也可以是百分比；

<caption>：用于定义表格标题，该元素只能包含文本、图片、超链接、文本格式化元素和表单控件元素；

<tr>：定义表格行，该元素只能包含<td.../>或者<th.../>两种元素，该元素可以指定id、style、class等属性，还可以指定onclick等事件属性；

<td>定义单元格，该元素和<div.../>元素一样，可以包含各种类型的子元素，包括在<td.../>元素里包含<table.../>子元素（再插入一个表格），可以指定id、style、class等属性外，还可以指定onclick等事件属性，除此以外，还有如下几个属性：

colspan：指定该单元格跨多少列，该属性值就是一个简单地数字；

rowsapn：指定该单元格可以横跨的行数；

height：指定该单元格的高度，可以是像素值，也可以是百分比；

width：指定该单元格的宽度，可以是像素值，也可以是百分比；

<th>：定义表格页眉的单元格，和<td>标签的用法几乎完全一样；

<tbody>：定义表格的主体，该元素只能包含<tr.../>元素，可以指定id、style、class等属性，还可以指定onclick等事件属性；

<thead>：定义表格头，用法与<tbody.../>基本相似；

<tfoot>：定义表格脚，用法与<tbody.../>基本相似；

七、框架相关元素

HTML5不再推荐在页面中使用框架集，保留了一个与框架相关的元素<iframe.../>,它可以在普通HTML页面中使用，该元素用于在普通HTML页面中生成一个内联框架，可以直接在HTML页面的任何位置，它除了可以指定id、style、class等核心属性之外，还可以指定属性src，该属性指定一个URL，指定该iframe将装载哪个页面；八、文档结构元素

<article>：该元素用于代表页面上独立、完整的一篇“文章”；

<header.../>定义文章“标题”部分；

<footer.../>定义文章“脚注”部分；

<section.../>把文章内容分成几个“段落”；

<article还可以内部嵌套多个<article.../>作为它的附属文章；

<section>：该元素用于对页面内容进行分块，通常也可由标题和内容组成，它的一些规则如下：

建议包含一个标题（也就是<h1.../>到<h6.../>元素定义的标题）；

可以包含多个<article.../>元素，表示该“分块”内部包含多篇文章；

可以嵌套<section.../>元素，用于表示该“分块”包含多个“子分块”；

<nav>用于定义页面上的“导航条”，包括页面上方的“主导航条”、侧边的“边导航条”、页面内部的“页面导航”、页面下方的“底部导航”等。HTML5推荐将这些导航条链接分别放在相应的<nav.../>元素中进行管理；

<aside>：用于定义当前页面或当前文章的附属信息，推荐<aside.../>元素使用CSS渲染成侧边栏；

<header>：用于为<article.../>元素定义文章“头部”信息，它的内部既可以包含多个<h1>~<h6>这样的标题元素，也可以包含<hgroup.../>元素，还可以包含普通的<p.../>、<span.../>等元素；

<hgroup>：该元素用于组织多个<h1>~<h6>这样的标题元素，当<header.../>需要包含多个标题元素时，可以考虑使用<hgroup.../>把它们组成一组；

<footer>：用于为<article.../>元素定义“脚注”部分，包括文章的版权信息、作者授权等；

<figure.../>：用于表示一块独立的“图片区域”，可以包含多个<img.../>元素所代表的图片，除此之外，该元素内部还可以包含一个<figcaption.../>元素，用于定义该“图片区域”的标题；

<figcaption.../>通常放在<figure.../>内部，用于定义“图片区域”的标题；

九、语义相关元素

<mark>：用于显示重点“关注”的内容，可以指定id、style、class和hidden等通用属性，浏览器通常会用黄色显示<mark>标注的内容；

<time>：用来显示被标注内容是日期、时间或者日期时间；

只有Chrome支持<details.../>与<summary.../>元素。<deails.../>元素用于显示一段详细信息或某个主题的细节，通常会与<summary.../>元素结合使用，当把<summary.../>元素放在<details.../>内部时，<summary.../>元素表示用于为<details.../>定义摘要信息。

十、特殊功能元素

<meter>：用于表示一个已知最大值和最小值的计数仪表，可以指定id、style、class、hidden等通用属性。还可以指定value（仪表当前值）、min（仪表最小值）、max（仪表最大值）、low（仪表指定范围最小值，必须大于等于min属性值）、high（仪表指定范围最大值，必须小于max属性值）、optimum（仪表有效范围最佳值，如果大于high属性值，则意味着越大越好，如果小于low属性值，则意味着越小越好）；

<progress>：用于表示一个进度条，可以指定id、style、class、hidden、max、value；

十一、HTML5头部和元信息

<head.../>元素用于定义HTML文档头，他可以包含如下子元素：

<script>：用于包含JavaScript脚本；

<style>：用于定义内部CSS样式；

<link>：用于链接外部CSS样式等资源；

<title>：用于定义文档标题；

<base>：用于指定该页面中所有链接的基准链接，必须是空元素，可以指定id、href（指定所有链接的基准链接）、target（指定超链接默认在哪个窗口打开链接，属性值有_blank、_parent、_self和_top）；

<meta>：用于定义页面的元数据，属性有http-equiv（指定元信息的名称，具有特殊意义）、name（指定元信息的名称，可以随意指定，没有特殊意义）、content（指定元信息的值）；

十二、表单元素

<form.../>元素用于生成表单，该元素不会生成可视化部分，其他表单控件，如单行文本框、多行文本域、单选按钮、复选框等都必须放在<form.../>元素之内。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性，除此之外还可以指定如下几个属性：

action：指定当单机表单内的“确认”按钮时，该表单的内容将被提交到那个地址，该属性可以是绝对地址，也可以是相对地址，必填；

method：指定提交表单时发送何种类型的请求，可以是get或post，通常建议发送POST请求，属性必填；

enctype：指定对表单内容进行编码使用的字符集，通常有application/x-www-form-urlencoded（默认编码方式，它只处理表单控件里的value属性值，采用这种编码方式的表单会将表单控件里的值处理成URL编码方式）、multipart/form-data（以二进制流的方式处理表单数据，会把文件域指定文件的内容也封装到请求参数里，建议当需要通过表单上传问件事使用该属性值）、text/plain（当表单的action属性值为mailto:URL的形式时，使用这种编码比较方便，主要适用于直接通过表单发送邮件的方式）。<form.../>元素只是代表一种表单格式，不能生成任何可视化的内容，必须和其他表单控件结合使用。

当在<form.../>元素里定义一个或者多个表单控件时，一旦提交该表单，该表单控件将会转换成请求参数。关于表单控件的转换请求参数的规则如下：

每个有name属性的表单控件对应一个请求参数，没有name属性的表单控件不会生成请求参数；

如果多个表单控件有相同的name属性，则多个表单控件只会生成一个请求参数，只是该参数有多个值；

表单控件的name属性指定请求参数名，value属性指定请求参数值；

如果某个表单控件设置了disabled或disabled="disabled"属性，则该表单控件不再生成请求参数；

大部分表单控件都可以获得鼠标焦点，响应鼠标事件，因此它们可以指定onfocus、onblur属性，分别用于设置得到焦点、失去焦点的事件响应。这些表单控件都可以指定tabIndex属性，通过设置tabIndex的属性值为1,2,3,4等值，使得用户按Tab键实现焦点切换（切换顺序为1,2,3,4的顺序）。

十三、input元素

<input.../>元素是表单控件中功能最丰富的，如下：

单行文本框：指定<input.../>元素的type属性为text即可；

密码输入框：指定<input.../>元素的type属性为password即可；

隐藏域：指定<input.../>元素的type属性为hidden即可；

单选框：指定<input.../>元素的type属性为radio即可；

复选框：指定<input.../>元素的type属性为checkbox即可；

图像域：指定<input.../>元素的type属性为image即可，还可指定width和height属性；

文件上传域：指定<input.../>元素的type属性为file即可；

提交、重设、无动作按钮：分别指定<input.../>元素的type属性为submit、reset或button即可；

十四、label定义标签

label标签用于对其他可生成请求参数的表单控件进行说明，<label.../>元素不需要生成请求参数，因此不需要为它设置value属性值。

使用<label.../>标签可以通过点击标签自动将焦点转移到和标签相关的表单控件元素上，有如下两种关联表单控件的方式：

@1隐式使用for属性：指定<label.../>标签的for属性值，属性值为所关联的表单控件的id属性值；

@2显示关联：将普通文本、表单控件一起放在<label.../>元素内部即可，建议尽量少用显示关联；

十五、button定义按钮：内部可以包含普通文本框、文本格式化标签、图像等内容。

十六、列表框和下拉菜单：

<select.../>元素用于创建列表框或下拉菜单，该元素必须和<option.../>元素结合使用，每个<option.../>元素代表一个列表项或菜单项。<select.../>不能指定value属性，列表框或下拉菜单控件对应的参数值有<option.../>元素来生成，这些列表项或菜单项的value的值将作为该<select.../>元素所对应的请求参数值。可以指定id、style、class、onchange、disable、multiple、size(指定该列表框可同时显示多少个列表项，一旦指定该属性，<select.../>元素就会自动生成列表框)；

<option.../>：用于定义列表框选项或菜单项，该元素里只能包含文本内容作为该选项的文本；

<optgroup.../>：用于定义列表项或菜单项组，该元素里只能包含<option.../>元素，处于<optgroup.../>里的<option.../>就属于该组；

<option.../>的属性有：disable、selected、value；

<optgroup.../>的属性有：label（指定该选项组的标签，必填）、disable；

十七、textarea定义文本域

<textarea.../>元素用于生成多行文本域，可以指定的属性有：id、style、class、onclick、onselect（响应文本被选中）、onchange（响应文本被修改）、cols（文本域宽度，必填）、rows（文本域高度，必填）、disable（禁用文本域）、readonly（指定文本域只读）；

十八、HTML5为表单控件新增的属性

form属性：用于定义该表单控件所属的表单，该属性值应该是它所属表单的id，通过form属性，可以使得表单控件可以定义在<form.../>元素之外，从而提高代码的灵活性。

formaction属性：<input type="submit" .../>、<input type="image" .../>、<button type="submit" .../>都可以指定formaction，用于动态的让表单提交到不同的URL。

formxxx属性：<input type="submit" .../>、<input type="image" .../>、<button type="submit" .../>都可以指定formenctype（让按钮动态的改变表单的enctype属性）、formmethod（让按钮动态的设置表单以POST或GET方式提交）、formtarget（让按钮动态的改变表单的target属性）。

autofocus属性：党委某个表单增加该属性后，浏览器打开页面时该组件就会自动获得焦点。

placeholder属性：用于设置单行文本框、多行文本框里的对用户的提示信息；

list属性：list的属性值应该是一个<datalist.../>组件的id，list属性必须和<datalist.../>元素结合使用；

<datalist.../>：相当于一个看不见的<select.../>元素，用于生成一个隐形的下拉菜单，<datalist.../>所能包含的子元素与<select.../>元素完全相同，该元素用于与指定了list属性的<input.../>元素结合使用，当双击指定了list属性的文本框时，该文本框将会显示<datalist.../>生成的下拉菜单。

autocomplete属性：通过该属性设置用户能否看到list属性设置的下拉菜单，它的属性有：on（打开autocomplete，文本框下方会显示下拉菜单）、off（关闭autocomplete，文本框下方不会显示下拉菜单）。

十九、HTML5为input新增的type属性值

color：让<input.../>元素生成一个颜色选择器，该文本框的value为颜色的二进制值；

data：让<input.../>元素生成一个日期选择器；

time：让<input.../>元素生成一个时间选择器；

datatime：让<input.../>元素生成一个UTC日期、时间选择器；

datatime-loca：让<input.../>元素生成一个本地日期、时间选择器；

week：让<input.../>元素生成一个供用户选择第几周的文本框；

month：让<input.../>元素生成一个月份选择器；

email：让<input.../>元素生成一个E-mail输入框，浏览器会自动检查该文本框里输入的内容，如果不符合E-mail格式，浏览器将会不允许提交表单，并自动生成提示信息。当指定type="email"时，<input.../>元素可指定如下属性：multiple（该属性值可以是multiple或者省略，表示该文本框可以输入多个E-mail地址）；

tel：让<input.../>元素生成一个只能输入电话号码的文本框，但是浏览器不会检查它的格式；

url：让<input.../>元素生成一个URL输入框，浏览器会自动检查，如果不符合URL格式，浏览器将会不允许提交表单，并自动生成提示信息。

number：让<input.../>元素生成一个只能输入数字的文本框；

range：让<input.../>元素生成一个拖动条，通过拖动条使得用户只能输入指定范围、指定步长的值。当指定文本框的type="range"时，该文本框还可以指定以下3个属性：min（拖动条的最小值）、max（拖动条的最大值）、step（拖动条的步长）；

search：让<input.../>元素生成一个专门用于输入搜索关键字的文本框，与type="text"的文本框并没有多大区别；

二十、HTML5新增的表单控件

<output.../>：用于显示输出，必须属于某个表单，即要么定义在某个表单<form.../>内部，要么为它指定form属性。它的属性有：id、style、class、form、for（指定该元素将会显示哪个元素值，属性值应该是其他元素的id）；

二十一、FileList对象与File对象

HTML5为<input.../>元素中type="file"的标签增加了如下两个属性：

@1：accept：控制允许上传的文件类型，属性值为一个或多个MIME类型字符串，多个MIME之间用逗号隔开；

@2：multiple：设置是否允许选择多个文件上传；

JavaScript可以通过file属性访问访问type="file"的<input.../>元素生成的文件上传域内的所有的文件，该属性返回一个FIleList对象，FileList对象相当于一个数组，开发者可以使用类似于数组的方法来访问该数组内的每一个File对象。File对象时一个JavaScript对象，可通过该对象获取用户浏览的所有文件的信息。FIle对象包含如下常用属性：

name：返回该File对象对应的文件的文件名，不包括文件路径部分；

type：返回该File对象对应的文件的MIME类型字符串；

size：返回该File对象对应的文件的大小；

HTML5的绘图支持

暂且略过，有时间再补...................^o^~~

HTML5的多媒体支持