zoukankan      html  css  js  c++  java
  • 关于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………….
      5、label标签不能为a和button标签的后代
      6、html5中对lable标签加了form属性,规则label所属的一个或多个表单

  • 相关阅读:
    python学习随笔--string[:]
    年少时读不懂 天龙八部,如今读懂已过少年
    web安全测试随笔
    纪录jmeter loop controller 使用中的一个坑
    移动设备覆盖统计数据源
    jmeter and postman
    web测试----http状态码
    转自莫某的java学习计划
    jquery实现页面加载时删除特定class 的div内前三个字符
    js学习
  • 原文地址:https://www.cnblogs.com/lyg0126/p/6858608.html
Copyright © 2011-2022 走看看