html5的学习笔记

写在前面：该笔记是基于W3Cschool的HTML5课程完成。因为类似读书笔记，所以很多内容不全。有兴趣的童靴可以访问该网站学习：点击打开链接

第一节 HTML5

1.HTML5是下一代的HTML。

2.下面是一段HTML5的代码：

<!DOCTYPE HTML>
<html>
<body>

<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.                ！当你的浏览器不支持HTML5的时候，则显示这一段文字
</video>

</body>
</html>

第二节简介

1.html5将成为html、xhtml和html dom的新标准。

2.为html5建立的规则：

新的特性应该基于html，css，javascirpt和DOM
减少了对外部插件的需求
更优秀的错误处理机制
更多取代脚本的标记
独立于设备
开发进程对公众透明

3.有趣的新特性：

画布canvas元素
播放器元素

第三节视频

1.HTML5规定通过video元素来引入视频标准

2.具体代码的编写：

<video src="movie.ogg" controls="controls">
</video>

//controls属性提供了视频播放的按钮，音量等

//video之间的内容显示为当浏览器不支持video时

3.html5允许多个scoure

4.更多相关标签请参考：http://www.w3school.com.cn/tags/tag_video.asp

第四节视频+DOM

1.video属性中同样拥有方法，属性和事件

2.方法可以提供“播放，暂停和加载”，属性可以控制“音量，时长”，DOM事件则可以通知“暂停，开始，结束”

//w3c的该节教程上有一个演示，不过其中包含了javascript，所以此处不列举出来。

第五节音频

1.html5通过audio来引入音频的标准。

2.代码如下：

<audio controls="controls" src="">
</audio>

3.可以插入相同的音频的不同格式，以此来是各种浏览器都适用。（浏览器会自动选择适合自己的格式，此原理同样可以使用在视频播放上面）

第六节拖放

1.在html5中任何元素都是可以拖放的。（连接和图片是默认可以拖动的，不需要draggable）

2.一个拖放的实例：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">                                    ！一个脚本是一个javascript的脚本
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");                           ！将被拖动的数据赋给data，从setData中获取
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

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

</body>
</html>

3.如何设置元素可拖放：

<img draggble="true"/>

4.ondragstrat和setData（）

ondragstrat事件是在启动拖动的时候开始执行

5.ondragover规定了被拖动的元素放在什么位置。由于数据和元素默认的不可以移动到其他元素中，所以要调用prevenDefault（）方法

6.进行放置：ondrag()

第七节画布

1.HTML5的canvas元素使用javascript进行绘画。在一个矩形的区域内控制每一个像素。

2.创建canvas元素：

<canvas id="name of id" width="number" height="number"></canvas>

3.由于canvas本身没有绘图能力，所以需要javascript来完成，这里涉及到后面的javascript，先不过多讲解，上一个简单的代码理解一下：

<script type="text/javascript">
var c=document.getElementById("myCanvas");          <- -!- - javascript通过ID号来找寻canvas - ->
var cxt=c.getContext("2d");                         <- -!- - 创建对象- ->
cxt.fillStyle="#FF0000";                            <- -!- - 创建一个红色的矩形框
cxt.fillRect(0,0,150,75);                       ，   以及规定了形状，位置，尺寸等（定义初始坐标（0，0），画布大小150x75）- ->

</script>





4.关于坐标（由于代码涉及到css和javascript，笔者还没学完，所以还是贴一段简单的代码，用于理解）：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>

<script type="text/javascript"> 
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
 
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>

<body style="margin:0px;">

<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>

<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>
 
 
</body>
</html>

第八节内联svg

1.svg是可伸缩矢量图（矢量图就是用计算机算法描绘的图像，可以放大伸缩而不会失真，但是颜色没有层次感，适用于一些简单的图片）

2.在html5中可以直接嵌入svg元素

3.下面贴一个例子：

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

第九节地理定位

1.html5中的geolocation的API用于获得用户当前的地理信息。

2.先来一段代码（这个代码没有包含错误处理）：

<script>
var x=document.getElementById("demo");
function getLocation()     //这个函数是用来检测是否可以进行定位的
  {
  if (navigator.geolocation)         //如果可以则显示地理信息
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}      //如果不可以，则显示浏览器不支持
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

3.给定位置信息的其他作用

更新本地信息
显示用户周围的兴趣点（像美团，大众这些app都使用了这个方法的）
交互式车载导航系统 (GPS)

第十节 web存储

1.html5提供了两种存储方法：

localstorge：无时间限制
sessionstorge：针对一个session的存储

2.html5用javascript来存储。

第十一节应用程序缓存

1.使用html5，创建cache manifest，可以创建web的离线缓存。

