> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/html-xi-lie/00html-ji-chu-zhi-shi-02.md).
# HTML基础知识02
### html5的新特性
HTML5 是最新的 HTML 标准，是专门为承载丰富的 web 内容而设计的，并且无需额外插件。HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
#### 一些有趣的新特性
* 新的文档类型（DOCTYPE）声明；
```html
```
* 新的属性语法；
```html
```
* 拖拽释放（Drag and drop）API；
* 语义化更好的内容标签：header、nav、footer、aside、article、section；
* 新的元素：canvas、svg、audio、video；
* 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
* HTML5 提供新的 API：localStorage、sessionStorage；
* 新的表单控件：calendar、date、time、email、url、search；
* 新的技术：webworker、websocket、Geolocation；
IE6\~8 支持通过 `document.createElement` 方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式。
当然最好的方式是直接使用成熟的框架、使用最多的是 `html5shim` 框架。
#### 删除的一些元素
acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike、tt 等。
### 渐进增强和优雅降级的定义
\*\*渐进增强：\*\*针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
\*\*优雅降级：\*\*一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容。
### label 和 input 标签之间的特性
label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
label 和 input 标签配对方法有两种：
* 将 input 标签嵌套在 label 标签 中（隐式）。
* 将 lable 标签的 for 属性与到 input 标签的 id 属性关联（显式）。
```html
```
**注意：** 带有 type="submit" 或 type="button" 的 input 标签不需要 label 标签，但是所有其他 input 标签，包括 textarea、select 标签，都最好有 label 标签。
label 和 input 标签配对后，**有此特性：** 点击 label 标签或其子元素标签（隐式时，无论与 input 标签是何种布局），会执行 input 标签的 click 事件。
**此特性容易引出的Bug：** 点击 label 标签时，click 事件被触发两次。
* 触发条件很简单：label 标签和 input 标签已配对（显示或隐式）、监听的是 label 标签和 input 标签的上层元素 click 事件。
* 问题原因：点击 label 标签的时候，事件冒泡一次，同时会触发关联的 input 标签的 click 事件，会导致事件再次冒泡。
* 解决方案：不用 label 标签或 click 事件中，判断事件源为 input 标签。
### 页面锚点偏移
在进行锚点定位时，页面往往定位到页面的最顶部，无论是上部有导航条，还是出于美观考虑，都希望定位后该内容与页面顶部有一些间距。而锚点自动定位是无法达到的。
* **方法一：** 用`Element.scrollIntoView()` 滚动页面 ：该方法将当前的元素滚动到浏览器窗口的可视区域内。
* **方法二：** 利用 `padding-top` 将锚点上移 `100px`，再用 `margin-top` 将内容上移 `100px`，修复锚点区域和内容区域 `padding-top` 产生的 `100px`的偏移。
```css
.anchor{
padding-top: 100px;
margin-top: -100px;
}
```
类似的，也可以在元素前面新添加一个元素，设置高度，本元素设置margin-top负值.
* **方法三：** 利用 css3 的 `:target` 选择器。`:target` 声明只支持现代浏览器，IE浏览器支持 IE9+。
```css
.anchor:target{
padding-top:100px;
}
```
* **方法四：** 绑定 `window.onhashchange` 事件，控制页面滑动。
```js
window.addEventListener('hashchange', function(e) {
window.scrollBy(0, -100)
}, false);
```