<!--HTML简介
• HTML 是用来描述网页的一种语言。
• HTML 指的是超文本标记语言: HyperText Markup Language
• HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页
• HTML 文档包含了HTML 标签及文本内容
• HTML文档也叫做 web 页面
HTML 标签
• HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
• HTML 标签是由尖括号包围的关键词，比如 <html>
• HTML 标签通常是成对出现的，比如 <b> 和 </b>
HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签-->
<!--HTML 标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的
<h1> 定义最大的标题。 <h6> 定义最小的标题
浏览器会自动地在标题的前后添加空行
标题很重要
• 搜索引擎使用标题为您的网页的结构和内容编制索引
• 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线-->
<!--不能通过在 HTML 代码中添加额外的空格或换行来改变输出的效果
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</head>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）</p>
</body>
</html>
<!--HTML 文本格式化
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</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 Doe</a>.<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">WWW</acronym>
<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>blue</del> <ins>red</ins>!</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">查看章节 2</a></p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C2">章节 2</a></h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
</body>
</html>
<!--HTML <head>
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<title> 元素:
• 定义了浏览器工具栏的标题
• 当网页添加到收藏夹时，显示在收藏夹中的标题
• 显示在搜索引擎结果页面的标题
HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标（链接的公共部分），该标签作为HTML文档中所有的链接标签的默认链接
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你需要指定样式文件来渲染HTML文档:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta>一般放置于 <head>区域
<meta> 标签- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定义网页作者:
<meta name="author" content="Hege Refsnes">
每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">-->
<!--HTML 样式- CSS
如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
• 内联样式- 在HTML元素中使用"style" 属性
• 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
• 外部引用 - 使用外部 CSS 文件
• 最好的方式是通过外部引用CSS文件-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {background-color:lightgray;}
p {color:blue;}
</style>
<title>TestJs</title>
</head>
<h2 style="background-color:mediumpurple;text-align:center;">这是一个标题</h2>
<p style="font-family:arial;font-size:20px;">这是一个段落。</p>
</body>
</html>
<!--HTML 图像
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" alt="some_text">
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，
那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息
<img src="boat.gif" alt="Big Boat">
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
<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>
<!--创建图像映射-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
<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 表格
HTML 表格标签
标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</head>
<body>
<p>
每个表格从一个 table 标签开始。
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td style='border:0px'>100</td>
<td style='border-top:0px;border-bottom:0px'>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列:</h4>
<table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse" bordercolor="#000000">
<tr>
<th>Header 1</th>
<th colspan="2">Header 2</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
<!--HTML 列表
HTML 列表标签
标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</head>
<body>
<h4>无序列表:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h4>编号列表：</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>大写字母列表：</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>罗马数字列表：</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写罗马数字列表：</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>正方形列表：</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>一个自定义列表：</h4>
<dl>
<dt>Coffee</dt>
<dd>• black hot drink</dd>
<dt>Milk</dt>
<dd>• white cold drink</dd>
</dl>
</body>
</html>
<!--HTML <div> 和<span>
HTML 可以通过 <div> 和 <span>将元素组合起来
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 与元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</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 布局
HTML 布局 - 使用<div> 元素
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</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>
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>
</html>
<!--HTML 布局 - 使用表格
使用 HTML <table> 标签是创建布局的一种简单的方式
即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</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.com</td>
</tr>
</table>
</body>
</html>
<!--HTML 表单和输入
HTML 表单用于搜集不同类型的用户输入
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
.
input 元素
.
</form>
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
密码字段
密码字段通过标签<input type="password"> 来定义:
<form>
Password: <input type="password" name="pwd">
</form>
单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<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>
提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。
由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理:
<form name="input" action="javascript:void(0)" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</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">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
<br/>
<p><b>预选下拉列表</b></p>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</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">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</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 框架
iframe语法:
<iframe src="URL"></iframe>
该URL指向不同的网页
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</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.COM</a></p>
<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>
</body>
</html>
<!--
HTML 字符实体
不间断空格(Non-breaking Space)
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，
浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
< 等同于 <
> 等同于 >
© 等同于 ©
-->
<!--
HTML - XHTML
XHTML 是以 XML 格式编写的 HTML。
什么是 XHTML?
XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持
-->
<!--
HTML5 简介
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体
HTML5 中的一些有趣的新特性：
• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search
HTML5 的改进:
• 新元素
• 新属性
• 完全支持 CSS3
• Video 和 Audio
• 2D/3D 制图
• 本地存储
• 本地 SQL 数据
• Web 应用
HTML5 使用 CSS3
• 新选择器
• 新属性
• 动画
• 2D/3D 转换
• 圆角
• 阴影效果
• 可下载的字体
HTML5 表单
新表单元素, 新属性，新输入类型，自动验证
HTML5 浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
-->
<!--
HTML5 新元素
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
<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 9</h1>
<p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
</body>
</html>
<!--HTML5 Canvas-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
<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>
<!--
HTML5 内联 SVG
什么是SVG？
• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用于定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG 是万维网联盟的标准
SVG优势
• 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
• SVG 图像可通过文本编辑器来创建和修改
• SVG 图像可被搜索、索引、脚本化或压缩
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas SVG
依赖分辨率 不依赖分辨率
不支持事件处理器 支持事件处理器
弱的文本渲染能力 最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不适合游戏应用
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</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>
<!--
HTML5 MathML
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TestJs</title>
</head>
<body>
<p><b>如果你的浏览器不支持该标签，可以使用最新版的 Firefox 或 Safari 浏览器查看</b></p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
<br/>
<br/>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo></mo>
<mi>x</mi>
</mrow>
<mo>+</mo>
<mn>4</mn>
</mrow>
<mo>=</mo>
<mn>0</mn>
</mrow>
</math>
<br/>
<br/>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</body>
</html>
<!--
HTML5 拖放（Drag 和 Drop）
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
<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>
<!--
HTML5 Geolocation（地理定位）
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</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="<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>
</body>
</html>
<!--
HTML5 Video(视频)
当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
<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>
<!--
HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</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>
<!--
HTML5 Web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式
localStorage 和 sessionStorage
客户端存储数据的两个对象为：
• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
• 保存数据： localStorage.setItem(key,value);
• 读取数据： localStorage.getItem(key);
• 删除单个数据： localStorage.removeItem(key);
• 删除所有数据： localStorage.clear();
• 得到某个索引的key：localStorage.key(index);
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
<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">点我！测试localStorage</button></p>
<p><button onclick="clickCounterSession()" type="button">点我！测试sessionStorage</button></p>
<div id="resultLocal"></div>
<div id="resultSession"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>
<!--
HTML5 Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，
引入了一组使用 SQL 操作客户端数据库的 APIs
以下是规范中定义的三个核心方法：
• openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
• transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
• executeSql：这个方法用于执行实际的 SQL 查询。
-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>TestJs</title>
<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 = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
msg = '<p>删除 id 为 1 的记录。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'runoob.com\' WHERE id=2');
msg = '<p>更新 id 为 2 的记录。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
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++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">状态信息</div>
</body>
</html>
<!--
HTML5 应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，
则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
实例 - 完整的 Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
提示:以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，
或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
注意: 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）
-->
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<head>
<meta charset="UTF-8">
<title>TestJs</title>
<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>
<!--
HTML5 Web Workers
web worker 是运行在后台的 JavaScript，不会影响页面的性能
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
</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>
<!--
HTML5 服务器发送事件(Server-Sent Events)
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新
//demo_sse.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestJs</title>
<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 + "<br>";
};
}
else
{
document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}
</script>
</body>
</html>
<!--
HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocol]);
-->
07-14
800
09-15
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
