html基础
WebSocket - 未完
省服务器资源和带宽，并且能够更实时地进行通讯 ；tcp协议
var Socket = new WebSocket(url, [protocol] );
第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议
服务器发送事件(Server-Sent Events)
许网页获得来自服务器的更新
需要能够发送数据更新的服务器（比如 PHP 和 ASP）
把 "Content-Type" 报头设置为 "text/event-stream"。发送事件流
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("sx").innerHTML+=event.data + "<br>";
};
}
else {
document.getElementById("sx").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}
</script>
Workers
<button onclick="startWorker()">开始</button>
<button onclick="stopWorker()">停止</button>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
demo_workers.js 文件代码：
var i=0;
function timedCount() {
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
缓存（Application Cache）
三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
CODE:
<html manifest="demo.appcache">
SQL
openDatabase：使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：用于执行实际的 SQL 查询
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});
Web 存储
localStorage - 用于长久保存整个网站的数据
sessionStorage - 用于临时保存同一窗口的数据
语法
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
// 存储
localStorage.sitename = "菜鸟教程";
localStorage.removeItem("sitename"); //移除
<nav> 元素
标签定义导航链接
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a>
</nav>
表单属性 -
<input> formaction 属性 覆盖<form> 元素中的action属性
用于 type="submit" 和 type="image".
formenctype 属性覆盖 form 元素的 enctype 属性
input 类型 form 之下
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
音频
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
Geolocation（地理定位） JS 方法实现
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>
拖放（Drag 和 Drop）
<img draggable="true"> 使元素可拖动
dataTransfer.getData("Text") 方法获得被拖的数据
ataTransfer.setData() 方法设置被拖数据的数据类型和值
放到何处 - ondragover
event.preventDefault() 设置允许放置，我们必须阻止对元素的默认处理
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
<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>
MathML 元素，对应的标签是 <math>...</math>
基于XML（标准通用标记语言的子集）的标准
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
<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>
canvas 需要脚本进行绘画
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘图方法：
arc(x,y,r,start,stop)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Canvas - 文本
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
使用 strokeText():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Canvas - 渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Canvas - 图像
drawImage(image,x,y)
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
html5shiv.js 引用代码必须放在 <head> 元素中
html5shiv.js 新的元素不被IE6-8识别，不能应用CSS样式等的解决
自定义标签
<body>
<ysx>我的新元素</ysx>
<body>
<style>
ysx {
display: block;
background-color: #ddd;
padding: 20px;
font-size: 30px;
}
</style>
视频
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
你的浏览器不支持 video 标签。
</video>
</body>
XHTML 是以 XML 格式编写的 HTML。 (默认的一套正规标准)
实体（Entities）
< 等同于 <
> 等同于 >
© 等同于 ©
不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
框架
<body>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>
</body>
布局
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
