HTML学习：

<html>，表示html网页文件，hyper text markup language
<body>，页面内容
<h1>，文本为标题表示，<h1>This is a heading</h1>，head
<p>，段落， <p>This is a paragraph.</p>，paragraph
<a>，表示链接，<a href=”http://www.w3school.com.cn”>This is a link</a>，anchor
<img>，表示图像，<img src=”w3school.jpg” width=”104″ height=”142″ />，image
<br />，换行。break
起始标签与结束标签之间即为元素内容。

标签拥有属性，属性有属性名，name = value，并且都放在开始标签中。比如<a href=”http://www.w3school.com.cn”>This is a link</a>

<hr />，创建水平线，horizontal rule
<!– This is a comment –>：注释方法
外部样式表：引用了mystyle.css文件里面的样式，link表示资源引用，r

<head>

</head>

内部样式表：直接定义背景字体等，其中body，p等都是表示后面用到p标签或者body标签的时候，采用在此定义的样式。

<head>

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内联样式：直接在相关的标签中定义这个标签的样式

This is a paragraph

</p>

Html版本定义：

<!DOCTYPE html>：HTML5

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>：HTML 4.01

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>：XHTML 1.0

<head>：head元素，可以包含script，css，meta，可以包含以下标签<title>, <style>, <link>, <script>, <noscript>, <base>
<title>：文档的标题，在工具栏，收藏栏，搜索引擎中会很显示，所以很重要
<base>：定义page中所有链接的URLs，
<link>：定义文档和外部资源之间的关系，一般用来链接到css
<style>：style的定义，针对整个文档。
<meta>：文档的相关信息，一般包含page描述，关键词，文档作者，最后修改日期等等，一般网页不会显示这些信息。

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

<meta name=”author” content=”Hege Refsnes”>
<script>：定义脚本，比如javascript。

CSS：cascading style sheet，可以在标签中用style属性，也可以用style标签，还可以用外部的css文件
<a href=”http://www.w3schools.com” style=”text-decoration:none;”>Visit W3Schools.com!</a>：定义一个链接，但是文本没有任何修饰。用的是incline styles，即style属性
使用style标签：

<head>

<style type=”text/css”>

body {background-color:yellow;}

p {color:blue;}

</style>

</head>
使用外部css文件

<head>

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

</head>
<img>：图片标签

<img src=”smiley.gif” alt=”Smiley face” width=”32″ height=”32″>：最好定义宽高参数

<img src=”smiley.gif” alt=”Smiley face” align=”middle” width=”32″ height=”32″>：对齐方式

<img src=”smiley.gif” alt=”Smiley face” style=”float:right” width=”32″ height=”32″>：用float属性来使图片左右悬浮

<a href=”default.asp”> <img src=”smiley.gif” alt=”HTML tutorial” width=”32″ height=”32″> </a>：给图片添加一个链接

</map>：用了一张图片，将图片中的一定区域作为链接，连到其他网页。此图片相当于是一个map

<table>：表格，包含<tr>标签，即table row，和<td>标签，即table data，<th>，table header

<table border=”1″>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>
<th rowspan=”2″>Telephone:</th>：这个th占2行
<th colspan=”2″>Telephone</th>：这个th占2列
<table border=”1″ cellpadding=”10″>：定义内容和边框的距离

<ul>：unordered list，无序的列表
<ol>：ordered list，有序列表
<li>：list item，列表的项目
<dl>：description list，带描述的列表
<dt>：define terms，定义名称
<dd>：define description，定义描述

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

Block element：一般都会新起一行，比如<h1>, <p>, <ul>等等
Inline element：一般都不用新起一行，比如<b>, <td>, <a>等等
<div>：用来将HTML元素组织在一起。
<span>：作为一个inline元素，文本的容器。和<div>一样，配合css一起来设置内容的样式。

<div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”>：定义一个footer的区域，设置背景，文字对齐方式等等。

<form>：可以将数据传送到服务器，包含text，checkbox，buttons等等很多元素

<form>

First name: <input type=”text” name=”firstname”>

</form>：文本输入框

<form>

Password: <input type=”password” name=”pwd”>

</form>：密码输入框

<form>

<input type=”radio” name=”sex” value=”male”>Male<br>

<input type=”radio” name=”sex” value=”female”>Female

</form>：多选一圆框

<form>

<input type=”checkbox” name=”vehicle” value=”Bike”>I have a bike<br>

<input type=”checkbox” name=”vehicle” value=”Car”>I have a car

</form>：多项选择方框

