20 Java程序员面试宝典视频课程之HTML5新标签、功能-CFANZ编程社区

一、HTML5认识?（是什么,为什么）
答:
1、HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。
2、HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。
3、HTML5增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便

二、HTML5 的优势是哪些？
答:
1)、更容易使用，更明确的语义。新的 HTML 标签像< header>, < footer>，< nav>，< section>， < aside>等等，使阅读起来更加容易去访问内容。
2)、对视频和音频的支持。< video src=""/>标签。
3)、更聪明的存储。HTML5 中最酷的特性就是本地存储。
4)、更强大。以前我们需要用html+css+js实现的功能,使用HTML5表签或者属性那些强大的功能不用关心底层实现
5)、多设备、跨平台
6)、在移动端大放光彩。
7)、网络标准统一、HTML5本身是由W3C推荐出来的。
8)、涉及到网站的抓取和索引的时候，对于SEO很友好；
9)、被大量应用于移动应用程序和游戏。

三、HTML5 的声明语句是什么？ article 标签有什么作用? nav 标签制作网页的导航栏？
答:
1)、< !DOCTYPE html>
2)、< article> 标签定义外部的内容。
外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容

<article>
<a href="https://www.baidu.com/">点击我,就进入百度</a>
</article>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
</nav>

四、HTML5 中的 header标签有什么作用和 H4中的标题标签有什么区别？
答:
1)、为了被搜索引擎更好的检索，为了浏览器实现特定功能，便于编程人员理解
2)、区别在于 h4 只是简单的标题标签，而 header 是具有语义的标签，更有利于 SEO

五、文字描述 HTML5 的新特性是什么？和 HTML4 的最大区别是什么？
答:
新特性:
1)、更易用，语义更强。更移动化
2）、聪明的存储方式。
3）、更简便的处理音频视频，声明更简单。
区别:
1）、封装了很多新标签
2）、这些标签提供非常强大的功能与语义,H4中没有

六、HTML5 中怎么设置字符编码格式？ canvas 有什么作用?
答:
1）、编码：< meta charset=“UTF-8”>
2）、作用：提供一块画布，js通过id获取到画布后可以在这块画布上画画，可以用此标签实现动画功能

<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid red;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>

七、HTML5 支持较好的浏览器有哪些？HTML5 存储类型有什么区别？
答:
1、Chrome、Firefox、Safari、Opera 以及 IE9/IE10 都支持
2、HTML5 能够本地存储数据，在之前都是使用 cookies 。
HTML5支持两种本地存储方案:
localStorage :
没有时间限制的数据存储，数据永远不会过期，关闭浏览器也不会丢失
sessionStorage :
针对一个 session 的数据存储，同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

    /*localStorage的存储方式*/
for(var i=0; i<10; i++){
 localStorage.setItem(i,i+"号");
}
for(var i=0; i<10; i++){
 var se=localStorage.getItem(i);
 alert(se);
}
/*sessionStorage的存储方式*/
for(var i=0; i<10; i++){
 sessionStorage.setItem(i,"男"+i+"号");
}
for(var i=0; i<10; i++){
 var se=sessionStorage.getItem(i);
 alert(se);
}

八、HTML5 应用程序缓存和浏览器缓存有什么区别?
答:
应用程序缓存是:
会预加载的，保证齐全的供应和保存。
浏览器缓存:
没有这些控制，不能作为程序缓存使用
九、HTML5本地存储和 cookie 有什么区别？
答:
A、cookies:
1)、cookie在浏览器和服务器间来回传递
2)、cookie数据还有路径的问题，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时每次http请求都会携带cookie
3)、数据有效期不同，cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
4)、作用域不同，cookie也是在所有同源窗口中都是共享的。
B、本地存储:
1)、sessionStorage和localStorage不会自动把数据发给服务器，仅本地保存
2)、sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3)、数据有效期不同sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据
4)、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；