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

时间: 2024-08-05 10:57:05

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

关于HTML面试题汇总之visibility

一.页面可见性(visibility) 主要提供两个属性,一个事件(都在document对象上):1. 属性:   1.1.  hidden:获取或设置当前页面的可见性,boolean值:   1.2. visibilityState: 获取当前页面可见性状态,值为hidden.visibility其中一个2. 事件:visibilityChange:页面可见性发生改变时触发的事件 3. 由于各类浏览器的支持情况不一致,都需要加上私有属性的前缀,如 webkit.moz.ms.o等.在ie9-不

汇道科技:一个H5的辛酸成长史

什么?你还没有听过H5?你不知道什么叫H5?集图文.影音.游戏多种展示功能于一身的H5,因其在移动端传播方面的灵活性高.开发成本低.周期短等特性,已然成为企业营销的不二利器.为什么H5会越来越受欢迎呢?请听汇道科技小编给你一一道来! 从2014年的崭露头角,到如今成为用户互动必备元素.虽然圈内对H5的前景一片唱衰声,但在短短两年多的时间内,H5不仅在互动方式.展示内容上不断丰富,在视觉展示效果上也花样迭出,让人直呼惊艳的 H5不断涌现.那些好看的H5是怎么来的? 我们就从UI设计的角度,解读一个

H5前端学习之路第3天--前端面试题

今天没有学习其他的,还是决定刷一些面试题看看 「 CSS篇 」 1. CSS 盒子模型,绝对定位和相对定位 盒子模型:一个元素是有content(内容),padding(内补白),border(边框),margin(外补白)四部分组成,而这四个部分就组成了css中的盒模型 绝对定位:position:absolute  固定定位:position:fixed 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 当脱离文档流时,造成高度塌陷 方法:clear:both   overflow

【汇】iOS面试题

1. 分别描述类别(categories)和延展(extensions)是什么?以及两者的区别?继承和类别在实现中有何区别?为什么Category只能为对象添加方法,却不能添加成员变量? 答:考虑类目比继承的优点 类别是把类的实现方法分散到不同的文件中 也可以给类扩展新方法 延展是给类添加私有方法 只为自己类所见 所使用 继承可以扩展实例变量 而类别不能 类别如果可以添加成员变量 就跟继承没什么两样了  而且在上线的项目更新中 用类别笔继承更能维护项目的稳定性

Web前端面试题集锦

Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScript: 数据类型.面向对象.继承.闭包.插件.作用域.跨域.原型链.模块化.自定义事件.内存泄漏.事件机制.异步装载回调.模板

C语言面试题大汇总

C语言面试题大汇总 1.局部变量能否和全局变量重名? 答:能,局部会屏蔽全局.要用全局变量,需要使用"::" ;局部变量可以与全局变量同名,在函数内引用这个变量时,会用到同名的局部变量,而不会用到全局变量.对于有些编译器而言,在同一个函数内可以定义多个同名的局部变量,比如在两个循环体内都定义一个同名的局部变量,而那个局部变量的作用域就在那个循环体内. 2.如何引用一个已经定义过的全局变量? 答: extern 可以用引用头文件的方式,也可以用extern关键字,如果用引用头文件方式来引

李洪强iOS经典面试题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px "Helvetica Neue"; color: #333333; min-height: 20.0px } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px "Helvetica Neue"; color: #333333; background-color: #ffffff } p.p3 { margi

Java 线程面试题 Top 50

--> html { line-height: 1.6 } body { font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background-color: #f3f3f3; line-height: inherit } body.ric

一些html5和css3的一些常见面试题

最近总结了一些有关于html5和css3的一些常见面试题,希望对正在找工作的你有所帮助. 还有欢迎大家补充~~~ 一.HTML5 CSS3 CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(transform) 3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9de