page contents

html5新增哪些特性

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等

attachments-2021-08-AuP92tZ7611db282a3224.jpg

html5的新特性有哪些？

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等

(1)语义标签

 标签 描述
 <hrader></header> 定义了文档的头部区域
 <footer></footer> 定义了文档的尾部区域
<nav></nav>定义文档的导航
 <section></section> 定义文档中的节（section、区段）
 <article></article> 定义页面独立的内容区域
<aside></aside>定义页面的侧边栏内容
<detailes></detailes>用于描述文档或文档某个部分的细节
<summary></summary>标签包含 details 元素的标题
<dialog></dialog>定义对话框，比如提示框

 (2)增强型表单

输入类型

描述

color

主要用于选取颜色

date

从一个日期选择器选择一个日期

datetime

选择一个日期（UTC 时间）

datetime-local

选择一个日期和时间 (无时区)

email

包含 e-mail 地址的输入域

month

选择一个月份

number

数值的输入域

range

一定范围内数字值的输入域

search

用于搜索域

tel

定义输入电话号码字段

time

选择一个时间

url

 URL 地址的输入域

week

选择周和年

　　HTML5 新增的表单属性

  • placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
  • required  属性，是一个 boolean 属性。要求填写的输入域不能为空
  • pattern 属性，描述了一个正则表达式用于验证<input> 元素的值。
  • min 和 max 属性，设置元素最小值与最大值。
  • step 属性，为输入域规定合法的数字间隔。
  • height 和 width 属性，用于 image 类型的 <input> 标签的图像高度和宽度。
  • autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
  • multiple 属性 ，是一个 boolean 属性。规定<input> 元素中可选择多个值。　

(3)视频和音频

　　HTML5 提供了播放音频文件的标准，即使用 <audio> 元素。

　　HTML5 规定了一种通过 video 元素来包含视频的标准方法。

(4)Canvas绘图　　

1
2
3
4
5
6
7
8
9
基本使用方法：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
 
<script>
　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　ctx.fillStyle="#FF0000";
　　ctx.fillRect(0,0,150,75);
</script>

 Canvas - 路径   Canvas - 文本   Canvas - 渐变  Canvas - 图像

(5)SVG绘图

SVG是指可伸缩的矢量图形

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

(6)地理定位

1
2
3
4
5
window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}　

 (7)拖放API

　　拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。　　

　　拖放的源对象(可能发生移动的)可以触发的事件——3个：

dragstart：拖动开始

drag：拖动中

dragend：拖动结束

整个拖动过程的组成： dragstart*1 + drag*n + dragend*1

 

　　拖放的目标对象(不会发生移动)可以触发的事件——4个：

 

dragenter：拖动着进入

 

dragover：拖动着悬停

 

dragleave：拖动着离开

 

drop：释放

 

整个拖动过程的组成1： dragenter*1 + dragover*n + dragleave*1

 

整个拖动过程的组成2： dragenter*1 + dragover*n + drop*1

 

　　dataTransfer：用于数据传递的“拖拉机”对象；

 

  在拖动源对象事件中使用e.dataTransfer属性保存数据：

 

　　e.dataTransfer.setData( k,  v )

 

  在拖动目标对象事件中使用e.dataTransfer属性读取数据：

 

　　var value = e.dataTransfer.getData( k )

(8)Web Worker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<body>
 
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
 
<script>
var w;
 
function startWorker()
{
if(typeof(Worker)!=="undefined") //浏览器是否支持
{
  if(typeof(w)=="undefined")//是否存在 worker
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {//向 web worker 添加一个 "onmessage" 事件监听器：
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
 
function stopWorker()
{
w.terminate(); //终止 web worker，并释放浏览器/计算机资源
}
</script>
 
</body>
</html>

 (9)Web Storage

客户端存储数据的两个对象为：

localStorage - 没有时间限制的数据存储  

sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

1
2
3
4
5
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

 (10)WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>W3Cschool教程(w3cschool.cn)</title>
     
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
                
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                 
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                 
               ws.onmessage = function (evt)
               {
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                 
               ws.onclose = function()
               {
                  // 关闭 websocket
                  alert("连接已关闭...");
               };
            }
             
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
         
   </head>
   <body>
    
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
       
   </body>
</html>

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

attachments-2022-06-rAUzl1XZ62ad85035d1cc.jpeg

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
轩辕小不懂
轩辕小不懂

2403 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1470 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章

轩辕小不懂

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！