2016最新H5面试题（及答案）

1. HTML5 为什么只需要写 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

2. 页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

3. 浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

4. html5有哪些新特性? 移除了那些元素? 如何处理HTML5新标签的浏览器兼容问题? 如何区分 HTML 和HTML5？
    1) 新特性
       HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
       绘画 canvas
       用于媒介回放的 video 和 audio 元素
       本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
       sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation

2) 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

3) 支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式：

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
        
    4) 如何区分： DOCTYPE声明\新增的结构元素\功能元素

5. html语义化的理解？
   用正确的标签做正确的事情！
   html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
   在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
   搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
   使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

6. 什么是HTML5的离线储存？如何使用？
LocalStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。

7. HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或下某个input 设置为 autocomplete=off。
8. 如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge、cookies等本地存储方式

9. CSS3新增伪类举例：
:first-of-type     p:first-of-type    选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type       p:last-of-type    选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type     p:only-of-type    选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child       p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n)     p:nth-child(2)    选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)    p:nth-last-child(2)    同上，从最后一个子元素开始计数。
:nth-of-type(n)    p:nth-of-type(2)    选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)    p:nth-last-of-type(2)    同上，但是从最后一个子元素开始计数。
:last-child    p:last-child    选择属于其父元素最后一个子元素每个 <p> 元素。
:root    :root    选择文档的根元素。
:empty    p:empty    选择没有子元素的每个 <p> 元素（包括文本节点）。
:target    #news:target    选择当前活动的 #news 元素。
:enabled    input:enabled    选择每个启用的 <input> 元素。
:disabled    input:disabled    选择每个禁用的 <input> 元素
:checked    input:checked    选择每个被选中的 <input> 元素。
10.如何居中div？如何居中一个定位元素？
    给div设置一个宽度，然后添加margin:0 auto属性

div{
            width:200px;
            margin:0 auto;
         }

居中一个定位元素
        .div {
          Width:500px ;
          Margin: 0 0 0 -250px;
          position:relative;
          background-color:pink;
          left:50%;
          top:50%;
        }
11. 列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

1. position取值
       block 象块类型元素一样显示。
       none 缺省值。象行内元素类型一样显示。
       inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
       list-item 象块类型元素一样显示，并添加样式列表标记。

2. 定位原点
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。

*relative
            生成相对定位的元素，相对于其正常位置进行定位。
    3. CSS3有哪些新特性？
       CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜，增加了更多的CSS选择器多背景 rgba

12. 你有哪些性能优化的方法？
      （1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
      （2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
      （3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
      （4）当需要设置的样式很多时设置className而不是直接操作style。
      （5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
      （6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
      （7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
      （8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

      对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

20.你使用过meidia queries（媒体查询）吗（如何使用？），或者移动网站相关的CSS布局？

@media 用宽度( width ) 判断

下面的语法，是最常用到的Media Queries：（下方为同一档案之内容）

@media screen and (min-width: 1200px) {
      // 如果视窗宽度 >= 1200px，將会加载此 CSS。
    }
    @media screen and (min-width: 768px) and (max-width: 979px) {
      // 如果视窗宽度介于 768px ~ 979px，将会载入此 CSS。
    }
    @media screen and (max-width: 767px) {
      // 如果视窗宽度 <= 768px，将会载入此 CSS。
    }
    @media screen and (max-device-width: 480px) {
      // 若视窗宽度 <= 480px，则载入此CSS。
    }

在 Media Queries 中，我们最常使用min-width 和max-width 来判断使用者的视窗宽度，而max-device-width 则是使用者「装置」的最大宽度。 width 和device-width 差在哪里？

width : 因为浏览器可以自由调整宽度，所以这边指的是该浏览视窗的宽度。
device-width : 就算你把浏览器视窗弄到符合最大(小)宽度，还是不会生效。因为，device-width 指的是使用者的「装置」最大宽度，而不是浏览器视窗。所以，device-width 常用在判断手机上。

所以，你也可以自己加上其他的条件下去。要注意的是，每一个条件之间请用and 来分隔，并要适时加上括号以免错误。

min-width 是最小宽度；max-width 是最大宽度，可以用来表示一定的范围。

编程题
1. 一个满屏品字布局如何设计?
<div style="height:300px;margin:0 auto;border:1px solid red"></div>
<div>
<div style="background-color: red;width:50%;height:400px;float:left"></div>
<div style="background-color: blue;width:50%;height:400px;float:left"></div>
</div>
2. 2种方式，实现某DIV元素以50px每秒的速度左移100px。

