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建立的规则：

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

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

";
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元素：简单的输出
















































































   





    本博客基于网络课程完成，旨在学习，有错误请指正！




        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/comefuture/p/8306004.html