HTML5知识点总结

最新推荐文章于 2024-03-16 16:59:41 发布
最新推荐文章于 2024-03-16 16:59:41 发布
阅读量1.1w 收藏 27
点赞数 2
分类专栏： HTML5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liujie19901217/article/details/51626946
版权

有很长一段时间没有更新博客了，近一段时间开始重新梳理知识点和写博客了。重要的事情说三遍，新的博客地址：欢迎访问，新的博客地址：欢迎访问，新的博客地址：欢迎访问。

Web Workers##

javaScript语言采用的是单线程模型，也就是说，所有任务排成一个队列，一次只能做一件事。
Web Worker的目的:就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。可以让web应用程序具备后台处理能力，对多线程的支持非常好。

###Web Worker API###

  • new Worker(‘后台处理的JS地址’)
    使用Web Worker：
    实例化Worker对象并传入要执行的Javascript文件名就可以创建一个新的Web Worker。
    例如：var worker = new Worker(“worker.js”);
    这行代码会导致浏览器下载worker.js，但只有Worker接收到消息才会实际执行文件中的代码。

  • 利用postMessage传输数据
    要给Worker传递消息，可以使用postMessage()方法。
    Worker是通过message和error事件与页面通信的。来自Worker的数据保存在event.data中。Worker返回的数据也可以是任何能够被序列化的值。
    Worker不能完成给定的任务时就会触发error事件。具体来说，Worker内部的JavaScript在执行过程中只要遇到错误，就会触发error事件。发生error事件时，**事件对象中包含3个属性：**filename、lineto和message，分别表示发生错误的文件名、代码行号和完整的错误信息

  • **terminate() 方法:**终止 web worker，并释放浏览器/计算机资源(这个方法是在页面中调用的)

  • importScripts(‘导入其他JS文件’)
    ###Worker全局作用域###
    关于Web Worker，**最重要的是：**要知道它所执行的JavaScript代码完全在另一个作用域中，与当前网页中的代码不共享作用域。在Web Worker中，同样有一个全局对象和其他对象以及方法。但是，Web Worker中的代码不能访问DOM，也无法通过任何方式影响页面的外观。
    Web Worker中的全局对象是worker对象本身。也就是说，在这个特殊的全局作用域中，this和self引用的都是worker对象。
    为了便于处理数据，Web Worker本身也是一个最小化的运行环境：

  • 最小化的navgator对象 : online、appName、appVersion、userAgent、platform

  • 只读的location对象 : 所有属性都是只读的

  • self : 指向全局 worker 对象

  • 所有的ECMA对象，Object、Array、Date等

  • XMLHttpRequest构造器

  • setTimeout和setInterval方法

  • close()方法，立刻停止worker运行(在worker内部使用，而terminate() 方法是在页面中调用的)

  • importScripts方法
    在Worker的全局作用域中，我们可以调用importScripts方法来接收一个或者多个JavaScript文件的URL。每个加载过程都是异步进行的，因此所有脚本加载并执行之后，importScripts()才会执行。
    例如：
    importScripts(‘file1.js’,‘file2.js’);
    即使file2.js先于file1.js下载完，执行的时候仍然会按照先后顺序执行。这些脚本都是在Worker的全局作用域中执行的。Worker中的脚本一般都具有特殊的用途，不会像页面中的脚本那么功能宽泛。

Web Worker的运行环境与页面环境相比，功能是相当有限的。
Demo1:

<body>
<p>计数：<span id="res"></span></p>
<input type="button" name="" value="开始计数" onclick="startWorker()">
<input type="button" name="" value="停止计数" onclick="stopWorker()">
<script type="text/javascript">
var w;
function startWorker(){
	//先判断是否支持Web Worker
	if(typeof(Worker) !== "undefined"){
		if(typeof(w) == "undefined"){
		//新建一个worker对象
			w = new Worker("webworker1.js");
		}
		w.onmessage = function(e){
			document.getElementById("res").innerHTML = e.data;
		}
	}else{
		alert("对不起，当前浏览器不支持web Workers");
	}
}
function stopWorker(){
	w.terminate();
	w = undefined;
}
</script>
</body>

webworker1.js

var i=0;
function numCount(){
	i++;
	self.postMessage(i);
	setTimeout("numCount()",500);
}
numCount();

Demo2:

