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

关于HTML面试题汇总之H5的更多相关文章

  1. 关于HTML面试题汇总之visibility

    一.页面可见性(visibility) 主要提供两个属性,一个事件(都在document对象上):1. 属性:   1.1.  hidden:获取或设置当前页面的可见性,boolean值:   1.2 ...

  2. h5的特点

    关于HTML面试题汇总之H5   一.H5有哪些新特性,移除了哪些元素?如何处理h5新标签的浏览器兼容性问题,如何区分html和html5 1. html5不在是SGL(通用标记语言)的一个子集,而包 ...

  3. java面2

    面试试题汇总集: <[面试题]2018年最全Java面试通关秘籍汇总集!> <[面试题]2018年最全Java面试通关秘籍第二套!> <[面试题]2018年最全Java面 ...

  4. H5前端面试题及答案(1)

    前几天去面试了一家公司,整下改公司的面试题. 1.新的 HTML5 文档类型和字符集是? HTML5 文档类型很简单: <!doctype html> HTML5 使用 UTF-8 编码示 ...

  5. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  6. 【编码题篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    编写一个方法 求一个字符串的字节长度假设:一个英文字符占用一个字节,一个中文字符占用两个字节 function GetBytes(str){ var len = str.length; var byt ...

  7. 【面试题】2018年最全Java面试通关秘籍汇总集!

    [面试题]2018年最全Java面试通关秘籍汇总集!(转载于互联网)   前几天在交流群里有些小伙伴问面试相关的试题,当时给出了一些问题,苦于打字太累就没写下去了,但觉得这是一个很不负责任的表现,于是 ...

  8. 2019 汇量科技java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.汇量科技等公司offer,岗位是Java后端开发,因为发展原因最终选择去了汇量科技,入职一年时间了,也成为了面 ...

  9. H5前端面试题及答案(2)

    最近想着跳槽,但面试的邀约不多,内心有点烦躁.梳理梳理心情,跳槽季竞争也大,努力做好自己... 21.请设计一套方案,用于确保页面中js加载完全. <!doctype html> < ...

随机推荐

  1. JQuery的开发与使用心得

    关于jQuery的 入门使用jQuery可以很容易或具有挑战性的,这取决于你如何使用JavaScript,HTML,CSS进行开发和编程. 要知道一件重要的事情是,jQuery是只是一个JavaScr ...

  2. 静态(static)代码块、构造代码块、构造函数、父类子类执行顺序

    静态代码块:static修饰的代码块. 在类加载-初始化的时候进行,主要目的是给变量赋予初始值 构造代码块:直接在类中定义且没有加static关键字的代码块称为构造代码块. java会把构造代码块放到 ...

  3. iOS中assign,copy,retain之间的区别以及weak和strong的区别(面试)

    • copy: 用于希望保持一份传入值的拷贝,而不是值自身的情况,即把原来的对象完整的赋值到另外一地方,重新加载一内存区,一个地方变了不影响另一个地方的对象. • assign:  简单的直接赋值,相 ...

  4. 攻城狮在路上(叁)Linux(十八)--- 文件系统的简单操作

    本篇仅作为补漏. 一.查看磁盘和目录的容量:df  du df:列出文件系统的整体磁盘使用量. du:评估文件系统的磁盘使用量(常用于评估目录所占容量) 二.连接文件:ln 1.hard link:硬 ...

  5. 【mysql】添加对emoji的支持

    1.简介 涉及无线相关的 MySQL 数据库建议都提前采用 utf8mb4 字符集,避免 emoji 表情符号带来的问题 MySQL Server >  5.5.3 2.配置+升级 当前配置 m ...

  6. kaili linux中文乱码

    install kaili 用了kali,安装的英文版,一切都很爽,没有乱码 install chrome 不要用apt安装,也不要用chromium, 直接去网上找chrom的deb文件下来安装,注 ...

  7. 对Slony-I中wait on的理解

    http://slony.info/documentation/2.1/advanced.html#AEN1425 4.1.2. Event Confirmations When an event i ...

  8. Bat 中特殊符号

    批处理.Bat 中特殊符号的实际作用,Windows 批处理中特殊符号的作用: @\\隐藏命令的回显. ~\\在for中表示使用增强的变量扩展:在set中表示使用扩展环境变量指定位置的字符串:在set ...

  9. js跨越小结

    javascript跨域有几种情况: 1.基于同一父域的子域之间,如:a.c.com和b.c.com 2.基于不同的父域之间,如:www.a.com和www.b.com 3.端口的不同,如:www.a ...

  10. C++ string类型占几个字节

          在C语言中我们操作字符串肯定用到的是指针或者数组,这样相对来说对字符串的处理还是比较麻烦的,好在C++中提供了 string 类型的支持,让我们在处理字符串时方便了许多.这篇文章并不是讲解 ...