二_读书笔记h5开发-CSDN博客

本文链接：https://blog.csdn.net/qq_27891023/article/details/55260531

#第二章：增强性标记和技术
##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	有效的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">