<script type="text/javascript">
var data = [23,87,45,12,56,9,34];
console.log("排序前:"+data);
var worker = new Worker("webworkers2.js");
worker.onmessage = function(e){
	var data = e.data;
	console.log("排序后:"+data);//排序后:9,12,23,34,45,56,87
};
worker.onerror = function(e){
	console.log("Error:"+e.filename+"("+e.lineto+"):"+e.message);
}
worker.postMessage(data);
</script>

webworker2.js

//这里self引用的是Worker全局作用域中的worker对象(与页面中的Worker对象不是同一个对象)
self.onmessage = function(e){
	var data = e.data;
	data.sort(function(a,b){
		return a-b;//从小到大排序
	});
	//Worker完成工作后，通过调用postMessage()可以把数据再发回页面
	//这里将数组排序后的结果发回页面
	//排序的确是比较消耗时间的操作，因此转交给Worker做就不会阻塞用户界面了
	self.postMessage(data);
};

当页面在worker对象上调用postMessage()方法时，数据会以异步方式被传递给worker，进而触发worker中的message事件。为了处理来自页面的数据，同样也需要创建一个onmessage事件处理程序。
**Web Worker:**可以运行异步Javascript代码，避免阻塞用户界面。在执行复杂计算和数据处理的时候，这个API非
常有用；否则，这些任务轻则会占用很长时间，重则会导致用户无法与页面交互。

Hisyory API

在HTML5之前，即使采用的是脚本语言的方式，只要浏览器地址栏中的URL地址被切换，都会触发一个页面刷新的过程，这个过程将耗费一些时间与资源。在很多时候，尤其是在两个大部分内容相同的页面之间进行切换时，这个过程往往被视为一种浪费。
HTML5的Hisyory API允许在不刷新页面的前提下，通过脚本语言的方式来进行页面上某块局部内容的更新。
处理方式：

  1. 通过Ajax请求向服务器端请求页面B与页面A中不同的局部区域及该区域中的信息
  2. 在页面A中通过脚本语言装载该区域及其中的信息
  3. 通过Hisyory API在不刷新页面的前提下在浏览器的地址栏中从页面A的URL地址切换到页面B的URL地址

在Hisyory API中，我们使用pushState方法在加载完相应的文件后，将该文件的URL地址添加到浏览器的历史记录中。
pushState方法使用3个参数：

  • 参数1：可以为任何对象，用于保存一个当用户单击浏览器后退按钮或前进按钮时可以使用的数据
  • 参数2：可以为一个字符串，用于设置浏览器窗口的标题，但是目前尚没有任何浏览器支持该参数的使用，所以暂时可以将该参数设为null
  • 参数3：是可选参数，参数值可以为任何URL地址，该URL地址将出现在用户单击浏览器后退按钮或前进按钮后浏览器的地址栏中

此外，我们还需要监听popstate事件，当用户单击浏览器的后退或前进按钮时触发该事件，在事件处理函数中读取触发事件的事件对象的state属性值，该属性值即为执行pushState()方法时所使用的第一个参数值，其中保存了在向浏览器历史记录中添加记录时同步保存的对象，可以读取该对象并根据该对象值设置当前页面中所需显示的数据。

我GitHub上的一个History API使用示例：传送门

canvas

###canvas宽高设置 ##
canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px * 150px,在css中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。所以，在canvas绘图时，应该在canvas标签里直接定义宽高。
在css中定义的canvas宽和高只是其在html中的显示宽高，不是canvas的真实分辨率，canvas的真是分辨率需要通过其width和height属性来设置。
###save和restore方法##
save()方法调用后,将所有设置都会进入一个栈结构，得以妥善保管。然后可以对上下文进行其他修改
栈结构–>后进先出
想要返回之前保存的设置，可以调用restore()方法，在保存设置的栈结构中向前返回一级，恢复之前的状态。
连续调用save()方法可以将更多设置保存在栈结构中，之后再连续调用restore()方法则可以一级一级返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Save-Restore</title>
</head>
<body>
<canvas id="drawing" width="200" height="200">
当前浏览器不支持canvas
</canvas>
<script type="text/javascript">
var drawing = document.getElementById("drawing");
//确保浏览器支持canvas元素
if (drawing.getContext){
var context = drawing.getContext("2d");
context.fillStyle = "#ff0000";//红色
context.save();//调用save()方法保存上下文状态
context.fillStyle = "#00ff00";//绿色
context.translate(100, 100);//把坐标原点变换到(100, 100)
context.save();//调用save()方法保存上下文状态
context.fillStyle = "#0000ff";//蓝色
context.fillRect(0, 0, 100, 200);   //因为此时的坐标原点已经变为(100, 100)，所以从(100, 100)点开始绘制蓝色矩形
context.restore();//调用restore()，fillStyle变为绿色，因为坐标位置的变换仍然起作用，所以矩形的起点坐标是(110, 110)
context.fillRect(10, 10, 100, 200);   //从 (110, 110)点开始绘制绿色矩形
context.restore();//再一次调用restore()，fillStyle变为红色，坐标位置的变换不起作用了，所以矩形的起点坐标是(0, 0)
context.fillRect(0, 0, 100, 200);    //从(0,0)点开始绘制红色矩形
//特别注意，save()方法保存的是对绘图上下文的设置和变换，不会保存绘图上下文的内容
            }
