`
yanguz123
  • 浏览: 570383 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

HTML5 知识

    博客分类：
  • Web
 
阅读更多

 

 

<!--...--> 定义注释。 
<!DOCTYPE> 定义文档类型。 
<a> 定义超链接。 
<abbr> 定义缩写。 
<acronym> HTML 5 中不支持。定义首字母缩写。 
<address> 定义地址元素。 
<applet> HTML 5 中不支持。定义 applet。 
<area> 定义图像映射中的区域。 
<article> 定义 article。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<b> 定义粗体文本。 
<base> 定义页面中所有链接的基准 URL。 
<basefont> HTML 5 中不支持。请使用 CSS 代替。 
<bdo> 定义文本显示的方向。 
<big> HTML 5 中不支持。定义大号文本。 
<blockquote> 定义长的引用。 
<body> 定义 body 元素。 
<br> 插入换行符。 
<button> 定义按钮。 
<canvas> 定义图形。
<caption> 定义表格标题。 
<center> HTML 5 中不支持。定义居中的文本。 
<cite> 定义引用。 
<code> 定义计算机代码文本。 
<col> 定义表格列的属性。 
<colgroup> 定义表格列的分组。 
<command> 定义命令按钮。
<datalist> 定义下拉列表。
<dd> 定义定义的描述。 
<del> 定义删除文本。 
<details> 定义元素的细节。
<dfn> 定义定义项目。 
<dir> HTML 5 中不支持。定义目录列表。 
<div> 定义文档中的一个部分。 
<dl> 定义定义列表。 
<dt> 定义定义的项目。 
<em> 定义强调文本。 
<embed> 定义外部交互内容或插件。
<fieldset> 定义 fieldset。 
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
<font> HTML 5 中不支持。 
<footer> 定义 section 或 page 的页脚。
<form> 定义表单。 
<frame> HTML 5 中不支持。定义子窗口（框架）。 
<frameset> HTML 5 中不支持。定义框架的集。 
<h1> to <h6> 定义标题 1 到标题 6。 
<head> 定义关于文档的信息。 
<header> 定义 section 或 page 的页眉。
<hgroup> 定义有关文档中的 section 的信息。
<hr> 定义水平线。 
<html> 定义 html 文档。 
<i> 定义斜体文本。 
<iframe> 定义行内的子窗口（框架）。 
<img> 定义图像。 
<input> 定义输入域。 
<ins> 定义插入文本。 
<keygen> 定义生成密钥。
<isindex> HTML 5 中不支持。定义单行的输入域。 
<kbd> 定义键盘文本。 
<label> 定义表单控件的标注。 
<legend> 定义 fieldset 中的标题。 
<li> 定义列表的项目。 
<link> 定义资源引用。 
<map> 定义图像映射。 
<mark> 定义有记号的文本。
<menu> 定义菜单列表。 
<meta> 定义元信息。 
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<noframes> HTML 5 中不支持。定义 noframe 部分。 
<noscript> 定义 noscript 部分。 
<object> 定义嵌入对象。 
<ol> 定义有序列表。 
<optgroup> 定义选项组。 
<option> 定义下拉列表中的选项。 
<output> 定义输出的一些类型。
<p> 定义段落。 
<param> 为对象定义参数。 
<pre> 定义预格式化文本。 
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。 
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> HTML 5 中不支持。定义加删除线的文本。 
<samp> 定义样本计算机代码。 
<script> 定义脚本。 
<section> 定义 section。
<select> 定义可选列表。 
<small> 定义小号文本。 
<source> 定义媒介源。
<span> 定义文档中的 section。 
<strike> HTML 5 中不支持。定义加删除线的文本。 
<strong> 定义强调文本。 
<style> 定义样式定义。 
<sub> 定义下标文本。 
<summary> 定义 details 元素的标题。
<sup> 定义上标文本。 
<table> 定义表格。 
<tbody> 定义表格的主体。 
<td> 定义表格单元。 
<textarea> 定义 textarea。 
<tfoot> 定义表格的脚注。 
<th> 定义表头。 
<thead> 定义表头。 
<time> 定义日期/时间。
<title> 定义文档的标题。 
<tr> 定义表格行。 
<tt> HTML 5 中不支持。定义打字机文本。 
<u> HTML 5 中不支持。定义下划线文本。 
<ul> 定义无序列表。 
<var> 定义变量。 
<video> 定义视频。
<xmp> HTML 5 中不支持。定义预格式文本。

 

 

 

 

 

 

 

 

（一）字体标签

 

      <h1>（h6）...</h1>(h6)标题字 
      <i>...</i>斜体字 
　   <b>...</b>粗体字

       <u>...</u>底线

       <s>...</s>删除线

       <em>...</em>斜体字(强调) 

       <var>...</var>

       <del>...</del>删除线(表示删除)

       <kbd>...</kbd>键盘文字

       <dfn>...</dfn>斜体字(表示定义) 
       <ins>...</ins>底线(表示插入文字

       <span>..</span>
　　<strong>...</strong>粗体字(强调) 
　　<strike>...</strike>横线 
　　<tt>...</tt> 打字体 
　　<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效) 
　　<plaintext>...</plaintext>固定宽度字体(不执行标记符号) 
　　<listing>...</listing> 固定宽度小字体 
　　<font color=00ff00>...</font>字体颜色 
　　<font size=1>...</font>最小字体 
　　<font style =font-size:100 px>...</font>无限增大

 

(二)区断标记

 

　　<hr>水平线 
　　<hr size=9>水平线(设定大小) 
　　<hr width=80%>水平线(设定宽度) 
　　<hr color=ff0000>水平线(设定颜色) 
　　<br>(换行) 
　　<nobr>...</nobr>水域(不换行) 
　　<p>...</p>水域(段落) 
　　<center>...</center>置中

       <blockquote>...</blockquote>

 

(三) 列表

    <ul><li></li></ul>有序

    <ol><li></li></ul>无序

    <dl><dt></dt><dd></dd></dl>

 

（四）表格

     <table>……</table>  创建一个表格

   <tr>……</tr>   表格中的每一行

   <td>……</td>   表格的每一个格子

   <th>……</th>   设置表格头：一个通常使用黑体居中文字的格子

 

（五）表单

 

   <form>……</form>  创建所有表单

 

   <select multiple name="NAME" size=value>………</select>  创建一个滚动菜单，size设置在需要滚动前可以看到的表单项数目

 

    <select><option></option></select>  下拉表单

 

    <textarea name="NAME" cols=value rows=value>……</textarea>  文本区域多行

 

      <input type="checkbox" name="NAME" checked/>  创建一个复选框，文字在标签后面

 

    <input type="radio" name="NAME" value="yix">  创建一个单选框，文字在标签后面

 

    <input type=text name="……" size=value>   创建一个单行文本输入区域，size设置以字符计的宽度

    <input type="submit" value="submit">  创建一个submit（提交）按钮

 

    <input type="reset">  创建重置按钮

 

<六> html5

  <article></article> 标题

 

  <aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>


  <audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

 

  <canvas id="myCanvas" width="200" height="200">画布绘制</canvas>

 

  <datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
  </datalist>

 

  <embed src="horse.wav" />


  <figure><figcaption>PRC</figcaption></figure>

   标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

 

  <footer>标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以  及/或者联系信息。</footer>

  <header> 标签定义 section 或 document 的页眉。</header>

  <hgroup>标签用于对网页或区段（section）的标题进行组合。</hgroup> 

  <nav>标签定义导航链接的部分。</nav>

  <output>标签定义不同类型的输出，比如脚本的输出。</output>

   <progress>标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。</progress>

   <section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。</section>

  <time>标签定义日期或时间，或者两者。</time>

  <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

 

 

 

 

 

 

 

 

 

 

 

 

 

作为下一代的网页语言，HTML5 拥有很多让人期待已久的新特性，它可以说是近十年来 Web 标准最巨大的飞跃。

 

使用HTML5后，原来需要开发人员写很多代码才能够实现的交互效果和展现形式，可以方便的满足用户体验和可用性。

在HTML 5未成熟应用的时候，流媒体播放等一些精彩应用必须借助第三方软件才可以实现，比如Flash等。但是现在HTML 5已经将其超过，它不但可以播放视频和音频，直接展示数据图表，而且还可以开发出各种网络在线应用程序，如标识的地理位置、离线存储、拖放、图片处理等。

 

HTML5 中的一些有趣的新特性：

 

    用于绘画的 canvas 元素

    用于媒介回放的 video 和 audio 元素

    对本地离线存储的更好的支持

    新的特殊内容元素，比如 article、footer、header、nav、section

    新的表单控件，比如 calendar、date、time、email、url、search

 

浏览器支持

 

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

 

Canvas

 

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 

在客户端存储数据

 

HTML5 提供了两种在客户端存储数据的新方法：

    localStorage - 没有时间限制的数据存储

    sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

 

对简单的关键值对（比如应用程序设置）或简单对象（如应用程序状态）进行存储，使用本地和会话存储能够很好地完成，但是在对琐碎的关系数据进行处理之外，它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。需要注意的是，如果不是绝对需要的情况，不要使用 Web SQL Database。这不是因为它们的技术高高在上，而是因为它们会让你的代码更加复杂。对于大多数情况，本地存储或会话存储就能够完成相应的任务，尤其是你能够保持对象状态持久化的情况。

 

HTML5 新的 Input 类型

 

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

Date pickers (date, month, week, time, datetime, datetime-local)可供选取日期和时间的新输入类型

email 类型用于应该包含 e-mail 地址的输入域。

url 类型用于应该包含 URL 地址的输入域。

number 类型用于应该包含数值的输入域。

range 类型用于应该包含一定范围内数字值的输入域。

search 类型用于搜索域，比如站点搜索或 Google 搜索。

datalist 元素规定输入域的选项列表。

keygen 元素的作用是提供一种验证用户的可靠方法。

output 元素用于不同类型的输出，比如计算或脚本输出：

form属性：

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

autofocus 属性规定在页面加载时，域自动地获得焦点。

form 属性规定输入域所属的一个或多个表单。

新的 input 属性：

    autocomplete

    autofocus

    form

    form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

    height 和 width

    list

    min, max 和 step

    multiple

    pattern (regexp)

    placeholder

    required

 

        

         通过一个单一的Socket实现一个全双工，双向通信的信道。HTML 5 Web Socket提供了一个真正的标准，你可以使用它构建可扩展的实时Web应用程序。此外，由于它提供了一个浏览器自带的套接字，消除了Comet解决方案的许多问题，Web Socket显著降低了系统开销和复杂性。

        

        

         HTML5 File API可以改善基于浏览器的Web应用程序处理文件上传的方式，使文件可以直接拖放上传。我们可以通过﹤input type=”file”﹥ 标签来实现。

 

 

 

 

 

 

 

 

 

 

 

1.HTML5简介

什么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是 W3C 与 WHATWG 合作的结果。

为 HTML5 建立的一些规则：

  • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
  • 减少对外部插件的需求（比如 Flash）
  • 更优秀的错误处理
  • 更多取代脚本的标记
  • HTML5 应该独立于设备
  • 开发进程应对公众透明

新特性

HTML5 中的一些有趣的新特性：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

 

2.HTML5视频

视频格式

当前，video 元素支持三种视频格式：

 

实例

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

 

 

3.HTML5音频

音频格式

当前，audio 元素支持三种音频格式：

 

实例

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

 

 

 

 

4.HTML画布（Canvas）

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

 

JavaScript 代码：

<script type="text/javascript">
 
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
 
</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

实例 - 圆形

通过规定尺寸、颜色和位置，来绘制一个圆：

 

JavaScript 代码：

<script type="text/javascript">
 
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
 
</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

实例 - 渐变

使用您指定的颜色来绘制渐变背景：

 

JavaScript 代码：

<script type="text/javascript">
 
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
 
</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

实例 - 图像

把一幅图像放置到画布上：

 

JavaScript 代码：

<script type="text/javascript">
 
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
 
</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

 

 

 

4.HTML5 Web存储

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

如何创建和访问 localStorage：

实例

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

亲自试一试

下面的例子对用户访问页面的次数进行计数：

实例

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

亲自试一试

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个 sessionStorage：

实例

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

亲自试一试

下面的例子对用户在当前 session 中访问页面的次数进行计数：

实例

<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

亲自试一试

 

 

5.HTML5输入类型

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型：

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值。

Input 类型 - url

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

Input 类型 - number

number 类型用于应该包含数值的输入域。

Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条

Input 类型 - Date Pickers（数据检出器）

HTML5 拥有多个可供选取日期和时间的新输入类型：

  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间（小时和分钟）
  • datetime - 选取时间、日、月、年（UTC 时间）
  • datetime-local - 选取时间、日、月、年（本地时间）

Input 类型 - search

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

 

 

6.HTML5表单元素

HTML5 的新的表单元素：

HTML5 拥有若干涉及表单的元素和属性。

本章介绍以下新的表单元素：

  • datalist
  • keygen
  • output

datalist 元素

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

output 元素

output 元素用于不同类型的输出，比如计算或脚本输出

 

 

 

7．HTML5表单属性

HTML5 的新的表单属性

新的 form 属性：

  • autocomplete
  • novalidate

新的 input 属性：

  • autocomplete
  • autofocus
  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  • height 和 width
  • list
  • min, max 和 step
  • multiple
  • pattern (regexp)
  • placeholder
  • required

 

 

 

 

 

 

 

 

 

 

 

 

从性能角度来说,HTML5首先是缩减了HTML文档，使这件事情变得更简单。

 

案例(http://www.39ask.net）

 

       第一，从用户可读性上说，原先一大堆东西，像初学者第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。 第二，文档编码的声明，用HTML5方式的话，就很简单。

 

       很多人问HTML5是什么？我们说可以先用HTML5的方式就是把DOCTYPE先改了，因为目前很多页面都还是用传统的方式。HTML5的方式，本身是兼容IE浏览器的，从IE6到IE10都可以，包括高级浏览器都支持。所以说拥抱HTML5最简单的方式就是把DOCTYPE给改了。

 

       1.更简洁的标签

 

       接下来可能并不是一件很常见的事情，但是却是我比较推崇的，使用更简洁的标签方式。HTML5从这个名字大家可以听出，它是从HTML4继承过来的。HTML4里面有严格模式跟过渡模式，HTML5是支持这种过渡模式的，就是你可以不把一些标签闭合。但是，我并不推荐所有的标签，比方说BODY标签的不闭合，这种我们不推荐。但是像P标签最常用的，还有列表标签LI。为什么这样说？首先从视觉的角度来说，这样的方式更简洁一点。然后关键的是在文档传输过程中，内容会更少。

 

       HTML5标签属性的声明支持三种方式：单括号、双括号和不加括号。为了减少文档大小，我是选择不加双引号的方式或单引号的方式。但是要注意，假设是类属性的声明，因属性可能包括多个类，多个类的时候则必须用括号括起来。在这方面，给大家看一下谷歌的一个实践。谷歌自己有一个页面完全实践了上面的东西，文档的大小减少了20%，使HTML文档的传输减少了20%。如果把整个都实践起来，可以达到5%—20%之间的减少。这是第一步，缩减HTML文档的大小。

 

       2.图片优化

 

       接下来是关于图片的优化，图片永远是又爱又恨的元素。因为当图片多的时候，会严重拖垮整个页面的加载速度。关于图片的优化方式，《高性能网站》书中已有很多介绍，总结起来主要有三点：使用精灵图、优化图片的大小，使用DATA URI，具体这里就不细说了。

 

       图片优化的另一个思路是：no-image。抛弃图片，拥抱CSS3。原先需要设置一张圆角效果的图片，现在使用CSS3中的 border-radius；原先需要设置阴影效果的图片，现在使用CSS3中的box-shadow；原先需要设置渐变的背景图片，现在使用CSS3中的gradient。

 

       3.预取

 

       接下来讲Prefetching，预取，是优化的另一个思路。我们现在优化的思路无非就是少。很多都是从少的角度，比方说前面把文档大小减少，把图片的大小减少。很多张的图片变成一张精灵图，都是为了把发送请求的数量减少。预取的话，是另一种思路，提早加载好资源，用户去点的时候，实际上已经加载好，那肯定是更快了。

 

       预取，一共有两部分：一部分是资源的预取，还有一部分是DNS的预解析。

 

       资源预加载有几个点需要注意：

 

       预加载只是在浏览器空闲的时候才会去拉，但不保证一定会去拉，这是很重要的一点。因为本身浏览器有一个全局的监听器，这是内部的一个接口，当浏览气空闲的时候，它会去执行浏览器空闲的时候应该做事情，但是这个空闲的回调不一定被触发，所以说并不保证一定会执行预加载。

 

       Chrome不支持HTTPS资源的预加载，像Alipay是HTTPS的页面，Chrome不会去预拉取。

 

       一个预拉取的页面虽存在后不可见，实际上它是在正常解析。假如说我预拉取登陆页面，登陆页面有很多资源，比方说有图片，有CSS文件，JS文件。它是从上往下正常的会被解析，解析的过程中，这个页面没有显现，但是它实际上是存在的。在HTML5里面，可通过document.visibilityState得到当前页面状态，通常页面有两种状态，可见与不可见，但是现在有一个新的状态，叫做预渲染的状态。可以直接通过document.visibilityState 是否等于 prerender 来判断页面是否在预渲染状态。

 

       4.DNS解析

 

       接下来是关于DNS的解析。有时候我们登入页面，对用户可能点的地方相对而言是比较难探测到，当然有时候我们会做一些埋点来探知用户下一步行为大部分是往里走。但有些情况下，我们不知道用户下一步具体会走到哪一个页面的时候，但是我们知道他要走到哪一个域。这个时候，我就可以预解析DNS。因为实际上，整个页面的请求过程中间有一个很长的DNS的解析过程，如果说这个我们提前做了，就可以更进一步让用户看到这一页面。

 

       以下是Q+壁纸的案例。Q+壁纸是Q+某一个系统系统，首先Q+整个的架构是基于WEB + 客户端。我们现在看到的就是一个WEB的页面，虽然它外面是一个客户端的壳，但是它的心是WEB的。整个过程在我们第一次在完成的时候，因为图片比较多，所有的静态资源是分配到十几个静态服务器上。也就是说，如果我要去拉的时候，我就要解析10个DNS，这个时间是相当耗时的，最慢的时候可能会延迟几秒钟，这是我们肉眼能感觉到的。如果进行DNS预解析，因为本身资源我不知道具体是哪一个，所有图片都是随机的，所以我们只能说在DNS预解析上下功夫，来提升它的速度。这样的话，从原来可能需要2秒钟，我就变成1秒钟。

 

       接下来讲Q+中的应用。我们会像QQ里面一样，QQ里面跟Q+都有很多文字链，就是窗口的左下角有一个文字APP信息的推送。这边是通过WEB时时去拉取后端，后端拉取过来然后在前台显示。但是在某一个时期，其实所有的APP它一共推送的运营信息是固定的。如果说按某个具体APP去分析每个文字链对应数组的话，这个时候是非常大数据。因为这里一个就大概有达到三四百个字节，从优化的角度说，我们把这些每次拉区过来的存在本地。再存上本地的localStorage，我们是同一域，所有的APP之间的信息都是可以相互访问的。然后就是把所有拉过的ID，就不会再重新拉一遍。

 

       在这里也有一个需要注意的点，localStorage目前很多厂商的实现是同步的。如果你大量地调用localStorage这个接口，实际上他会阻塞你的渲染进程。这个时候，当用户往下拖动页面的时候，然后你这个时候又正好在做存储数据，这个数据又比较大，这个时候用户就会感觉你这个页面非常卡。之前他们都有讨论这个问题，本身这个接口的设计IE是设计成异步的，他们设计是成同步。这个会导致在调这个借口的时候，假设你程序比较多，因为有一个序列化的过程，序列到磁盘。这样的话，整个过程就会显得比较慢。再加上本身localStorage可以做不同的窗口之间共享这个数据，它会在这个数据上加锁。如果大量地数据在调用这个本地接口，它就会显得比较卡。所以目前没有什么特别好的解决方案，但是这是需要记住的。即使说目前最大的五点多兆，如果你用了五点多兆，会让用户很悲催。因为你如果一去调用这个借口，用户在拖用鼠标，就觉得非常卡。

 

       5.离线存储

 

       接下来讲离线存储在性能方面给用户带来的好处。首先是进离线存储的定义文件，在Q+中所有的系统模块，都是有定义离线支持。就是说所有的应用，如果网断了，还是可以用。在文档中加入MANIFEST的文件，MANIFEST是一个定义文件，声明当前页面哪些是需要存储在本地的？哪些是不需要存储的？哪些如果说请求失败，应该用哪些新的图片或者什么来代替？这样分三块：

 

       第一，CACHE，哪些需要存储到本地。

 

       第二，NETWORK，是不会存储在本地的，它每次都回去请求一遍但是这里需要指出的是，本地存储跟浏览器存储实际上是两回事情，他们存的是两块不同的地方。即使NETWORK这边需要告诉APP说，我需要每次都拉一次，因为像Chrome，他这个存储缓存是非常可恶的，比较难清除的，必须通过手动去清除，才能完全生效。所以说你即使设置了不要让它存储在本地，但是浏览器可能本身把它存储起来了，因为他存的是两块不同地方。 

 

       第三，FALLBACK。如果说一个图片假如说请求失败，它是404。那要用什么图片代替？我觉得这个比较好玩。

 

       MAEIFEST怎么设置？ MANIFEST这里需要注意的是三点：

 

MANIFEST同源限制；

 

MIME类型必须为text/cache-manifest，这是标准的，如果是其他格式，都不会生效；

 

CHROME，如果要看这个东西有没有生效，可能通过CHROME这个伪协议的方式在浏览器输入，chrome://appcache-internals。

 

       关于如何去更新应用的缓存。为什么要离线存储？离线存储在本地，当浏览器知道你有离线存储你，它会首先去离线存储的目录下，去找这个资源是否已经被Cache。当它已被Cache的时候，他就直接从这边拿到这个资源，不会再去发送一个请求。因为浏览器的请求是这样的，当有离线存储的话，就连请求都不会发，所以说会更快。 如果说有的时候我们需要更新，更新的时候怎么办？

 

       用户可以手动去清除浏览器的Cache，这个时候自动把本地存储给清除了。

 

       修改MANIFEST的任何内容，这是比较推荐的方式，也是我们线上用的方式。就是说我们可以修改里面的的具体项目，但是这里应该最好是修改注释，因为我每次发布的时候，我们自动发布机制，发布的时候在上面注释修改一下就可以了。这样的话，每次发布的内容，都会实时同步到客户端的本地；

 

       通过程序去执行，程序的就是window.applicationCache.update()。就是我要去操作离线存储，其实我有时候叫应用存储，因为它的语意就是应用存储。我们去手动的更新应用存储。

 

       6.Web Worker

 

       接下来Web Worker。 Web Worker是一个多线程的JS进程。应用场景其实我们在线上的话，是没有的，我就不讲了。但是可以讲下具体我看到过的应用场景。

 

       首先介绍一下WEBWORK是什么东西？它是一个OS级别的线程。之前我们模仿多线程，实际上都是多开一个窗口。但是现在的话，浏览器本身就提供了，这个会让操作带来更多便利，是让我们整个文档比较重，并不是很建议的方式。

 

       然后WebWorker访问能力是有限的，它并不能访问到很多全局对象。比如说documnet对象它是访问不了的。 WebWorker最适合的场景就是CPU密集型的计算操作。之前我们做游戏的时候，我们用BOX2D。应该很多人听到过，它涉及到大量的计算，就是整个页面里面，下面所有的物体要去计算它们的碰撞关系，这个计算量是非常大的。但是如果放在当前的JS的进程里面去执行，这个计算量一大，一计算，整个页面就非常卡。但是如果用WebWorker去做，它是异步的过程，实时的发送过去，在计算的过程中还能干其他事，这就是多线程。

 

       7.设备API

 

       讲一下设备API。设备API我觉得最重要在性能方面，也是目前实现最早的API。一个是CONNECTION，就是网络带宽。这个有什么作用？在中国这个场景下，必须得记住，很多用户的网速依旧是很低的。我们希望让用户网速低的时候，能够自动降级到一个比较低的方案。如果用现有的技术，我们是做不到的。但是使用设备API我们是可以的。因为我们知道，从设备上可以取到这些信息。它的宽带是多少，多少宽带的时候我们能干的事情。比方说宽带好的时候，我就用高清图片。宽带比较低的时候，就用清晰度比较低的图片。

 

       8.电池

 

       下面一个是关于电池的。我觉得从性能角度来说，主要是电量方面。假如说用户电池电量比较低的时候，我觉得是应该尽量少做一些事情。本身手机现在电池的技术来没有突破，我觉得让APP看起来比较高性能，也是一个宣传亮点。

 

       9.CANVAS

 

       接下来是CANVAS。讲CANVAS的几个性能优化点，用了这些东西，性能会有10倍的提升。

 

       第一，每个CANVAS就是一个画布，我们要去渲染一个图形的时候， 我们是可以把它分层的。就是像PS里面一样，是一层两层三层。很多用户在做游戏的时候，直接把所有东西仿放到一个层里，一更新所有的东西都要更新。但如果你把它分层，你让背景放在背景层，角色放到角色层。这样的话，我要更新角色的时候，只会更新角色，背景层不需要变。让CPU干的事情更少了，性能自然而然就提升了。

 

       第二，context.drawImage。不要去缩放图片，我们一开始就犯了一个错误，我们的美工做的图片始终跟我们不一致，然后我们要去缩放图片。因为本身设备它的图片大小是这样的，我们必须按比率缩放图片。缩放图片以后发现在低端设备下，比方说iPad或者iPhone就会非常卡，我们就想为什么？就进行代码上的分析，当用这个方法时候，花费的时候特别多。

 

       第三，requestAnimationFrame。这是专门为渲染优化的一个方法。它本身的原理是这样的，当浏览器每过一桢的时候，会触发这个方法，当我在触发的时候，Canvas得到这个浏览器已经准备好做下桢的事情。如果用传统的方法，是不会去考虑你更多的东西，它只会知道我过了多少时间，我就要执行。假如说用户之前被阻塞了，每10秒钟执行这一方法，在10秒之内，实际他之前的事情还没有做完，然后这个事情就会被延后。它就是为了动画看上去更流畅而优化的，因为每一桢的时候，它就告诉你说，你可以做一些事情。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<article>标记定义一篇文章

<aside>标记定义页面内容部分的侧边栏

<audio>标记定义音频内容

<canvas>标记定义图片

<command>标记定义一个命令按钮

<datalist>标记定义一个下拉列表

<details>标记定义一个元素的详细内容

<dialog>标记定义一个对话框(会话框)

<embed>标记定义外部的可交互的内容或插件

<figure>标记定义一组媒体内容以及它们的标题

<footer>标记定义一个页面或一个区域的底部

<header>标记定义一个页面或一个区域的头部

<hgroup>标记定义文件中一个区块的相关信息

<keygen>标记定义表单里一个生成的键值

<mark>标记定义有标记的文本

<meter>标记定义 measurement within a

predefined range

<nav>标记定义导航链接

<output>标记定义一些输出类型

<progress>标记定义任务的过程

<rp>标记是用在Ruby annotations 告诉那些不支持 Ruby元素的浏览器如何去显示

<rt>标记定义对ruby

annotations的解释

<ruby>标记定义 ruby annotations.

<section>标记定义一个区域

<source>标记定义媒体资源

<time>标记定义一个日期/时间

<video>标记定义一个视频

HTML5 的减负–旧的标记，永别了…

你是否很记得那个古老的年代，HTML3被当成一种只能在Netscape里运行的神奇的东西？是的，那就是互联网时代的黎明初现。我们当然不会忘记那段历史，但向一些优秀的却陈旧的东西说再见也是合乎情理的

<acronym>标记定义 an acronym.

<applet>标记定义 an embedded applet.

<basefont> tag specifies a default

font-color, font-size, or font-family for all the text in a document.

<big> tag is used to format the text one

size bigger, and can be in relation to your <font> or

<basefont> size, if you’ve specified either one.

<center> tag is used to center text.

<dir> tag is used to list directory titles.

<font> tag specifies the font face, font

size, and font color of text.

<frame>标记定义 one particular window

(frame)within a frameset.

<frameset>标记定义 a frameset. The

frameset element holds two or more frame elements. Each frame element

holds a separate document.

<s> and <strike> tags

define strikethrough text.

<tt> tag is used for “typetype” text, or

fixed-width typewriter-type font. Other than the different type style,

it has normal font characteristics

<u> tag is used to underline text.

这些标记基本上都没有什么用处了（也许你会觉得有几个标记和HTML5里的新标记有些相似）。其中一些我们在早期的旧版的浏览器里使用过，但如今已经失去其作用，而另一些标记的功能已经被CSS功能所取代了（例如设置字体和文本样式的标记）。

关于<DIV> 标记的重要问题

使用新标记替换掉<div> 标记是HTML5在语义方面的主要成就。这 <div> 标记是HTML4里是一个重要的（现在仍是）的标记，在HTML里被广泛使用，但是它所表达的语义太弱，在声明网页组织结构里不同的区块的任务面前它毫无用武之地。新的HTML5标记–例如<article>, <aside>, <nav>, <figure>, <header>, <footer> –会更有用和更方便，这些标记能够让你指明网页不同区域的用途，清楚的显示网站的结构。这意味着即使你是个新手或中等的程序员，仅依据HTML代码就能清楚的了解整个页面的结构–更值得一提的是搜索引擎将会因为能如此方便的解析页面的结构而会高兴的发狂的。

 

 

 

 

 

 

 

 

 

 

 

 

HTML5扫盲帖

一. HTML5的定义

 

HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。目标是取代1999年所制定的HTML 4.01和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。

广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。

它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。

二. HTML5的特性

 

新应用程序接口(API)

 

除了原先的DOM接口，HTML5增加了更多样化的API：

实时二维绘图

Canvas API：有关动态产出与渲染图形、图表、图像和动画的API。

定时媒体播放

HTML5 音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。

离线存储数据库（离线网络应用程序）

编辑

拖放

跨文档通信

通信／网络

Communication APIs：构建实时和跨源（cross-origin）通信的两大基础： 跨文档通信（Cross Document Messaging）与 XMLHttpRequest Level 2。

浏览历史管理

MIME和协议处理程序时表头登记

微数据

Web SQL Database, 一个本地的SQL数据库。

索引数据库API(Indexed Database API, 以前为WebSimpleDB))

文件API：处理文件上传和操纵文件。

目录和文件系统：这个API是为了满足客户端在没有好的数据库支持情况下存储要求。

文件写入：从网络应用程序向文件里写内容。

 

一个误区

 

一个普遍的误解是HTML5能够在网页中提供动画效果，这是不对的。动画效果是由JavaScript和CSS达成的。

 

与HTML 4的不同之处

 

  • 新的解析顺序：不再基于SGML
  • 新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr
  • input元素的新属性：date, email, url
  • 新的通用属性：ping（用于a与area）, charset（用于meta）, async（用于script）
  • 全局属性：id, tabindex, repeat
  • 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u

 

三.HTML5的优缺点

 

功能及技术层面的优缺点

 

优点： 

 

1, 影片播放、图形呈现等功能内建于浏览器内，不需要Plug-in就能执行。 

 

2, 标准开放，程序与美术直接以Code就能写，不需要购买Flash等工具。 

 

缺点： 

 

1, 尚未定案。例如SVG向量图形，目前各家浏览器支持性不一。 

 

2, 普及性低。例如IE尚未支持，要到IE9才会支持；但IE9仅支持Vista以上的Windows。 

 

3, 性能低下，容易造成浏览器假死甚至奔溃。（HTML5是浏览器驱动的程序，而浏览器又是在底层硬件驱动上工作的。普通的app是直接在底层硬件驱动上进行的）。

 

4, 不支持离线应用，数据流量资费过高。

 

 

它新并不表示它安全

 

    网络应用开发工程师们在学习新技术的同时需要时刻记住网络安全。HTML5所购建的网页和其他语言编写的网页一样容易泄露一些敏感数据。欧洲网络信息安全机构(European Network and Information Security Agency，ENISA)已经警告说HTML5可能并不够安全。

 

它可能会消灭Flash但不是现在

 

    许多业内人士表示，HTML将会最终代替多媒体框架，如Adobe的Flash，但是短期看来还不是现在。HTML5估计到2014年才能逐步成熟，而且将现有应用Flash的网络开发完全转向HTML5还需要一段时间。尽管HTML5提出了许多优点，但是还可能有某些应用更适合于更灵活的框架。现在，一些主流的大公司都逐步转向使用HTML5，但是这个转变的过程也不是一蹴而就的。

 

它将会变得很移动化

 

    现在几乎所有人都热衷于开发独立的移动应用，但是HTML5很可能会是独立移动应用的终结者。由于HTML5将应用的功能直接加入其内核，这很可能引导移动技术潮流重新回到浏览器时代。HTML5允许开发者在(移动)浏览器内开发应用，所以如果你正在制定一项桌面或者移动应用的长期发展策略，你可能需要考虑这一点。

 

它承诺带来一个无缝的网络

 

    HTML5会带来一个统一的网络，无论是笔记本、台式机还是智能手机都应该很方便的浏览基于HTML5的网站。因此在设计网站的时候，开发者需要重新考虑用户体验、网站浏览、网站结构等因素使得这个网站对任何硬件设备都通用。

 

 

 

四.HTML5在移动互联网如何应用

 

目标：web技术将成为移动设备上的开发平台，只是目前该技术可能尚未成熟。

 

基于HTML5的开发方式有两种：一种是混合式开发，一种是移动网页应用。以上两种开发都需要强大的具有HTML渲染的浏览器，否则

 

混合式开发

 

1. 目前主流的都是混合开发，所以对团队、技术人员的要求比较高，需要掌握多种不同的技术（JAVA、Obejective-c、HTML5、JAVASCRIPT、CSS/CSS3），这种混合的开发模式。

 

2. 混合应用是一种需要下载，但有部分或者所有用户界面植入了浏览器元素的应用程序。对用户来说，混合应用与原生应用并无二致——它们都需要通过应用商店渠道下载，都可以保存的在手机，运行方式与原生应用并无差别。但对开发者来说，这其中的差异却不容忽视，因为这意味着他们无需针对各个手机操作系统重新编写应用，而是可以选择用HTML、CSS和JavaScript编写其中一部分代码，并在多个平台上运行应用程序。

 

3. 混合应用的HTML页面可通过网络服务器传送，但这一点并非必备条件。如果要提高运行性能，混合应用还可以植入一个包含其所需的网页资源（例如HTML、JavaScript、CSS和图像）的副本，以便用户快速访问内容，而不必等待网络服务器将内容传送过来。

 

4. 混合应用必须通过应用商店下载。

 

支持混合开发的javascript框架：Sencha Touch、jQuery Mobile和dojox.mobile等JavaScript工具包

 

从商业角度来看，尽早采用HTML5技术是最明智的做法。有些行业巨头已经将HTML当作唯一可行的跨平台开发技术。传说中的Facebook项目“Project Spartan”（游戏邦注：有人称它是一个基于HTML5的网页应用商店），以及微软宣布开发者将可使用HTML5和JavaScript为Windows 8编写应用程序等消息，更增加了HTML5获胜的筹码。甚至有人认为现在的开发商面临的并非“是否”，而是“何时”采纳HTML技术的问题。

 

但在混合应用领域，PhoneGap库等开源框架却可以让JavaScript代码访问手机的罗盘、照相等功能成为可能，甚至可以搜索或创建联系人列表、约会安排等其他多种网页应用无法接入的手机功能。

 

移动网页应用

 

1. 必须连网

2. 在浏览器运行，用户不需要下载安装就可以。

3. 需要等待网络服务器将内容传送到手机才可以

4.目前还不能访问摄像头、麦克风、通讯录等手机功能。虽然W3C已经启动支持网页应用访问这类移动设备功能的项目，但移动浏览器现在还不具备这些功能已是不争的事实，而这一点却是许多创新型手机应用的必备条件。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML5你不得不知道的五件事情

1. HTML5并非是一整块

你也许会问：“如果老的浏览器不支持HTML5，我该如何开始呢？”这个问题本身就是具有误导性的。HTML5并不是一大块整体，而是一系列单独特性的集合。所以你是不可能去检测“HTML5支持性”的，因为根本就没有这种东西存在。但是你可以测试对某些特性的支持，比如画布功能、视频功能、地理定位功能。

你可能认为HTML5是一系列标签和尖括号。这的确是HTML5中很重要的部分，但并非全部。HTML5还定义了如何让这些尖括号通过文件对象模型（Document Object Model ，DOM）和Javascript交互。比如，HTML5并不是只定义一个<video>标记，同时还会有针对相应视频对象的DOM API。你可以使用这个API来检测对不同视频格式的支持，如播放视频、暂停、静音、记录下载进度，以及其他你需要围绕着这个<video>标记来构建丰富用户体验的功能。

2. 你不需要丢弃现有的任何东西

不管是喜欢还是不喜欢，你都不可否认HTML4是有史以来最成功的标记语言。HTML5就是建立于它的成功之上。你不需要丢掉现有的标记，你也不需要重新学习你已经知道的东西。如果你的Web应用以前是用HTML4运行的，那么它现在在HTML5的标准之下仍然可以运行。

现在，如果你想要提升你的Web应用，你就找对了地方。这里有一个具体的例子：HTML5支持所有来自于HTML4中对表单的控制，但它同时还包括了一些新的输入控制。其中包括一些期待已久的功能，如滑块和日期选择器，另外还有些更微妙的，例如：邮件输入类型看起来就像一个文本框，但是移动浏览器会定制它们的界面以便让输入邮件地址更容易。老的不支持邮件输入类型的浏览器会将它仍然看做一个常规的文本域，表单在不对代码做修改的情况下是可以正常进行的。这意味着你可以现在就提升你的Web表单，即使你的一些访客还在使用IE 6。

3. 开始非常容易

“升级到”HTML5和改变你的doctype一样简单。Doctype应该已经是每一个HTML页面的第一行了，之前的HTML版本定义了很多doctypes，选择正确的doctype是件很困难的事情。但是在HTML5中，只有一种doctype：<!DOCTYPE html>。

升级到HTML5的doctype不需要你改变现有的标记，因为所有在HTML4中定义的标签在HTML5中仍然可以使用。但是现在，你可以使用新的语义元素，比如<article>、 <section>、<header>和 <footer>。

4. HTML5已经在很好地工作了

不管你自己是否想要利用HTML5在画布上绘图、播放视频、设计更好的表单，或是构建能离线工作的Web应用，你会发现HTML5已经得到良好的支持了。Firefox、Safari、Chrome、Opera以及移动浏览器都支持画布、视频、地理定位、本地存储，以及其他更多特性。

Google已经支持微观数据的注解（microdata annotations）。甚至是Microsoft——很少会支持开放标准的公司——也在IE9中支持HTML5的大多数特性。

5. HTML5就是未来

Tim Berners-Lee在20世纪90年代早期发明了world wide web。他接下来创立了W3C作为Web标准的管家，这个组织扮演这个角色已超过15年了。下面是W3C在2009年对Web标准的预言：

今天，董事会宣布，截至2009年底，当XHTML2工作组章程（XHTML 2 Working Group charter）届满时，章程将不再更新。通过这样做，以及在HTML工作组（HTML Working Group）增加资源，W3C希望能加快HTML5的进展，并表明W3C对HTML的未来问题上的立场。

所以，HTML5就是未来。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Html5的事件属性与标签属性

 

事件属性

属性

值

描述

4

5

HTML 5 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。 
HTML 5 中的新事件属性：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。

4: 指在HTML 4.01 中定义了该元素 
5: 指在HTML 5 中定义了该元素

onabort

script

发生 abort 事件时运行脚本。

 

5

onbeforeonload

script

在元素加载前运行脚本。

 

5

onblur

script

当元素失去焦点时运行脚本。

4

5

onchange

script

当元素改变时运行脚本。

4

5

onclick

script

在鼠标点击时允许脚本。

4

5

oncontextmenu

script

当菜单被触发时运行脚本。

 

5

ondblclick

script

当鼠标双击时运行脚本。

4

5

ondrag

script

只要脚本在被拖动就允许脚本。

 

5

ondragend

script

在拖动操作结束时运行脚本。

 

5

ondragenter

script

当元素被拖动到一个合法的放置目标时，执行脚本。

 

5

ondragleave

script

当元素离开合法的放置目标时。

 

5

ondragover

script

只要元素正在合法的放置目标上拖动时，就执行脚本。

 

5

ondragstart

script

在拖动操作开始时执行脚本。

 

5

ondrop

script

当元素正在被拖动时执行脚本。

 

5

onerror

script

当元素加载的过程中出现错误时执行脚本。

 

5

onfocus

script

当元素获得焦点时执行脚本。

4

5

onkeydown

script

当按钮按下时执行脚本。

4

5

onkeypress

script

当按键被按下时执行脚本。

4

5

onkeyup

script

当按钮松开时执行脚本。

4

5

onload

script

当文档加载时执行脚本。

4

5

onmessage

script

当 message 事件触发时执行脚本。

 

5

onmousedown

script

当鼠标按钮按下时执行脚本。

4

5

onmousemove

script

当鼠标指针移动时执行脚本。

4

5

onmouseover

script

当鼠标指针移动到一个元素上时执行脚本。

4

5

onmouseout

script

当鼠标指针移出元素时执行脚本。

4

5

onmouseup

script

当鼠标按钮松开时执行脚本。

4

5

onmousewheel

script

当鼠标滚轮滚动时执行脚本。

 

5

onreset

script

当表单重置时执行脚本。不支持。

4

 

onresize

script

当元素调整大小时运行脚本。

 

5

onscroll

script

当元素滚动条被滚动时执行脚本。

 

5

onselect

script

当元素被选中时执行脚本。

4

5

onsubmit

script

当表单提交时运行脚本。

4

5

onunload

script

当文档卸载时运行脚本。

 

5

HTML 5不再支持的 HTML 4.01 属性：onreset。

 

 

标签属性

　　

标签属性

属性

值

描述

4

5

HTML 5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。

4: 指在HTML 4.01 中定义了该元素 
5: 指在HTML 5 中定义了该元素

acceskey

a character

设置访问一个元素的键盘快捷键。不支持。

4

 

class

class_rule orstyle_rule

元素的类名。

4

5

contenteditable

true 
false

设置是否允许用户编辑元素。

 

5

contentextmenu

id of a menu element

给元素设置一个上下文菜单。

 

5

dir

ltr 
rtl

设置文本方向。

4

5

draggable

true 
false 
auto

设置是否允许用户拖动元素。

 

5

id

id_name

元素的唯一 id。

4

5

irrelevant

true 
false

设置元素是否相关。不显示非相关的元素。

 

5

lang

language_code

设置语言码。

4

5

ref

url or elementID

引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用。

 

5

registrationmark

registration mark

为元素设置拍照。可规定于任何 <rule> 元素的后代元素，除了 <nest> 元素。

 

5

style

style_definition

行内的样式定义。

4

5

tabindex

number

设置元素的 tab 顺序。

4

5

template

url or elementID

引用应该应用到该元素的另一个文档或本文档上另一个位置。

 

5

title

tooltip_text

显示在工具提示中的文本。

4

5

HTML 5 标签中的新属性有：contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template 
HTML 5 中不再支持的属性：accesskey

 

 

上海做网站公司 天也网络 www.zgzwz.com

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

按字母顺序排列的标签列表

　　?4: 指示在 HTML 4.01 中定义了该元素

　　?5: 指示在 HTML 5 中定义了该元素

　　标签 描述 4 5

　　<!--...--> 定义注释。 4 5

　　<!DOCTYPE> 定义文档类型。 4 5

　　<a> 定义超链接。 4 5

　　<abbr> 定义缩写。 4 5

　　<acronym> HTML 5 中不支持。定义首字母缩写。 4

　　<address> 定义地址元素。 4 5

　　<applet> HTML 5 中不支持。定义 applet。 4

　　<area> 定义图像映射中的区域。 4 5

　　<article> 定义 article。 5

　　<aside> 定义页面内容之外的内容。 5

　　<audio> 定义声音内容。 5

　　<b> 定义粗体文本。 4 5

　　<base> 定义页面中所有链接的基准 URL。 4 5

　　<basefont> HTML 5 中不支持。请使用 CSS 代替。 4

　　<bdo> 定义文本显示的方向。 4 5

　　<big> HTML 5 中不支持。定义大号文本。 4

　　<blockquote> 定义长的引用。 4 5

　　<body> 定义 body 元素。 4 5

　　<br> 插入换行符。 4 5

　　<button> 定义按钮。 4 5

　　<canvas> 定义图形。 5

　　<caption> 定义表格标题。 4 5

　　<center> HTML 5 中不支持。定义居中的文本。 4

　　<cite> 定义引用。 4 5

　　<code> 定义计算机代码文本。 4 5

　　<col> 定义表格列的属性。 4 5

　　<colgroup> 定义表格列的分组。 4 5

　　<command> 定义命令按钮。 5

　　<datalist> 定义下拉列表。 5

　　<dd> 定义定义的描述。 4 5

　　<del> 定义删除文本。 4 5

　　<details> 定义元素的细节。 5

　　<dfn> 定义定义项目。 4 5

　　<dir> HTML 5 中不支持。定义目录列表。 4

　　<div> 定义文档中的一个部分。 4 5

　　<dl> 定义定义列表。 4 5

　　<dt> 定义定义的项目。 4 5

　　<em> 定义强调文本。 4 5

　　<embed> 定义外部交互内容或插件。 5

　　<fieldset> 定义 fieldset。 4 5

　　<figcaption> 定义 figure 元素的标题。 5

　　<figure> 定义媒介内容的分组，以及它们的标题。 5

　　<font> HTML 5 中不支持。 4

　　<footer> 定义 section 或 page 的页脚。 5

　　<form> 定义表单。 4 5

　　<frame> HTML 5 中不支持。定义子窗口（框架）。 4

　　<frameset> HTML 5 中不支持。定义框架的集。 4

　　<h1> to <h6> 定义标题 1 到标题 6。 4 5

　　<head> 定义关于文档的信息。 4 5

　　<header> 定义 section 或 page 的页眉。 5

　　<hgroup> 定义有关文档中的 section 的信息。 5

　　<hr> 定义水平线。 4 5

　　<html> 定义 html 文档。 4 5

　　<i> 定义斜体文本。 4 5

　　<iframe> 定义行内的子窗口（框架）。 4 5

　　<img> 定义图像。 4 5

　　<input> 定义输入域。 4 5

　　<ins> 定义插入文本。 4 5

　　<keygen> 定义生成密钥。 5

　　<isindex> HTML 5 中不支持。定义单行的输入域。 4

　　<kbd> 定义键盘文本。 4 5

　　<label> 定义表单控件的标注。 4 5

　　<legend> 定义 fieldset 中的标题。 4 5

　　<li> 定义列表的项目。 4 5

　　<link> 定义资源引用。 4 5

　　<map> 定义图像映射。 4 5

　　<mark> 定义有记号的文本。 5

　　<menu> 定义菜单列表。 4 5

　　<meta> 定义元信息。 4 5

　　<meter> 定义预定义范围内的度量。 5

　　<nav> 定义导航链接。 5

　　<noframes> HTML 5 中不支持。定义 noframe 部分。 4

　　<noscript> 定义 noscript 部分。 4 5

　　<object> 定义嵌入对象。 4 5

　　<ol> 定义有序列表。 4 5

　　<optgroup> 定义选项组。 4 5

　　<option> 定义下拉列表中的选项。 4 5

　　<output> 定义输出的一些类型。 5

　　<p> 定义段落。 4 5

　　<param> 为对象定义参数。 4 5

　　<pre> 定义预格式化文本。 4 5

　　<progress> 定义任何类型的任务的进度。 5

　　<q> 定义短的引用。 4 5

　　<rp> 定义若浏览器不支持 ruby 元素显示的内容。 5

　　<rt> 定义 ruby 注释的解释。 5

　　<ruby> 定义 ruby 注释。 5

　　<s> HTML 5 中不支持。定义加删除线的文本。 4

　　<samp> 定义样本计算机代码。 4 5

　　<script> 定义脚本。 4 5

　　<section> 定义 section。 5

　　<select> 定义可选列表。 4 5

　　<small> 定义小号文本。 4 5

　　<source> 定义媒介源。 5

　　<span> 定义文档中的 section。 4 5

　　<strike> HTML 5 中不支持。定义加删除线的文本。 4

　　<strong> 定义强调文本。 4 5

　　<style> 定义样式定义。 4 5

　　<sub> 定义下标文本。 4 5

　　<summary> 定义 details 元素的标题。 5

　　<sup> 定义上标文本。 4 5

　　<table> 定义表格。 4 5

　　<tbody> 定义表格的主体。 4 5

　　<td> 定义表格单元。 4 5

　　<textarea> 定义 textarea。 4 5

　　<tfoot> 定义表格的脚注。 4 5

　　<th> 定义表头。 4 5

　　<thead> 定义表头。 4 5

　　<time> 定义日期/时间。 5

　　<title> 定义文档的标题。 4 5

　　<tr> 定义表格行。 4 5

　　<tt> HTML 5 中不支持。定义打字机文本。 4

　　<u> HTML 5 中不支持。定义下划线文本。 4

　　<ul> 定义无序列表。 4 5

　　<var> 定义变量。 4 5

　　<video> 定义视频。 5

　　<xmp> HTML 5 中不支持。定义预格式文本。 4

 

 

 

 

 

 

 

 

 

 

 

 

按字母顺序排列的标签列表

标签

描述

4: 指在HTML 4.01 中定义了该元素 
5: 指在HTML 5 中定义了该元素

<table>

定义表格

4

5

<tbody>

定义表格的主体

4

5

<td>

定义表格单元

4

5

<textarea>

定义 textarea

4

5

<tfoot>

定义表格的脚注

4

5

<th>

定义表头

4

5

<thead>

定义表头

4

5

<time>

定义日期/时间

​

5

<title>

定义文档的标题

4

5

<tr>

定义表格行

4

5

<tt>

定义打字机文本（HTML 5 中不支持）

4

​

<u>

定义下划线文本（HTML 5 中不支持）

4

​

<ul>

定义无序列表

4

5

<var>

定义变量

4

5

<video>

定义视频

​

5

<xmp>

定义预格式文本（HTML 5 中不支持）

4

​

事件属性

　　

事件属性

属性

值

描述

4

5

HTML 5 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。 
HTML 5 中的新事件属性：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。

4: 指在HTML 4.01 中定义了该元素 
5: 指在HTML 5 中定义了该元素

onabort

script

发生 abort 事件时运行脚本。

​

5

onbeforeonload

script

在元素加载前运行脚本。

​

5

onblur

script

当元素失去焦点时运行脚本。

4

5

onchange

script

当元素改变时运行脚本。

4

5

onclick

script

在鼠标点击时允许脚本。

4

5

oncontextmenu

script

当菜单被触发时运行脚本。

​

5

ondblclick

script

当鼠标双击时运行脚本。

4

5

ondrag

script

只要脚本在被拖动就允许脚本。

​

5

ondragend

script

在拖动操作结束时运行脚本。

​

5

ondragenter

script

当元素被拖动到一个合法的放置目标时，执行脚本。

​

5

ondragleave

script

当元素离开合法的放置目标时。

​

5

ondragover

script

只要元素正在合法的放置目标上拖动时，就执行脚本。

​

5

ondragstart

script

在拖动操作开始时执行脚本。

​

5

ondrop

script

当元素正在被拖动时执行脚本。

​

5

onerror

script

当元素加载的过程中出现错误时执行脚本。

​

5

onfocus

script

当元素获得焦点时执行脚本。

4

5

onkeydown

script

当按钮按下时执行脚本。

4

5

onkeypress

script

当按键被按下时执行脚本。

4

5

onkeyup

script

当按钮松开时执行脚本。

4

5

onload

script

当文档加载时执行脚本。

4

5

onmessage

script

当 message 事件触发时执行脚本。

​

5

onmousedown

script

当鼠标按钮按下时执行脚本。

4

5

onmousemove

script

当鼠标指针移动时执行脚本。

4

5

onmouseover

script

当鼠标指针移动到一个元素上时执行脚本。

4

5

onmouseout

script

当鼠标指针移出元素时执行脚本。

4

5

onmouseup

script

当鼠标按钮松开时执行脚本。

4

5

onmousewheel

script

当鼠标滚轮滚动时执行脚本。

​

5

onreset

script

当表单重置时执行脚本。不支持。

4

​

onresize

script

当元素调整大小时运行脚本。

​

5

onscroll

script

当元素滚动条被滚动时执行脚本。

​

5

onselect

script

当元素被选中时执行脚本。

4

5

onsubmit

script

当表单提交时运行脚本。

4

5

onunload

script

当文档卸载时运行脚本。

​

5

HTML 5不再支持的 HTML 4.01 属性：onreset。

​

​

标签属性

　　

标签属性

属性

值

描述

4

5

HTML 5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。

4: 指在HTML 4.01 中定义了该元素 
5: 指在HTML 5 中定义了该元素

acceskey

a character

设置访问一个元素的键盘快捷键。不支持。

4

​

class

class_rule orstyle_rule

元素的类名。

4

5

contenteditable

true 
false

设置是否允许用户编辑元素。

​

5

contentextmenu

id of a menu element

给元素设置一个上下文菜单。

​

5

dir

ltr 
rtl

设置文本方向。

4

5

draggable

true 
false 
auto

设置是否允许用户拖动元素。

​

5

id

id_name

元素的唯一 id。

4

5

irrelevant

true 
false

设置元素是否相关。不显示非相关的元素。

​

5

lang

language_code

设置语言码。

4

5

ref

url or elementID

引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用。

​

5

registrationmark

registration mark

为元素设置拍照。可规定于任何 <rule> 元素的后代元素，除了 <nest> 元素。

​

5

style

style_definition

行内的样式定义。

4

5

tabindex

number

设置元素的 tab 顺序。

4

5

template

url or elementID

引用应该应用到该元素的另一个文档或本文档上另一个位置。

​

5

title

tooltip_text

显示在工具提示中的文本。

4

5

HTML 5 标签中的新属性有：contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template 
HTML 5 中不再支持的属性：accesskey

​

​

 

 

 

 

 

分享到：
| CSS 大全
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5知识点思维导图(手工整理）

    以下是一些核心的HTML5知识点： 1. **基本结构与标签**：HTML5文档的基础是`&lt;!DOCTYPE html&gt;`声明，它告诉浏览器使用HTML5规范解析文档。`&lt;html&gt;`标签定义了整个文档的根元素，而`&lt;head&gt;`和`&lt;body&gt;`分别代表元数据...

    HTML5知识大全

    在这个“HTML5知识大全”中，我们将深入探讨这个强大语言的关键元素。 首先，HTML5新增了语义化标签，如、、、、和等，这些标签为网页内容提供了更明确的结构，有助于搜索引擎优化（SEO）和无障碍访问...

    HTML5知识框架体系图

    Html5语言的知识框架体系图，希望能够帮助初学者有个学习HTML5语言的路线和支持

    html5知识结构图

    这个“HTML5知识结构图”很可能包含了一个全面的框架，概述了HTML5的主要组成部分、新特性、以及如何在实际开发中应用它们。 HTML5的核心特点包括： 1. **语义化标签**：HTML5引入了新的语义化标签，如, , , , 等...

    HTML5知识点.xmind

    HTML5知识点.xmind

    html5知识点总结.txt

    html5知识点总结

    (自适应手机版)响应式房产合同纠纷知识产权类网站源码HTML5知识产权法律网站模板.txt

    (自适应手机版)响应式房产合同纠纷知识产权类网站源码HTML5知识产权法律网站模板.txt

    HTML5+全套知识点

    这个"HTML5+全套知识点"压缩包文件包含了一系列关于HTML5的重要概念、语法、新特性以及实际应用的详细资料，非常适合对Web开发感兴趣或希望提升HTML5技能的学习者。 首先，HTML5的核心目标是提高用户体验，简化...

    (自适应手机版)响应式房产合同纠纷知识产权类网站模板HTML5知识产权法律网站源码下载.txt

    (自适应手机版)响应式房产合同纠纷知识产权类网站模板HTML5知识产权法律网站源码下载.txt

    HTML5基础知识 入门知识学习文档

    本篇文档将深入探讨HTML5的基础知识，帮助初学者快速入门。 1. 结构元素的强化：HTML5为网页结构提供了更为明确的语义化元素，如定义页眉，用于导航链接，表示独立的内容块，定义文档的章节，代表相关内容或侧边栏...

    html5介绍.ppt

    ### HTML5介绍 #### 什么是HTML5？ HTML5是一种用于构建网页的标准标记语言，它不仅扩展了HTML4的功能，还引入了许多新特性来增强网页的表现力和交互性。HTML5的发展始于2004年，由WHATWG（Web Hypertext ...

    HTML5知识点总结汇总

    内容概述：文章包含了最基础的HTML5的知识点。 适用人群：适用于初级选手，可用作复习资料。 能学到什么：最开始的入门学习以及初识HTML。 阅读建议：先看视频在看本文章。

    HTML5+CSS3+Javascript离线版参考手册

    这份"HTML5+CSS3+Javascript离线版参考手册"包含的三个CHM文件，分别为JavaScript.chm、CSS3.0参考手册.chm和HTML5参考手册.chm，分别详尽地阐述了这三个领域的知识。 首先，HTML5（HyperText Markup Language第五...

    HTML5基础知识核心技术与前沿案例

    资源名称：HTML5基础知识 核心技术与前沿案例内容简介：HTML5基础知识 核心技术与前沿案例《HTML5基础知识、核心技术与前沿案例 》是一本引导初、中级学习者深入了解并有效掌握HTML5核心技巧的技术实战书籍，全书...

    html知识ppt教程

    java方面的html相关知识的设置，可以学到很多页面上的设置哦。

    标准html5贷款页面

    下面将详细阐述其中涉及的HTML5知识点及其重要性。 首先，HTML5是现代网页开发的基础，它提供了许多增强用户体验的新特性。在贷款首页中，HTML5的语义化标签如、、、和被用于构建页面结构，使内容更加清晰易懂，...

    html5课程设计

    在“html5课程设计”这个项目中，我们可以学习到以下几个关键的HTML5知识点： 1. **新元素的引入**：HTML5引入了一些结构性元素，如（页眉）、（导航）、（区段）、（文章）、（侧边栏）和（页脚），这些元素帮助...

    HTML5基础知识, 核心技术与前沿案例

    本资料包“HTML5基础知识, 核心技术与前沿案例”涵盖了HTML5的基础概念、核心技术以及一些最新的实践应用。 一、HTML5基础知识 HTML5的基本结构包括文档类型声明（&lt;!DOCTYPE html&gt;）、头部（）和主体（）。它引入了...

    HTML5和CSS3知识讲解

    在本文中，我们将对HTML5和CSS3的相关知识点进行深入的讲解。 首先，我们来了解一下HTML5的发展历史。HTML5是在XHTML2的基础上发展起来的，旨在改进Web应用的开发方式，提供更为丰富和强大的功能。HTML5的开发工作...

    大学时期H5知识案例.zip

    HTML5是现代网页开发的核心标准，它极大地扩展了HTML4的功能，使得开发者能够...以上就是"大学时期H5知识案例.zip"中可能涉及的HTML5知识点。通过这些案例，读者可以深入理解并实践HTML5的各种特性，提升Web开发技能。

Magicbox
Global site tag (gtag.js) - Google Analytics