概述
#第二章：增强性标记和技术
##HTML5更加强以语义的方式应用标记，所以废弃了一些表现性的元素和属性：
| 元素 | 属性 |
|---|---|
| basefont | align |
| big | background |
| center | bgcolor |
| font | border |
| plaintext | cellpadding |
| s | cellspacing |
| strike | height |
| tt | valign |
| u | width |
HTML5中废弃的元素和属性的完整列表
##让IE识别HTML5元素：
IE不会将CSS应用于它不识别的元素。IE9之前的版本还不识别大多数的HTML5元素。解决方案：
css方面：将元素设置为display：block；
js方面：创建与你想要使用的HTML5元素相同名称的一个DOM元素。
<script>
document.createElement("header");
document.createElement("nav");
</script>
这个技术有效，但是为页面上所有的HTML5元素创建DOM元素，还是会变得很麻烦。
还可以从http://remysharp.com/2009/01/07/html5-enabling-script/ 下载脚本，将其放在HTML文件的头部。或者，从Google代码库中链入该脚本；
<!--[if It IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
##使用javascript检测HTML5功能
Modernizr—一个javascript库，可以用过来检测HTML5和CSS3功能在用户浏览器中是否可用，并且，当该功能当前并不被支持时，允许创建备用方案。步骤：
首先,从http：//modernizr.com下载Modernizr JavaScript库。将这个文件的引用包含在HTML文档的<head>之中。该脚本必须使用一个常规的<script>标签。不能使用脚本装载器技术动态地加载它.
一旦运行了这段脚本，就会检测浏览器是否支持audio(例子）元素，然后做两件事：
- 给javascript属性Modernizr.audio分配一个值（true或者false）。
- 给HTML标签添加一个类。如果浏览器支持audio元素，它将会添加一个名为“audio”的类；如果不支持，就会添加一个名为“no-audio”的类。
然后：
javascript：
<script>
if(Modernizr.audio){ //如果支持则运行
...
}
</script>
css:
.no-audio{
display:none;
}
.audio{
...
}
Modernizr并非可以用来评估和解决这一问题的唯一工具，Modernizr支持的每个功能的示例代码通常，UA嗅探（即用户代理嗅探）或浏览器嗅探技术用来确定用户使用的是哪个浏览器。然而这两个方法不是很可靠，Modernizr会特定检查支持哪些功能，所以更加可靠。
##验证HTML5
大多数Web浏览器尝试并修补无效的编码，如果你的代码是无效的，则浏览器可能尝试以不可意料的方式来修补错误。此外，移动浏览器对于错误代码的容忍性差一些。因此，在桌面浏览器中能够很好地显示的一个无效页面，可能在手机上崩溃。
W3C的“Unicorn”Unified验证器----验证HTML5和CSS3.
Validator.nu HTML5验证器
#第三章：表单
##与表单有关的input的type值
| input的type值 | 输入字段 | 其他功能 | 特点 |
|---|---|---|---|
| search | 搜索值 | ||
| 有效的Email地址 | |||
| url | 绝对URL | ||
| tel | 电话号码 | ||
| datetime、date、time、month、week、datetime-local | 日期和时间（日期选取器和时间spinner控件） | min、max | |
| number | 有效的数字（浮点数） | min、max 、step（如果用户代理显示这个表单字段的时候，后面显示一个Spinner控件，则step是指定增量值） | 要求比较精确 |
| range | 有效的数字（浮点数） | min、max 、step（如果用户代理显示这个表单字段的时候，后面显示一个Spinner控件，则step是指定增量值） | 数字可以不精确 |
除了tel，其他的格式不对都会由用户代理警告用户，并且不会提交表单数据。
如果用户代理不支持输入类型，则它会显示一个文本输入字段。
定制默认的错误消息，给每个输入字段添加一个title属性，例如：
<input type="url' name="website" title="That doesn't look like a valid web address.">
要准确测试浏览器的支持，加在Mike Taylor的支持测试页面，该页面位于http://www.miketaylr.com/code/input-type-attr.html
##创建可编辑的下拉列表
datalist元素来创建一个建议选项的列表，其中的建议选项使用option元素，并且通过list属性将该列表与一个input元素关联起来。因为有可能会碰到没有实现datalist的浏览器（显示文本输入字段），所以添加select元素。
<form>
<label for="donation">Donation amount</label><input type="text" name="donation" list="donations">
<datalist id="donations">
<select name="donation">
<option value="10.00">10.00</option>
<option value="20.00">20.00</option>
<option value="30.00">30.00</option>
</select>
</datalist>
</form>
##要求必须添写一个表单字段
required属性，在表单上的0个或多个表单字段上指定required属性。当用户提交表单的时候，任何必须的字段如果留有空白，都会导致浏览器停止提交并且显示一条错误消息。
<input type="text" required>
##页面加载时，自动聚焦一个表单字段
autofocus属性，只能针对每个文档指定一次该属性，不是针对每个表单。
<input type="text" autofocus>
##显示占位符文本
placeholder属性，用来指定当用户没有聚焦到表单字段的时候所显示的提示文本。
<input type="text" placeholder="put something here">
##关闭自动填充
autocomplete属性，设置值为off。默认情况下，autocomplete对于所有的表单字段来说都是打开的（on）。如果是on，则当你登陆曾经访问过的Web站点的时候，可能要依赖浏览器的功能来记住你的密码，并且实现自动填充的功能。
<input type="password" name="pwd" autocomplete="off">
##限定输入值
pattern属性，用来指定一个正则表单式，它将用来验证用户的验证。用于pattern的正则表达式，必须使用与Javascript中相同的语法。并且pattern属性必须匹配整个值，否则用户将会看到错误消息。
<input type="tel" name="phone" pattern="[2-9][0-9]{2}-[0-9]{3}-[0-9]{4}" title="North American format:xxx-xxx-xxxx">
最后
以上就是无聊铃铛为你收集整理的二的全部内容，希望文章能够帮你解决二所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复