• html5新特性

    HTML5 中的一些有趣的新特性：
    用于绘画的 canvas 元素
    用于媒介回放的 video 和 audio 元素
    对本地离线存储的更好的支持
    新的特殊内容元素，比如 article、footer、header、nav、section
    新的表单控件，比如 calendar、date、time、email、url、search

    1、新元素

    新元素
    image.png

    新多媒体元素
    image.png
    新表单元素
    image.png

    新的语义和结构元素
    image.png

    audio 音频

        <audio id="djMusic">
        <source src="/audio/msgComing.mp3" type="audio/mpeg">
        <source src="/audio/msgComing.ogg" type="audio/ogg">
        您的浏览器不支持 audio 元素。
    </audio>
<script>
//解决浏览器不支持自动播放的方法 点击触发音频播放  只绑定一次
 $(document).one('click', function () {
        var audio = angular.element("#djMusic")[0];//音频文件
        audio.play();//播放
        audio.pause();//暂停
});

function music() {
  //调用声音
  var audio = angular.element("#djMusic")[0];//音频文件
  audio.currentTime = 0;
  audio.play();
}
</script>

    video 视频

    <div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 
<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
	if (myVideo.paused) 
	  myVideo.play(); 
	else 
	  myVideo.pause(); 
} 

	function makeBig()
{ 
	myVideo.width=560; 
} 

	function makeSmall()
{ 
	myVideo.width=320; 
} 

	function makeNormal()
{ 
	myVideo.width=420; 
} 
</script>

    新的输入(input)类型

    color date datetime datetime-local email month number range search tel time url week

    <input type="number" name="quantity" min="1" max="5">
    使用下面的属性来规定对数字类型的限定：
    image.png

    <input type="range" name="points" min="1" max="10">
    请使用下面的属性来规定对数字类型的限定：

    • max - 规定允许的最大值
    • min - 规定允许的最小值
    • step - 规定合法的数字间隔
    • value - 规定默认值

    新的表单元素

    元素规定输入域的选项列表。
    属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
    使用 元素的列表属性与 元素绑定.

    <form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

    元素的作用是提供一种验证用户的可靠方法。标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

    <form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>


    元素用于不同类型的输出，比如计算或脚本输出：

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

    新的表单属性

    HTML5 的

    和 标签添加了几个新属性.
    新属性：

    • autocomplete
    • novalidate

    新属性：

    • autocomplete
    • autofocus
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • height 与 width
    • list
    • min 与 max
    • multiple
    • pattern (regexp)
    • placeholder
    • required
    • step

    2、Web 存储

    HTML5 提供了两种在客户端存储数据的新方法：

    • localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
    • sessionStorage - 针对一个 session 的数据存储，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

    之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
    在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5 使用 JavaScript 来存储和访问数据。
    在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

    if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

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

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

    3、应用程序缓存

    HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
    应用程序缓存为应用带来三个优势：
    1、离线浏览 - 用户可在应用离线时使用它们
    2、速度 - 已缓存资源加载得更快
    3、减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

    <!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
文档内容......
</body>

</html>

    4、WebSocket

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
    image.png
    创建webSocket对象：

    var Socket = new WebSocket(url, [protocol] );

    以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
    WebSocket 属性:
    以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：
    image.png
    WebSocket 事件:
    image.png
    WebSocket 方法:
    image.png
    实例：

    <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("连接已关闭..."); 
               };
              ws.onerror = function(e){
                  console.error('ws error', e);
              }
            } else {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>

    5、Geolocation（地理定位）

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

    <body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
	if (navigator.geolocation)
	{
		navigator.geolocation.getCurrentPosition(showPosition);
	}
	else
	{
		x.innerHTML="该浏览器不支持获取地理位置。";
	}
}

function showPosition(position)
{
	x.innerHTML="纬度: " + position.coords.latitude + 
	"<br>经度: " + position.coords.longitude;	
}
</script>
</body>

    6、拖放（Drag 和 Drop）

    <body>

<p>拖动 RUNOOB.COM 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
<script>
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));
}
</script>
</body>

    7、已移除的元素

    以下的 HTML 4.01 元素在HTML5中已经被删除:

    • <acronym>
    • <applet>
    • <basefont>
    • <big>
    • <center>
    • <dir>
    • <font>
    • <frame>
    • <frameset>
    • <noframes>
    • <strike>
    • <tt>
  • 相关阅读:
    TUN/TAP区别
    从日志文件解决ArcGIS Server性能低下问题的步骤（1）
    java异常
    Maven
    前车之鉴-web篇
    图论复习总结
    奇（qi）谋（ji）巧（yin）计（qiao）
    莫比乌斯反演呓语
    学习后缀数组笔记
    浅读叶青学长竞赛学习知识目录
  • 原文地址：https://www.cnblogs.com/SPHmomo/p/12937003.html
Copyright © 2020-2023  润新知