</script>
</body>
</html>

###toDataURL方法##
toDataURL()方法可以导出在canvas元素上绘制的图像，该方法接收一个参数：图像的格式类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toDataURL方法</title>
</head>
<body>
<canvas id="drawing" width="200" height="200">
当浏览器不支持canvas元素
</canvas>
<input type="button" value="导出图片" id="export-btn" >
<p>点击导出图片，即可以将图像变成图片元素，右键点击图片元素即可以将它保存到本地</p>
    <script type="text/javascript">
            var drawing = document.getElementById("drawing"),
            btn= document.getElementById("export-btn");
            //确保浏览器支持canvas元素
            if (drawing.getContext){
                var context = drawing.getContext("2d");

                //绘制红色矩形
                context.fillStyle = "#ff0000";
                context.fillRect(10, 10, 50, 50);

                //绘制半透明的蓝色矩形
                context.fillStyle = "rgba(0,0,255,0.5)";
                context.fillRect(30, 30, 50, 50);
            }

            btn.onclick = function()
            {
                //取得图像数据的URI
                //var imgURI = drawing.toDataURL();
                //这里没有指定图像的类型格式，默认是png格式的图像
                var imgURI = drawing.toDataURL("image/png");

                //显示图像
                var image = document.createElement("img");
                image.src = imgURI;
                document.body.appendChild(image);
            };
    </script>
</body>
</html>

Geolocation（地理定位）

HTML5 Geolocation（地理定位）用于定位用户的位置
###地理位置对象navigator.geolocation###
####getCurrentPosition() 方法###
可以使用 getCurrentPosition() 方法来获得用户的位置，该方法接收3个参数：请求成功函数、请求失败函数和数据收集方式
请求成功函数：

  • 经度 : coords.longitude
  • 纬度 : coords.latitude
  • 位置准确度 : coords.accuracy
  • 海拔 : coords.altitude
  • 海拔准确度 : coords.altitudeAcuracy
  • 行进方向 : coords.heading 从正北开始以度计
  • 地面速度 : coords.speed 以米/每秒计
  • 时间戳 : new Date(position.timestamp) 响应的日期/时间
    请求失败函数：
    失败编号：code
  • 0(Unknown_error) : 不包括其他错误编号中的错误
  • 1( Permission denied) : 用户拒绝浏览器获取位置信息
  • 2(Position unavailable) : 尝试获取用户信息，但失败了
  • 3(Timeout ) : 设置了timeout值，获取位置超时了

数据收集方式：json的形式

  • enableHighAcuracy : 更精确的查找，默认false
  • timeout : 获取位置允许最长时间，默认infinity
  • maximumAge : 位置可以缓存的最大时间，默认0

Demo1:

<body>
<div id="demo"></div>
<input type="button" name="" value="点击获取位置" onclick="getLocation();">
<script type="text/javascript">
var x=document.getElementById("demo");
function getLocation(){
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{
  	x.innerHTML="该浏览器不支持获取地理位置。";
  }
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude +
  "<br>经度: " + position.coords.longitude;
  }
  function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
    // alert(error.code);  1
      x.innerHTML="用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
    // alert(error.code);  2
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
    // alert(error.code);  3
      x.innerHTML="请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
    // alert(error.code);  0
      x.innerHTML="未知错误。"
      break;
    }
  }
</script>
</body>

Demo2:

