HTML & HTML5基础
form相关
form属性：在HTML5中表单元素可放在表单之外，通过给该元素添加form属性来指向目标表单（form属性值设为目标表单id即可）。
formaction属性：HTML5给提交按钮（如button、submit、image等）增加了formaction属性，以便提交到不同的服务器地址。
<input formaction="new.html" type="submit" value="提交到new.html"/>
formmethod属性： 用法同formaction。
placeholder属性：用于文本输入框处于未输入状态的一种文字提示。
autofocus属性：自动获得焦点。一个页面只能有一个空间具有该属性。该属性无值，直接写就好。
<input name="username" autofocus type="text" id="username"/>
list属性：用于单行文本框，该属性的值为某个datalist元素的id，增加该属性后的单行文本框类似选择框（select），但允许用户自定义输入，为了避免没有支持该元素的浏览器出现错误，我们通常使用css设置不显示。
<datalist> 标签：定义可选数据的列表。与input元素配合使用，就可以制作出输入值的下拉列表。
order:<input list="list" name="order" autofocus type="text" id="order">
<datalist id="list" type="display:none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</datalist>
autocomplete属性：自动完成允许浏览器预测对字段的输入，HTML5实现了自定义设置该属性，避免了任何人都可以看到所存在的安全隐患。该属性值有on、off或""（不指定）三种，不指定时使用浏览器的默认值。
input元素种类：
-
search: 与text文本框类似，用于搜索； -
tel:用于电话； -
url:用于URL格式的地址； -
email: 用于email格式的地址； -
number: 用于数值 -
range: 只允许输入一段范围内的数值，通过min和max属性来设置范围； -
color: 颜色文本框 -
file: 文件选择文本框，HTML5中通过multiple属性设置多选 -
datatime,date,month,week,time,datetime-local各种日期与时间输入的文本框； -
output：定义不同类型的输出；
表单验证相关：
自动验证（就是通过为元素添加相应的属性来达到验证的要求）
-
required属性：具有该属性的元素，如果其内容为空则不允许提交，并给出相应的提示。 -
pattern属性：具有该属性的元素，如果内容不为空则把内容与pattern的值进行正则匹配，匹配不成功则不通过并提示。 -
min & max属性：他们是值类型和日期类型的input元素专用属性，限制了输入的范围。 -
step属性： 控制元素的值增加或减少的步幅，如输入1-100之间的数值，且步幅是5，那么只能输入1,6,11…;
显示验证（除了给元素添加属性来自动验证外，在HTML5中，form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法，调用该方法可以进行手动验证，checkValidity方法以boolean的形式返回验证结果）
function check(){
var email = document.getElementById('email');
if(email.checkValidity()){
alert('email格式正确')
} else {
alert('email格式不正确')
}
}
取消验证（取消表单验证有两个属性：用于form的novalidate和用于submit的formnovalidate）
//用于form的novalidate
<form novalidate>
<input type="text" name="name" id="name" required>
<input type="submit" name="button" id="button" value="提交">
</form>
//用于submit的formnovalidate
<form>
<inputtype="text" name="name" id="name" required>
<input type="submit" orfmnovalidate name="button" id="button" value="提交">
</form>
自定义错误 : 在HTML5中没经过验证的表单浏览器会有默认的提示，但也通过了JavaScript的来设置自定义错误提示信息。
增强的页面元素
-
figure元素：figure 是个组合元素，可以带标题figcaption,一个figure只允许放置一个figcaption.
<figure>
<img src="logo.png" alt="图片">
<figcaption>标志</figcaption>
</figure>
-
details元素：details提供了一种替代JavaScript的、将画面上局部区域进行展开或收缩的方法.
<details>
<summary>低级我查看细节</summary>
<p>我是细节内容</p>
</details>
-
mark元素：mark 元素表示页面需要突出显示或高亮显示的部分。 -
progress元素：一般用于写进度条，可以给progress设置value和max属性，value表示已经进行的，max表示总数，value和max只能为有效的浮点数，value必须大于0小于等于max。如果不给progress设置这两个属性，则是动态显示正在进行，进度不确定。 -
meter元素：定义度量衡。（界定上下的值会有颜色区分）。high:定义度量的值位于哪个点，被界定为高的值。low:定义度量的值位于哪个点，被界定为低的值。max:定义最大值。默认值是 1。min:定义最小值。默认值是 0。optimum:定义什么样的度量值是最佳的值,如果该值高于 “high” 属性，则意味着值越高越好。如果该值低于 “low” 属性的值，则意味着值越低越好。value:定义度量的值。 - 改良的ol列表：在HTML5中为ol元素添加了start属性和reversed属性。
start：表示列表序号从几开始。reversed：表示列表序号为倒序。 - 改良的dl列表：dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn。
<dl>
<dt>术语1</dt>
<dd>描述...</dd>
<dt><dfn>名字</dfn>术语2</dt>
<dd>描述...</dd>
</dl>
-
cite: 用于表示作者。 -
small: 用于标识“小型文本”。 -
<article>标签 : 定义外部的内容。 -
<aside>标签:定义 article 以外的内容。aside 的内容应该与 article 的内容相关。aside可以用于网站页尾一排排的广告或者链接，一竖排为一个aside。也可以用于博客侧栏。 -
<audio>标签：定义声音。 -
<canvas>标签：定义图形（是为了客户端矢量图形而设计的）。 -
<command>标签：定义命令按钮，比如单选按钮、复选框或按钮。 -
<embed>标签:定义嵌入的内容，比如插件。 -
<footer>标签：定义 section 或 document 的页脚。 -
<header>标签：定义 section 或 document 的页眉。 -
<hgroup>标签：用于对网页或区段（section）的标题进行组合。 -
<hgroup>标签：用于对网页或区段（section）的标题进行组合。 -
<nav>标签：定义导航链接的部分。 -
<output>标签：定义不同类型的输出，比如脚本的输出。 -
<rp>标签：在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。 -
<rt>标签：定义字符（中文注音或字符）的解释或发音。 -
<ruby>标签：定义 ruby 注释（中文注音或字符）。 -
<section>标签：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 -
<source>标签：为媒介元素（比如 和 ）定义媒介资源。 -
<summary>标签：details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。 -
<time>标签：定义日期或时间，或者两者。 -
<video>标签：定义视频，比如电影片段或其他视频流。 -
<dialog>标签：定义对话（会话）dialog元素表示几个人之间的对话。
上一篇： HTML5系列代码：静态页面
下一篇： Mysql调优及索引锁机制学习