W3school学习笔记之HTML5

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

1、已移除的元素

<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt>

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 的比较

CanvasSVG
依赖分辨率不依赖分辨率
不支持事件处理器支持事件处理器
弱的文本渲染能力最适合带有大型渲染区域的应用程序(比如谷歌地图)
能够以 .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、新的语义元素

<header>,<nav>,<section>,<article>,<aside>,<figcaption>,<figure>,<footer>

(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>没有关闭标签,不能使用替代文本。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值