HTML笔记
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<h1>春晓h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<b>加粗文本b><br/>
<i>斜体文本i><br/>
<code>电脑自动输出code><br/>
这是 <sub> 下标sub> 和 <sup> 上标sup>
<br/>
<pre>
此例演示如何使用 pre 标签
对空行和空格 进行控制
pre>
<code>计算机输出code>
<br/>
<kbd>键盘输入kbd>
<br/>
<samp>计算机代码样本samp>
<br/>
<var>计算机变量var>
<br/>
<br/>
<address>
Written by <a href="https://www.baidu.com">Jon Doea>.<br/>
Visit us at:<br/>
Example.com<br/>
Box 564, Disneyland<br/>
USA
address>
<br/>
<abbr title="etcetera">etc.abbr>
<br />
<acronym title="World Wide Web">WWWacronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。p>
<p>仅对于 IE 5 中的 acronym 元素有效。p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。p>
<br/>
<p>该段落文字从左到右显示。p>
<p><bdo dir="rtl">该段落文字从右到左显示。bdo>p>
<br/>
<!–语义化网页结构有助于搜索引擎的收录。同一个效果可以用很多钟方式实现，但这只方便了浏览者，而搜索引擎不知道这里到底是什么内容，
这里如果你使用<q>标签，那么就告诉浏览器这里是引用的话。而且在手持设备或移动设备不能很好支持css的基础上，
浏览器会使用默认的效果，因而提供较好可读性–>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.q>
We hope they succeed.p>
<br/>
<p>My favorite color is <del>bluedel> <ins>redins>!p>
<br/>
<!–定义一个摘自另一个源的块引用–>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world’s leading conservation organization, WWF works in 100 countries and
is supported by 1.2 million members in the United States and close to 5 million globally.
blockquote>
<br/>
<!–dfn 是 Definition（定义）的缩写。对特殊术语或短语的定义可以用–>
<dfn>定义项目dfn>
<br/>
<!–在当前页面链接到指定位置–>
<p><a href="#C2">查看章节 2a>p>
<h2>章节 1h2>
<p>这边显示该章节的内容……p>
<h2><a id="C2">章节 2a>h2>
<p>这边显示该章节的内容……p>
<h2>章节 3h2>
<p>这边显示该章节的内容……p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {background-color:lightgray;}
p {color:blue;}
style>
<title>TestJstitle>
head>
<h2 style="background-color:mediumpurple;text-align:center;">这是一个标题h2>
<p style="font-family:arial;font-size:20px;">这是一个段落。p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<base href="http://www.runoob.com/images/" target="_blank">
head>
<body>
<p>
<img src="pulpit.jpg" alt="Smiley face" style="float:left" width="32" height="32">
一个带图片的段落，图片浮动在这个文本的左边。
p>
<p>
一个带图片的段落，不使用浮动。
<img src="pulpit.jpg" alt="Smiley face" style="float:none" width="32" height="32">
p>
<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img src="http://www.runoob.com/try/demo_source/smiley.gif"
alt="HTML 教程" width="32" height="32">a>p>
<p><b>注意:b> 在这里我们使用了 CSS "float" 属性，在HTML 4中 align 属性已废弃，
HTML5 已不支持该属性，可以使用 CSS 代替。p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<base href="http://www.runoob.com/try/demo_source/" target="_blank">
head>
<body>
<p>点击太阳或其他行星，注意变化：p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
map>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>
每个表格从一个 table 标签开始。
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
p>
<h4>一列:h4>
<table border="1">
<tr>
<td>100td>
tr>
table>
<h4>一行三列:h4>
<table border="1">
<tr>
<td style='border:0px'>100td>
<td style='border-top:0px;border-bottom:0px'>200td>
<td>300td>
tr>
table>
<h4>两行三列:h4>
<table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse" bordercolor="#000000">
<tr>
<th>Header 1th>
<th colspan="2">Header 2th>
tr>
<tr>
<td>100td>
<td>200td>
<td>300td>
tr>
<tr>
<td>400td>
<td>500td>
<td>600td>
tr>
table>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<h4>无序列表:h4>
<ul>
<li>Coffeeli>
<li>Teali>
<li>Milkli>
ul>
<h4>编号列表：h4>
<ol>
<li>Applesli>
<li>Bananasli>
<li>Lemonsli>
<li>Orangesli>
ol>
<h4>大写字母列表：h4>
<ol type="A">
<li>Applesli>
<li>Bananasli>
<li>Lemonsli>
<li>Orangesli>
ol>
<h4>小写字母列表：h4>
<ol type="a">
<li>Applesli>
<li>Bananasli>
<li>Lemonsli>
<li>Orangesli>
ol>
<h4>罗马数字列表：h4>
<ol type="I">
<li>Applesli>
<li>Bananasli>
<li>Lemonsli>
<li>Orangesli>
ol>
<h4>小写罗马数字列表：h4>
<ol type="i">
<li>Applesli>
<li>Bananasli>
<li>Lemonsli>
<li>Orangesli>
ol>
<p><b>注意：b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：p>
<h4>圆点列表：h4>
<ul style="list-style-type:disc">
<li>Applesli>
<li>Bananasli>
<li>Lemonsli>
<li>Orangesli>
ul>
<h4>圆圈列表：h4>
<ul style="list-style-type:circle">
<li>Applesli>
<li>Bananasli>
<li>Lemonsli>
<li>Orangesli>
ul>
<h4>正方形列表：h4>
<ul style="list-style-type:square">
<li>Applesli>
<li>Bananasli>
<li>Lemonsli>
<li>Orangesli>
ul>
<h4>一个自定义列表：h4>
<dl>
<dt>Coffeedt>
<dd>• black hot drinkdd>
<dt>Milkdt>
<dd>• white cold drinkdd>
dl>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>这是一些文本。p>
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。h3>
<p>这是一个在 div 元素中的文本。p>
div>
<p>他的母亲有 <span style="color:blue;font-weight:bold">蓝色span> 的眼睛，他的父亲有
<span style="color:darkolivegreen;font-weight:bold">碧绿色span> 的眼睛。p>
<p>这是一些文本。p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<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>
JavaScriptdiv>
<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.comdiv>
div>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题h1>
td>
tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单b><br>
HTML<br>
CSS<br>
JavaScript
td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里td>
tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.comtd>
tr>
table>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p><b>单选按钮b>p>
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
form>
<br/>
<p><b>复选框b>p>
<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
form>
<br/>
<p><b>简单下拉列表b>p>
<form action="">
<select name="cars">
<option value="volvo">Volvooption>
<option value="saab">Saaboption>
<option value="fiat">Fiatoption>
<option value="audi">Audioption>
select>
form>
<br/>
<p><b>预选下拉列表b>p>
<form action="">
<select name="cars">
<option value="volvo">Volvooption>
<option value="saab">Saaboption>
<option value="fiat" selected>Fiatoption>
<option value="audi">Audioption>
select>
form>
<br/>
<p><b>文本域（textarea）b>p>
<textarea rows="10" cols="30">
我是一个文本框。
textarea>
<br/>
<p><b>创建按钮b>p>
<form action="">
<input type="button" value="Hello world!">
form>
<br/>
<p><b>文本域（text filed）b>p>
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
form>
<br/>
<p><b>密码字段b>p>
<form>
Password: <input type="password" name="pwd">
form>
<br/>
<p><b>带边框的表单b>p>
<form action="">
<fieldset>
<legend>Personal information:legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
fieldset>
form>
<br/>
<p><b>选项组b>p>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvooption>
<option value="saab">Saaboption>
optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedesoption>
<option value="audi">Audioption>
optgroup>
select>
<br/>
<p><b>指定一个预先定义的输入控件选项列表b>p>
<p><strong>注意:strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。p>
<form action="javascript:void(0)" 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>
<br/>
<p><b>定义一个计算结果b>p>
<p><strong>注意:strong> Internet Explorer 不支持 output 标签。p>
<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>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<iframe src="http://www.runoob.com/try/demo_source/demo_iframe.htm" name="iframe_a" frameborder="0">iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COMa>p>
<p><b>注意：b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<base href="http://www.runoob.com/try/demo_source/">
head>
<body>
<p><b>canvas新元素b>p>
<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,100,100);
script>
<br/>
<p><b>audio标签b>p>
<audio controls>
<source src="horse.ogg" >
<source src="horse.mp3" >
您的浏览器不支持 audio 元素。
audio>
<br/>
<p><b>video标签b>p>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
video>
<br/>
<p><b><embed>标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）b>p>
<embed src="helloworld.swf" tppabs="http://w3schools.com/tags/helloworld.swf"/>
<br/>
<p><b><embed><track> 标签为媒体元素（比如 audio and video）规定外部文本轨道b>p>
<video width="320" height="240" controls>
<source src="http://w3schools.com/tags/forrest_gump.mp4" type="video/mp4">
<source src="http://w3schools.com/tags/forrest_gump.ogg" type="video/ogg">
<track src="http://w3schools.com/tags/subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="http://w3schools.com/tags/subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
video>
<br/>
<p><b>定义页面独立的内容区域b>p>
<article>
<h1>Internet Explorer 9h1>
<p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。p>
article>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<base href="http://www.runoob.com/try/demo_source/">
head>
<body>
<p><b>使用style属性添加边框b>p>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
canvas>
<script>
//使用 JavaScript 来绘制图像
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,100,50);
script>
<script>
//Canvas - 路径
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(400,200);
ctx.stroke();
script>
<script>
//使用 arc() 方法 绘制一个圆
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
script>
<script>
//使用 "Arial" 字体在画布上绘制一个高 20px 的文字（实心）
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Arial";
ctx.fillText("Hello World",5,120);
script>
<script>
//使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",5,150);
script>
<br/>
<p><b>创建一个线性渐变。使用渐变填充矩形b>p>
<canvas id="myCanvasGradient" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。canvas>
<script>
var c=document.getElementById("myCanvasGradient");
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>
<p>Image to use:p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:p>
<canvas id="myCanvasImage" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。canvas>
<script>
var c=document.getElementById("myCanvasImage");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,10,10);
}
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<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>
html>
<html>
<head>
<meta charset="UTF-8">
<title>TestJstitle>
head>
<body>
<p><b>如果你的浏览器不支持该标签，可以使用最新版的 Firefox 或 Safari 浏览器查看b>p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>ami><mn>2mn>msup>
<mo>+mo>
<msup><mi>bmi><mn>2mn>msup>
<mo>=mo>
<msup><mi>cmi><mn>2mn>msup>
mrow>
math>
<br/>
<br/>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<msup>
<mi>xmi>
<mn>2mn>
msup>
<mo>+mo>
<mrow>
<mn>4mn>
<mo>mo>
<mi>xmi>
mrow>
<mo>+mo>
<mn>4mn>
mrow>
<mo>=mo>
<mn>0mn>
mrow>
math>
<br/>
<br/>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>Ami>
<mo>=mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>xmi>mtd>
<mtd><mi>ymi>mtd>
mtr>
<mtr>
<mtd><mi>zmi>mtd>
<mtd><mi>wmi>mtd>
mtr>
mtable>
mfenced>
mrow>
math>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<base href="http://www.runoob.com/try/demo_source/">
<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);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
script>
head>
<body>
<p>拖动 W3CSchool.cc 图片到矩形框中:p>
<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>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：p>
<button onclick="getLocation()">点我button>
<script>
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="![]("</span>+img_url+<span class="hljs-string">")
";
}
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>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<base href="http://www.runoob.com/try/demo_source/">
head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停button>
<button onclick="makeBig()">放大button>
<button onclick="makeSmall()">缩小button>
<button onclick="makeNormal()">普通button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
video>
div>
<script>
var myVideo=document.getElementById("video1");
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>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<form action="javascript:void(0)">
选择你喜欢的颜色: <input type="color" name="favcolor"><br>
<input type="submit">
form>
<br/>
<form action="javascript:void(0)">
生日: <input type="date" name="bday">
<input type="submit">
form>
<br/>
<form action="javascript:void(0)">
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
<input type="submit">
form>
<br/>
<form action="javascript:void(0)">
生日 ( 月和年 ): <input type="month" name="bdaymonth">
<input type="submit">
form>
<br/>
<form action="javascript:void(0)">
数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
<input type="submit">
form>
<br/>
<form action="javascript:void(0)" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
form>
<!–...–>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<script>
function clickCounterLocal()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("resultLocal").innerHTML=" 你已经点击了按钮 " +
localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("resultLocal").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
function clickCounterSession()
{
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcountSession)
{
sessionStorage.clickcountSession=Number(sessionStorage.clickcountSession)+1;
}
else
{
sessionStorage.clickcountSession=1;
}
document.getElementById("resultSession").innerHTML="在这个会话中你已经点击了该按钮 " +
sessionStorage.clickcountSession + " 次 ";
}
else
{
document.getElementById("resultSession").innerHTML="抱歉，您的浏览器不支持 web 存储";
}
}
script>
head>
<body>
<p><button onclick="clickCounterLocal()" type="button">点我！测试localStoragebutton>p>
<p><button onclick="clickCounterSession()" type="button">点我！测试sessionStoragebutton>p>
<div id="resultLocal">div>
<div id="resultSession">div>
<p>点击该按钮查看计数器的增加。p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。p>
body>
html>
<html>
<head>
<meta charset="UTF-8">
<title>TestJstitle>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
msg = '数据表已创建，且插入了两条数据。
';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
msg = '删除 id 为 1 的记录。
';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'runoob.com\' WHERE id=2');
msg = '更新 id 为 2 的记录。
';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "查询记录条数: "
+ len + "";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = ""
+ results.rows.item(i).log + "";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
script>
head>
<body>
<div id="status" name="status">状态信息div>
body>
html>
<html manifest="demo_html.appcache">
<head>
<meta charset="UTF-8">
<title>TestJstitle>
<base href="http://www.runoob.com/try/demo_source/">
head>
<body>
<script src="demo_time.js">
script>
<p id="timePara"><button onclick="getDateTime()">获取日期和时间button>p>
<p><img src="logo.png" width="336" height="69">p>
<p>尝试打开 <a href="tryhtml5_html_manifest.htm" target="_blank">这个页面a>,
在离线的状态下重新载入这个页面，页面也可以访问。p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>计数： <output id="result">output>p>
<button onclick="startWorker()">开始工作button>
<button onclick="stopWorker()">停止工作button>
<p><strong>注意：strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.p>
<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>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<base href="http://www.runoob.com/try/demo_source/">
head>
<body>
<h1>获取服务端更新数据h1>
<div id="result">div>
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "
";
};
}
else
{
document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}
script>
body>
html>