HTML5 有哪些新特性？

一. 拖放（Drag and drop）API

1. 说一下 HTML5 drag API?

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

2. 拖拽例子

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"  style="width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;" ></div>
<br>
<div id="drag1" draggable="true" ondragstart="drag(event)" style="width: 10px;height: 10px;background-color: red;" ></div>

function allowDrop(ev){
	ev.preventDefault();
}
function drag(ev){
	ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
}

二. 语义化更好的内容标签（header、nav、footer、aside、article、section）

1. 常用的结构标签有以下几种

<header＞元素，用于定义文档的页眉。
<nav＞元素，用于定义页面的导航链接部分。
<section＞元素，用于定义文档中的节，表示文档中一个具体的组成部分。
<article＞元素，常用于定义独立于文档其他部分的内容。
<footer＞元素，常用于定义某区域的脚注信息。
<aside＞元素，常用于定义页面的一些额外组成部分，如广告栏、侧边栏和相关引用信息。

2. 说说你对语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化标签有如下特点。

丢失样式的时候能够让页面呈现出清晰的结构。
SEO是指和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息。爬虫依赖标签来确定上下文和各个关键字的权重。
其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页。
在团队开发和维护中，语义化更具可读性，是未来网页发展的重要方向。遵循W3C标准的团队开发的网页，都会遵循这个标准，以减少差异。

优点：

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于 SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

三. 音频、视频（audio、video）APL

1. 如何在 HTML5 页面中嵌入音频？

HTML5 包含了嵌入音频文件的标准方式，支持的格式包括 MP3、Wav和Ogg等，嵌入方式如下。

<audio controls> 
    <source src="icketang.mp3 " type="audio/mpeg"> 
    Your browser does'nt support audio embedding feature 
</audio>

2. 如何在 HTML5 页面中嵌入视频？

和嵌入音频文件一样， HTML5 定义了嵌入视频的标准方式，支持的格式包括 MP4、 WebM 和 Ogg 等，嵌入方式如下。

<video width＝"450" height＝"340" controls> 
    <source src="icketang.mp4 " type＝"video/mp4"> 
    Your browser does’nt support video embedding feature . 
</video>

四. 画布（Canvas）API 和 SVG。

1. HTML5 Canvas 元素有什么作用？

作用：Canvas元素用于在网页上绘制图形，该元素标签的强大之处在于可以直接在HTML上进行图形操作。

2. HTML5 Canvas绘制步骤是怎样的?

绘制步骤：

<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    // 首先，找到 <canvas> 元素
    const canvas = document.getElementById('canvas')
    // 创建 context 对象, getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
    const ctx = canvas.getContext('2d')
    // 描边矩形
    // ctx.strokeStyle = 'pink'
    // ctx.strokeRect(50, 50, 200, 100)	// strokeRect(x, y, width, height)
    // 填充矩形
    ctx.fillStyle = 'pink'
    ctx.fillRect(50, 50, 200, 100) // fillRect(x, y, width, height)
</script>

3. 什么是 SVG?

SVG 即可缩放矢量图形（ Scalable Vector Graphics ）。它是基于文本的图形语言，使用文本、线条、点等来绘制图像，这使得它轻便、显示迅速。

4. Canvas 和 SVG 的区别是什么？

（1）SVG:

SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言 XML 描述的 2D 图形的语言，SVG 基于 XML 就意味着 SVG DOM中的每个元素都是可用的，可以为某个元素附加 Javascript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。其特点如下：

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

（2）Canvas

Canvas 是画布，通过 Javascript 来绘制 2D 图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。其特点如下：

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性

（3）两者的区别如下：

一旦 Canvas 绘制完成将不能访问像素或操作它；任何使用 SVG 绘制的形状都能被记忆和操作，可以被浏览器再次显示。
Canvas 对绘制动画和游戏非常有利；SVG 对创建图形（如 CAD ）非常有利。
因为不需要记住以后事情，所以 Canvas 运行更快；因为为了之后的操作，SVG需要记录坐标，所以运行比较缓慢。
在 Canvas 中不能为绘制对象绑定相关事件；在 SVG 中可以为绘制对象绑定相关事件。
Canvas 绘制出的是位图，因此与分辨率有关；SVG 绘制出的是矢量图，因此与分辨率无关。

5. 如何使用 Canvas 和 HTML5 中的 SVG 画一个矩形？

使用 SVG 绘制矩形的代码如下:

<svg version="1.1"> 
    <rect style="fill:rgb(255,100,0);" height="20" width="40"></rect> 
</svg>

使用 Canvas 绘制矩形的代码如下:

<canvas id="myCanvas" width="500" height="50"></canvas>

// 首先，找到 <canvas> 元素
var c=document.getElementById("myCanvas");
// 创建 context 对象, getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
var ctx=c.getContext("2d");
// 填充颜色
ctx.fillStyle="#FF0000";
// 绘制 fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
ctx.fillRect(0,0,150,75);

五. 地理（Geolocation）API。

HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

使用 getCurrentPosition() 方法来获得用户的位置

一个简单的地理定位实例，可返回用户位置的经度和纬度:

var x=document.getElementById("demo");
// 检测是否支持地理定位
function getLocation(){
    if (navigator.geolocation){
    // 如果支持，则运行 getCurrentPosition() 方法。
    // 如果 getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象
        navigator.geolocation.getCurrentPosition(showPosition);
    }else{
    // 如果不支持，则向用户显示一段消息。
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
// showPosition() 函数获得并显示经度和纬度
function showPosition(position){
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}

六. web存储【localStorage，sessionStorage】

本地离线存储（localStorage），即长期存储数据，浏览器关闭后数据不丢失。
会话存储（sessionStorage），即数据在浏览器关闭后自动删除。

1、本地存储和会话（事务）存储之间的区别是什么？

本地存储数据持续永久，但是会话存储在浏览器打开时有效，在浏览器关闭时会话重置存储数据。

2、如何实现浏览器内多个标签页之间的通信？

在标签页之间，调用 localstorge、 cookies 等数据存储，可以实现标签页之间的通信。

3、HTML5 为浏览器提供了哪些数据存储方案？

在较高版本的浏览器中，提供了sessionStorage和globalStorage。在HTML5规范中，用localStorage取代 globalStorage。HTML5中的Web Storage包括两种存储方式，分别是sessionStorage和localStorage。

sessionStorage 用于在本地存储一个会话（session）中的数据，这些数据只有同一个会话中的页面才能访问，当会话结束后，数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

localStorage 和sessionStorage 都具有相同的操作方法，例如 setItem、getItem 和 removeItem 等。

4、请描述一下 sessionStorage 和 localStorage 的区别？

sessionStorage 用于在本地存储一个会话中的数据，这些数据只有同一个会话中的页面才能访问，当会话结束后，数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的。

5、localStorage 和 cookie 的区别是什么？

localStorage 的概念和 cookie 相似，区别是 localStorage 是为了更大容量的存储设计的。cookie 的大小是受限的，并且每次请求一个新页面时，cookie都会被发送过去，这样无形中浪费了带宽。另外，cookie还需要指定作用域，不可以跨域调用。

除此之外， localStorage 拥有 setItem、getItem、removeItem、clear等方法，cookie则需要前端开发者自己封装setCookie和getCookie。但cookie也是不可或缺的，因为cookie的作用是与服务器进行交互，并且还是HTTP规范的一部分，而localStorage仅因为是为了在本地“存储”数据而己，无法跨浏览器使用 。

6、请你谈谈 cookie 的特点。

cookie 虽然为持久保存客户端数据提供了方便，分担了服务器存储的负担，但是有以下局限性。

每个特定的域名下最多生成 20 个 cookie
IE6 或更低版本最多有 20 个 cookie。
IE7 和之后的版本最多可以有 50 个 cookie。
Firefox 最多可以有 50 个 cookie。
Chrome 和 Safari 没有做硬性限制。

7、cookie 和 session 的区别是什么？

cookie 数据存放在客户的浏览器上， session 数据存放在服务器上。
cookie 不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗。考虑到安全问题应当使用session。
session 会在一定时间内保存在服务器上。当访问增多时，会占用较多服务器的资源。为了减轻服务器的负担，应当使用cookie。
单个cookie 保存的数据不能超过4KB，很多浏览器都限制一个站点最多保存 20 个 cookie。建议可以将登录信息等重要信息存放在 session 中，其他信息（如果需要保留）可以存放在 cookie 中。

七.应用缓存

1、什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时（网络不可用时）使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

2、HTML5 中的应用缓存是什么？

HTML5 应用缓存的最终目的是帮助用户离线浏览页面。换句话说，如果网络连接不可用，打开的页面就来自浏览器缓存，离线应用缓存可以帮助用户达到这个目的。应用缓存可以帮助用户指定哪些文件需要缓存，哪些不需要。

3、HTML5 应用缓存和常规的 HTML 浏览器缓存有什么差别？

HTML5 应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML，CSS，图像和JavaScript脚本并存在本地。该特性提升了网站的性能，可通过如下方式实现。

<!doctype html> 
<html manifest="example.appcache"> 
...
</html>

与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。

4、HTML5 中如何实现应用缓存？

首先，需要指定manifest文件，manifest文件帮助你定义缓存如何工作。以下是manifest文件的结构。

CACHE MANIFEST 
# version 1.0
/demo.css
/demo.js
/demo.png

所有 manifest 文件都以 “ CACHE MANIFEST ”语句开始。
＃（散列标签）有助于提供缓存文件的版本。
manifest 文件的内容类型应是 “ text/cache-manifest ” 。

创建一个缓存 manifest 文件后，在 HTML 页面中提供 manifest 链接，代码如下所示。

<html manifest="icketang.appcache">

第一次运行以上文件时，它会添加到浏览器应用缓存中，在服务器宕机时，页面从应用缓存中获取数据。

5、如何刷新浏览器的应用缓存？

应用缓存通过变更 # 标签后的版本号来刷新，如下所示：

CACHE MANIFEST 
# version 2.0 
/icketang.css
/icketang.js
/icketang.png
NETWORK : 
login.php

6、应用缓存中的回退是什么？

应用缓存中的回退会帮助你指定在服务器不可访问时，显示某文件。例如在下面的manifest文件中，如果用户输入了／home，同时服务器不可到达，404.html文件应送达。

FALLBACK : 
/home/ /404.html

7、应用缓存中网络命令的作用是什么？

网络命令描述不需要缓存的文件，例如以下代码中login.php始终都不应该缓存或者离线访问。

NETWORK : 
login.php

8、浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求manifest 文件，如果是第一次访问页面，那么浏览器就会根据manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器会直接使用离线存储的资源。

八. 新的技术包括 webworker、websocket

1、请你说一下 WebWorker 和 WebSocket 的作用。

Web Worker 的作用如下

通过 worker = new Worker(url)加载一个JavaScript文件，创建一个Worker, 同时返回一个Worker实例。
用 worker.postMessage(data)向Worker发送数据。
绑定 worker.onmessage 接收 Worker 发送过来的数据。
可以使用 worker.terminate()终止一个Worker的执行。

WebSocket 的作用如下它是Web应用程序的传输协议，提供了双向的、按序到达的数据流。它是HTML5新增的协议，WebSocket的连接是持久的，它在客户端和服务器之间保持双工连接，服务器的更新可以及时推送到客户端，而不需要客户端以一定的时间间隔去轮询。

九、HTML5 如何实现跨域？

在服务器端设置允许在其他域名下访问，例如允许所有域名访问以下内容。

response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods","POST");
response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");

HTML

1、img 标签上的 title 和 alt 属性的区别是什么？

title的功能是为元素提供标题信息，即当光标悬浮在标签上后显示的信息；
alt的功能是图片的替换文案，即当图片不能正常显示时（如加载失败），用文字代替。

2、简述一下 src 与 href 的区别。

src 表示来源地址，用在 img、 script、 i企ame 等元素上。
href表示超文本引用（ hypertext reference ），用在 link 和 a 等元素上。

src的内容是页面必不可少的一部分，表示引入。 href 的内容与该页面有关联，表示引用。简单来说，它们的区别就是引入和引用

3、简述一下＜strong><em＞和＜b><i＞标签的区别

＜strong＞标签和＜em＞标签一样，用于强调文本，但它强调的程度更强一些。 <em＞是斜体强调标签，强调更强烈，表示内容的强调点。视觉上相当于 html 元素中的＜i>...</i＞。

＜em＞和＜strong＞是表达元素，即语义化元素。
<b>和<i>是视觉元素，即非语义化元素，分别表示无意义的加粗和无意义的抖体。

4、iframe相关的问题

（1）说＜iframe＞有哪些优点？

可以解决加载缓慢的第二方内容，如图标和广告等的加载问题。
可以实现安全沙箱（ Security Sandbox ）。
可以并行加载脚本

（2）＜iframe＞有哪些缺点？

iframe 会阻塞主页面的Onload事件。
iframe 的内容即使为空，加载它也需要时间。
iframe 元素没有语义

5、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素有：a b span img input select strong；块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；空元素，即没有内容的 HTML 元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
鲜见的有： <area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

html和html5相关面试题