<form name=”input” action=”html_form_action.asp” method=”get”>

Username: <input type=”text” name=”user”>

<input type=”submit” value=”Submit”>

</form>：提交按钮，将数据提交给服务器，然后进行操作。
另外还有下拉菜单。
<textarea rows=”10″ cols=”30″>The cat was playing in the garden.</textarea>：创建一个文字输入框，自定义了大小，但可以拖放其大小
<form action=””> <input type=”button” value=”Hello world!”> </form>：显示Hello world的按钮
<fieldset>：将相关的元素组织在一个form里面
<legend>：为fieldset显示一个标题caption
<form action=”MAILTO:someone@example.com” method=”post” enctype=”text/plain”> 。。。</form>：将form数据通过email发送，点击submit后，会调用电脑的邮件客户端。

<iframe src=”demo_iframe.htm” width=”200″ height=”200″></iframe>：在一个网页中显示另外一个网页。Inline frame。
<iframe src=”demo_iframe.htm” frameborder=”0″></iframe>：去掉border。

<iframe src=”demo_iframe.htm” name=”iframe_a”></iframe>

<p><a href=”http://www.w3schools.com” target=”iframe_a”>W3Schools.com</a></p>：先定义一个frame，然后将文本的链接显示到frame里面去。

颜色的定义，#FFFFFF，有红蓝绿三色组成，每种颜色两位16进制，一共组成。另有17个标准的颜色名+123个附加颜色名与其对应。

<script>：脚本标签。
<script> document.write(“Hello World!”) </script>：一个javascript的调用。
<noscript>Sorry, your browser does not support JavaScript!</noscript>：当浏览器不支持javascript的时候，显示这些文字。

<script>

document.write(“<h1>This is a heading</h1>”);

document.write(“<p>This is a paragraph.</p>”);

</script>：一个javascript的例子

<script>

function myFunction()

{

document.getElementById(“demo”).innerHTML=”Hello JavaScript!”;

}

</script>

<button type=”button” onclick=”myFunction()”>Click Me!</button>：用script定义一个函数，然后用button点击后调用此函数。Oneclick即表示点击一次。

<script>

function myFunction()

{

x=document.getElementById(“demo”) // Find the element

x.style.color=”#ff0000″; // Change the style

}

</script>：定义一个函数，找到ID叫demo的元素，改变其颜色。

HTML的保留字，如果要显示保留字，两种方法，”&entity_name；”，”&#entity_number；”
 ，表示non-breaking space
<p>®</p>：显示为®

URL：uniform resource locator。在传输网页地址的时候，有些字符无法显示，所以会用%+两个16进制数的方式显示。空格用”+”表示
XHTML：eXtensible Hypertext Markup Language，将HTML像XML一样重新设计。

DOCTYPE强制要求；<html>标签的namespace属性强制要求；<html>, <head>, <title>, <body>这些标签都强制要求；元素必须合理嵌套；所有元素必须关闭；所有元素必须小写；必须有一个root element；属性名必须小写；属性名必须quoted，加引号；不允许attribute minimization；

<input checked>：在XHTML中是错误的。<input checked=”checked”>：才是对的。这就是”不允许attribute minimization”。

<html xmlns=”http://www.w3.org/1999/xhtml”>：每个html网页必须包含，在DOCTYPE之后，<head>之前。这就是”<html>标签的namespace属性强制要求”。

HTML5学习

<!DOCTYPE html>：表示html5的文档类型。
<canvas>：用来通过script画图像，加入图像等等。
<canvas id=”myCanvas” width=”200″ height=”100″></canvas>：定义一个canvas区域
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #00FF00;”> Your browser does not support the HTML5 canvas tag. </canvas>：加入了边框的canvas，定义了边框的宽度和颜色。
用javascript画一个图案在id为myCanvas的区域内。getContext()方法将2d值传给ctx对象。

<script>

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);

ctx.fillStyle=”#FF0000″;

ctx.fillRect(0,0,150,75);

</script>
Canvas的轴是左上为(0,0)
画一条直线，先定义起始点，然后用lineto()定义终点，最后用stroke()将线画出

<script>

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);

ctx.moveTo(0,0);

ctx.lineTo(300,100);

ctx.stroke();

</script>
画一个圆，arc(x,y,r,start,stop)，xy为原点坐标，r是半径，start是起始角度（一般为0），stop是终点角度（一般为2*Math.PI，即360度）

<script>

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>
写文字，font定义高度和字体，fillText定义文本和起始坐标。

