HTML 基础知识 02
HTML5 的新特性
HTML5 是现行 HTML 的主流形态，为承载丰富的 Web 内容而设计，并且无需额外插件。它是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等）之上运行。
一些有趣的新特性：
新的文档类型（DOCTYPE）声明：
<!DOCTYPE html>。更宽松的属性语法：布尔属性可以不写属性值；属性值在没有空格等特殊字符时可以不加引号。无引号写法不能包含空格，
value=John Doe会被解析成value="John"再加上一个名为Doe的属性。<input type="text" value="John Doe" disabled> <!-- 不需要指定属性值 --> <input type="text" value=John> <!-- 不需要引号（值里不能有空格） --> <input type="text" value="John Doe"> <!-- 双引号 --> <input type="text" value='John Doe'> <!-- 单引号 -->拖拽释放（Drag and drop）API。
语义化更好的内容标签：
header、nav、footer、aside、article、section。新的元素：
canvas、svg、audio、video。本地存储：
localStorage长期保存数据，浏览器关闭后数据不丢失；sessionStorage随会话存在，关闭标签页即清除。二者都是 HTML5 提供的 Web Storage API。新的表单控件类型：
date、time、email、url、search等。没有type="calendar"这种取值；需要日期选择时用date或datetime-local。同期常用的相关技术：Web Worker、WebSocket、Geolocation。
IE6－8 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器识别 HTML5 新标签。浏览器识别新标签后，还需要补上标签的默认样式。
更省事的方式是直接使用成熟的兼容脚本，当时用得最多的是 html5shim（现行常见包名是 html5shiv）。现行浏览器已原生支持这些标签，只有必须兼容 IE8 及以下时才需要它。
删除的一些元素：
acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike、tt 等。
渐进增强和优雅降级
渐进增强：针对低版本浏览器构建页面，保证最基本的功能，再针对高级浏览器追加效果、交互，达到更好的用户体验。
优雅降级：一开始就根据高版本浏览器构建完整功能，再针对低版本浏览器做兼容。
label 和 input 的关联
label 用来定义标签文本和表单控件的关系。用户选择该标签时，浏览器会把焦点转到与之关联的表单控件上。
label 和 input 的配对方法有两种：
- 将
input嵌套在label中（隐式）。 - 将
label的for属性与input的id关联（显式）。
<!-- 隐式 -->
<label>
Name:
<input type="text" name="name" />
</label>
<!-- 显式 -->
<label for="name">Name: </label>
<input type="text" id="name" name="name" />
注意：带有 type="submit" 或 type="button" 的 input 不强制需要 label，但其他表单控件（包括 textarea、select）都最好有 label。
配对之后有此特性：点击 label 或其子元素（隐式关联时，无论与 input 是何种布局），都会执行关联 input 的 click 事件。
此特性容易引出的 Bug：点击 label 时，click 事件被触发两次。
- 触发条件：
label和input已配对（显式或隐式），并且监听的是它们上层元素的click事件。 - 问题原因：点击
label时事件冒泡一次，同时会触发关联input的click，该事件会再次冒泡。 - 解决方案：不用
label；或在click处理里判断事件源，只处理来自input的那一次。
页面锚点偏移
锚点定位时，页面往往会把目标滚到窗口最顶部。上部若有导航条，或出于美观考虑，都希望定位后内容与顶部留出间距。浏览器默认的锚点定位做不到这一点。
用
Element.scrollIntoView()滚动页面：该方法将当前元素滚动到浏览器窗口的可视区域内。利用
padding-top把锚点「垫」下100px，再用margin-top: -100px把视觉位置拉回去，抵消padding-top产生的100px偏移。.anchor { padding-top: 100px; margin-top: -100px; }类似地，也可以在元素前面新加一个元素并设置高度，本元素再设负的
margin-top。现行也可以用
scroll-margin-top（或滚动容器上的scroll-padding-top），专门给滚动定位留出顶部间距，不必再靠正负 margin 对冲。利用 CSS 的
:target选择器。:target只在现代浏览器可用，IE 从 IE9 起支持。.anchor:target { padding-top: 100px; }绑定
window的hashchange事件，控制页面滑动。window.addEventListener('hashchange', function(e) { window.scrollBy(0, -100) }, false);页面初次带着 hash 打开时，不一定会触发
hashchange，需要的话还要在加载时单独处理一次。