<body>
<input type="button" value="请求" id="btn" /><br>
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
<script type="text/javascript">
var oBtn = document.getElementById('btn');
	var oTxt = document.getElementById('t1');
	oBtn.onclick = function(){
	navigator.geolocation.getCurrentPosition(function(position){
			oTxt.value += '经度:' + position.coords.longitude+'\n';
			oTxt.value += '纬度 :' + position.coords.latitude+'\n';
			oTxt.value += '准确度 :' + position.coords.accuracy+'\n';
			oTxt.value += '海拔 :' + position.coords.altitude+'\n';
			oTxt.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
			oTxt.value += '行进方向 :' + position.coords.heading+'\n';
			oTxt.value += '地面速度 :' + position.coords.speed+'\n';
			oTxt.value += '时间戳:' + new Date(position.timestamp)+'\n';
		},function(err){
			//err.code--失败所对应的编号
			alert( err.code );
		},{
			enableHighAcuracy : true,
			timeout : 5000,
			maximumAge : 5000//设置缓存过期时间，提高性能
		});
	};
</script>
</body>

####watchPosition() 方法###
watchPosition() - 多次定位请求(像setInterval) ,返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。移动设备有用，位置改变才会触发
配置参数：frequency 表示更新的频率
clearWatch() - 停止 watchPosition() 方法(像clearInterval)
Demo:

<body>
<input type="button" value="请求" id="btn" /><br>
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
<script type="text/javascript">
	var oBtn = document.getElementById('btn');
	var oTxt = document.getElementById('t1');
	var timer = null;
	oBtn.onclick = function(){
		//多次请求
		timer = navigator.geolocation.getCurrentPosition(function(position){
			oTxt.value += '经度:' + position.coords.longitude+'\n';
			oTxt.value += '纬度 :' + position.coords.latitude+'\n';
			oTxt.value += '准确度 :' + position.coords.accuracy+'\n';
			oTxt.value += '海拔 :' + position.coords.altitude+'\n';
			oTxt.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
			oTxt.value += '行进方向 :' + position.coords.heading+'\n';
			oTxt.value += '地面速度 :' + position.coords.speed+'\n';
			oTxt.value += '时间戳:' + new Date(position.timestamp)+'\n';
		},function(err){
			//err.code--失败所对应的编号
			alert( err.code );
			navigator.geolocation.clearWatch(timer);//关闭更新请求
		},{
			enableHighAcuracy : true,
			timeout : 5000,
			maximumAge : 5000,//设置缓存过期时间，提高性能
			frequency : 1000
		});
	};
</script>
</body>

应用Demo:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>地理位置应用</title>
	<style type="text/css">
		#box{
			width: 500px;
			height: 500px;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<input type="button" name="" value="获取位置" id="btn">
	<div id="box"></div>
	<script src="http://api.map.baidu.com/api?v=1.4"></script>
	<script type="text/javascript">
	var oBtn = document.getElementById('btn');
	oBtn.onclick = function(){
		navigator.geolocation.getCurrentPosition(function(position){
			//获取经度和纬度
			var y = position.coords.longitude;
			var x = position.coords.latitude;
			// 百度地图API功能
			var map = new BMap.Map("box");
			// 初始化地图,设置中心点坐标和地图级别
			var pt = new BMap.Point(y, x);

			map.centerAndZoom(pt, 14);
			map.enableScrollWheelZoom();//开启鼠标滚轮缩放
			//创建图片
			var myIcon = new BMap.Icon("dut.jpg", new BMap.Size(200,200));
			var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
			map.addOverlay(marker2);// 将标注添加到地图中
			//创建信息窗口
			var opts = {
			  width : 200, // 信息窗口宽度
			  height: 60, // 信息窗口高度
			  title : "大连理工大学"// 信息窗口标题
			}
			var infoWindow = new BMap.InfoWindow("高等学府", opts);//创建信息窗口对象
			map.openInfoWindow(infoWindow,pt); //开启信息窗口
		});
	};
	</script>
</body>
</html>

WebSocket