<script>

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);

ctx.font=”30px Arial”;

ctx.fillText(“Hello World”,10,50);

</script>
画一个线性渐变的颜色，fillRect定义颜色渐变的矩形框

<script>

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);

// Create gradient

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,”red”);

grd.addColorStop(1,”white”);

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>
画一个圆形渐变的颜色，createRadialGradient定义起始圆和终点圆的坐标和半径

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);

// Create gradient

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,”red”);

grd.addColorStop(1,”white”);

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);
加入一个图像，先要定义一个id为scream的图像，然后在javascript中调用即可。drawImage里面定义图片和开始坐标。

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);

var img=document.getElementById(“scream”);

ctx.drawImage(img,10,10);

SVG：scalable vector graphics。用XML格式定义图形。这种定义的图形在缩放的时候，不会损失图形的质量。图形可以做成动画。
画一个五角星，polygon定义多边形的5个点

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

Drag and Drop：任何元素都是draggable。

<!DOCTYPE HTML>

<html>

<head>

<style type=”text/css”>

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

<script>

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData(“Text”,ev.target.id); 设定当拖动的时候，setData()方法定义了数据类型和值

}

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData(“Text”);

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>：当拖动到此上方时，调用allowDrop()函数。放下一个数据时，调用drop()函数。

<br>

<img id=”drag1″ src=”img_logo.gif” draggable=”true” ondragstart=”drag(event)” width=”336″ height=”69″>：将图像设置为draggable，然后定义当拖动时调用drag()函数

</body>

</html>
preventDefault()，阻止浏览器对数据的默认处理。浏览器会默认将其作为一个链接打开。

Geolocation：地图元素
getCurrentPosition()方法来获得用户的地理位置信息
显示经纬度的例子，首先检查Geolocation是否被支持，如果是，则运行getCurrentPosition()方法，如果此方法成功，则将获得的坐标信息作为一个对象传给括号里面的函数即showPosition。然后showPosition函数将坐标信息显示出来。如果getCurrentPosition()方法失败，则将错误信息传给括号后的第二个函数即showError，然后通过switch来判断是哪种错误并显示错误给客户。

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition,showError);

}

else{x.innerHTML=”Geolocation is not supported by this browser.”;}

}

function showPosition(position)

{

x.innerHTML=”Latitude: ” + position.coords.latitude +

“<br>Longitude: ” + position.coords.longitude;

}

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

x.innerHTML=”User denied the request for Geolocation.”

break;

case error.POSITION_UNAVAILABLE:

x.innerHTML=”Location information is unavailable.”

break;

case error.TIMEOUT:

x.innerHTML=”The request to get user location timed out.”

break;

case error.UNKNOWN_ERROR:

x.innerHTML=”An unknown error occurred.”

break;

}

}

</script>
将坐标信息在静态的google maps中显示。

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=400×300&sensor=false”;

document.getElementById(“mapholder”).innerHTML=”<img src=’”+img_url+”‘>”;

}
在动态的Google maps中显示

<script src=”http://maps.google.com/maps/api/js?sensor=false”></script>

。。。

function showPosition(position)

{

lat=position.coords.latitude;

lon=position.coords.longitude;

latlon=new google.maps.LatLng(lat, lon)

mapholder=document.getElementById(‘mapholder’)

mapholder.style.height=’250px’;

mapholder.style.width=’500px’;

var myOptions={

center:latlon,zoom:14,

mapTypeId:google.maps.MapTypeId.ROADMAP,

mapTypeControl:false,

navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}

};

var map=new google.maps.Map(document.getElementById(“mapholder”),myOptions);

var marker=new google.maps.Marker({position:latlon,map:map,title:”You are here!”});

}
watchPosition()获得用户的地理信息，并持续更新。另外clearWatch()就是停止这个更新。

<script>

