<section>
<h1>Hello World</h1>
<p>
LOL.........
</p>
</section>

<article>
	<header>
		<h1>HTML</h1>
		<p>HTML5:</p>
	</header>
	<header>
		hello:
	</header>
	<p>HTML5 + CSS + JS</p>
</article> 

<footer>
  <p>Posted by: zhou</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

<nav>
	<a href="/html/">HTML</a> |
	<a href="/css/">CSS</a> |
	<a href="/js/">JavaScript</a> |
	<a href="/jquery/">jQuery</a>
</nav> 

<figure>
   <img src="pic.jpg" alt="pic" width="300" height="230">
   <figcaption>this is a picture</figcaption>
</figure> 

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

<form action="action_page.php" 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> 

// 创建canvas元素，规定元素的id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>

// canvas元素本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成：
<script type="text/javascript">
	var c = document.getElementById("myCanvas");
	var cxt = c.getContext("2d");
	cxt.fillStyle = "#FF0000";
	// 在画布上绘制150x75的矩形，从左上角开始(0,0)
	cxt.fillRect(0,0,150,75);
</script>

// 画一个五角星
<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>

// 使用 QuickTime 来播放MP4视频
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
	<param name="src" value="movie.mp4" />
	<param name="controller" value="true" />
</object>

// 显示嵌入网页中的 MP3 文件
<embed height="100" width="100" src="song.mp3" />
// 或者
<object height="100" width="100" data="song.mp3"></object>


// 显示嵌入网页的Flash视频
<embed src="movie.swf" height="200" width="200"/>
// 或者
<object data="movie.swf" height="200" width="200"/>

// 上例中的mp3在IE、Chrome以及Safari中有效，为了使其在Firefox和Opera中同样有效，添加了一个ogg类型的文件
// 使用HTML 5的<audio>标签，尝试以mp3或ogg来播放音频。如果失败，代码将回退尝试<embed>元素
<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
  <embed height="100" width="100" src="song.mp3" />
</audio>


// <video>是HTML 5中的新标签，作用是在HTML页面中嵌入视频元素，会把视频转换为很多不同的格式
// 使用了4种不同的视频格式。HTML 5的<video>元素会尝试播放以mp4、ogg或webm格式中的一种来播放视频。如果均失败，则回退到<embed>元素
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

<a href="song.mp3">Play Sound</a>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

// 设置被拖动数据的数据类型和值
function drag(ev) {
	// 数据类型是"text"，而值是这个可拖动元素的id("drag1")
    ev.dataTransfer.setData("text", ev.target.id);
}

// ondragstart设置拖动什么数据
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

// 当放开被拖数据时，会发生drop事件
function drop(ev) {
	// 默认情况下，数据/元素无法被放置到其他元素中。为了实现拖放，必须阻止元素的这种默认的处理方式(drop事件的默认行为是以链接形式打开)
    ev.preventDefault();
	// 获得被拖的数据，将返回在setData()方法中设置为相同类型的任何数据
    var data = ev.dataTransfer.getData("text");
	// 把被拖元素追加到放置元素中
    ev.target.appendChild(document.getElementById(data));
}

// ondragover设置数据能放置到哪里
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
} else {
    // 抱歉！不支持 Web Storage ..
}

// 存储，其中：name="lastname"，value="Gates"
localStorage.setItem("lastname", "Gates");
// localStorage.lastname = "Gates";
// 取出，并插入到id="result"的元素中
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
// document.getElementById("result").innerHTML = localStorage.lastname;

// 删除
localStorage.removeItem("lastname");

// 存储
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
// 取出
document.getElementById("result").innerHTML = sessionStorage.clickcount

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

// 更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法
# 2019-10-19 v1.0.0
// 第一行，必须，定义当manifest文件被加载后，浏览器会从网站的根目录下载这三个文件。然后无论用户何时与因特网断开连接，这些资源依然可用
CACHE MANIFEST
/theme.css
/logo.gif
/main.js

// 定义文件永远不会被缓存，且离线时是不可用的，也可用*表示所有其他资源/文件都需要因特网连接
NETWORK:
login.asp

// 如果无法建立因特网连接，则用offline.html替代 /html/ 目录中的所有文件
FALLBACK:
// URI资源 + 替补页面
/html/ /offline.html

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
			// 创建一个新的web worker对象，然后运行demo_workers.js中的代码
            w = new Worker("demo_workers.js");
        }
		// 向web worker添加一个onmessage事件监听器
        w.onmessage = function(event) {
			// 当web worker传送消息时，会执行事件监听器中的代码，来自web worker的数据会存储于event.data中
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

function stopWorker() {
	// 终止web worker，并释放浏览器/计算机资源
    w.terminate();
	// 复用Web Worker
    w = undefined;
}
</script>

</body>
</html>


// demo_workers.js
var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();