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常见问答

最后更新于

这有帮助吗？