h5的特点

关于HTML面试题汇总之H5

 

一、H5有哪些新特性，移除了哪些元素？如何处理h5新标签的浏览器兼容性问题，如何区分html和html5

1. html5不在是SGL（通用标记语言）的一个子集，而包含了：图像、位置、存储、多任务等功能

2. 新增的图像为canvas类，媒体回放video和audio元素；本地离线存储localStorage，在浏览器关闭后也可以保存数据；而sessionStorage在浏览器关闭后会自动删除数据

3.新增内容标签：article、footer、header、nav、section；新增加表单控件：calendar、date、time、email、url、search；控件元素：webworker、websocket、Geolocation。

4、移除的元素：basefont、big、center、font、s、strike、tt、u等内容修改标签、以及性能较差的frame、frameset、noframes。

5、处理h5新标签浏览器的兼容性问题

5.1、IE8-可以通过document.createElement来创建标签，并给标签默认的样式和能力
   5.2、也可以引用html5shim框架

6、区分html与html5：主要是通过doctype头、新标签和功能元素。

二、html语义化的好处

1、在样式丢失的情况下，页面呈现的结构也是清晰的

2、屏幕阅读器完全可以根据语义标签来读取内容（如盲人网站）

3、pad、手机可以根据语义标签做不同的处理，如手机上标题显示粗体，而pad上标题显示较大字体

4、对搜索引擎和爬虫的友好

三、iframe优缺点

1、优点

1.1、在不刷新的情况下重新载入的新的页面；
  1.2、方便用于后台管理，或不用于对搜索引擎友好的系统

2、缺点：

2.1、不利用搜索引擎，因为爬虫只能看到框架而见不到框架的链接
   2.2、框架有时候会让人迷惑，尤其是多个框架出滚动条的时候
   2.3、不容易打印（暂时只能分框架页的打印，而不能打印整个frameset）
   2.4、浏览器后退按钮无效（他只能后退当前获得光标的iframe）
   2.5、多数pad、手机不支持框架
   2.6、增加http请求
   2.7、iframe会阻塞页面的加载，包含iframe的页面的window.onload事件，只有等待iframe加载完成后才能触发，但可以通过js来动态设置iframe的src属性可以避免这种情况（chrome和safari支持）

3、iframe和frame的区别
  3.1、iframe和frame实现的功能相同；
  3.2、iframe可以单独使用，而frame必须和frameset一起使用
  3.5、在html5中iframe仅支持src属性，而对frameset和frame不在受支持

四、label标签的作用、应用

1、lable标签主要是作为一种标题说明元素存储的，通常有：for关联、以及将form control放在label标签中的方式
2、lable标签主要属性：
   2.1、for属性，做标签关联，但for关联的必须是一个form control标签
   2.2、accesskey属性：用于设置热键，但不能与浏览器热键冲突，否则会先触发浏览器的热键
3、label的嵌套
   3.1、labe标签内不能再嵌套label
   3.2、label只能包含一个input子孙（包含checkbox、text等元素）、button、select、textarea元素
   3.3、label嵌套时，事件的触发遵循冒泡原则

<label id="inputOne" >
    <input id="inputOne_inner" type="button" value="Test" />
</label>

<script type="text/javascript">
    $(function(){
        $('#inputOne').click(function(){
            console.log('label.........');
        });
        $('#inputOne_inner').click(function(event){
            event.stopPropagation();
            console.log('input.........')
        });
    });
</script>

由于在inputOne_inner的click事件中阻止的冒泡，所以单击时只输出 ‘input……………….’。
   4、for关联
      4.1、for关联，在labe标签上的事件，会触发关联元素的相应事件（并且关联元素的冒泡阻止动作无效）：

<label id="labeTow" for="inputTow" >Tow-label</label> <!--labe绑定的事件，会触发关联元素的事件-->
<input id="inputTow" type="button" value="Tow" />

<script type="text/javascript">
    $(function(){
        $('#labeTow').click(function(){
            console.log('labelTow.........');
        });
        $('#inputTow').click(function(event){
            event.stopPropagation();
            console.log('inputTow.........');
        });
    });
</script>

单击labeTow会做如下输出(label会先触发自身的事件，然后触发关联元素相应的事件)：
labelTow…………….
inputTow……………
单击inpuTow会做如输出：
inputTow………….