W3school学习笔记之HTML5

最新推荐文章于 2024-09-11 17:25:08 发布

mickytravel

最新推荐文章于 2024-09-11 17:25:08 发布

阅读量662

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/mickytravel/article/details/48831351

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了HTML5的新特性，包括已移除的元素、Canvas、内联SVG、拖放功能、地理定位、新的Input类型和表单元素、语义化标签、Web存储、应用程序缓存、Web Workers、服务器发送事件SSE、多媒体支持以及HTML插件的使用。

摘要由CSDN通过智能技术生成

1、已移除的元素

2、Canvas

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
</script>

3、内联 SVG

<!DOCTYPE html>
<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
          <polygon points="100,10 40,180 190,60 10,60 160,180"
 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
        </svg>
    </body>
</html>

4、Canvas 与 SVG 的比较

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

5、拖放（Drag 和 Drop）

<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>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

6、地理定位

Navigator 对象包含有关浏览器的信息。
getCurrentPosition() ——获得用户的位置。
watchPosition() ——返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() ——停止 watchPosition() 方法。

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
    var x=document.getElementById("demo");
    function getLocation(){
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition (showPosition,showError);}
        else{x.innerHTML="该浏览器不支持获取地理位置。";}
    }
    function showPosition(position){
        var latlon=position.coords.latitude+","+position.coords.longitude;
        var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
      +latlon+"&zoom=14&size=400x300&sensor=false";
        document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
    }
    function showError(error){
        switch(error.code){
        case error.PERMISSION_DENIED:
          x.innerHTML="用户拒绝对获取地理位置的请求。"
          break;
        case error.POSITION_UNAVAILABLE:
          x.innerHTML="位置信息是不可用的。"
          break;
        case error.TIMEOUT:
          x.innerHTML="请求用户地理位置超时。"
          break;
        case error.UNKNOWN_ERROR:
          x.innerHTML="未知错误。"
          break;}
     }
</script>

7、新的 Input 类型

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

8、新的表单元素

<datalist> 定义选项列表，与 input 元素配合使用。

<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>

<keygen>用于表单的密钥对生成器字段。

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

<output>定义不同类型的输出，比如脚本的输出。

<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>

9、新的表单属性

<form>新属性：
- autocomplete：布尔类型，是否让浏览器自动记录之前输入的值。
- novalidate：布尔属性，规定在提交表单时不应该验证 form 或 input 域。
<input>新属性：
- autocomplete
- autofocus：布尔类型
- form
- formaction，formenctype(只对form表单中 method=”post” 表单)，formmethod，formnovalidate，formtarget：会覆盖form元素中的相应属性，用于 submit 和image类型中。
- height，width：只适用于image类型。
- list：规定输入域的 datalist。
- min，max，step：适用于date系列、number 、range类型。
- multiple：布尔类型，规定元素中可选择多个值，适用于email 和 file类型。
- pattern：描述了一个正则表达式用于验证 input 元素的值。用全局 title 属性描述模式。
- placeholder
- required：布尔类型。

10、新的语义元素

（1）以上的元素都是块元素(除了<figcaption>)。为了让这些块元素在所有版本的浏览器中生效，需要在样式表文件中设置一下属性 :

header, section, footer, aside, nav, article, figure{ 
    display: block; 
}

（2）使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：http://code.google.com/p/html5shiv/ 。下载后，将以下代码放入的网页中（必须将以下代码放置于<head> 元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素）：

<!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
<![endif]-->

11、Web存储

localStorage：没有时间限制的数据存储。
sessionStorage：针对一个 session 的数据存储。当用户关闭浏览器窗口后，数据会被删除。

function clickCounter(){
    if(typeof(Storage)!=="undefined"){
        if(localStorage.clickcount){
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        }else{
            localStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
    }else{
        document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";}
}

12、应用程序缓存

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

13、Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能。
由于 web worker 位于外部文件中，它们无法访问window 对象，document 对象，parent 对象。

14、服务器发送事件SSE

Server-Sent 事件指的是网页自动获取来自服务器的更新。
EventSource 对象
- onopen：当通往服务器的连接被打开
- onmessage：当接收到消息
- onerror：当发生错误

15、多媒体

audio元素支持三种音频格式：MP3，Wav， Ogg。
video元素支持三种视频格式：MP4，WebM， Ogg。

16、HTML 插件

<object>
<embed>没有关闭标签，不能使用替代文本。

mickytravel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录