方法一使用 jQuery
$('div').animate({'left': 100}, 2000);

方法二 js + css3
       div {
            transition: all 2s linear; // linear 规定以相同速度开始至结束的过渡效果
       }
       div.style.left = (div.offsetLeft + 100) + 'px';

3. 用DIV+CSS实现三栏布局（左右固定200px，中间自适应）。

HTML
       <div class="container">
          <div class="main">
            <h2></h2>
          </div>
          <div class="left">
            左边
          </div>
          <div class="right">
            右边
          </div>
       </div>

CSS
       .container > div {
          height: 200px;
       }
       .container {
          padding: 0 200px;
       }
       .main,
       .left,
       .right {
          position: relative;
          float: left;
       }
       .left,
       .right {
          width: 200px;
       }
       .main {
          width: 100%;
          background-color: yellow;
       }
       .left {
          background-color: blue;
          margin-left: -100%;
          left: -200px;
       }
       .right {
          background-color: green;
          margin-left: -200px;
          left: 200px;
       }

5. 使用Bootstrap完成模态框的编写，调用方式使用“data-”方式和“JS”方式两种

1>通过data属性

不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素（例如，按钮）上设置data-toggle="modal"，并使用data-target="#foo"或href="#foo"指向特定的模态框即可。

例子：
              <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">加载模态框</button>
              <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                      <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                      <p>One fine body…</p>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>

2>通过JavaScript调用

只需一行JavaScript代码，即可通过id myModal调用模态框：

$('#myModal').modal(options)

方法
.modal(options)

将你指定的内容作为模态框启动。其接受一个可选的object类型的参数。

$('#myModal').modal({
keyboard: false
})

.modal('toggle')

手动启动或隐藏模态框。

$('#myModal').modal('toggle')

手动打开一个模态框。

$('#myModal').modal('show')

手动隐藏一个模态框。

$('#myModal').modal('hide')

例子：
      <script type="text/javascript">
        function test()
        {
            $('#myModal').modal('show');
        }
    </script>
    <button onClick="test()" class="btn btn-primary btn-lg">
      Launch demo modal
    </button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            One fine body…
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

2016最新H5面试题（及答案）相关推荐

2016最新Java笔试题集锦
更新时间:2015-08-13 来源:网络投诉删除 [看准网(Kanzhun.com)]笔试题目频道小编搜集的范文"2016最新Java笔试题集锦",供大家阅读参考 ...
21年最新Python面试题及答案汇总详解(上)
错过三月找工作的机会,还要错过四月的好时期吗?Python面试你做准备了吗?下面小编整理了一套2021年最新Python常见面试题目,及Python面试题目答案汇总.希望能够帮助到大家. 21年最新P ...
2016大一计算机基础操作题,2016大学计算机基础试题及答案
2016大学计算机基础试题及答案 (C) 写字板和画图均可以进行文字和图形处理 (D) 以上说法都不对 48.在 Word 中建立的文档文件,不能用 Windows 中的记事本打开,这是因为 ____ ...
2017java最新面试题_2017年最新java面试题及答案
2017年最新java面试题及答案 class B { private int radius = 10; public void draw() { System.out.println("B ...
python最新面试题_2018年最新Python面试题及答案
2018 年最新 Python 面试题及答案找工作是每个学习 Python 人员的目标,为了更好的找到工作,刷面试题是必不可少的, 了解最新企业招聘试题, 可以让你面试更加的顺利. 小编整理了一 ...
计算机一级在线解析,2016年计算机一级试题及答案解析
2016年计算机一级试题及答案解析一.选择题 1.计算机的技术性能指标主要是指(). A.计算机所配备的语言.操作系统.外部设备 B.硬盘的容量和内存的容量 C.显示器的分辨率.打印机的性能等配置 ...
最新Java面试题及答案整理（下）
上一篇:2019年最新Java面试题及答案整理(上) 51.类ExampleA继承Exception,类ExampleB继承ExampleA. 答: 有如下代码片断: try {throw new E ...
2019年最新Java面试题及答案整理（下）
转载自:https://blog.csdn.net/qq_41701956/article/details/86699263 上一篇:2019年最新Java面试题及答案整理(上) 51.类Exampl ...
2019最新iOS面试题及答案
1. Object-C的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么? 答: Object-C的类不可以多重继承;可以实现多个接口,通过实现 ...

2016最新H5面试题（及答案）

2016最新H5面试题（及答案）相关推荐

最新文章

热门文章