###Socket.IO类库实现WebSocket通信###
Socket.IO类库可以接收所有与服务器端相连接的客户端发送的消息，也可以向这些客户端发送消息。该类库的一个显著特征是在服务器端与浏览器之间提供一个共享接口。
###Socket.IO ##
客户端：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>socket.io</title>
</head>
<body>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">
	/*
	/socket.io/socket.io.js由服务器端Socket.IO类库自动提供，不需要在客户端实际放置一个socket.io.js文件
	这里首先使用Socket.IO类库中的io.connect方法连接服务器端Socket.IO服务器
	 */
		var socket = io.connect();//io.connect()返回一个Socket对象，代表一个用于与服务器端建立连接的客户端socket端口对象
		//客户端与服务器建立连接后，当接收到服务端发送消息时，触发客户端socket端口对象的message事件
		socket.on('message', function(data){//data为服务器端发送的消息
			console.log(data);
			//使用客户端socket端口对象的send方法向服务端发送一条消息
			socket.send('消息已接收到。');
		});
		//当服务器端断开连接时触发客户端socket端口对象的disconnect事件
		socket.on('disconnect', function() {
			console.log('服务器端断开连接。');
		});
		/*
		注意：客户端的消息处理机制与服务器端的消息处理机制是完全一致的，因为Socket.IO确保客户端与服务器端共享相同的API
		 */
	</script>
</body>
</html>

服务器端：

var http = require('http');//引入HTTP模块
var sio = require('socket.io');
var fs = require('fs');//引入fs模块
var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-type': 'text/html'});
    res.end(fs.readFileSync('./index.html'));
});
server.listen(1337);
/*
server是一个HTTP服务器，监听1337端口
使用Socket.IO类库很简单，创建一个Socket.IO服务器即可，但是该服务器依赖于一个已经创建的HTTP服务器。
在HTTP服务器运行之后，使用listen方法为该HTTP服务器附加一个Socket.IO服务器。
 */
var socket = sio.listen(server);//这里listen方法返回一个Socket.IO服务器
//这里当客户端与服务器建立连接时，触发Socket.IO服务器的connection事件，可以通过监听该事件并指定事件回调函数的方法
//指定当客户端与服务器建立连接时所需执行的处理
socket.on('connection', function(socket){
    console.log('客户端建立连接。');
    socket.send('你好。');
    socket.on('message', function(msg) {//msg为客户端发送的消息
        console.log('接收到一个消息: ',msg);
    });
    //当客户端断开连接时触发socket端口对象的disconnect事件
    socket.on('disconnect', function() {
        console.log('客户端断开连接。');
    });
});
/*
客户端与服务器建立连接后，当接收到客户端发送消息时，触发socket端口对象的message事件
 */

###emit方法互相发送事件###
使用Socket.IO类库时，服务器端与客户端之间除了可以互相发送消息之外，也可以使用socket端口对象的emit方法互相发送事件
socket.emit(event,data,[callback])

  • event参数值为一个用于指定事件名的字符串
  • data参数值代表该事件中携带的数据
  • callback用于指定一个当对方确认收到数据时调用的回调函数
    客户端：
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>socket.io</title>
</head>
<body>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">
	var socket = io.connect();
	//在接收到服务器端发送的news事件后，输出相应的服务器端传递的信息
	socket.on('news', function (data) {
    		console.log(data.hello);
    	//同时向服务器发送my other event事件，该事件携带一个对象，对象的my属性值为"data"字符串
    	socket.emit('my other event',{my:'data'});
	});
	</script>
</body>
</html>

服务器端：

