html5 敏捷实践读书笔记（第一章）

读书笔记

用语义化的方式实现

1. <！doctype html>浏览器通过<doctype>标签来决定如何渲染网页。
2. <header></header>,<nav></nav>,<article></article>,<footer></footer>一个简单清楚的html5方案保持页面更容易使用，也容易被屏幕阅读器和浏览器爬虫解析。

3. 新定义的<input>标签，

   • 占位文字，placeholder，实现输入框提示功能。
     
     • 另一个是 autofocus ，实现页面加载时，让某页面获取焦点。
     • required 阻止用户在请求未满足条件时提交表单。
     • autocomplete，自动为我们提供想打的字。只需把autocomplete设置成on或则off。autocomplete是从哪里获取数据的呢，user agent 会记录用户输入的表单信息。用户返回输入过的信息的页面时，user agent 会自动填充表单。list 和 autocomplete 无法用 css 修饰。

4. pattern 属性，pattern可以控制输入值，可以把javascript 正则表达式赋值给 pattern 属性。如果不满足 pattern 的限制，表单就不能被提交，而是弹出，“请按照格式填写”，这样实施一个最大的问题就是不符合现代网页的设计风格。

5. 不使用 javascript 实现表单验证，html5 实现了一个 web 标准应该有的功能，让浏览器原生支持表单验证。

   • required 属性，只有元素的值满足 required 标准的时候，input才会设置他的 validity 的值为真，并且返回 true。
     
     • 强制验证 Api ,html5 允许我们定制验证的错误信息。如果用户没有按照表单的要求输入内容，会收到一个错误的提示信息，我们可以用 setCustomValidity（）方法田间定制消息的内容。

6. 使用控件提高表单的易用性

   • data 输入类型，step 日期的增量，min 合法日期的最小值，max 合法日期的最大值。stepUp()显示日期的后一天/stepDown()显示日期的前一天。valueAsDate()，返回日期对象不是字符串。
     
     • range输入类型，min/max定义最小值和最大值，step 可以说是最小单位。value 默认值。
     • meter 标签和 progress 标签

7. oninput 、 onchange 和 oninvalid 事件，input 事件可以直接增加监听，并只和 input 操作关联。

8. 事件分发允许事件冒泡到他的父元素。

9. 使用自定义数据跟踪用户事件。