关于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所属的一个或多个表单

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端侠2.0

draggable 属性 原

昨天是在document上绑定mousedown ,mousemove ,mouseup事件,来实时计算,并设置相应元素的宽度,这是最直接想到的办法,就不再多说...

1801
来自专栏Python小屋

Python爬虫基础:常用HTML标签和Javascript入门

大部分HTML标签是闭合的,由开始标签和结束标签构成,二者之间是要显示的内容,例如:<title>网页标题</title>。也有的HTML标签是没有结束标签的,...

1571
来自专栏微信小程序开发

微信小程序开发-常见问题

知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS 非HT...

5449
来自专栏Petrichor的专栏

tkinter: 屏幕居中

1311
来自专栏Youngxj

hislider自适应幻灯片焦点图-emlog插件

1724
来自专栏王二麻子IT技术交流园地

《跟我学IDEA》五、快捷键(编码利器)

上一篇博文,我们学习了idea的一些模版配置,但是只有模版是不行的,一款编辑器如何能为我们灵活的使用,快捷键的功劳不用多说大家也明白。今天我们就来学习快捷键的配...

3306
来自专栏编程微刊

网页里如何使用js屏蔽鼠标右击事件

在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只...

5253
来自专栏微信小开发

微信小程序开发-常见问题

知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS2、inp...

2679
来自专栏听雨堂

为服务器控件加入客户端事件处理的几种方法

    服务器端的处理虽然方便,但因为每次都要PostBack,因而效率不高,很多时候需要为服务器端控件写入客户端事件处理。把各种方法总结一下:     1)在...

1978
来自专栏阿杜的世界

JVM、GC和常用命令

这是11月份的一个分享,借着组内分享的机会,重新梳理了一遍JVM的一些基本概念和学习资料。在这个PPT中,关于G1的部分比较粗略,最近正在恶补G1的知识,后面可...

913

扫码关注云+社区

领取腾讯云代金券