2.优点：

离线浏览
加快速度
减小负载

3.开启appcache的代码：

<html manifest="demo.appache"></html>

4..贴一个代码讲解：

<!DOCTYPE html>
<html manifest="/example/html5/demo_html.appcache">         //该元素是在html中的
<body>
<script type="text/javascript" src="/example/html5/demo_time.js">      //离线的时候，调用缓存的脚本
</script>
<p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p>
<p><img src="/i/w3school_banner.gif" /></p>
<p>请打开<a href="/example/html5/html5_html_manifest.html" target="_blank">这个页面</a>，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。</p>
</body>
</html>

5.manifest是一个简单的文件，包含三个部分

cache manifest：在此标题下的内容将被缓存

/theme.css
/logo.gif
/main.js

这三个是缓存的内容

network：在此标题下不会缓存

fallback：在此标题下将提供错误页面的提示

6.当应用缓存，直到下列情况发生为止

用户清空缓存
manifest的内容被修改
程序更新缓存

7.一个完整的manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0                                    //#开头表示注释
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp                                             //不会缓存.asp的内容

FALLBACK:
/html5/ /404.html                                     //如果错误则返回一个错误页面（这里是404）

第十二节 web workers

web workers是运行在后台的javascript。虽然javascript是单线程的，但是有时候需要多个工作线程，这个时候就需要web workers，当然子线程是完全受到主线程控制的。

1.附上一段代码：

<!DOCTYPE html>
<html>
<body>

<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button> 
<button onclick="stopWorker()">停止 Worker</button>
<br /><br />

<script>
var w;

function startWorker()                                  //该函数是检测浏览器是否支持这个功能
{
if(typeof(Worker)!=="undefined")
  {
  if(typeof(w)=="undefined")                            //检测是否有worker，如果没有则自己创建一个
  {
  w=new Worker("/example/html5/demo_workers.js");
  }
  w.onmessage = function (event) {                       //设置一个时间监听器，wokrer传递消息的时候，执行监听器的代码
    document.getElementById("result").innerHTML=event.data;
    };
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker()                                //终止web worker
{ 
w.terminate();
}
</script>

</body>
</html>

创建一个计时器：

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);                             //向页面返回一个消息
setTimeout("timedCount()",500);
}

timedCount();

第十三节服务器发送事件

1.允许网页来自服务器的更新。

2.sever-sent：单向的更新：网页自动获取服务器的更新，而不向用户询问。例如facebook，youtube，微博等的页面的更新。

3.eventsource用于接收服务器的更新：

var source=new EventSource("demo_sse.php");                                        //创建一个对象用于接收更新，更新来自demo_sse.php

source.onmessage=function(event)                                                   //调用一个事件监听，当有一个新的更新的时候，就把
  { 
  document.getElementById("result").innerHTML+=event.data + "<br />";               推入一个result的元素中
  };

4.服务器端代码的实例

<?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}\n\n";
flush();                                                                   //刷新
?>

<%                                                                         //asp服务器
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

第十四节表单--输入类型

mod:<input type=" " name= " "/>

实例：url：<input type=" url" name="haha"/> //如此之后，输入的内容如果不符，将被检测到

第十四节表单--表单元素

1.datalist元素，提供输入选项：

webpage:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
<option label="xxx" value="website"
</datalist>

2.keygen元素：提供私钥，公钥。但是由于现在使用情况很糟糕，不做详解。

3.output元素：简单的输出

posted on 2016-12-14 17:42 码的艺术家阅读(147) 评论(0) 编辑收藏举报

刷新页面返回顶部

码的世界

html5的学习笔记

第一节 HTML5

第二节简介

第三节视频

第四节视频+DOM

第五节音频

第六节拖放

第七节画布

第八节内联svg

第九节地理定位

第十节 web存储

第十一节应用程序缓存

第十二节 web workers

第十三节服务器发送事件

第十四节表单--输入类型

第十四节表单--表单元素

导航

公告

码的世界

html5的学习笔记

第一节 HTML5

第二节 简介

第三节 视频

第四节 视频+DOM

第五节 音频

第六节 拖放

第七节 画布

第八节 内联svg

第九节 地理定位

第十节 web存储

第十一节 应用程序缓存

第十二节 web workers

第十三节 服务器发送事件

第十四节 表单--输入类型

第十四节 表单--表单元素

导航

公告

第二节简介

第三节视频

第四节视频+DOM

第五节音频

第六节拖放

第七节画布

第八节内联svg

第九节地理定位

第十一节应用程序缓存

第十三节服务器发送事件

第十四节表单--输入类型

第十四节表单--表单元素