logo头像

总有人间一两风，填我十万八千梦

前端面试系列（1）——HTML5新特性

HTML 面试 HTML 2017/03/18

这道问题被问的比较少，因为在如今前端框架大行其道的趋势下，对于 HTML 的理解似乎已经变得不那么重要了，况且浏览器对 H5（是的，我们通常说的 H5 其实就是 HTML5，5 代表版本）的支持还不那么完美，但是了解一下还是有助于自己前端水平的提升的，在查阅资料的过程中我发现有些特性我也是第一次知道，不过有些特性已经显示了其强大之处，比如：canvas，高能预警，大量干货：

摒弃了旧特性

1. 原 HTML 声明方式将失效，将采用简单的声明方式

原来：

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

现在：

1
<!DOCTYPE html>

2. 脚本和链接无需 type，在 HTML5 中，你只需要用简化的代码来给你的网页添加 CSS 和 JavaScript 文件，而不再需要指定类型属性

1
2
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

新的内容元素

1. figure

可以更加语义化地表示带标题的图片

1
2
3
4
5
6
<figure>
  <img src=”path/to/image” alt=”About image” />
  <figcaption>
    <p>This is an image of something interesting. </p>
  </figcaption>
</figure>

2. hgroup

一般在 header 里面用来将一组标题组合在一起

1
2
3
4
5
6
<header>
  <hgroup>
    <h1> Recall Fan Page </h1>
    <h2> Only for people who want the memory of a lifetime. </h2>
  </hgroup>
</header>

3. mark

高亮的作用，比如用户的搜索内容可以在文章中用 <mark> 进行修饰

1
2
<h3> Search Results </h3> 
<p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>

4. output

用来显示计算结果，也有一个和 label 一样的 for 属性

5. small

重新定义了 <small>，现在被用来表示小的排版，如网站底部的版权声明

6. article

定义文章

定义尾部

8. header

定义头部

9. nav

定义导航栏

10. section

定义 section 区域

新的属性：

1. contenteditable

让你的内容可编辑

2. placeholder

不必通过javascript就可以显示提示内容了

3. input 的 新type

包括 email（如果给 input 的 type 设置为 email，浏览器就会验证这个输入是否是 email 类型）、range（可以创建滑块，它接受 min，max，step 和 value 属性）、color（颜色选择器）等等

4. input 的新属性

包括 autocomplete（on / off，是否使用输入字段的自动完成功能）、autofocus（规定输入字段在页面加载时是否获得焦点，但不试用于 type=”hidden”）、required（指示输入字段的值是必须的）、form（规定输入字段所属的一个或多个表单）-> 其实新属性还有很多，可以点击文末 w3c 官网链接进行查看

5. pattern 属性

可以在 input 里直接使用正则表达式验证了

1
2
3
4
5
<form action=”" method=”post”> 
  <label for=”username”>Create a Username: </label> 
  <input type=”text” name=”username” id=”username” placeholder=”4-10″ pattern=”\[A-Za-z\]{4,10}” autofocus required> 
  <button type=”submit”>Go </button> 
</form>

新的重要的元素

1. canvas

使用 Javascript 在网页上绘制图像，canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法；将在游戏、图表制作、banner 广告、模拟器、远程计算机控制、字体设计、图形编辑器、其他可嵌入网站的内容等方面大有可为；

SVG 与 Canvas 两者间的区别：

  1. SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。
  2. SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
  3. 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

下表列出了 canvas 与 SVG 之间的一些不同之处：

CanvasSVG
依赖分辨率不依赖分辨率
不支持事件处理器支持事件处理器
弱的文本渲染能力最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘不适合游戏应用

2. 视频 video 元素

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。通用的视频播放解决方案是 flash 和 flv（flash 从 9 开始支持 h.264 的 mp4）。但是随着 iOS 设备的流行，flash 已经不是万能药了，越来越多的视频网站提供多元的解决方案，而且偏向于 HTML5：也就是说，通过检测 agent 是否支持 html5 来决定使用 video 还是 flash。在面对 IE8 以下的浏览器时，flash 几乎是唯一的选择(silverlight 的接受度普遍不高)。

3. 音频 audio 元素

同理可见 video 元素

对本地离线存储的更好的支持

1. Web worker

运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

2. Web Storage

将数据存储在本地，而不会和服务器发生任何交互，使得数据操作更加简便

  • Web Storage 与 Cookie 相比存在不少的优势，概括为以下几点：存储空间更大，能提供 5MB 的存储空间（不同浏览器的提供的空间不同），Cookie 仅 4KB
  • 存储内容不会发送到服务器：当设置了 Cookie 后，Cookie 的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而 Web Storage 中的数据则仅仅是存在本地，不会与服务器发生任何交互。
  • 更多丰富易用的接口：Web Storage 提供了一套更为丰富的接口，使得数据操作更为简便。(开发者的福利)
  • 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

3. Application Cache

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本，HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：

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

地理位置 API

Geolacation API 用于获得用户的地理位置，实例：

  • 更新本地信息
  • 显示用户周围的兴趣点
  • 交互式车载导航系统（GPS）

总结

下面一张图展示了这些新特性的应用场景和可用玩法：

扩展阅读

赏
支付宝打赏 微信打赏

听说赞过就能年薪百万

转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © Merrier说
访问量:   |   访客数:
Copyright © 2018 | Powered by Hexo | Theme by Snippet | ICP 证： 京ICP备17022347号-1