var x=document.getElementById(“demo”);

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.watchPosition(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>

<video>：视频标签
嵌入一个视频，浏览器能播放最先识别出来的视频源。Controls属性表示有控制功能。

<video width=”320″ height=”240″ controls>

<source src=”movie.mp4″ type=”video/mp4″>

<source src=”movie.ogg” type=”video/ogg”>

Your browser does not support the video tag.

</video>
为视频添加控制功能按钮，此按钮不同于上面例子的控制按钮。包含播放停止按钮，放大缩小按钮

function playPause()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

function makeBig()

{

myVideo.width=560;

}

function makeSmall()

{

myVideo.width=320;

}

function makeNormal()

{

myVideo.width=420;

}

</script>

<audio>：音频标签。
用法同video类似

<audio controls>

<source src=”horse.ogg” type=”audio/ogg”>

<source src=”horse.mp3″ type=”audio/mpeg”>

Your browser does not support the audio element.

</audio>

颜色选择框，可以选择颜色然后提交给服务器

<form action=”demo_form.asp”>

Select your favorite color: <input type=”color” name=”favcolor”><br>

<input type=”submit”>

</form>
日期选择框，

<form action=”demo_form.asp”>

Birthday: <input type=”date” name=”bday”>

<input type=”submit”>

</form>
Date和time输入框

<form action=”demo_form.asp”>

Birthday (date and time): <input type=”datetime” name=”bdaytime”>

<input type=”submit”>

</form>
Date和time选择框

<form action=”demo_form.asp”>

Birthday (date and time): <input type=”datetime-local” name=”bdaytime”>

<input type=”submit”>

</form>
电子邮件输入框

<form action=”demo_form.asp”>

E-mail: <input type=”email” name=”email”>

<input type=”submit”>

</form>
Month和year选择框

<form action=”demo_form.asp”>

Birthday (month and year): <input type=”month” name=”bdaymonth”>

<input type=”submit”>

</form>
数字输入框，设定了最大值和最小值

<form action=”demo_form.asp”>

Quantity (between 1 and 5): <input type=”number” name=”quantity” min=”1″ max=”5″>

<input type=”submit”>

</form>
显示一个滑动调，可以调节数字1～10

<form action=”demo_form.asp” method=”get”>

Points: 0<input type=”range” name=”points” min=”1″ max=”10″>10

<input type=”submit”>

</form>
搜索框

<form action=”demo_form.asp”>

Search Google: <input type=”search” name=”googlesearch”><br>

<input type=”submit”>

</form>
电话号码输入框

<form action=”demo_form.asp”>

Telephone: <input type=”tel” name=”usrtel”><br>

<input type=”submit”>

</form>
Time选择框

<form action=”demo_form.asp”>

Select a time: <input type=”time” name=”usr_time”>

<input type=”submit”>

</form>
URL输入框，提交的时候会自动验证

<form action=”demo_form.asp”>

Add your homepage: <input type=”url” name=”homepage”><br>

<input type=”submit”>

</form>
周选择框，包括了年

<form action=”demo_form.asp”>

Select a week: <input type=”week” name=”year_week”>

<input type=”submit”>

</form>

Datalist元素，当在输入框输入字母的时候，会提示自动补全的单词，用option value来预先定义可以自动补全的单词。

<form action=”demo_form.asp” method=”get”>

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

<input type=”submit”>

</form>
Keygen元素，生成一个private key和public key，前者存在本地，而后者传给服务器作为以后登录用。

<form action=”demo_keygen.asp” method=”get”>

Username: <input type=”text” name=”usr_name”>

Encryption: <keygen name=”security”>

<input type=”submit”>

</form>
创建一个滑动数字输入框+文本数字输入框，将两数字之和显示出来。

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

Autocomplete，自动补全功能。暂不清楚自动补全词的来源。最后的email输入框关闭了自动补全功能。

<form action=”demo_form.asp” autocomplete=”on”>

First name:<input type=”text” name=”fname”><br>

Last name: <input type=”text” name=”lname”><br>

E-mail: <input type=”email” name=”email” autocomplete=”off”><br>

<input type=”submit”>

</form>
Novalidate，不用验证属性。相当于是禁用了默认的验证输入值的功能。

<form action=”demo_form.asp” novalidate>

E-mail: <input type=”email” name=”user_email”>

<input type=”submit”>

</form>
Autofocus，属性，当页面载入的时候，自动将此输入框高亮显示，并且输入光标在输入框里面。

<form action=”demo_form.asp”>

First name:<input type=”text” name=”fname” autofocus><br>

Last name: <input type=”text” name=”lname”><br>

<input type=”submit”>

</form>
Form，属性。当输入框不再一个form标签里面的时候，这个form属性可以定义后面的输入框为此form标签里面的东西。

<form action=”demo_form.asp” id=”form1″>

First name: <input type=”text” name=”fname”><br>

<input type=”submit” value=”Submit”>

</form>

Last name: <input type=”text” name=”lname” form=”form1″>
Formaction，表单动作，这个属性定义一个新的asp文件用来取代form标签里面的action定义。可以对单独的按钮添加。

<form action=”demo_form.asp”>

First name: <input type=”text” name=”fname”><br>

Last name: <input type=”text” name=”lname”><br>

<input type=”submit” value=”Submit”><br>

<input type=”submit” formaction=”demo_admin.asp” value=”Submit as admin”>

</form>
Formenctype，表单加密，重新定义一个按钮的加密属性，取代form标签自己默认的。这样在将数据传输给服务器的时候就采用了不同的加密方式。

<form action=”demo_post_enctype.asp” method=”post”>

First name: <input type=”text” name=”fname”><br>

<input type=”submit” value=”Submit”>

<input type=”submit” formenctype=”multipart/form-data” value=”Submit as Multipart/form-data”>

</form>
Formmethod，表单方法，重新定义一个按钮的表单method取代form标签定义的。

<form action=”demo_form.asp” method=”get”>

First name: <input type=”text” name=”fname”><br>

Last name: <input type=”text” name=”lname”><br>

<input type=”submit” value=”Submit”>

<input type=”submit” formmethod=”post” formaction=”demo_post.asp” value=”Submit using POST”>

</form>
Formnovalidate，表单不验证属性。也是添加在单个按钮里面的

<form action=”demo_form.asp”>

E-mail: <input type=”email” name=”userid”><br>

<input type=”submit” value=”Submit”><br>

<input type=”submit” formnovalidate value=”Submit without validation”>

</form>
Formtarget，表单目标属性。

<form action=”demo_form.asp”>

First name: <input type=”text” name=”fname”><br>

Last name: <input type=”text” name=”lname”><br>

</form>

Height和width属性，当将按钮要替换成图片的时候，定义图片的宽和高

<form action=”demo_form.asp”>

First name: <input type=”text” name=”fname”><br>

Last name: <input type=”text” name=”lname”><br>

<input type=”image” src=”img_submit.gif” alt=”Submit” width=”48″ height=”48″>

</form>
Min和max属性

<form action=”demo_form.asp”>

Enter a date before 1980-01-01:

<input type=”date” name=”bday” max=”1979-12-31″><br>

Enter a date after 2000-01-01:

<input type=”date” name=”bday” min=”2000-01-02″><br>

Quantity (between 1 and 5):

<input type=”number” name=”quantity” min=”1″ max=”5″><br>

<input type=”submit”>

</form>
Multiple属性，在浏览选择文件的时候，可以同时选择多个文件。

<form action=”demo_form.asp”>

Select images: <input type=”file” name=”img” multiple>

<input type=”submit”>

</form>
Pattern，定义输入框应该输入的字符和字符数。

<form action=”demo_form.asp”>

Country code: <input type=”text” name=”country_code” pattern=”[A-Za-z]{3}” title=”Three letter country code”>

<input type=”submit”>

</form>
Placeholder，在输入框里面默认加入一些提示语句。当输入光标在输入字符的时候，会自动消失。

<form action=”demo_form.asp”>

<input type=”text” name=”fname” placeholder=”First name”><br>

<input type=”text” name=”lname” placeholder=”Last name”><br>

<input type=”submit” value=”Submit”>

</form>
Required，属性，在提交之前，必须输入字符。

<form action=”demo_form.asp”>

Username: <input type=”text” name=”usrname” required>

<input type=”submit”>

</form>

HTML5新的语义元素，semantic elements，比如<header>, <section>, <nav>等等
<section>：一般为一个heading之下内容的组合。

<section>

<h1>WWF</h1>

<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>

</section>
<article>：将其与网页的剩余部分分布开来。一般用在论坛，博客，评论等地方。

<article>

<h1>Internet Explorer 9</h1>

<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to

the public on March 14, 2011 at 21:00 PDT…..</p>

</article>
<nav>：导航元素，定义导航链接

<nav>

<a href=”/html/”>HTML</a> |

<a href=”/css/”>CSS</a> |

<a href=”/js/”>JavaScript</a> |

<a href=”/jquery/”>jQuery</a>

</nav>
<aside>：定义一些内容与所在内容隔开。比如sidebar。但还是不太理解。

<p>My family and I visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>
<header>：一个document或者section的标题

<article>

<header>

<h1>Internet Explorer 9</h1>

<p><time pubdate datetime=”2011-03-15″></time></p>

</header>

<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to

the public on March 14, 2011 at 21:00 PDT…..</p>

</article>
<footer>：定义document和section的页脚。一般为copyright，terms of use，contact information

<footer>

<p>Posted by: Hege Refsnes</p>

<p><time pubdate datetime=”2012-03-01″></time></p>

</footer>
<figure>，<figcaption>：图像，图标，列表等的容器

<figure>

<img src=”img_pulpit.jpg” alt=”The Pulpit Rock” width=”304″ height=”228″>

<figcaption>Fig.1 – The Pulpit Rock, Norway.</figcaption>

</figure>

Web storage：不同于早期的cookies，此存储更安全和快速。网页只能访问自己的存储数据。有两种形式，一种是不过期的，另一种是单线程的。
Localstorage，首先检查浏览器是否支持webstorage，然后创建一个lastname的本地存储，最后调用localStorage显示出来。没有时间限制。

if(typeof(Storage)!==”undefined”)

{

localStorage.lastname=”Smith”;

document.getElementById(“result”).innerHTML=”Last name: ” + localStorage.lastname;

}

else

{

document.getElementById(“result”).innerHTML=”Sorry, your browser does not support web storage…”;

}

</script>
本地存储数字每按一次按钮就加1，就算将窗口关闭重新打开，也会继续计数。

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…”;

}
单线程存储，窗口关闭后重新开始计数。

