HTML基础知识02

html5的新特性

HTML5 是最新的 HTML 标准，是专门为承载丰富的 web 内容而设计的，并且无需额外插件。HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

一些有趣的新特性

新的文档类型（DOCTYPE）声明；
```
<!DOCTYPE html>
```

新的属性语法；

<input type="text" value="John Doe" disabled> <!--不需要指定属性值-->
<input type="text" value=John Doe> <!--不需要引号-->
<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 长期存储数据，浏览器关闭后数据不丢失；
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 属性关联（显式）。

<!-- 隐式 -->
<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 标签，但是所有其他 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的偏移。
```
.anchor{
    padding-top: 100px;
    margin-top: -100px;  
}
```
类似的，也可以在元素前面新添加一个元素，设置高度，本元素设置margin-top负值.
方法三： 利用 css3 的 :target 选择器。:target 声明只支持现代浏览器，IE浏览器支持 IE9+。
```
.anchor:target{
    padding-top:100px;
}
```

方法四： 绑定 window.onhashchange 事件，控制页面滑动。

window.addEventListener('hashchange', function(e) {
    window.scrollBy(0, -100)
}, false);

上一页HTML基础知识下一页HTML常见问答

最后更新于1年前