HTML5的新特性

HTML5 是下一代的 HTML，新增了不少的标签啊什么的，今天就总结一波（悄咪咪其实是因为面试题好多都在考这个点

视频/音频

<video>

// 基本用法
<video src='movie.ogg'>
    这里的内容是供不支持 video 元素的浏览器显示的
</video>



// 一些常见的属性
autoplay：视频在就绪后立刻播放
controls：向用户显示空间，比如播放/暂停按钮
height：视频播放器的高度
loop：循环播放
preload：视频在页面加载时进行播放，但如果使用 autoplay，则忽略改属性
src：播放视频的url
width：视频播放器的宽度

<audio>

// 基本用法
<audio src='song.org'>
    这里的内容提供给不支持 audio 元素的浏览器显示
</audio>


// 基本属性
autoplay：音频就绪立即播放
controls：向用户显示空间，比如播放/暂停按钮
loop：循环播放
preload：与 video 一样
src：播放音频的url

拖放：即抓取对象以后拖到另外一个位置。HTML5中任何元素都能够拖放

 1 // 实现拖放
 2 <!DOCTYPE HTML>
 3 <html>
 4     <head>
 5         <script type='text/javascript'>
 6             function allowDrop(ev){
 7                 ev.preventDefault();
 8             }
 9             
10             function drag(ev){
11                 ev.dataTransfer.setData('Text', ev.target.id);
12             }
13 
14             function drop(ev){
15                  ev.preventDefault();
16                  var data = ev.dataTransfer.getData('Text');
17                  ev.target.appendChild(document.getElementById(data));
18             }
19         </script>
20     </head>
21 　　<body>
22     　　<div id='div1' ondrop='drop(event)' ondragover='allowDrop(event)'></div>
23 　　　　 <img id='drag1' src='image.git' draggable='true' ondragstart='drag(event)' width='330' height: '330' />
24 　　</body>
25 </html>

解析一下上面的代码，我们看到了 ondrop, ondragStart, ondragOver, draggable。他们分别代表的意思是什么呢？

ondrop：当放置被拖数据时，会发生 drop 事件。例如上面代码将<img>拖动放到<div>中，ondrop属性调用了drop函数。再看一下 drop 函数

function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData('Text');
    ev.target.appendChild(document.getElementById(data));
}

- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目标元素）中

ondragStart：ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}

// 数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

ondragOver：ondragOver 属性调用了一个函数，allowDrop(event)，规定了拖动的元素放在何处
draggable：这个属性将元素设定为可拖放的。

画布

Canvans 元素使用 JavaScript 在网页上绘制图像，画布是一个矩形区域，可以控制每一个像素。

使用方法：

// 创建 Canvas 元素
<canvas id='myCavans' width='200' height='100'></canvas>

// JS 绘制
<script type='text/javascript'>
    var c = document.getElementById('myCavans');
    var cxt = c.getContext('2d'); // 创建 context 对象
    cxt.fillStyle='#f00';  // 染色
    cxt.fillRect(0, 0, 150, 75);  // 规定形状、尺寸和位置，从(0, 0)开始绘制 150x75 的矩形
}

SVG 指可伸缩矢量图形，再放大或改变尺寸的情况下起图形直亮不会有损失。
地理位置 HTML5 Geolocation(地理位置) 用于定位用户的位置

localStorage

localSotrage 方法存储的数据没有时间限制，不手动清除则永远存在

// 新建一个key-value放入localStorage
localStorage.setItem(key, value);

// 获取key值对应的value值
localStorage.getItem(key);

// 移除某一个localStorage项
localStorage.removeItem(key);

// 清除所有
localStorage.clear();

sessionStorage

sessionStorage 与 localStorage 相似，不同在于localStorage 里面存储的数据没有过期时间的设置，而存储在 sessionStorage 里面的数据在页面回话结束后就会被清除。也就是说当这个浏览页面被关闭之后sessionStorage就会被清除。

// API
sessionStorage.setItem(key, value);

sessionStorage.getItem(key);

sessionStorage.removeItem(key);

sessionStorage.clear();

cookie的缺点：cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

应用缓存
- 什么是应用缓存？通过创建 cache manifest 文件，可以轻松的创建 web 应用的离线版本。
- 优势：离线浏览——用户可以在没有网络的情况下浏览到基础的页面；速度——以缓存的资源加载得更快；减少服务器负载——只会从服务器上下载更新或更改过得资源。
- 除了 IE，其他所有得主流浏览器均支持应用程序缓存
- 如何使用
```
<!DOCTYPE HTML>
<html manifest='demo.appcache'>
<body>
    The content of the document...
</body>
</html>
```
- Manifest 基础 —— 需要启动应用程序缓存，便在文档得 <html> 标签中包含 manifest 属性。manifest 文件得建议文件扩展名是 .appcache
- Manifest 文件
  - CACHE MANIFEST —— 在此标题下列出的文件将在首次下载后缓存
  - NETWORK —— 在此标题下列文件需要与服务器连接，且不会被缓存
  - FALLBACK —— 在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）
表单
- 新增多个表单输入类型，提供更好的输入控制和验证 (type='email' 等等)
  - email
  - url
  - number
  - range
  - Date pickers(date, month, week, time, datetime, datetime-local)
  - search
  - color

- 新增的表单元素
  - <datalist>
    datalist 元素规定输入域的选项列表。
    
    列表是通过 datalist 内的 option 元素创建的。
    
    如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
  - <keygen> keygen 元素的作用是提供一种验证用户的可靠方法。
  - <output> output 元素用于不同类型的输出，比如计算或脚本输出
- 新增的一些属性
  - <form> 属性
    - autocomplete 自动完成功能
    - novalidate 表单提交不验证form和input域
  - <input> 属性
    - autocomplete 自动完成
    - autofocus 自动获得焦点
    - form
    - form overrides
    - height,width
    - min, max, step 输入域允许的最大值/最小值/规定合法的数字间隔
    - pattern
    - placeholder
    - required

posted @ 2019-09-09 10:47 瓶子咕咕咕阅读(287) 评论(0) 收藏举报

刷新页面返回顶部

瓶子

HTML5的新特性

公告