function clickCounter()

{

if(typeof(Storage)!==”undefined”)

{

if (sessionStorage.clickcount)

{

sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;

}

else

{

sessionStorage.clickcount=1;

}

document.getElementById(“result”).innerHTML=”You have clicked the button ” + sessionStorage.clickcount + ” time(s) in this session.”;

}

else

{

document.getElementById(“result”).innerHTML=”Sorry, your browser does not support web storage…”;

}

}

HTML5 cache，可以离线浏览，有些script还可以离线使用。<html manifest=”demo.appcache”>。服务器上有manifect文件，告诉浏览器哪些cache，哪些不能cache。格式为MIMI-type，text/cache-manifect。
下面是例子。第一部分cache manifect，需要cache的资源。第二部分network，需要联网的资源。第三部分，fallback，当浏览器不能建立连接时，用后面的文件作为网页显示，其中/html是正常显示的网页。当改变js，css文件的时候，浏览器不会重新cache。最好的方法是修改#号后面的注释行。这样表明manifest文件改变了，所以浏览器就会重新cache。

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

NETWORK:

login.asp

FALLBACK:

/html/ /offline.html

HTML5 web worker，运行在后台的javascript，不影响页面的性能。
一个例子。

<script>

var w;

function startWorker()

{

if(typeof(Worker)!==”undefined”)        //首先验证浏览器是否支持web worker

{

if(typeof(w)==”undefined”)                //检查是否已经有web worker存在，如果没有，则运行demo_workers.js里面的代码。

{

w=new Worker(“demo_workers.js”);

}

w.onmessage = function (event)         //建立一个listener来监听web worker，如果返回值了，则执行下面的显示代码。

{

document.getElementById(“result”).innerHTML=event.data;            //从web worker返回的数据存储在event.data里面

};

}

else

{

document.getElementById(“result”).innerHTML=”Sorry, your browser does not support Web Workers…”;

}

}

