zoukankan      html  css  js  c++  java

  • HTML5 知识一览，10分钟搞定它

    HTML5知识点汇总

    HTML5 中的一些有趣的新特性

    用于绘画的 canvas 元素
    用于媒介回放的 video 和 audio 元素
    对本地离线存储的更好的支持
    新的特殊内容元素，比如 article、footer、header、nav、section
    新的表单控件，比如 calendar（日历）、date（日期）、time（时间格式）、email（邮件）、url（链接）、search（搜寻）,可以方便用户填写或者方便格式验证。

    目录：

    • 新增内容元素解释及表单控件举例
    • 视频
    • 音频
    • 拖放
    • 画布
    • SVG
    • 地理定位
    • Web存储
    • 应用缓存
    • Web Workers
    • 服务器发送事件

    PS以下内容只是基于个人对HTML5的大致理解，做个笔记，若有错误，请不要吝啬指出哈，详情可以查看 https://www.w3school.com.cn/html5/index.asp

    表单控件举例

    1、date

    <input type="date" >

    效果图：

    HTML5视频

    直到现在，仍然不存在一项旨在网页上显示视频的标准。
    今天，大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
    HTML5 规定了一种通过 video 元素来包含视频的标准方法。
    #最简单的用法

      <video src="movie.ogg" controls="controls">不支持H5时显示的内容</video>   //controls="controls"是自带简单的控制组件
#兼容浏览器，运用<source>标签，嵌入多个视频格式链接，浏览器只识别第一个可识别的格式

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

    HTML5音频

    直到现在，仍然不存在一项旨在网页上播放音频的标准。
    今天，大多数音频是通过插件（比如Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
    HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
    audio 元素能够播放声音文件或者音频流。

    <audio src="song.ogg" controls="controls">网页不支持H5时显示的内容</audio>
#兼容浏览器，浏览器只识别第一个可播放的音频文件格式

<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

    先明确一个点：网页中默认元素是不可拖动的，也是不可把其他元素放在另一个元素上面的,以下ev为DOM传递的参数event，以下为拖动步骤：
    1、拖放的元素
    （1）设置元素可拉动—— draggable="true"，如

    <img draggable="true" />

    （2）元素被拖动时保存数据——ondragstart="ev.dataTransfer.setData("变量名",ev.target.id)"
    2、放的地方
    （1）其他元素悬空至本元素时，设置本元素可放置其他元素，这样才可以将其放进去——ev.preventDefault();

    ##设置要被放置元素的标签的事件ondragover="allowDrop(event)"

function allowDrop(ev)
{
ev.preventDefault();
}

    （2）放下被拖动的元素时，再次设置本元素可放置其他元素，并获取元素，将元素添加为本元素的子元素（本质）

    <!- 相对应的放置其他元素的容器设置，ondrop为放下时，ondragover是有其他元素悬空至本元素时->
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>

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

    画布

    介绍：画布就是利用javascript在网页上绘制图像的一种元素，画布是一块举行区域，我们可以控制它的每一个像素
    使用（三步走）：
    1、创建Canvas元素：eg：

    <canvas id="myCanvas" width="200" height="100"></canvas>

    2、获取canvas元素，创建context对象：eg:

    var c=document.getElementById("myCanvas");
var cxt = c.getContext("2d");

    3、绘制，eg:

    cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

    SVG

    定义

    • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
    • SVG 用于定义用于网络的基于矢量的图形
    • SVG 使用 XML 格式定义图形
    • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
    • SVG 是万维网联盟的标准
      总结：内容为纯粹的XML格式，可无线放大拉伸像素不变，尺寸比jpeg、gif等小，图像中有文本还可以被搜索到（适合做地图等）。
      竞争对手：Flash，SVG优势：与其他标准（比如 XSL 和 DOM）相兼容，而 Flash 则是未开源的私有技术

    使用方法:

    (1)使用标签引入

    • 优势：所有主要浏览器都支持，并允许使用脚本

    • 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

      <embed src="circle1.svg" type="image/svg+xml" />

    (2)使用标签引入

    • 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准

    • 缺点：不允许使用脚本。

      <object data="circle1.svg" type="image/svg+xml"></object>

    (3)使用 iframe 标签引入

    • 优势：所有主要浏览器都支持，并允许使用脚本

    • 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

      //<iframe src="circle1.svg"></iframe>

    (4)直接在HTML嵌入SVG代码
    在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
  </svg>

    (5)直接使用链接嵌入

      <a href="circle1.svg">View SVG file</a>

    地理定位

    HTML5 Geolocation API 用于获得用户的地理位置。

    用法：

    主要使用navigator.geolocation对象来获取地理位置信息，它主要有getCurrentPosition()，watchPosition()，clearWatch()三个方法
    （1）getCurrentPosition

    （2）watchPosition
    返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
    （3）clearWatch(),停止 watchPosition() 方法

    例子：

      //例子关键代码：返回用户位置的经度和纬度
   function getLocation(){
        if (navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showPosition);
      }}

    效果：

    Web 存储

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

    介绍

    1、localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
    2、sessionStorage方法用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅、是会话级别的存储。只允许同一窗口访问。 （同一个页面才可以访问存储的元素，刷新也可以继续访问，但是关闭页面重新打开，数据就不见了）

    使用

    1、先判断（浏览器是否支持）——if(typeof(Storage)!=="undefine"){若支持执行的代码段}else{不支持执行代码段}
    2、localStorage的增删改查
    增：localStorage.setItem("propName","value")
    删：localStorage.removeItem('propName')
    改：localStotage.propNmae=newValue
    查：localStorage.getItem(propName)
    3、sessionStorage的增删改查
    增：sessionStorage.setItem("propName","value")
    删：sessionStorage.removeItem('propName')
    改：sessionStotage.propNmae=newValue
    查：sessionStorage.getItem(propName)

    例子（localstorage,session同下）：