var http = require('http');
var sio = require('socket.io');
var fs = require('fs');
var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-type': 'text/html'});
    res.end(fs.readFileSync('./index.html'));
});
server.listen(1337);
var socket = sio.listen(server);
//在客户端与服务器端建立连接后，向客户端发送一个news事件，事件中携带一个对象，该对象的hello属性值为"你好"
socket.on('connection', function(socket){
    socket.emit('news', {hello: '你好。' });
    //在接收到客户端发送的my other event事件时，在控制台输出相应的信息
    //data为客户端发送事件中携带的数据
    socket.on('my other event', function (data) {
        console.log('服务器端接收到数据：%j',data);
    });
});
自由2017
关注
  • 2
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
一个html5的demo
12-29
一个html5的demo，可参考布局，html5是2017标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
HTML5简单demo
冰冻的心
07-06 630
使用原生的HTML5元素替代以前需Js才能实现的效果 关于HTML5 新特性 解决以前需结合js才能实现的提示功能，安全零js 文本框指定type为URL：提交不符合的进行提示框： 文本框指定type为number类型：提交不符合的进行提示框，并且最大值设置为20，最小值为1： ...
HTML基础知识点总结
最新发布
cx0112的博客
03-16 1064
HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元 素。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML 文本可以说明文字、图形、动画、声音、表格、链接等。
HTML5的魅力，10个Demo展示
delishcomcn的博客
07-07 221
Flash和HTML5的比较已经成为现在最热门的主题之一，我们不去争论哪个好哪个不好。和HTML5在很酷的动画和简单的游戏等方面一样，除非HTML5在未来几年有一些重大发展，否则Flash在富内容网页应用和游戏方面永远是不错的选择。下面收集了50个非常酷的HTML5应用实例来展示其无限潜力。
Dreamweaver制作一个网页咖啡店banner/h5+css案例演示/
No1banana的博客
01-28 3035
一、分析结构 本案例实现比较简单，根据下载好的素材结合实际效果图，可以看出使用一个外面的<div>盒子设置好背景，再将素材放置到内部的<div>盒子之中 二、样式 1.外层的盒子设置宽度高度以及背景图像的图像样式，背景图像沿水平方向平铺 2.给里面的盒子设置宽度高度，背景图像设为不平铺，但内部盒子和外盒子的左边和上边留出一定空间 三、开始制作 打开Dreamweaver2021，新建一个HTML5格式文件，并添加title 开始搭建架构,并将素材引入到对应位置
50个Demo展示HTML5无穷的魅力
weixin_34138139的博客
09-23 94
相关链接：IE 9开发大赛火热报名进行中PDC10 开幕在即Microsoft Web平台——优秀项目展示Windows Phone 7 MSDN开发中心
HTML5知识点总结汇总
01-02
内容概述：文章包含了最基础的HTML5的知识点。 适用人群：适用于初级选手，可用作复习资料。 能学到什么：最开始的入门学习以及初识HTML。 阅读建议：先看视频在看本文章。
html5知识点总结.txt
06-24
html5知识点总结
HTML5响应式网页设计知识点总结
05-18
基本上都是本网页设计的所有知识点，很全面，基本上有所有响应式的知识在里面
HTML5+全套知识点
10-16
HTML5+全套知识点打包，是一个很不错的html5语言文件，有兴趣的伙伴们抽时间可以看一下把。
HTML基础知识点总结 .doc
11-21
思沃普智能会议管理系统，是一个集智能控制，会议预约，会议管理，设备运维，音视频会议于一体的智能化会议系统。是未来企业办公以及联合办公空间...思沃普，邀您共享智能会议：http://www.smartwork.link/Saas.html
html5网站demo
12-25
运用html5+css建成的两个网站demo，5个页面，具有参考性意义（读书网）
HTML5demo-JQuery:HTML5小项目原始码
03-23
HTML5demo-JQuery:HTML5小项目原始码
HTML5——demo
09-25
HTML5源码，在android上引用HTML5。可以直接在手机上面跑起来！
html5 小游戏 demo
06-07
http://blog.csdn.net/xiaoxiao108/article/details/8913616 html5 挺火，写个html5游戏玩玩吧，想起cocos2d 貌似各个平台都有，网上找了找，下载了个Cocos2d-html5引擎包。 貌似另一个开源引擎lufylegend.js也很好，下次用用lufylegend.js试试。 开发环境 chrome Cocos2d-html5 游戏地址：http://hehe108.sinaapp.com/cocos2d/ （adsw回车） 实现方法如下 1.创建好 LayerGradient的子类 （里面放坦克子弹） 2.重写 onEnter 方法添加一些基本按钮 跟一些初始坦克，子弹 3.通过schedule方法 控制 坦克 子弹的重画 4.根据键盘按键（ASWD）确定出坦克的方向，根据坦克的方向修改坦克的X，Y轴坐标，来实现坦克的移动 5.通过cc.rectIntersectsRect函数来进行碰撞检测，实现子弹打击坦克 具体代码 1.在项目里面添加方向 var Direction = { L:0, U:1, D:2, R:3, STOP:4 }; 2.添加子弹类的相关属性 SPEED:10, WIDTH:15, HEIGHT:15, x:null, y:null, dir:null, live:true, tankClient:null, //LayerGradient子类TankClient 的引用 good:null, 3.子弹初始化，重画 ctor:function (x,y,good,dir,tankClient) { cc.associateWithNative( this, cc.Sprite ); this.x=x; this.y=y; this.dir=dir; this.tankClient=tankClient; this.good=good; this.initWithFile(s_missile); this.setPosition( cc.p(this.x, this.y) ); this.tankClient.addChild(this); }, Draw:function(){ if(!this.live){ this.tankClient.removeChild(this, true); return; } this.setPosition( cc.p(this.x, this.y) ); this.Move(); }, 4.添加子弹打击坦克的方法 HitTank:function(t){ if (cc.rectIntersectsRect(this.GetRectangle(), t.GetRectangle()) && t.live && this.live && this.good != t.good){ t.live = false; this.live = false; return true; } return false; }, 5.添加坦克类相关属性 SPEED:5, WIDTH:58, HEIGHT:58, x:0, y:0, l:false, u:false, r:false, d:false, dir:Direction["STOP"], ptDir:Direction["D"], tankClient:null, good:null, step:0, live:true, 6.在tank类中 坦克初始化，重画 ctor:function (x,y,good,tankClient) { cc.associateWithNative( this, cc.Sprite ); this.x=x; this.y=y; this.tankClient=tankClient; this.good=good; if(good){ this.initWithFile(s_tank); }else{ this.initWithFile(s_enemy); } this.setPosition( cc.p(this.x, this.y) ); this.tankClient.addChild(this); }, Draw:function(){ if (!this.live){ if (!this.good){ this.tankClient.removeChild(this, true); } this.tankClient.removeChild(this, true); return; } this.setPosition( cc.p(this.x, this.y) ); switch (this.ptDir) { case Direction["D"]: this.setRotation(0); //旋转精灵控制 炮筒方向 break; case Direction["U"]: this.setRotation(180); break; case Direction["L"]: this.setRotation(270); break; case Direction["R"]: this.setRotation(90); break; } this.Move(); }, 7.tank发子弹的方法 Fire:function() { if(!this.live) return null; for(var i=0;i<this.tankClient.missiles.length;i++){ var m = this.tankClient.missiles[i]; if (m.live == false){ m.x=this.x; m.y=this.y; m.live=true; m.dir=this.ptDir; m.good=this.good; this.tankClient.addChild(m); return m; } } var missile=new Missile(this.x,this.y,this.good,this.ptDir,this.tankClient); this.tankClient.missiles.push(missile); return missile; }, 8.LayerGradient加入坦克 this.tanks = []; this.myTank = new Tank(60,20, true, this); for (var i = 0; i < 10; i++){ this.tanks.push(new Tank(50 + 70 * (i + 1), 420, false, this)); } 9.LayerGradient中调用子弹打击坦克的方法 for(var i=0;i<this.missiles.length;i++){ var m = this.missiles[i]; m.HitTank(this.myTank); m.HitTanks(this.tanks); m.Draw(); } 10.控制坦克移动射击的部分代码 onKeyUp:function(key) { this.myTank.KeyReleased(key); }, onKeyDown:function(key) { this.myTank.KeyPressed(key); } 11.用Ant和compiler合并压缩js后发布到sae 如果你发现有什么不合理的，需要改进的地方，请留言。或者可以通过 [email protected] 联系我，非常感谢。 http://blog.csdn.net/xiaoxiao108/article/details/8913616
基于html5+css3实现的精美聊天界面demo
07-27
基于HTML5+css3实现的两人即时通讯聊天界面，界面风格相当漂亮，可直接使用，也可简单修改为自己想要的样式，仅供大家参考。
HTML5应用—好看的DEMO
LisenYang的专栏
11-03 3432
HTML5应用—好看的DEMO
html5 拖拽demo,HTML5拖拽+demo
weixin_32224199的博客
06-15 312
有两个星期没写博客了，今天晚上和兄弟出去喝了几杯酒，乘着酒意写下这篇两个星期前一直想写的博客，再坚持一会就双12了，抢个商品，哎不废话了，说正经事。 拖拽事件类似于鼠标的一系列事件，有ondragstart，对象是被拖拽元素ondrag，对象是被拖拽元素ondragenter，对象是目标元素ondragover，对象是目标元素ondragleave，对象是目标元素ondrop，对象是目标元素ond...
Html5经典Demo收集
weixin_33725239的博客
03-31 778
1、HTML5/CSS3实现iOS Path菜单 菜单动画很酷 Path菜单相信大家都不陌生吧，它在iOS中非常流行，今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path菜单，点击按钮，即可弹出子菜单，子菜单弹出的动画非常炫酷。点击子菜单，即可打开相应功能。 在线演示 源码下载 2、HTML5环形音乐播放器 播放器外观非常酷 之前我们分享过几...
html5css知识点
08-23
- *1* *2* *3* [HTML5CSS3知识点总结（一）](https://blog.csdn.net/qq_63778549/article/details/122047919)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值