function stopWorker()

{

w.terminate();            当建立了一个web worker后，会一直持续监听message。所以要有停止。

}

</script>
“demo_workers.js” file，计数的文件。PostMessage()将i的值返回给html网页

var i=0;

function timedCount()

{

i=i+1;

postMessage(i);

setTimeout(“timedCount()”,500);

}

timedCount();

HTML5 SSE，server-sent events。一种message的方法。一个页面自动从服务器获取更新。是由服务器自动推送的。比如facebook，twitter等等。
自动获取服务器更新

<script>

if(typeof(EventSource)!==”undefined”)

{

var source=new EventSource(“demo_sse.php”); //建一个新的eventsource对象，然后定义那个页面推送更新，这里是php文件

source.onmessage=function(event) //每当event occurs，就将数据加到结果里面去。

{

document.getElementById(“result”).innerHTML+=event.data + “<br>”;

};

}

else

{

document.getElementById(“result”).innerHTML=”Sorry, your browser does not support server-sent events…”;

}

</script>
demo_sse.php，

<?php

header(‘Content-Type: text/event-stream’);        //设定content-type

header(‘Cache-Control: no-cache’);                    //不能cache

$time = date(‘r’);

echo “data: The server time is: {$time}\n\n”;        //都要data:开头

flush();        //将输出数据返回给调用他的网页。

?>

HTML 学习笔记

HTML学习：

HTML5学习

评论

发表回复取消回复

HTML 学习笔记

HTML学习：

HTML5学习

评论

发表回复 取消回复

发表回复取消回复