HTML5
1 简介
1.1 含义
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
<标签>内容</标签>
1.5 HTML 元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签
这是一个段落。
2 标签
标题
是通过
-
标签来定义的。
< h1> 定义最大的标题。 < h6> 定义最小的标题。
这是一个标题
这是一个标题
这是一个标题
这是一个标题
这是一个标题
这是一个标题
水平线
< hr> 标签在 HTML 页面中创建水平线。
这是一个段落。
注释
段落
HTML 段落是通过标签 < p> 来定义的。
这是一个段落
换行
HTML 段落是通过标签 < brp> 来定义的。
这个一个换行
段落
文本格式化
|
|
|
定义粗体文本 |
|
定义着重文字 |
|
定义斜体字 |
|
定义小号字 |
|
定义加重语气 |
|
定义下标字 |
|
定义上标字 |
|
定义插入字 |
|
定义删除字 |
链接
HTML 链接是通过标签 来定义的。
这是一个链接
| 函数 |
含义 |
| href |
指定链接的地址 |
| target |
定义被链接的文档在何处显示 |
| id |
头部
HTML 链接是通过标签 来定义的。
在 元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
| 元素 |
含义 |
| </td>
<td>标题</td>
</tr>
<tr>
<td><base></td>
<td>描述了基本的链接地址/链接目标</td>
</tr>
<tr>
<td><link></td>
<td>链接文档外部资源</td>
</tr>
<tr>
<td><style></td>
<td>引用样式文件</td>
</tr>
<tr>
<td><meta></td>
<td>元数据，指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据</td>
</tr>
<tr>
<td><script></td>
<td>加载脚本文件</td>
</tr>
</tbody>
</table>
<p> <!DOCTYPE html><br /> <html><br /> <head> <br /> <meta charset="utf-8"> <br /> <meta name="keywords" content="关键字"><br /> <meta name="description" content="描述"><br /> <meta name="author" content="作者"><br /> <!-- 每30秒钟刷新当前页面 --><br /> <meta http-equiv="refresh" content="30"><br /> <br /> <br /> <base href="http://www.baidu.com" target="_blank"><br /> <br /> <link rel="stylesheet" type="text/css" href="style.css"><br /> <br /> <br /> <br /> <br /> </head><br /> <br /> <body><br /> 文档内容……<br /> </body><br /> <br /> </html>
<a name="Dql6b"></a></p>
<h2 id="eq3jqm"><a name="eq3jqm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3 CSS样式</h2><p>用于渲染HTML元素标签的样式
<a name="bHB2u"></a></p>
<h3 id="8g2rs8"><a name="8g2rs8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>如何使用？</h3><p>CSS 可以通过以下方式添加到HTML中:</p>
<ul>
<li>内联样式- 在HTML元素中使用”style” <strong>属性</strong></li><li>内部样式表 -在HTML文档头部 <head> 区域使用<style><strong>元素</strong> 来包含CSS</li><li><p>外部引用 - 使用外部 CSS <strong>文件</strong></p>
<p><head><br /> <style type="text/css"><br /> <!---内部样式表-><br /> p {color:blue;}<br /> </style><br /> <br /> <!--外部引用--><br /> <link rel="stylesheet" type="text/css" href="style.css"><br /> </head><br /> <body><br /> <!--内联样式--><br /> <p style="cloor:red">这是一个段落</p><br /> </body>
<a name="cAUIN"></a></p>
<h2 id="3aypk7"><a name="3aypk7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4 图像</h2><p>HTML 图像是通过标签 <img> 来定义的.<br /> <img loading="lazy" src="/images/logo.png" width="258" height="39" /></p>
</li></ul>
<table>
<thead>
<tr>
<th><strong>属性</strong></th>
<th><strong>含义</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>图像的 URL 地址</td>
</tr>
<tr>
<td>alt</td>
<td>在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息</td>
</tr>
<tr>
<td>height</td>
<td>高度</td>
</tr>
<tr>
<td>width</td>
<td>宽度</td>
</tr>
</tbody>
</table>
<p><a name="pn88f"></a></p>
<h2 id="7j0ndz"><a name="7j0ndz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5 表格</h2><table>
<thead>
<tr>
<th><strong>标签</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><table></td>
<td>定义表格</td>
</tr>
<tr>
<td><th></td>
<td>定义表格的表头</td>
</tr>
<tr>
<td><tr></td>
<td>定义表格的行</td>
</tr>
<tr>
<td><td></td>
<td>定义表格单元</td>
</tr>
<tr>
<td><caption></td>
<td>定义表格标题</td>
</tr>
<tr>
<td><colgroup></td>
<td>定义表格列的组</td>
</tr>
<tr>
<td><col></td>
<td>定义用于表格列的属性</td>
</tr>
<tr>
<td><thead></td>
<td>定义表格的页眉</td>
</tr>
<tr>
<td><tbody></td>
<td>定义表格的主体</td>
</tr>
<tr>
<td><tfoot></td>
<td>定义表格的页脚</td>
</tr>
</tbody>
</table>
<p><a name="lqYYi"></a></p>
<h2 id="m5o4n"><a name="m5o4n" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6 列表</h2><p>列表分为有序、无序和定义列表</p>
<table>
<thead>
<tr>
<th><strong>标签</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><ol></td>
<td>定义有序列表</td>
</tr>
<tr>
<td><ul></td>
<td>定义无序列表</td>
</tr>
<tr>
<td><li></td>
<td>定义列表项</td>
</tr>
<tr>
<td><dl></td>
<td>定义列表</td>
</tr>
<tr>
<td><dt></td>
<td>自定义列表项目</td>
</tr>
<tr>
<td><dd></td>
<td>定义自定列表项的描述</td>
</tr>
</tbody>
</table>
<p><a name="M8vK1"></a></p>
<h3 id="98oj92"><a name="98oj92" class="reference-link"></a><span class="header-link octicon octicon-link"></span>无序列表</h3><p>无序列表使用 <ul> 标签。每个列表项始于 <li> 标签。<br /> <ul><br /> <li>这是一个列表</li><br /> </ul>
<a name="wGysG"></a></p>
<h3 id="l9i3d"><a name="l9i3d" class="reference-link"></a><span class="header-link octicon octicon-link"></span>有序列表</h3><p>有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。<br />列表项使用数字来标记。<br /> <ol><br /> <li>这是一个列表</li><br /> </ol>
<a name="Pue9G"></a></p>
<h3 id="5kquzo"><a name="5kquzo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>自定义列表</h3><p>自定义列表以 <dl> 标签开始。<br />每个自定义列表项以 <dt> 开始。<br />每个自定义列表项的定义以 <dd> 开始。<br /> <dl><br /> <dt></dt><br /> <dd></dd><br /> </dl>
<a name="WY79E"></a></p>
<h2 id="7q7z02"><a name="7q7z02" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7 区块元素</h2><p>HTML 可以通过 <div> 和 <span>将元素组合起来
<a name="P0Em0"></a></p>
<h3 id="bzlqa2"><a name="bzlqa2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>区块元素</h3><p>块级元素在浏览器显示时，通常会以新行来开始（和结束）。
<a name="HCZcL"></a></p>
<h3 id="9vq4pk"><a name="9vq4pk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 内联元素</h3><p>内联元素在显示时通常不会以新行开始。
<a name="fh8c7"></a></p>
<h3 id="90jpe2"><a name="90jpe2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>< div> 元素</h3><p>HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。<br />如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<a name="vD4fm"></a></p>
<h3 id="djxawb"><a name="djxawb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>< span> 元素</h3><p>HTML <span> 元素是内联元素，可用作文本的容器
<a name="G5zwd"></a></p>
<h2 id="ev5kmt"><a name="ev5kmt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>8 表单</h2><table>
<thead>
<tr>
<th><strong>标签</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><from></td>
<td>定义供用户输入的表单</td>
</tr>
<tr>
<td><input></td>
<td>定义输入域</td>
</tr>
<tr>
<td><textarea></td>
<td>定义文本域 (一个多行的输入控件)</td>
</tr>
<tr>
<td><label></td>
<td>定义了 <input> 元素的标签，一般为输入标题</td>
</tr>
<tr>
<td><fieldset></td>
<td>定义了一组相关的表单元素，并使用外框包含起来</td>
</tr>
<tr>
<td><legend></td>
<td>定义了 <fieldset> 元素的标题</td>
</tr>
<tr>
<td><select></td>
<td>定义了下拉选项列表</td>
</tr>
<tr>
<td><optgroup></td>
<td>定义选项组</td>
</tr>
<tr>
<td><option></td>
<td>定义下拉列表中的选项</td>
</tr>
<tr>
<td><button></td>
<td>定义一个点击按钮</td>
</tr>
<tr>
<td><datalist></td>
<td>指定一个预先定义的输入控件选项列表</td>
</tr>
<tr>
<td><keygen></td>
<td>定义了表单的密钥对生成器字段</td>
</tr>
<tr>
<td><output></td>
<td>定义一个计算结果</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th><strong>input属性</strong></th>
<th><strong>含义</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>文本域</td>
</tr>
<tr>
<td>password</td>
<td>密码字段</td>
</tr>
<tr>
<td>radio</td>
<td>单选按钮</td>
</tr>
<tr>
<td>checkbox</td>
<td>复选框</td>
</tr>
<tr>
<td>submit</td>
<td>提交按钮</td>
</tr>
</tbody>
</table>
<p><a name="ibmUU"></a></p>
<h2 id="bc9tc9"><a name="bc9tc9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>9 iframe框架</h2><p><a name="TKLPf"></a></p>
<h3 id="ab021w"><a name="ab021w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>语法</h3><p>使用框架，你可以在同一个浏览器窗口中显示不止一个页面<br /> </p>
<table>
<thead>
<tr>
<th><strong>属性</strong></th>
<th><strong>含义</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>height</td>
<td>高度</td>
</tr>
<tr>
<td>width</td>
<td>宽度</td>
</tr>
<tr>
<td>frameborder</td>
<td>是否显示边框。</td>
</tr>
</tbody>
</table>
<p>
<a name="JWmzR"></a></p>
<h3 id="gd78a8"><a name="gd78a8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>使用iframe来显示目标链接页面</h3><p>iframe可以显示一个目标链接的页面<br />目标链接的属性必须使用iframe的属性，如下实例:<br /> <p><a href="http://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>
<a name="CB5N1"></a></p>
<h2 id="6pp8kt"><a name="6pp8kt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>11 多媒体</h2><p><a name="o5s36"></a></p>
<h3 id="8oaovz"><a name="8oaovz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>11.1 音频</h3><p>辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。<br />辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 < object > 标签来加载的。
<a name="JM7r2"></a></p>
<h4 id="5amad8"><a name="5amad8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>< object> 元素</h4><p>该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) ，HTML文件，或者图片<br /><object width="400" height="50" data="bookmark.swf"></object> <object width="100%" height="500px" data="snippet.html"></object> <object data="audi.jpeg"></object>
<a name="RSIeD"></a></p>
<h4 id="2sqys2"><a name="2sqys2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>< embed> 元素</h4><p>元素表示一个 HTML Embed 对象 。<br /><embed height="50" width="100" src="horse.mp3">
<a name="m7R5l"></a></p>
<h4 id="52iu5o"><a name="52iu5o" class="reference-link"></a><span class="header-link octicon octicon-link"></span>< audio>元素</h4><p>HTML5<br /><audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> Your browser does not support this audio format. </audio>
<a name="eJoxG"></a></p>
<h4 id="cbbtmi"><a name="cbbtmi" class="reference-link"></a><span class="header-link octicon octicon-link"></span>最好的 HTML 解决方法</h4><p><audio controls height="100" width="100"> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio>
<a name="ziwO2"></a></p>
<h3 id="f8fn8e"><a name="f8fn8e" class="reference-link"></a><span class="header-link octicon octicon-link"></span>11.2 视频</h3><p><video width="320" height="240" 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 name="fVqjo"></a></p>
<h2 id="i3h63"><a name="i3h63" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12 HTML5</h2><p><a name="dLFX4"></a></p>
<h3 id="5gzsbt"><a name="5gzsbt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>声明</h3><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> 文档内容…… </body> </html>
<a name="o3nMz"></a></p>
<h3 id="acpur1"><a name="acpur1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>新的语义和结构元素</h3><table>
<thead>
<tr>
<th><strong>标签</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>article</td>
<td>定义页面独立的内容区域。</td>
</tr>
<tr>
<td>aside</td>
<td>定义页面的侧边栏内容。</td>
</tr>
<tr>
<td>bdi</td>
<td>允许您设置一段文本，使其脱离其父元素的文本方向设置。</td>
</tr>
<tr>
<td>command</td>
<td>定义命令按钮，比如单选按钮、复选框或按钮</td>
</tr>
<tr>
<td>details</td>
<td>用于描述文档或文档某个部分的细节</td>
</tr>
<tr>
<td>dialog</td>
<td>定义对话框，比如提示框</td>
</tr>
<tr>
<td>summary</td>
<td>标签包含 details 元素的标题</td>
</tr>
<tr>
<td>figure</td>
<td>规定独立的流内容（图像、图表、照片、代码等等）。</td>
</tr>
<tr>
<td>figcaption</td>
<td>定义 < figure> 元素的标题</td>
</tr>
<tr>
<td>footer</td>
<td>定义 section 或 document 的页脚。</td>
</tr>
<tr>
<td>header</td>
<td>定义了文档的头部区域</td>
</tr>
<tr>
<td>mark</td>
<td>定义带有记号的文本。</td>
</tr>
<tr>
<td>meter</td>
<td>定义度量衡。仅用于已知最大和最小值的度量。</td>
</tr>
<tr>
<td>nav</td>
<td>定义导航链接的部分。</td>
</tr>
<tr>
<td>progress</td>
<td>定义任何类型的任务的进度。</td>
</tr>
<tr>
<td>ruby</td>
<td>定义 ruby 注释（中文注音或字符）。</td>
</tr>
<tr>
<td>rt</td>
<td>定义字符（中文注音或字符）的解释或发音。</td>
</tr>
<tr>
<td>rp</td>
<td>在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。</td>
</tr>
<tr>
<td>section</td>
<td>定义文档中的节（section、区段）。</td>
</tr>
<tr>
<td>time</td>
<td>定义日期或时间。</td>
</tr>
<tr>
<td>wbr</td>
<td>规定在文本中的何处适合添加换行符。</td>
</tr>
</tbody>
</table>
<p><a name="IQAcp"></a></p>
<h3 id="254ngh"><a name="254ngh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Canvas</h3><p>用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<a name="jCdbv"></a></p>
<h4 id="gc3r4j"><a name="gc3r4j" class="reference-link"></a><span class="header-link octicon octicon-link"></span>创建一个画布</h4><p><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
<a name="Si7tr"></a></p>
<h4 id="2wkjha"><a name="2wkjha" class="reference-link"></a><span class="header-link octicon octicon-link"></span>绘制图像</h4><p>//找到 <canvas> 元素: var c=document.getElementById(“myCanvas”); //创建 context 对象 //getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 var ctx=c.getContext(“2d”); ctx.fillStyle=”#FF0000”; //fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。 ctx.fillRect(0,0,150,75);
<a name="f3YaS"></a></p>
<h4 id="8vxcnp"><a name="8vxcnp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>坐标</h4><p>canvas 是一个二维网格。<br />canvas 的左上角坐标为 (0,0)
<a name="RNjDP"></a></p>
<h4 id="ah72hg"><a name="ah72hg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>路径</h4><p>画线：</p>
<ul>
<li>moveTo(<em>x,y</em>) 定义线条开始坐标</li><li>lineTo(<em>x,y</em>) 定义线条结束坐标</li></ul>
<p>var c=document.getElementById(“myCanvas”); var ctx=c.getContext(“2d”); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();<br />圆形：arc(x,y,r,start,stop)<br />var c=document.getElementById(“myCanvas”); var ctx=c.getContext(“2d”); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
<a name="na14b"></a></p>
<h4 id="43dmjf"><a name="43dmjf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本</h4><ul>
<li>font - 定义字体</li><li>fillText(<em>text,x,y</em>) - 在 canvas 上绘制实心的文本</li><li>strokeText(<em>text,x,y</em>) - 在 canvas 上绘制空心的文本</li></ul>
<p>//使用 “Arial” 字体在画布上绘制一个高 30px 的文字（实心）： var c=document.getElementById(“myCanvas”); var ctx=c.getContext(“2d”); ctx.font=”30px Arial”; ctx.fillText(“Hello World”,10,50);
<a name="EWKH6"></a></p>
<h4 id="cbt6kv"><a name="cbt6kv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>渐变</h4><ul>
<li>createLinearGradient(<em>x,y,x1,y1</em>) - 创建线条渐变</li><li>createRadialGradient(<em>x,y,r,x1,y1,r1</em>) - 创建一个径向/圆渐变</li></ul>
<p>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);<br />var c=document.getElementById(“myCanvas”); var ctx=c.getContext(“2d”); // 创建渐变 var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,”red”); grd.addColorStop(1,”white”); // 填充渐变 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
<a name="LM1Uz"></a></p>
<h4 id="1tkf4g"><a name="1tkf4g" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图像</h4><ul>
<li>drawImage(<em>image,x,y</em>)</li></ul>
<p>var c=document.getElementById(“myCanvas”); var ctx=c.getContext(“2d”); var img=document.getElementById(“scream”); ctx.drawImage(img,10,10);
<a name="BLCjd"></a></p>
<h3 id="85tvo2"><a name="85tvo2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>拖放（Drag 和 Drop）</h3><p><a name="rm8H4"></a></p>
<h4 id="bydpmo"><a name="bydpmo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>设置元素为可拖放</h4><p><img draggable="true">
<a name="MkJeV"></a></p>
<h4 id="8jba2r"><a name="8jba2r" class="reference-link"></a><span class="header-link octicon octicon-link"></span>拖动什么 - ondragstart 和 setData()</h4><p> function drag(ev)<br /> {<br /> ev.dataTransfer.setData(“Text”,ev.target.id);<br /> }
<a name="Ic4yk"></a></p>
<h4 id="4jcu1f"><a name="4jcu1f" class="reference-link"></a><span class="header-link octicon octicon-link"></span>放到何处 - ondragover</h4><p> event.preventDefault()
<a name="ygrJR"></a></p>
<h4 id="d5r6zm"><a name="d5r6zm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>进行放置 - ondrop</h4><ul>
<li>调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）</li><li>通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。</li><li>被拖数据是被拖元素的 id (“drag1”)</li><li><p>把被拖元素追加到放置元素（目标元素）中</p>
<p>function drop(ev)<br /> {<br /> ev.preventDefault();<br /> var data=ev.dataTransfer.getData(“Text”);<br /> ev.target.appendChild(document.getElementById(data));<br /> }
<a name="diyTH"></a></p>
<h3 id="89r8w5"><a name="89r8w5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Geolocation（地理定位）</h3><p><a name="yiGJA"></a></p>
<h3 id="dsltg0"><a name="dsltg0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Input 类型</h3><p>| <strong>属性</strong> | <strong>含义</strong> |
| —- | —- |
| color | 选取颜色 |
| date | 日期 |
| datetime | 日期（UTC 时间）。 |
| datetime-local | 日期和时间 (无时区). |
| email | e-mail 地址 |
| month | 月份 |
| number | 数值的输入域。 |
| range | 范围内数字值的输入域 |
| search | 搜索 |
| tel | 电话号 |
| time | 时间 |
| url | 地址 |
| week | 周 |</p>
</li></ul>
<p><a name="FVRR3"></a></p>
<h3 id="7mhh85"><a name="7mhh85" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单元素</h3><table>
<thead>
<tr>
<th><strong>标签</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>datalist</td>
<td>定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。</td>
</tr>
<tr>
<td>keygen</td>
<td>规定用于表单的密钥对生成器字段。</td>
</tr>
<tr>
<td>output</td>
<td>定义不同类型的输出，比如脚本的输出。</td>
</tr>
</tbody>
</table>
<p><a name="bLPYS"></a></p>
<h3 id="25rzor"><a name="25rzor" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单属性</h3><p>from属性</p>
<table>
<thead>
<tr>
<th><strong>标签</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>autocomplete</td>
<td>应该拥有自动完成功能</td>
</tr>
<tr>
<td>novalidate</td>
<td>在提交表单时不应该验证 form 或 input 域。</td>
</tr>
</tbody>
</table>
<p>input属性</p>
<table>
<thead>
<tr>
<th><strong>标签</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>autocomplete</td>
<td>应该拥有自动完成功能</td>
</tr>
<tr>
<td>autofocus</td>
<td>自动地获得焦点</td>
</tr>
<tr>
<td>form</td>
<td>规定输入域所属的一个或多个表单</td>
</tr>
<tr>
<td>formaction</td>
<td>描述表单提交的URL地址.</td>
</tr>
<tr>
<td>formenctype</td>
<td>描述了表单提交到服务器的数据编码</td>
</tr>
<tr>
<td>formmethod</td>
<td>定义了表单提交的方式</td>
</tr>
<tr>
<td>formnovalidate</td>
<td>描述了 <input> 元素在表单提交时无需被验证</td>
</tr>
<tr>
<td>formtarget</td>
<td>指定一个名称或一个关键字来指明表单提交数据接收后的展示</td>
</tr>
<tr>
<td>height 与 width</td>
<td>图像高度和宽度</td>
</tr>
<tr>
<td>list</td>
<td>list 属性规定输入域的 datalist</td>
</tr>
<tr>
<td>min 与 max</td>
<td>用于为包含数字或日期的 input 类型规定限定（约束）</td>
</tr>
<tr>
<td>multiple</td>
<td>元素中可选择多个值</td>
</tr>
<tr>
<td>pattern</td>
<td>正则表达式</td>
</tr>
<tr>
<td>placeholder</td>
<td>提示</td>
</tr>
<tr>
<td>required</td>
<td>不能为空</td>
</tr>
<tr>
<td>step</td>
<td>输入域规定合法的数字间隔</td>
</tr>
</tbody>
</table>
<p><a name="j2YEw"></a></p>
<h3 id="2j9rr9"><a name="2j9rr9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>新多媒体元素</h3><table>
<thead>
<tr>
<th><strong>标签</strong></th>
<th><strong>含义</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>audio</td>
<td>定义音频内容</td>
</tr>
<tr>
<td>video</td>
<td>定义视频（video 或者 movie）</td>
</tr>
<tr>
<td>source</td>
<td>定义多媒体资源 < video> 和 < audio></td>
</tr>
<tr>
<td>embed</td>
<td>定义嵌入的内容，比如插件。</td>
</tr>
<tr>
<td>track</td>
<td>为诸如 < video> 和 < audio> 元素之类的媒介规定外部文本轨道。</td>
</tr>
</tbody>
</table>
<p><a name="nrsY8"></a></p>
<h3 id="86y0yb"><a name="86y0yb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Web 存储</h3><p>Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.数据以 键/值 对存在, web网页的数据只允许该网页访问使用。<br />localStorage 对象<br />存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。</p>
<ul>
<li>保存数据：localStorage.setItem(key,value);</li><li>读取数据：localStorage.getItem(key);</li><li>删除单个数据：localStorage.removeItem(key);</li><li>删除所有数据：localStorage.clear();</li><li>得到某个索引的key：localStorage.key(index);</li></ul>
<p>sessionStorage 对象<br />sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
<a name="Bwca9"></a></p>
<h3 id="dwjfh5"><a name="dwjfh5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>应用程序缓存</h3><ol>
<li>离线浏览 - 用户可在应用离线时使用它们</li><li>速度 - 已缓存资源加载得更快</li><li>减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
<a name="khSt1"></a><h3 id="coz5vr"><a name="coz5vr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Web Workers</h3><br /> </li></ol>
|