<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
    localStorage.setItem("lastname", "Gates");
// Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
}
</script>
</body>

    sessionStorage 、localStorage和cookei的区别：

    应用场景

    因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了~
    而另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

    应用缓存——Application Cache

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

    使用：

    1、manifest文件配置：
    manifest 文件可分为三个部分：

    CACHE MANIFEST（必须）- 在此标题下列出的文件将在首次下载后进行缓存
    NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
    FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

    例子：
    CACHE MANIFEST

    # 2012-02-21 v1.0.0    //注释行，在服务器中更改一个函数或者一幅图片，此文件都不会被修改，但更新此备注却可以更新缓存文件的方法
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
PS:浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）
##以下为html文件中的使用直接在html标签中将其引入
<html manifest="demo.appcache">  //直接在html文件中引入appcache文件

    web Workers

    介绍：运行在后台的一个js脚本，独立于其他脚本，不影响页面性能

    使用：

    0、创建一个需要用于后台运行的js文本文件——需要一个postMessage(data) //向某个页面传达信息
    1、先判断浏览器是否支持：if(typeof(Worker)!=="undefined")
    2、创建new Worker('js文本路径')
    3、使用onmessage监听是否有消息传来，所有则接收js传来的信息，并加以处理运用
    4、终止Web Worker 终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法 //终止后需刷新页面才可重新使用

    例子：

    创建计数脚本，该脚本存储于 "demo_workers.js" 文件中：

    var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();

    以下是html文件：

    <!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")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

    效果图：

    补充：

    onOpen :当通往服务器的连接被打开
    onMessage：当接收到消息
    onerror :当错误发生

    注意：

    1、web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
    2、由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：
    window 对象
    document 对象
    parent 对象

    服务器发送事件：

    介绍：Server-Sent 事件 - 单向消息传递

    Server-Sent 事件指的是网页自动获取来自服务器的更新。
    以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
    例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

    使用： 判、创、监听、使用。

    html文件：

    if(typeof(EventSource)!=="undefined"){           //判
var source=new EventSource("demo_sse.php");       //创
source.onmessage=function(event)                  //监听
  {
  document.getElementById("result").innerHTML+=event.data + "<br />";  //使用
  };
  else
    {
         document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";
     }

    demo_sse.php文件

    <?php
header('Content-Type: text/event-stream');   //把报头 "Content-Type" 设置为 "text/event-stream"
header('Cache-Control: no-cache');           //规定不对页面进行缓存
$time = date('r');                         
echo "data: The server time is: {$time}

";  //输出发送日期（始终以 "data: " 开头） 
flush();                                       ////向网页刷新输出数据
?>
  • 相关阅读:
    jsp学习之——关于请求转发和重定向的形象理解
    java多线程学习之——多线程中几种释放锁和不释放锁的操作
    DBUtils学习之——使用ResultSetHandler接口的各个实现类实现数据库的增删改查
    java网络编程学习之——构建基于多线程的网络通信模型1
    web后端学习过程中技巧总结（持续更新。。。）
    关于表单form元素中onsubmit事件处理机制的认识
    Java小案例——使用双重for循环实现杨辉三角的输出
    Android工具大杂烩
    基于上一篇AS项目依赖库问题的优化解决方案
    Gradle脚本打包AndroidStudio依赖库的问题
  • 原文地址：https://www.cnblogs.com/aiyadc/p/13168028.html
    • Copyright © 2011-2022 走看看