<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">HTML常用编码转换。</font> </td> </tr></tbody></table>本代码片段由网页教学网提供。 <pre>var encoding = (function () { function ToASCII(str) { return this.ToNormal(str).replace(/[^\u0000-\u00FF]/g, function () { return escape(arguments[0]).replace(/(?:%u)([0-9a-f]{4})/gi, "\$1;") }); } function ToUnicode(str) { return this.ToNormal(str).replace(/[^\u0000-\u00FF]/g, function () { return escape(arguments[0]).replace(/(?:%u)([0-9a-f]{4})/gi, "\\u$1") }); } function ToNormal(str) { return str.replace(/(?:)([0-9a-f]{4});|(?:\\u)([0-9a-f]{4})/gi, function () { return unescape("%u" + (arguments[1] || arguments[2])); }); } function ToCss(str) { return this.ToNormal(str).replace(/[^\u0000-\u00FF]/g, function () { return escape(arguments[0]).replace(/(?:%u)([0-9a-f]{4})/gi, "\\$1") }); } return { ToASCII: ToASCII, ToUnicode: ToUnicode, ToNormal: ToNormal, ToCss: ToCss }; })(); console.log(encoding.ToASCII("宋体")); console.log(encoding.ToUnicode("宋体")); console.log(encoding.ToNormal("宋\u4F53")); console.log(encoding.ToUnicode("宋体")); console.log(encoding.ToCss('Arial , Helvetica ,"宋体", sans-serif'));</pre>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">开源HTML5应用开发框架 - iio Engine.</font> </td> </tr></tbody></table> <p style="text-align: center;"><img width="551" height="199" alt="基于javascript和canvas（画布）的开源HTML5应用开发框架 - iio Engine" src="http://www.webjx.com/files/allimg/130507/1408340.jpg" border="0"></p> <p>随着HTML5的发展，越来越多的基于HTML5技术的网页开发框架出现，在今天的这篇文章中，我们将介绍<a href="http://iioengine.com/" target="_blank">iio Engine</a>，它是一款开源的创建HTML5应用的web框架。</p> <p>整个框架非常的轻量级，只有45kb大小，并且整合了debug系统，并且跨平台支持。</p> <p>不依赖任何第三方的类库，可以支持Box2D，拥有完整的文档支持。支持快速的开发。</p> <p>使用这个类库你只需要使用10多行的代码就生成一个tic-tac的游戏，代码如下：</p> <pre style="border: 1px solid rgb(85, 85, 85); width: 688px; z-index: auto;">TicTacToe = function(io){<br><br> var grid = io.addObj(new iio.ioGrid(0,0,3,3,120)<br> .setStrokeStyle('white'));<br> var xTurn=true;<br> io.canvas.addEventListener('mousedown', function(event){<br> var c = grid.getCellAt(io.getEventPosition(event),true);<br> if (typeof grid.cells[c.x][c.y].taken == 'undefined'){<br> if (xTurn)<br> io.addObj(new iio.ioX(grid.getCellCenter(c),80)<br> .setStrokeStyle('red',2));<br> else<br> io.addObj(new iio.ioCircle(grid.getCellCenter(c),40)<br> .setStrokeStyle('#00baff',2));<br> grid.cells[c.x][c.y].taken=true;<br> xTurn=!xTurn;<br> }<br> });<br> }; iio.start(TicTacToe,'canvasId');</pre> <p style="text-align: center;"><a class="uploadimggrp" href="http://upload.chinaz.com/2013/0507/1367891878971.jpg" target="_blank"><img src="http://www.webjx.com/files/allimg/130507/1408341.jpg" border="0" alt=""></a></p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">网页技巧:表单(textarea)有关焦点的用法.</font> </td> </tr></tbody></table> <h2>表单（<span class="wp_keywordlink_affiliate">textarea</span>）有关<span class="wp_keywordlink_affiliate">焦点</span>的用法大全</h2> <p>1.文本框显示默认文字：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_958077"></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;textarea&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> <div class="line number2 index1 alt1">&lt;textarea&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> </div> </td> </tr></tbody></table> </div> <p>2.鼠标点击文本框，默认文字消失：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_694819"></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;textarea onfocus="if(value==’网页教学网-webjx.com’) {value=''}"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> <div class="line number2 index1 alt1">&lt;textarea onfocus="if(value==’网页教学网-webjx.com’) {value=''}"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> </div> </td> </tr></tbody></table> </div> <p>3.鼠标移至文本框，默认文字消失：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_22032"></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;textarea onmouseover="focus()" onfocus="if(value==’网页教学网-webjx.com’) {value=''}"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> <div class="line number2 index1 alt1">&lt;textarea onmouseover="focus()" onfocus="if(value==’网页教学网-webjx.com’) {value=''}"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> </div> </td> </tr></tbody></table> </div> <p>4.鼠标点击文本框，默认文字消失，点击文本框外任意区域，默认文字又重现：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_783548"></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;textarea onfocus="if(value==’网页教学网-webjx.com’) {value=''}" onblur="if(value=='') {value=’网页教学网-webjx.com’}"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> <div class="line number2 index1 alt1">&lt;textarea onfocus="if(value==’网页教学网-webjx.com’) {value=''}" onblur="if(value=='') {value=’网页教学网-webjx.com’}"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> </div> </td> </tr></tbody></table> </div> <p>5.鼠标移至文本框，默认文字消失，鼠标移出文本框，默认文字又重现：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_667159"></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;textarea onmouseover="focus()" onmouseout="blur()" onfocus="if(value==’网页教学网-webjx.com’) {value=''}" onblur="if (value=='') {value=’网页教学网-webjx.com’}"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> <div class="line number2 index1 alt1">&lt;textarea onmouseover="focus()" onmouseout="blur()" onfocus="if(value==’网页教学网-webjx.com’) {value=''}" onblur="if (value=='') {value=’网页教学网-webjx.com’}"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> </div> </td> </tr></tbody></table> </div> <p>6.鼠标单击文本框，文本框内任何文字消失（包括默认文字及后来输入的文字）：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_50835"></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;textarea onclick="value=''"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> <div class="line number2 index1 alt1">&lt;textarea onclick="value=''"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> </div> </td> </tr></tbody></table> </div> <p>7.鼠标移至文本框，文本框内任何文字消失（包括默认文字及后来输入的文字）：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_472900"></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;textarea onmouseover="value=''"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> <div class="line number2 index1 alt1">&lt;textarea onmouseover="value=''"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> </div> </td> </tr></tbody></table> </div> <p>8.单击文本框后全选文本框内的文字：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_502822"></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;textarea onfocus="select()"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> <div class="line number2 index1 alt1">&lt;textarea onfocus="select()"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> </div> </td> </tr></tbody></table> </div> <p>9.鼠标移至文本框全选文本框内的文字：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_592594"></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;textarea onmouseover="focus()" onfocus="select()"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> <div class="line number2 index1 alt1">&lt;textarea onmouseover="focus()" onfocus="select()"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> </div> </td> </tr></tbody></table> </div> <p>10.回车后<span class="wp_keywordlink_affiliate">焦点</span>从当前文本框转移到下一个文本框：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_837044"></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;textarea onkeydown="if(event.keyCode==13)event.keyCode=9"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> <div class="line number2 index1 alt1">&lt;textarea onkeydown="if(event.keyCode==13)event.keyCode=9"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> </div> </td> </tr></tbody></table> </div> <p>11.回车后<span class="wp_keywordlink_affiliate">焦点</span>从当前文本框转移到指定位置：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_100324"></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;textarea onkeypress="return focusNext(this,’指定位置的id名称’,event)"&gt;网页教学网-webjx.com&lt;/textarea&gt;</div> </div> </td> </tr></tbody></table> </div>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">渐进增强版html.</font> </td> </tr></tbody></table> <pre class="code">&lt;!DOCTYPE HTML&gt; &lt;!--[if !IE]&gt;&lt;!--&gt;&lt;html lang="zh-cn"&gt;&lt;!--&lt;![endif]--&gt; &lt;!--[if gt IE 9]&gt;&lt;html class="ie10" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 9]&gt;&lt;html class="ie9 lte9" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 8]&gt;&lt;html class="ie8 lte9 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 7]&gt;&lt;html class="ie7 lte9 lte7 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if lte IE 6]&gt;&lt;html class="ie6 lte9 lte7 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p>这个其实有好几种不同的版本，按个人的需求来定吧，本人在不同阶段也使用了不同的版本，最终确认为这个版本。其中.no-css3用来表示ie6-8不支持css3的样式，对于渐进增加方面，可以高级浏览器使用css3，ie6-8使用.no-css3这个class来定位使用背景图片，而对于ie8支持的:before和:after生成的三角，则可以使用.lt7来表示ie7及ie6使用背景图片。</p> <p>再次更新下，因为考虑到国内浏览器还是ie6比较多，所以把顺序排列了下，然后只针对非ie6,7,8进行判断</p> <pre class="code">&lt;!DOCTYPE HTML&gt; &lt;!--[if lte IE 6]&gt;&lt;html class="ie6 lte7 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 8]&gt;&lt;html class="ie8 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 7]&gt;&lt;html class="ie7 lte7 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if !(IE 6) | !(IE 7) | !(IE 8) ]&gt;&lt;!--&gt;&lt;html lang="zh-cn"&gt;&lt;!--&lt;![endif]--&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p>添加ie9，把no-css3 class改成lte8</p> <pre class="code">&lt;!DOCTYPE HTML&gt; &lt;!--[if IE 6]&gt;&lt;html class="ie6 lte9 lte8 lte7" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 8]&gt;&lt;html class="ie8 lte9 lte8" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 9]&gt;&lt;html class="ie9 lte9" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 7]&gt;&lt;html class="ie7 lte9 lte8 lte7" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9) ]&gt;&lt;!--&gt;&lt;html lang="zh-cn"&gt;&lt;!--&lt;![endif]--&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;</pre>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">兼容浏览器的hr样式代码.</font> </td> </tr></tbody></table> <p>现代浏览器及ie8：</p> <pre>hr {</pre> <pre> border : 0;</pre> <pre> height : 15px;</pre> <pre> background : url(hr.gif) 50% 0 no-repeat;</pre> <pre> margin : 1em 0; } </pre> <p>针对ie8以下：</p> <pre>hr {</pre> <pre> display : list-item;</pre> <pre> list-style : url(hr.gif) inside;</pre> <pre> filter : alpha(opacity=0);</pre> <pre> width : 0; } </pre> <p>详细参考：<a target="_blank" href="http://borgar.net/s/2007/01/style-hr-elements/"><font color="#29b4f0">http://borgar.net/s/2007/01/style-hr-elements/</font></a></p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">在定义了规范后，元素、属性（attribute）及属性（attribute）值的语义还要受到开发商共同选择和实现的影响，这就导致了后期规范化的约定好的语义要进行修改（这是HTML设计的一个原则）。</font> </td> </tr></tbody></table> <h2>关于语义</h2> <p>语义是研究符号和标志，以及他们所代表的事物之间的关系的。在语言学里，主要是研究符号所表达的意思（如单词、短语或声音）。Web前端开发中，语义主要涉及到了约定好的HTML元素、属性（attribute）及属性（attribute）值的意义（包括一些扩展，如微数据）。这些约定好的语义，通常是正式的规范，可以用来更好的理解一个网站的各方面信息。但是，在定义了规范后，元素、属性（attribute）及属性（attribute）值的语义还要受到开发商共同选择和实现的影响，这就导致了后期规范化的约定好的语义要进行修改（这是HTML设计的一个原则）。</p> <h2>区分不同类型的<span class="wp_keywordlink_affiliate">HTML语义</span> </h2> <p>编写“具有语义的HTML”原则是现代、专业前端开发的一个基础。大多数的语义和自然存在的或预期内容的多方面相关（例如，h1元素、lang属性(attribute)、type属性(attribute)的email值、微数据）。</p> <p>然而，并非所有的语义需要根据内容衍生出来的。类名不能是“非语义”的。无论使用什么名字，他们都需要有意义、有目的。类名语义跟<span class="wp_keywordlink_affiliate">HTML语义</span>不同。我们可以使用HTML元素，某些HTML属性（attributes）、微数据等约定的“global”语义，他们的目的不会和那些网站、特定的应用程序的“local”语义产生混淆。那些“local”的语义是包含在属性（attribute）值里的，如class属性（attribute）。</p> <p>尽管HTML5 specification section on classes再次假定“最佳实践”是：</p> <p>“鼓励作者使用[类属性（attribute）]值来描述实际内容的本质，而不是描述那些所需的内容。”</p> <p>本身没有理由这样做的。实际上，在开发大型网站或应用程序时，这样经常会是一个阻碍。</p> <ul> <li>内容层语义本来服务于HTML元素和其他属性(attribute)。 </li> <li>类名给机器或者访问者提供很少或没有用的语义信息，除非是商定好的名字（并且是机器可读的）的一小部分&#8212;&#8212;微格式。 </li> <li>使用类名主要的目的是为了使用CSS和javascript。如果你不需要在你的web文档里添加表现和行为，那么在你的HTML里，就可能不需要类名。 </li> <li>类名应该传达有用的信息给开发者。当你在阅读一个DOM代码段的时候，它有助于理解一个特定的类名是做什么的，特别是在多个开发者的团队里，前端工作者并不是唯一开发HTML组件的。 </li> </ul> <p>看一个非常小的例子：</p> <div> <div class="syntaxhighlighter notranslate xhtml ie" id="highlighter_318853"> <div class="toolbar"><span>?</span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> </td> <td> <div class="container"> <div class="line number1 index0 alt2">&lt;div class="news"&gt; </div> <div class="line number2 index1 alt1">&#160;&#160;&lt;h2&gt;News&lt;/h2&gt; </div> <div class="line number3 index2 alt2">&#160;&#160;[news content] </div> <div class="line number4 index3 alt1">&lt;/div&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p>这里的类名“news”不会告诉你任何信息，从内容上看，它本身就不是很明显。关于这个组件的总体结构没有给你提供信息，它不能够用于非“news”的内容。试着将你的类名语义和实际的内容紧密结合，会降低架构可扩展性的能力和被其他开发者使用的易用性。</p> <h2>内容独立的类名</h2> <p>在一个设计里，另一种方法是根据重复结构和功能模式衍生类名语义。复用性最高的组件是那些内容独立的类名。</p> <p>我们不应该担心层与层之间的连接是否清晰明确，应该担心那些反映具体内容的类名。这样做并不是意味着类名“无语义”，它仅仅意味着这些类名的语义不是根据内容衍生出来的。如果一些额外的HTML元素有助于创造更强大的、灵活的、可重用的组件，我们就不介意使用额外的HTML元素，这只是意味着你使用了更多的元素来标记内容。</p> <h2><span class="wp_keywordlink_affiliate">前端架构</span></h2> <p>一个组件、模版、面向对象的架构的目的是能够开发一些可重用的组件，这些组件包含了一系列不同的内容类型。类名语义在大型应用程序里的重要性在于它是由实用性衍生出来并且很好的服务于这个组件的主要目的-为开发人员提供有意义，灵活，可复用的表现或行为性的接口，以便使用。</p> <h3>可复用、可组合的组件</h3> <p>总的来说，可扩展的HTML或CSS必须依赖HTML里的类来创建可复用的组件。一个灵活的、可复用的组件既不是依赖于存在的DOM树里的某个部分，也不需要使用特定的元素类型。它应该能够适应不同的容器，并且可以容易的加上样式。如果有必要，添加额外的HTML元素（除了那些仅用来标记内容的HTML元素）可以用来创建更强健的组件。一个很好的例子就是Nicole Sullivan所说的的media object.</p> <p>易于组合的组件得益于使用选择器类型，而避免使用类型选择器。下面的例子降低了btn部分和uilist部分易组合性。问题在于.btn的优先级比.uilist a（会覆盖重复的属性样式）的优先级低，并且uilist需要a作为子结点。</p> <div> <div class="syntaxhighlighter notranslate css ie" id="highlighter_61521"> <div class="toolbar"><span>?</span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> </td> <td> <div class="container"> <div class="line number1 index0 alt2">.btn { /* styles */ } </div> <div class="line number2 index1 alt1">.uilist { /* styles */ } </div> <div class="line number3 index2 alt2">.uilist a { /* styles */ }</div> </div> </td> </tr></tbody></table> </div> </div> <div> <div class="syntaxhighlighter notranslate xhtml ie" id="highlighter_195112"> <div class="toolbar"><span>?</span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> </td> <td> <div class="container"> <div class="line number1 index0 alt2">&lt;nav class="uilist"&gt; </div> <div class="line number2 index1 alt1">&#160;&#160;&lt;a href="#"&gt;Home&lt;/a&gt; </div> <div class="line number3 index2 alt2">&#160;&#160;&lt;a href="#"&gt;About&lt;/a&gt; </div> <div class="line number4 index3 alt1">&#160;&#160;&lt;a class="btn" href="#"&gt;Login&lt;/a&gt; </div> <div class="line number5 index4 alt2">&lt;/nav&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p>提高一个组件部分和uilist部分的易组合性的一个方法是使用类给子DOM元素添加样式。这样可以减少样式规则的特性，但是最大的好处就是允许你将结构上的样式应用到任何类型的子节点上。</p> <div> <div class="syntaxhighlighter notranslate css ie" id="highlighter_129849"> <div class="toolbar"><span>?</span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> </td> <td> <div class="container"> <div class="line number1 index0 alt2">.btn { /* styles */ } </div> <div class="line number2 index1 alt1">.uilist { /* styles */ } </div> <div class="line number3 index2 alt2">.uilist-item { /* styles */ }</div> </div> </td> </tr></tbody></table> </div> </div> <div> <div class="syntaxhighlighter notranslate xhtml ie" id="highlighter_697434"> <div class="toolbar"><span>?</span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> </td> <td> <div class="container"> <div class="line number1 index0 alt2">&lt;nav class="uilist"&gt; </div> <div class="line number2 index1 alt1">&#160;&#160;&lt;a class="uilist-item" href="#"&gt;Home&lt;/a&gt; </div> <div class="line number3 index2 alt2">&#160;&#160;&lt;a class="uilist-item" href="#"&gt;About&lt;/a&gt; </div> <div class="line number4 index3 alt1">&#160;&#160;&lt;span class="uilist-item"&gt; </div> <div class="line number5 index4 alt2">&#160;&#160;&#160;&#160;&lt;a class="btn" href="#"&gt;Login&lt;/a&gt; </div> <div class="line number6 index5 alt1">&#160;&#160;&lt;/span&gt; </div> <div class="line number7 index6 alt2">&lt;/nav&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <h3>Javascript特定类</h3> <p>使用javascript特定类有助于降低因组件主题样式或结构改变而导致原来应用在上面的javascript不起作用的风险。我发现一个方法是使用某些只给javascript使用的类&#8212;&#8212;js-*&#8212;&#8212;不给这些特殊类添加任何样式呈现。</p> <div> <div class="syntaxhighlighter notranslate xhtml ie" id="highlighter_624624"> <div class="toolbar"><span>?</span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> </td> <td> <div class="container"> <div class="line number1 index0 alt2">&lt;a href="/login" class="btn btn-primary js-login"&gt;&lt;/a&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p>改变组件的结构或主题将无意中影响任何所需的JavaScript行为和复杂的功能，使用这种方法，你可以减少这种无意中的情况发生。</p> <h3>组件修饰符</h3> <p>组件经常会有些变化，和基组件的呈现有稍微的不同，如不同颜色背景或者边框。有两种模式可以使用来达到这些变化。我把这两种模式称为“单类”模式和“多类”模式。</p> <h4>“单类”模式</h4> <div> <div class="syntaxhighlighter notranslate css ie" id="highlighter_817663"> <div class="toolbar"><span>?</span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td> <div class="container"> <div class="line number1 index0 alt2">.btn, .btn-primary { /* button template styles */ } </div> <div class="line number2 index1 alt1">.btn-primary { /* styles specific to save button */ }</div> </div> </td> </tr></tbody></table> </div> </div> <div> <div class="syntaxhighlighter notranslate xhtml ie" id="highlighter_952666"> <div class="toolbar"><span>?</span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td> <div class="container"> <div class="line number1 index0 alt2">&lt;button class="btn"&gt;Default&lt;/button&gt; </div> <div class="line number2 index1 alt1">&lt;button class="btn-primary"&gt;Login&lt;/button&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <h4>“多类”模式</h4> <div> <div class="syntaxhighlighter notranslate css ie" id="highlighter_202923"> <div class="toolbar"><span>?</span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td> <div class="container"> <div class="line number1 index0 alt2">.btn { /* button template styles */ } </div> <div class="line number2 index1 alt1">.btn-primary { /* styles specific to primary button */ }</div> </div> </td> </tr></tbody></table> </div> </div> <div> <div class="syntaxhighlighter notranslate javascript ie" id="highlighter_819420"> <div class="toolbar"><span>?</span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> </td> <td> <div class="container"> <div class="line number1 index0 alt2">&lt;button class="btn"&gt;Default&lt;/button&gt; </div> <div class="line number2 index1 alt1">&lt;button class="btn btn-primary"&gt;Login&lt;/button&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p>在使用“单类”模式时，如果你使用了预处理器，你可能使用Sass的@extend功能减少一些维护的工作。然而，即使有预处理器的帮助，我优先选择的是使用“多类”模式，在HTML里添加类修饰符。</p> <p>我发现“多类”模式是一个更具有扩展性的模式。例如，使用基于btn的组件，进一步添加了5种按钮类型和3种按钮尺寸。使用“多类”模式，最终你需要9个类，通过混合匹配达到效果。但是使用“单类”模式你需要24个类。</p> <p>如果需要，使用组件修饰符也比较容易根据上下文调整一个组件。比如你可能在另一个组件里对btn的外观要做些细微的调整，可以这么做：</p> <div> <div class="syntaxhighlighter notranslate css ie" id="highlighter_137021"> <div class="toolbar"><span>?</span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> </td> <td> <div class="container"> <div class="line number1 index0 alt2">/* "multi-class" adjustment */</div> <div class="line number2 index1 alt1">.thing .btn { /* adjustments */ } </div> <div class="line number3 index2 alt2">&#160;&#160;</div> <div class="line number4 index3 alt1">/* "single-class" adjustment */</div> <div class="line number5 index4 alt2">.thing .btn, </div> <div class="line number6 index5 alt1">.thing .btn-primary, </div> <div class="line number7 index6 alt2">.thing .btn-danger, </div> <div class="line number8 index7 alt1">.thing .btn-etc { /* adjustments */ }</div> </div> </td> </tr></tbody></table> </div> </div> <p>“多类”模式意味着你只需要一个单独的内部组件选择器去匹配任意类型的btn&#8212;&#8212;在这个组件里被应用了btn的样式元素。“单类”模式意味着你需要写出任何可能的按钮类型，并且在任何时候改变了一个按钮的外观，你都需要调整这个选择器。</p> <h2>结构化类名</h2> <p>当创建组件时&#8212;&#8212;并添加了“主题“&#8212;&#8212;一些类用于区分不同的组件，一些类用于组件修饰符，一些类和DOM结点关联，他们被包含在一个较大的抽象呈现组件里。</p> <p>很难判断btn（组件）、btn-primary(修饰符)、btn-group(组件)和btn-group-item（组件子对象）之间的关系，因为这些名字不能清楚的使人明白这些类的用途。没有一致的模式。</p> <p>在过去的一年里我一直在尝试命名模式，这种模式能够帮助我更快的理解DOM片段里结点间的关系，而不是试着来回的在HTML、CSS和JS文件之间查看， 拼凑出网站的架构。这种模式主要受BEM系统方法命名的影响，但是，被我改编成一种更容易阅读的形式。</p> <blockquote> <pre>t-template-name t-template-name--modifier-name t-template-name__sub-object t-template-name__sub-object--modifier-name component-name component-name--modifier-name component-name__sub-object component-name__sub-object--modifier-name is-state-type js-action-name js-component-type</pre> </blockquote> <p>我把一些结构当做抽象的“模板”，其它则当作更清晰的组件（通常建立在“模板”上）。但是这种区分并非总是必要的。</p> <p>这只不过是我目前发现的一个命名模式而已。它可以采取任何形式。但是这种模式的好处在于它消除了那些只依赖（单）连接符，或者下划线，或者是驼峰格式的模糊的类名。</p> <h2>原始文件大小和HTTP压缩</h2> <p>任何关于模块化与可扩展的CSS的讨论关心的是文件大小和“膨胀“。Nicole Sullivan的言论中经常会提到文件大小存储（以及维护改进），并提到了像Facebook这样的公司采用这种方法的经历。进一步的，我想我会分享我在预处理输出时的HTTP压缩效果，以及大量使用HTML类的一些事情。</p> <p>当Twitter 的Bootstrap刚面世时，我重写了编译好的CSS，以便更好地与手动操作的文件比较大小。在最小化两个文件之后，手动操作的CSS文件比预处理程序输出的小10%。但是当两个文件都通过gzip压缩后，预处理程序输出的CSS文件比手动操作的小了5%。</p> <p>这强调了比较HTTP压缩后文件大小的重要性，因为减小文件大小并不能说明一切。它暗示了有经验的CSS开发者在用预处理程序时不必太过关心编译后的CSS中有一定程度的重复，因为经过HTTP压缩后，文件将变得更小。通过预处理程序处理更易于维护的CSS代码所带来的好处，要胜过关注原始CSS和压缩后输出的CSS的美观或文件大小。</p> <p>在另一个实验中，我从网站上弄了一个60KB的HTML文件（由很多可重用的组件组成），删除了它的每一个class属性（attribute）。这样处理之后，文件减小到25KB。当原始文件与修改过的文件都通过gzip压缩后，它们的大小分别变为7.6KB和6KB&#8212;&#8212;只相差1.6KB。自由使用class所导致的实际文件大小的结果已经不值得再去强调了。</p> <h2>我如何学会停止担忧的…</h2> <p>多年来，许多技术熟练的开发人员的经验，已经改变了大型网站和应用程序的开发方式。尽管如此，对于个人来说，放弃“语义化的HTML”的观念，意味着将由内容来决定类名（即使非要这么做，也只能作为最后的手段来使用），这通常需要你开发完一个大型的应用程序后，才能够强烈地意识到这种做法不靠谱的一面。你必须准备好抛弃老观念，寻找替代方案，甚至重新审视以前已被你摒弃的方法。</p> <p>一旦你开始写大型的网站和应用，你和其他人不仅必须去维护它，而且还得积极地迭代改进。你很快会意识到即使你尽了最大的努力，你的代码仍然开始变得越来越难以维护。已经有一些人提出了他们自己的方法来解决这些问题：Nicole的博客和面向对象的CSS项目，Jonathan Snook的可扩展的模块化结构CSS，以及Yandex开发的BEM方法。这些方法值得我们花时间去探索。</p> <p>当你选择了以减少编写和编辑CSS的时间为目的的方式来编写HTML和CSS时，那么如果你想改变它们的样式，你就必须接受花更多的时间去改变HTML元素的class。无论是前端还是后端开发者 &#8212;&#8212; 任何人都可以重新排列预建的“乐高积木”，这将是相当实用的；事实证明，没有人会CSS魔法。</p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">对 HTML5 和 CSS3 支持最好的是 Chrome，IE10 已经能和 Safari、Firefox、Opera 旗鼓相当了。总的来说，各大浏览器对 HTML5 和 CSS3 的支持正在不断完善，越来越多的各大企业和开发者也在尝试在项目中使用 HTML5 和 CSS3，特别是在移动互联网领域，已经有很多优秀的应用</font> </td> </tr></tbody></table> <p>转眼又已过去了一年，在这一年里，Firefox 和 Chrome 在拼升级，版本号不断飙升；IE10 随着 Windows 8 在去年10月底正式发布，在 JavaScript 性能和对 HTML5 和 CSS3 的支持方面让人眼前一亮。这篇文章给大家带来《五大主流浏览器&#160;<strong>HTML5</strong>&#160;和&#160;<strong>CSS3</strong>&#160;兼容性大比拼》，让我们一起来看看2013年的浏览器现状。</p> <p><img class="aligncenter" alt="" src="http://www.webjx.com/files/allimg/130606/0948590.jpg"></p> <p>浏览器厂商之间的竞争促使各大浏览器对&#160;<strong>HTML5</strong>&#160;和&#160;<strong>CSS3</strong>&#160;的 支持越来越完善，下面的图表列出了 IE，Chrome，Firefox， Safari，Opera 五大主流浏览器，在 Mac 和 Windows 两个平台，对 HTML5 和 CSS3 各种特性最新的支持情况的详细清单（个别数据可能不准确，大家可以通过&#160;<strong><a href="http://www.caniuse.com/" target="_blank">caniuse.com</a></strong>&#160;查询更为详细的信息）。</p> <h3>CSS3 属性</h3> <p>从表中可以看出，除了 Overflow Scrolling 还没有浏览器支持之外，其它属性都已经有浏览器实现了。在 Windows 平台，Chrome 支持除 Overflow Scrolling 以外的所有属性（图片数据有误，CSS3 3D Transforms 在 Chrome 25 开始已支持，需要加 -webkit- 前缀），其次支持比较好的是 Firefox，还不支持 CSS3 Reflections。</p> <p>曾经一片红叉的 IE 开始迎头赶上，IE10 已经和能和 Opera 比拼了。在 Mac 平台情况要好很多，Safari 、Chrome 和&#160;Firefox 几乎支持全部的&#160;<strong>CSS3</strong>&#160;特性。Opera 也只有少数几个属性不支持。</p> <p>（注：CSS3 的&#160;Overflow Scrolling 属性用于模拟移动设备原生的阻尼滚动，类似于&#160;<strong>iScroll</strong>&#160;实现的滚动效果，目前只有 iOS 5 内置的 Sarari 浏览器支持，详情：<a href="http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/" target="_blank">Native style momentum scrolling to arrive in iOS 5</a>）</p> <p><img class="aligncenter" alt="" src="http://www.webjx.com/files/allimg/130606/0948591.jpg"></p> <h3>CSS3 选择器</h3> <p><strong>CSS3</strong>&#160;选择器兼容情况最让人欣慰，除了 IE9 以下的版本，其它浏览器已全部支持&#160;<strong>CSS3</strong>&#160;选择器特性。IE6 悲剧的一个都不支持，IE7 和 IE8 仅支持少部分，IE9 和 IE10 给力，竟然也全部支持。</p> <p><img class="aligncenter" alt="" src="http://www.webjx.com/files/allimg/130606/0948592.jpg"></p> <h3>HTML5 Web 应用程序</h3> <p>HTML5 为支持 Web 应用程序开发新增的这些特性是&#160;<strong>HTML5</strong>&#160;最激动人心的部分，包括本地存储、离线存储、地理定位、Workers 和 WebSockets 等等。Chrome 最给力，支持全部特性（表中数据有误，Touch（触控）事件，Chrome 25 和 Firefox 19 已支持）。</p> <p>WebSQL Database 已经被 W3C 放弃了，浏览器不支持也没关系，而 Indexd Database，IE10、Chrome 和 Firefox 都支持，这是开发者的福音啊。IE10 很给力，就 Meter 标签和 Touch Event 不支持。</p> <p><img class="aligncenter" alt="" src="http://www.webjx.com/files/allimg/130606/0948593.jpg"></p> <h3>HTML5 图形和内嵌内容</h3> <p>这应该是&#160;<strong>HTML5</strong>&#160;最令人期待的东西了，内置Canvas，Audio，Video，SVG、WebGL 和 SMIL 等重要特性对象。Chrome、Firefox、Safari、Opera 以及 IE9/IE10 都支持，太棒了！</p> <p><img class="aligncenter" alt="" src="http://www.webjx.com/files/allimg/130606/0948594.jpg"></p> <h3>HTML5 音频编码</h3> <p>Chrome 依然给力，对&#160;<strong>HTML5</strong>&#160;音频格式又是全部支持，Safari 除 Ogg Vorbis 格式外全部支持。让人感到奇怪的是 IE 竟然不支持自家的 WAV 格式，而 Chrome、Firefox、Opera 和 Sarari 却都支持，⊙</p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">SVG全称是Scalable Vector Graphics，如果你使用过adobe Illustrator的话，相信你对这种适量格式的图片并不陌生！</font> </td> </tr></tbody></table> <p><img class="aligncenter" alt="HTML5/CSS3系列教程：使用SVG图片 " src="http://www.webjx.com/files/allimg/130607/1020120.jpg"></p> <p>在我们开始使用SVG前，让我们先了解一下&#160;SVG，并且解释一下为什么使用SVG。</p> <p>SVG全称是Scalable Vector Graphics，如果你使用过adobe&#160;Illustrator的话，相信你对这种适量格式的图片并不陌生！</p> <h2>为什么使用SVG？</h2> <ul> <li>文件非常小 </li> <li>能够无损失的缩放尺寸 </li> <li>在Retina显示屏上效果超棒 </li> <li>能够控制图片样式设计，例如互动和过滤filter </li> </ul> <h2>浏览器支持</h2> <ul> <li>IE8及其更低版本不支持 </li> <li>Android 2.3及其更低版本不支持 </li> <li>其它浏览器都支持 </li> </ul> <p>如果你需要支持这些版本的浏览器的话，你可以使用Modernizr，如下：</p> <div> <div class="syntaxhighlighter notranslate javascript ie" id="highlighter_878914"> <div class="toolbar"><span></span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">if (!Modernizr.svg) { </div> <div class="line number2 index1 alt1">&#160;&#160;$(".gblogo img").attr("src", "images/logo.png"); </div> <div class="line number3 index2 alt2">}</div> </div> </td> </tr></tbody></table> </div> </div> <p>或者使用如下更简单的代码：</p> <div> <div class="syntaxhighlighter notranslate xhtml ie" id="highlighter_419998"> <div class="toolbar"><span></span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;img src="gblogo.svg" onerror="this.onerror=null; this.src="gblogo.png""&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <h2>SVG文件作为一般图片使用</h2> <p><img class="aligncenter" alt="" src="http://www.webjx.com/files/allimg/130607/1020121.jpg"></p> <p>你可以作为图片来直接使用，如下：</p> <div> <div class="syntaxhighlighter notranslate xhtml ie" id="highlighter_256741"> <div class="toolbar"><span></span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;img src="logo.svg" alt="gbtags logo"&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <h2>SVG文件作为背景图片使用</h2> <p>我们也可以使用<span class="wp_keywordlink_affiliate"><a title="查看 SVG图片 中的全部文章" target="_blank" href="http://www.csswang.com/tag/svg%e5%9b%be%e7%89%87">SVG图片</a></span>作为背景图片使用，如下：</p> <div> <div class="syntaxhighlighter notranslate css ie" id="highlighter_586785"> <div class="toolbar"><span></span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;a href="http://www.webjx.com" class="logo"&gt; </div> <div class="line number2 index1 alt1">&#160;&#160;csswang.com </div> <div class="line number3 index2 alt2">&lt;/a&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p><strong>css代码:</strong></p> <div> <div class="syntaxhighlighter notranslate css ie" id="highlighter_294983"> <div class="toolbar"><span></span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">.logo { </div> <div class="line number2 index1 alt1">&#160;&#160;display: <div class="line number3 index2 alt2">&#160;&#160;text-indent: <div class="line number4 index3 alt1">&#160;&#160;width: <div class="line number5 index4 alt2">&#160;&#160;height: <div class="line number6 index5 alt1">&#160;&#160;background: <div class="line number7 index6 alt2">&#160;&#160;background-size: <div class="line number8 index7 alt1">}</div> </div> </div> </div> </div> </div> </div> </div> </td> </tr></tbody></table> </div> </div> <h2>使用行内SVG</h2> <p>你可以直接将SVG代码拷贝到body中，将会看到图片，如下：</p> <div> <div class="syntaxhighlighter notranslate xhtml ie" id="highlighter_351935"> <div class="toolbar"><span></span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;body&gt;&#160;&#160;&#160;&#160; </div> <div class="line number2 index1 alt1">&lt;!-- 将SVG代码拷贝到此处，将会显示图片&#160; --&gt;&#160;</div> <div class="line number3 index2 alt2">&lt;/body&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <h2>使用CSS控制SVG</h2> <p>你可以使用CSS来控制SVG文件，下面代码将控制鼠标悬浮时的图片背景颜色：</p> <div> <div class="syntaxhighlighter notranslate xhtml ie" id="highlighter_349061"> <div class="toolbar"><span></span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;g class="logo" transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"</div> <div class="line number2 index1 alt1">fill="#000000" stroke="none"&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p>以上代码定义了一个logo的class，然后我们可以在CSS定义如下：</p> <div> <div class="syntaxhighlighter notranslate css ie" id="highlighter_919252"> <div class="toolbar"><span></span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">.logo:hover{ </div> <div class="line number2 index1 alt1">&#160;&#160;&#160;&#160;fill: <div class="line number3 index2 alt2">&#160;&#160;&#160;&#160;... </div> <div class="line number4 index3 alt1">}</div> </div> </div> </td> </tr></tbody></table> </div> </div> <p>注意SVG中我们使用fill而不是background来定义背景色。</p> <p>甚至可以使用filter来控制模糊度，如下：</p> <div> <div class="syntaxhighlighter notranslate css ie" id="highlighter_15714"> <div class="toolbar"><span></span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">.logo:hover{ </div> <div class="line number2 index1 alt1">&#160;&#160;&#160;&#160;fill: <div class="line number3 index2 alt2">&#160;&#160;&#160;&#160;filter: <div class="line number4 index3 alt1">}</div> </div> </div> </div> </td> </tr></tbody></table> </div> </div> <p>当你使用鼠标hover图片时，会有如下效果。</p> <p><img class="aligncenter" alt="" src="http://www.webjx.com/files/allimg/130607/1020122.jpg"></p> <p>在线调试：<a target="_blank" href="http://www.gbtags.com/gb/debug/acfcf33e-db11-4b71-bdcb-d38e99fdcef3.htm">http://www.gbtags.com/gb/debug/acfcf33e-db11-4b71-bdcb-d38e99fdcef3.htm</a></p> <h2>SVG相关工具</h2> <ul> <li>在线转<span class="wp_keywordlink_affiliate"><a title="查看 SVG工具 中的全部文章" target="_blank" href="http://www.csswang.com/tag/svg%e5%b7%a5%e5%85%b7">SVG工具</a></span>：<a href="http://image.online-convert.com/convert-to-svg">http://image.online-convert.com/convert-to-svg</a> </li> <li>微软的SVG filter效果展示工具：<a href="http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm">http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm</a> </li> <li>SVG减肥工具：<a href="http://www.mobilefish.com/services/base64/base64.php">http://www.mobilefish.com/services/base64/base64.php</a> </li> </ul> <h2>总结</h2> <p>SVG是一个非常强大的图片格式，可以帮助你高效的处理图片，拥有比JPG或者PNG更灵活强大的图形展示方式，相信如果加以时日，必定成为最流行的图片处理方式！</p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">html5 离线应用的说明这里就不多说了，需要请谷歌一下 或 百度一下 ，本文旨在介绍如何实现离线应用开发</font> </td> </tr></tbody></table> <p><span class="wp_keywordlink_affiliate">html5 离线</span>应用的说明这里就不多说了，需要请谷歌一下&#160;&#160;或&#160;百度一下&#160;，本文旨在介绍如何实现离线应用开发；</p> <h2>第1步：创建manifest文件，指定缓存文件清单；</h2> <p>可以先新建一个txt文本格式后缀的文件，第一行必须写入 CACHE MANIFEST；<br>第二行可选的写入一个注释说明 #version 1.0，注释以#开头，这里的意思是说明版本号；<br>第三行开始每行一个相对当前文件目录的文件路径，如：<br>static/img/logo.png<br>static/css/style.css<br>一个基本的manifest文件就写好了，把这个文件的后缀改成.manifest既可；</p> <h2>第2步：在html文件中指定文档的manifest属性为cache.mnifest文件的路径；</h2> <p>&lt;html manifest=”cacheData.manifest”&gt;<br>添加好manifest属性后加载页面，在缓存配置文件里的文件就会被离线缓存，再次刷新时就不会从服务器上读取；</p> <h2>第3步：通过API接口刷新缓存；</h2> <p>用JS通过window.applicationCache来获取离线缓存对象，通过调用update方法：window.applicationCache.update() 来调用当前缓存文件下载，下载完成后会触发离线缓存对象的updateready事件，通过绑定事件执行swapCache方法来清除缓存：window.applicationCache.swapCache() ，这个不会使得之前加载的资源突然被重新加载，只是在此之后发出请求页面的资源是最新的；</p> <p>通过以上简单的三步就可以实现HTML5离线应用。</p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">Web 标准中处处充满了打脸行为，这条规则现在已经失效了！在那篇文章发布一个月后，HTML5doctor 发表了 “Block-level” links in HTML5，引述一下，就是原先你要这么写.</font> </td> </tr></tbody></table> <p>英文叫做 “Block-level” links，我以为只有我厂那些鸟毛不知道，没想到不知道的还挺多，需要普及一下。</p> <p align="center"><img class="aligncenter" alt="" src="http://www.webjx.com/files/allimg/130717/1214090.png"></p> <p>很遗憾，Web 标准中处处充满了打脸行为，这条规则现在已经失效了！在那篇文章发布一个月后，HTML5doctor 发表了 “Block-level” links in HTML5，引述一下，就是原先你要这么写：</p> <p>&lt;div class="story"&gt; <br>&lt;h3&gt;&lt;a href="story1.html"&gt;Bruce Lawson voted sexiest man on Earth&lt;/a&gt;&lt;/h3&gt; <br>&lt;p&gt;&lt;a href="story1.html"&gt;&lt;img src="bruce.jpg" alt="full story. " /&gt;A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.&lt;/a&gt;&lt;/p&gt; <br>&lt;p&gt;&lt;a href="story1.html"&gt;Read more&lt;/a&gt;&lt;/p&gt; <br>&lt;/div&gt; </p> <p>现在 HTML5 中可以这么写</p> <p>&lt;article&gt; <br>&lt;a href="story1.html"&gt; <br>&lt;h3&gt;Bruce Lawson voted sexiest man on Earth&lt;/h3&gt; <br>&lt;p&gt;&lt;img src="bruce.jpg" alt="gorgeous lovebundle. "&gt;A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.&lt;/p&gt; <br>&lt;p&gt;Read more&lt;/p&gt; <br>&lt;/a&gt; <br>&lt;/article&gt; </p> <p>从无障碍角度考虑仅仅增加了图片的 alt 描述文字（为读屏用户提供更详细的信息），而不需人为的制造辣么多个“冗余”的 a！HTML5 的思想中的一条就是务实，用现在的话说就是接地气，嗯哼~</p> <p>虽然这种写法不向前兼容，但经过 HTML5 doctor 的测试表明，主流浏览器都支持，也就是说：</p> <p>你和你的小伙伴们现在就可以在项目中使用啦！<br>为了兼容 IE6/7 的手型 bug，需要在 reset.css 中加入诸如这样的代码：</p> <p>1 a div, a h3, a p, ...{#cursor:hand} </p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">WEB标准-HTML元素嵌套.</font> </td> </tr></tbody></table> <p>先来看以下这样一段代码：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_483721"> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;ul&gt; </div> <div class="line number2 index1 alt1">&#160;&#160;&#160;&lt;li&gt;&lt;h4&gt;&lt;a href=""&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;/h4&gt;&lt;/li&gt; </div> <div class="line number3 index2 alt2">&#160;&lt;/ul&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p>当然，我是不会告诉你这段代码来自于FACEBOOK的 ，各位认为以上元素的嵌套有没有问题呢？我们会在后面讨论这个。</p> <h2>HTML4/XHTML的嵌套规则</h2> <p>在我们的印象中会有这样的嵌套规则：</p> <p><img width="510" height="376" class="aligncenter" alt="html4" src="http://www.webjx.com/files/allimg/130722/0946010.png"></p> <blockquote> <p><span class="wp_keywordlink_affiliate">内联元素</span>不能嵌套块元素&lt;p&gt;元素和&lt;h1~6&gt;元素不能嵌套块元素</p> </blockquote> <p>那么到底什么是<strong>块元素</strong>，什么是<strong><span class="wp_keywordlink_affiliate">内联元素</span></strong>？</p> <p>以下是W3C&#160;CSS2.1规范中对块元素和<span class="wp_keywordlink_affiliate">内联元素</span>的定义：</p> <blockquote> <p><strong><dfn>Block-level elements</dfn></strong>&#160;are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the ‘display’&#160;&#160;property make an element block-level: ‘block’, ‘list-item’, and ‘table’.</p> <p><strong><dfn>Inline-level elements</dfn></strong>&#160;are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the&#160;‘display’&#160;property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generate&#160;<dfn>inline-level boxes</dfn>, which are boxes that participate in an inline formatting context.</p> </blockquote> <p>我们可以这样理解：块元素一般都从新行开始，内联元素在一行内显示，我们也可以通过CSS属性display的’inline’ 或 ‘ block’ 来改变元素为内联元素或块元素，当然这是CSS中对元素的分类，显然用 ‘display’ 的属性值来对html元素进行分类是不严谨的。</p> <p>如果按照上述规则来讲，那么FACEBOOK的做法就是一种错误的做法，因为他在内联元素&lt;a&gt;元素中嵌套了块元素元素&lt;div&gt;，但是细心的读者应该会发现上述规则是基于HTML4/xHTML1的strict模式，而FACEBOOK现在已经统一使用了html5的doctype，那么这个规则到底还是是否适用？</p> <h2>HTML5的元素嵌套规则</h2> <p>元素的嵌套规则和页面头部申明的DTD有着千丝万缕的关系，DTD基础请查看我之前写的文章《DTD详解》，那么在最新的HTML5规范中是否对元素嵌套有着新的规范呢？</p> <p>让我们先了解下W3C在最新的HTML5规范中对元素的分类方式：</p> <p><img class="aligncenter" alt="w3c html5 content" src="http://www.webjx.com/files/allimg/130722/0946011.png"></p> <p>如上图，元素的分类不再是块元素或内联元素这样来分类（其实从来就没有这样分），而是按照如下分类来分：<strong>Flow</strong>（流式元素）、<strong>Heading</strong>（标题元素）、<strong>Sectioning</strong>（章节元素）、<strong>Phrasing</strong>（段落元素）、<strong>Embedded</strong>（嵌入元素）、<strong>Interactive</strong>（交互元素）、<strong>Metadata</strong>（元数据元素）。</p> <h3> <strong>Flow</strong>（流式元素）</h3> <p>在应用程序和文档的主体部分中使用的大部分元素都被分类为<strong id="flow-content">流式元素</strong>。</p> <blockquote> <p>a，&#160;abbr，&#160;address，&#160;area（如果它是map元素的后裔），&#160;article，&#160;aside，&#160;audio，&#160;b，&#160;bdi，&#160;bdo，&#160;blockquote，&#160;br，&#160;button，&#160;canvas，&#160;cite，&#160;code，&#160;command，&#160;datalist，&#160;del，&#160;details，&#160;dfn，&#160;div，&#160;dl，em，&#160;embed，&#160;fieldset，&#160;figure，&#160;footer，&#160;form，&#160;h1，&#160;h2，&#160;h3，&#160;h4，&#160;h5，&#160;h6，&#160;header，&#160;hgroup，&#160;hr，&#160;i，&#160;iframe，&#160;img，&#160;input，&#160;ins，&#160;kbd，&#160;keygen，&#160;label，&#160;map，&#160;mark，&#160;math，&#160;menu，&#160;meter，nav，&#160;noscript，&#160;object，&#160;ol，&#160;output，&#160;p，&#160;pre，&#160;progress，&#160;q，&#160;ruby，&#160;s，&#160;samp，&#160;script，&#160;section，&#160;select，&#160;small，&#160;span，&#160;strong，&#160;style（如果该元素设置了scoped属性），&#160;sub，&#160;sup，&#160;svg，&#160;table，textarea，&#160;time，&#160;u，&#160;ul，&#160;var，&#160;video，&#160;wbr，&#160;text</p> </blockquote> <h3> <strong>Heading</strong>（标题元素）</h3> <p><strong id="heading-content">标题式元素</strong>定义一个区块/章节（section）（无论是明确的使用章节式内容的元素标记，或者标题式内容自身所隐含的）的标题。</p> <blockquote> <p>h1，&#160;h2，&#160;h3，&#160;h4，&#160;h5，&#160;h6，&#160;hgroup</p> </blockquote> <h3> <strong>Sectioning</strong>（章节元素）</h3> <p><strong id="sectioning-content">章节式元素</strong>是用于定义标题及页脚范围的元素。</p> <blockquote> <p>article，&#160;aside，&#160;nav，&#160;section</p> </blockquote> <h3> <strong>Phrasing</strong>（段落元素）</h3> <p><strong id="phrasing-content">段落式元素</strong>是文档中的文本、标记段落级文本的元素。</p> <blockquote> <p>a（如果其只包含段落式元素），&#160;abbr，&#160;area（如果它是map元素的后裔），&#160;audio，&#160;b，&#160;bdi，&#160;bdo，&#160;br，&#160;button，&#160;canvas，&#160;cite，&#160;code，&#160;command，&#160;datalist，&#160;del（如果其只包含段落式元素），&#160;dfn，&#160;em，&#160;embed，&#160;i，iframe，&#160;img，&#160;input，&#160;ins（如果其只包含段落式元素），&#160;kbd，&#160;keygen，&#160;label，&#160;map（如果其只包含段落式元素），&#160;mark，&#160;math，&#160;meter，&#160;noscript，&#160;object，&#160;output，&#160;progress，&#160;q，&#160;ruby，&#160;s，&#160;samp，&#160;script，select，&#160;small，&#160;span，&#160;strong，&#160;sub，&#160;sup，&#160;svg，&#160;textarea，&#160;time，&#160;u，&#160;var，&#160;video，&#160;wbr，&#160;text</p> </blockquote> <h3> <strong>Embedded</strong>（嵌入元素）</h3> <p><strong id="embedded-content">嵌入式元素</strong>是引用或插入到文档中其他资源的元素。</p> <blockquote> <p>audio，&#160;canvas，&#160;embed，&#160;iframe，&#160;img，&#160;math，&#160;object，&#160;svg，&#160;video</p> </blockquote> <h3> <strong>Interactive</strong>（交互元素）</h3> <p><strong id="interactive-content">交互式元素</strong>是专门用于与用户交互的元素。</p> <blockquote> <p>a，&#160;audio（如果设置了controls属性），&#160;button，&#160;details，&#160;embed，&#160;iframe，&#160;img（如果设置了usemap属性），&#160;input（如果type属性不为hidden状态），&#160;keygen，&#160;label，&#160;menu（如果type属性为toolbar状态），object（如果设置了usemap属性），&#160;select，&#160;textarea，&#160;video（如果设置了controls属性）</p> </blockquote> <h3> <strong>Metadata</strong>（元数据元素）</h3> <p><strong>元数据元素</strong>是可以被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素</p> <blockquote> <p>base，command，link，meta，noscript，script，style，title</p> </blockquote> <p><em>各分类会有交叉或重叠的现象，这说明在html5中，元素可能属于上述所有分类中的一个或多个。</em></p> <h3>例子(1)：&lt;h1&gt;~&lt;h6&gt;元素：</h3> <ul> <li> <strong>Categories:</strong> <ul> <li>Flow content. </li> <li>Heading content. </li> <li>Palpable content. </li> </ul> </li> <li> <strong>Contexts in which this element can be used</strong>: <ul> <li>As a child of an&#160;hgroup&#160;element. </li> <li>Where&#160;flow content&#160;is expected. </li> </ul> </li> <li> <strong>Content model:</strong> <ul> <li>Phrasing content. </li> </ul> </li> </ul> <p>其中的「<strong>Categories</strong>」说明该元素的类别，「<strong>Contexts in which this element can be used</strong>」说明该元素能在何种场景下被使用，也就是它的父元素是什么，「<strong>Content model</strong>」说明该元素可以包含的内容是什么，由于页面中的元素是层层嵌套的，一个元素有可能既是父元素同时也是子元素的角色，所以下面我们以「<strong>Content model</strong>」也就是可包含的子元素做讨论。</p> <p><strong>那么对于h1~h6元素：</strong></p> <ul> <li>它们同时属于<strong>Flow content</strong>&#160;、<strong>Heading content</strong>&#160;和<strong>&#160;Palpable content</strong>三个分类 </li> <li>它们的父元素可以是&lt;hgroup&gt;，同时那些子元素是流式元素的元素也可以作为h1-h6元素的父元素 </li> <li>它们允许的子元素是段落式元素 </li> </ul> <h3>例子(2)：&lt;div&gt;元素</h3> <ul> <li> <strong>Categories:</strong> <ul> <li>Flow content. </li> <li>Palpable content. </li> </ul> </li> <li> <strong>Contexts in which this element can be used:</strong> <ul> <li>Where&#160;phrasing content&#160;is expected. </li> </ul> </li> <li>Content model: <ul> <li>Flow&#160;content. </li> </ul> </li> </ul> <p><strong>对于&lt;div&gt;元素：</strong></p> <ul> <li>同时属于<strong>Flow content</strong>&#160;、<strong>&#160;Palpable content</strong>分类 </li> <li>父元素必须是那些子元素为段落式元素的元素 </li> <li>允许的子元素是流式元素 </li> </ul> <p>&lt;div&gt;元素允许的子元素是流式元素，流式元素基本涵括了页面中的大部分元素，所以我们在用&lt;div&gt;时可以不用担心嵌套错误的问题。</p> <p>但对于&lt;h1&gt;~&lt;h6&gt;元素，它们允许的子元素为段落式元素，而段落式元素并不包含诸如&lt;div&gt;、&lt;p&gt;、&lt;ul&gt;&lt;ol&gt;之类的元素，这就说明按照html5的规范，是不允许在标题元素内部嵌入&lt;div&gt;、&lt;p&gt;、&lt;ul&gt;&lt;ol&gt;之类的元素。</p> <h3>例子(3)：&lt;a&gt;元素</h3> <ul> <li> <strong>Categories:</strong> <ul> <li>Flow content. </li> <li>Phrasing content. </li> <li>Interactive content. </li> <li>Palpable content. </li> </ul> </li> <li> <strong>Contexts in which this element can be used:</strong> <ul> <li>Where&#160;phrasing content&#160;is expected. </li> </ul> </li> <li> <strong>Content model:</strong> <ul> <li>Transparent, but there must be no&#160;interactive content&#160;descendant. </li> </ul> </li> </ul> <p><strong>对于&lt;a&gt;元素：</strong></p> <ul> <li>同时属于<strong>Flow content</strong>&#160;、<strong>&#160;Phrasing content</strong>、<strong>Interactive content</strong>、<strong>Palpable content</strong>分类 </li> <li>父元素必须是那些子元素为段落式元素的元素 </li> <li>允许的子元素是以它的父元素允许的子元素为准，但不能包含交互式元素 </li> </ul> <p>这样看&lt;a&gt;元素还是挺有意思的，允许的子元素要看它的父元素所能包含的子元素。</p> <h3>再来看文章开头中提到的代码</h3> <div> <div class="syntaxhighlighter notranslate xhtml ie" id="highlighter_790149"> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;ul&gt; </div> <div class="line number2 index1 alt1">&#160;&#160;&lt;li&gt;&lt;h4&gt;&lt;a href=""&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;/h4&gt;&lt;/li&gt; </div> <div class="line number3 index2 alt2">&lt;/ul&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p>这时&lt;a&gt;的父元素为&lt;h4&gt;，对于&lt;h1&gt;~&lt;h6&gt;的标题元素上面已经提过，允许的子元素是段落式元素，那么此时对于&lt;a&gt;允许的子元素即为段落式元素，而段落式元素中是不包含&lt;div&gt;元素的，所以<strong>FCAEBOOK这样的嵌套方法是错误的！</strong></p> <p>让我们来把代码做一下修改：</p> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_832947"> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;ul&gt; </div> <div class="line number2 index1 alt1">&#160;&#160;&#160;&lt;li&gt;&lt;div&gt;&lt;a href=""&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt; </div> <div class="line number3 index2 alt2">&#160;&lt;/ul&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p>这时&lt;a&gt;的父元素为&lt;div&gt;，而&lt;div&gt;元素允许的子元素是流式元素，流式元素中包含&lt;div&gt;元素，所以这样的情形下在&lt;a&gt;里面嵌套&lt;div&gt;就是正确的做法！</p> <h2>嵌套错误可能引起的问题</h2> <p>上面讲了HTML5对元素新的分类方式和以&lt;h1&gt;~&lt;h6&gt;、&lt;div&gt;、&lt;a&gt;元素举例讲述了各自的嵌套规则，但FACEBOOK即使不按照标准去嵌套也不会有大的错误问题，这就给我们带来了一个思考：嵌套错误到底会不会有问题？</p> <h3>例子(1)：开始与结束标签嵌套错误</h3> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_237599"> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;div&gt;&lt;h2&gt;内容&lt;/div&gt;&lt;/h2&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p><strong>测试结果：</strong></p> <p><img width="513" height="333" class="aligncenter" alt="element11" src="http://www.webjx.com/files/allimg/130722/0946012.png"></p> <h3>例子(2)：&lt;p&gt;元素嵌套&lt;div&gt;元素</h3> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_515492"> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;p&gt;&lt;div&gt;内容&lt;/div&gt;&lt;/p&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p><strong>测试结果：</strong></p> <p><img width="512" height="344" class="aligncenter" alt="element12" src="http://www.webjx.com/files/allimg/130722/0946013.png"></p> <h3>例子(3)：列表元素&lt;li&gt;兄弟元素为&lt;div&gt;</h3> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_147277"> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;ul&gt;&lt;li&gt;内容&lt;/li&gt;&lt;div&gt;内容&lt;/div&gt;&lt;/ul&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p><strong>测试结果：</strong></p> <p><img width="515" height="344" class="aligncenter" alt="element13" src="http://www.webjx.com/files/allimg/130722/0946014.png"></p> <h3>例子(4)：&lt;h2&gt;元素嵌套&lt;div&gt;元素</h3> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_469667"> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;h2&gt;&lt;div&gt;内容&lt;/div&gt;&lt;/h2&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p><strong>测试结果：</strong></p> <p><img width="513" height="314" class="aligncenter" alt="element14" src="http://www.webjx.com/files/allimg/130722/0946015.png"></p> <h3>例子(5)：&lt;a&gt;元素嵌套&lt;a&gt;元素</h3> <div> <div class="syntaxhighlighter notranslate html ie" id="highlighter_208225"> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">&lt;a href=""&gt;&lt;a href=""&gt;内容&lt;/a&gt;&lt;/a&gt;</div> </div> </td> </tr></tbody></table> </div> </div> <p><strong>测试结果：</strong></p> <p><img width="513" height="326" class="aligncenter" alt="element15" src="http://www.webjx.com/files/allimg/130722/0946016.png"></p> <p>通过上述例子，我们总结如下：</p> <ul> <li>元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误 </li> <li>在&lt;p&gt;元素内嵌入&lt;div&gt;等元素造成所有浏览器的解析错误 </li> <li>在&lt;h1&gt;~&lt;h6&gt;元素内嵌入&lt;div&gt;等元素所有浏览器可以解析正常 </li> <li>在&lt;a&gt;元素内嵌入&lt;a&gt;元素会导致所有浏览器的解析错误 </li> <li>在列表元素&lt;li&gt;&lt;dt&gt;&lt;dd&gt;等插入非列表兄弟元素会导致IE6\IE7的解析错误 </li> </ul> <p>其实，这里说解析错误并不是很合理，应该是说浏览器解析出来的结果和我们期望的结果不一致，但任何的嵌套错误都不会导致页面呈现有很大的出错。</p> <p>我们知道JS代码如果写的有语法错误，浏览器的JS解释器就会拒绝执行并且报错，而浏览器在遇到不符合语法规定的HTML代码时则会千方百计将其呈现出来。</p> <h2>严格嵌套约束、语义嵌套约束</h2> <p>通过上面的示例我们发现在&lt;p&gt;元素里嵌套&lt;div&gt;元素或者&lt;a&gt;元素里&lt;a&gt;元素会导致所有的浏览器都解析错误，这其实是W3C规范的严格嵌套约束，严格嵌套约束要求必须去遵守，不然就会导致所有浏览器的解析错误。</p> <p><strong>严格嵌套约束规则：</strong></p> <ul> <li>a元素里不可以嵌套交互式元素(&lt;a&gt;、&lt;button&gt;、&lt;select&gt;等) </li> <li>&lt;p&gt;里面不可以嵌套&lt;div&gt;、&lt;h1&gt;~&lt;h6&gt;、&lt;p&gt;、&lt;ul&gt;/&lt;ol&gt;/&lt;li&gt;、&lt;dl&gt;/&lt;dt&gt;/&lt;dd&gt;、&lt;form&gt;等 </li> <li>暂时没有发现更多，有的欢迎告诉我 </li> </ul> <p><strong>语义嵌套约束：</strong></p> <p>每个元素基本都有自己的嵌套规则（即父元素可以是什么，子元素可以是什么），除了严格嵌套约束之外的一些规则就是语义嵌套约束，对于语义嵌套约束，如果不遵守，页面可能正常，但也可能解析错误，这和下面要讲的<span class="wp_keywordlink_affiliate">容错机制</span>有关。</p> <h2>浏览器的<span class="wp_keywordlink_affiliate">容错机制</span> </h2> <p>并不是每位同学在写完页面后去做合法性检查，因此浏览器厂商不得不让它们的浏览器以尽可能宽松的方式去处理网页，每个浏览器内核中都有相当一部分代码专门用来处理那些含糊不清的html标记及嵌套，并且会去猜测前端们到底想如何呈现网页，这是浏览器的<strong><span class="wp_keywordlink_affiliate">容错机制</span></strong>。</p> <p>这其实在告诉我们，我们写出来的HTML代码不符合W3C规范可能最终呈现出来没有异样，但那其实是浏览器的一种容错机制，我们没有理由让自己以一个随性的态度去coding，对待自己的代码应该一丝不苟，即使HTML5的胸襟很宽广。</p> <h2>拥抱WEB标准</h2> <p>原本我们认为从HTML4到XHTML是一个时代，现在又从XHTML跨到了<strong>HTML5</strong>，新时代新标准的诞生，我们应该敞开胸怀去拥抱，而不是排斥。</p> <p>你关注或不关注，标准就在那里，只增不减。我们应该感谢W3C这样一个组织，让各个浏览器厂商抛开彼此的敌意共同制定新的标准。不然，也许你会像90年代那样，JS引用一个元素都需要为某个浏览器写一套自己的代码。</p> <p>WEB标准只会使我们吃饭变得更香，睡眠变得更好，新的技术或标准会推动我们去富有热情的coding，而不是每天在重复劳动。</p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">一直以来我没有见过任何科学研究证明了这一点，但在软件领域，它就像一个教条或一个共同的信念。由于它的存在，将软件写得易于阅读、关注代码的可读型都是很重要的。通过一些技术的辅助程序员可以实现这些要求，这些技术其中之一就是写代码注释。</font> </td> </tr></tbody></table> <p><img class="aligncenter" alt="" src="http://www.webjx.com/files/allimg/130722/0953000.png"></p> <blockquote> <p><em>免责声明：我所说的“避免<span class="wp_keywordlink_affiliate">代码注释</span>”并不意味着我不写<em>注释</em>，这意味着，我尽可能避免写<span class="wp_keywordlink_affiliate">代码注释</span>，但<em>当我觉得值得写时我还是写的</em>。</em></p> </blockquote> <p>“<strong>相比写软件我们花了更多的时间在阅读软件上</strong>”，一直以来我没有见过任何科学研究证明了这一点，但在软件领域，它就像一个教条或一个共同的信念。由于它的存在，将软件写得易于阅读、关注代码的可读型都是很重要的。通过一些技术的辅助程序员可以实现这些要求，这些技术其中之一就是写代码注释。</p> <p>当谈论起代码注释的时候，有关的辩论总无休止。我们应该用注释来说明我们代码的作用吗，我们应该将重点放在代码的表达性而不需要注释来辅助阅读吗？Joe Kunk为这争论写了一篇博客 -&#160;应不应该写注释。有那些人说文档完备的代码被认为是好代码，还有些人说应该避免注释，因为注释通常被用来解释/隐藏不好的代码。</p> <p>在我看来，在书籍的影响下，为确保代码整洁便于重构，我们应该避免写注释，除非我们有一个好的写注释的理由（例如数学算法）或因为公司要求或流程我们有义务这样做。下面是我关于注释的五点忧虑。</p> <h2>我认为代码注释起到反作用的地方</h2> <h3>1.注释往往鼓励坏的代码</h3> <p>“注释的代码是好代码”有这样一个说法，所以人们常常在代码中添加注释以代码漂亮。如果我们为了解释代码而添加注释这就像是一个信号：也许我们正在编写糟糕的代码。当我们要写一条注释是，我们应该想是否能够通过清理代码使它更有可读性呢。</p> <h3>2. 我们将花费更多的时间来编写和维护</h3> <p>注释通常是代码的第二个版本。当我们为一个函数写注释时我们实际在重复自己。我们违背了DRY（不要重复自己）原则。我们正在花费更多的时间且增加了复杂性。需求如果变了代码也要跟着变，如果我们写了注释也要随之更改。所以为多花费的一倍时间做出改变吧。我们可以利用这段时间来提高我们的代码或开发新的功能。</p> <h3>3. 注释是不可测试和验证的</h3> <p>当我们修改代码的时候我们借助诸如编译器、IDE及单元测试工具来辅助，注释没有，没有类似工具。你无法依靠工具或单元测试来确保它们的使用位置、日期标注等是正确的。一旦你写了一条注释，因为它是不可测试的无法关注它的准确性，一旦出错便会无法察觉的保留下来。</p> <h3>4. 与代码相比注释是不可靠的</h3> <p>通常当注释和代码脱离它就变得与没有多大意义了。如果程序员读到它就可能被误导。即使没有误导也需要通过阅读源码来搞清到底做了什么。一个实际的例子，如果我们的老板需要我们做一个修改，我们应该看注释还是代码呢？当然我们会看代码。</p> <h3>5. 注释占用了不少屏幕空间</h3> <p>一些注释方法（像下面的）占了很多行，当你想查看更多代码时这便成了一个问题。</p> <div> <div class="syntaxhighlighter notranslate javascript ie" id="highlighter_322950"> <div class="toolbar"><span></span></div> <table border="0" cellspacing="0" cellpadding="0"><tbody><tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2">/** </div> <div class="line number2 index1 alt1">*&#160; </div> <div class="line number3 index2 alt2">* @param title The title of the CD </div> <div class="line number4 index3 alt1">* @param author The author of the CD </div> <div class="line number5 index4 alt2">* @param tracks The number of tracks on the CD </div> <div class="line number6 index5 alt1">* @param durationInMinutes The duration of the CD in minutes </div> <div class="line number7 index6 alt2">*/</div> <div class="line number8 index7 alt1">public void addCD(String title, String author,&#160; </div> <div class="line number9 index8 alt2">int tracks, int durationInMinutes) { </div> <div class="line number10 index9 alt1">CD cd = new CD(); </div> <div class="line number11 index10 alt2">cd.title = title; </div> <div class="line number12 index11 alt1">cd.author = author; </div> <div class="line number13 index12 alt2">cd.tracks = tracks; </div> <div class="line number14 index13 alt1">cd.duration = duration; </div> <div class="line number15 index14 alt2">cdList.add(cd); </div> <div class="line number16 index15 alt1">}</div> </div> </td> </tr></tbody></table> </div> </div>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">未来的Web：九个不可思议的WebGL应用试验.</font> </td> </tr></tbody></table> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><strong>1. &#160;Pearl Boy</strong></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>如果你需要片刻来放松心情，那么来试玩一下 Pearl Boy 吧。这个精美的演示操作很简单，控制船上小男孩在美丽的海上夕阳的背景下划船前进或者潜入水底，探寻神秘的海底世界。</p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; text-align: center; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><a style="color: rgb(28, 61, 114); text-decoration: none;" href="http://www.gooengine.com/demofiles/pearl-boy/index.html" target="_blank"><img width="498" class="fit-image" style="border: 1px solid rgb(153, 153, 153); display: inline-block;" alt="" src="http://www.webjx.com/files/allimg/130801/1721260.jpg" border="0"></a></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><a class="download" style="color: rgb(28, 61, 114); text-decoration: none;" href="http://www.gooengine.com/demofiles/pearl-boy/index.html" target="_blank" rel="nofollow">效果演示</a></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><strong>2. &#160;Pitts Demo</strong></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>Pitts demo 是另一个精彩的 3D 飞行游戏，像其它我已经展示的游戏演示一样，这个游戏的物理引擎也是让人难以置信的。你可以滚动，减慢，加速！&#160;</p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; text-align: center; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><a style="color: rgb(28, 61, 114); text-decoration: none;" href="http://www.ovoid.org/js/rel/1.1/pittsdemo" target="_blank"><img width="498" class="fit-image" style="border: 1px solid rgb(153, 153, 153); display: inline-block;" alt="" src="http://www.webjx.com/files/allimg/130801/1721261.jpg" border="0"></a></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><a class="download" style="color: rgb(28, 61, 114); text-decoration: none;" href="http://www.ovoid.org/js/rel/1.1/pittsdemo" target="_blank" rel="nofollow">效果演示</a></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><strong>3. Chrome World Maze</strong></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>《Chrome 世界迷宫》是 Chrome 最前沿的实验项目之一。玩转世界迷宫的时候，用你的桌面设备作为显示屏和手机（安装了 Chrome 浏览器）作为控制器。你可以使用任何网站作为迷宫，赶紧体验一下吧！</p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; text-align: center; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><a style="color: rgb(28, 61, 114); text-decoration: none;" href="http://chrome.com/maze/" target="_blank"><img width="498" class="fit-image" style="border: 1px solid rgb(153, 153, 153); display: inline-block;" alt="" src="http://www.webjx.com/files/allimg/130801/1721262.jpg" border="0"></a></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><a class="download" style="color: rgb(28, 61, 114); text-decoration: none;" href="http://chrome.com/maze/" target="_blank" rel="nofollow">效果演示</a></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><strong>4. &#160;Optic Flow</strong></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>《光流》演示使用的设备的摄像头来检测移动，并再运动路径周围发散一系列的光点。运动越多，动画圆点越多。终极玩法，在摄像头前面的摇摆运动，以获得最佳体验。</p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; text-align: center; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><a style="color: rgb(28, 61, 114); text-decoration: none;" href="http://www.clicktorelease.com/code/optical-flow-webrtc/" target="_blank"><img width="498" class="fit-image" style="border: 1px solid rgb(153, 153, 153); display: inline-block;" alt="" src="http://www.webjx.com/files/allimg/130801/1721263.jpg" border="0"></a></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><a class="download" style="color: rgb(28, 61, 114); text-decoration: none;" href="http://www.clicktorelease.com/code/optical-flow-webrtc/" target="_blank" rel="nofollow">效果演示</a></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><strong>5. &#160;Roll It</strong></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>这是一款经典的滚雪球游戏，和《Chrome 迷宫》游戏一样，也是桌面屏幕作为显示器，移动设备作为控制器。摆动手动的移动设备，板上的球就能滚动了，赶紧试一下！</p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; text-align: center; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><a style="color: rgb(28, 61, 114); text-decoration: none;" href="http://chrome.com/campaigns/rollit" target="_blank"><img width="498" class="fit-image" style="border: 1px solid rgb(153, 153, 153); display: inline-block;" alt="" src="http://www.webjx.com/files/allimg/130801/1721264.jpg" border="0"></a></p> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'><a class="download" style="color: rgb(28, 61, 114); text-decoration: none;" href="http://chrome.com/campaigns/rollit" target="_blank" rel="nofollow">效果演示</a></p> <p></p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">人人都能用的10条网站易用性技巧。</font> </td> </tr></tbody></table> <p>1. 给你的logo添加替代文本</p> <p>这样有两个好处：屏幕阅读器能识别logo图片代表的含义，图片未加载到时，也能告诉非视障用户那里是你的logo。</p> <p>几种方法：</p> <p>&lt;img src="logo.png" alt="网页教学网"&gt;</p> <p>或者，你用背景图来实现logo的话，也可以添加title属性来实现：</p> <p>&lt;span title="网页教学网"&gt;&lt;/span&gt;</p> <p>当然，链接+背景图的方式是最好的，但最好也加上title属性：</p> <p>&lt;a title="网页教学网"&gt;网页教学网&lt;/a&gt;</p> <p>2.添加基本的Landmarks</p> <p>ARIA Landmark是W3C定义的一套网站可用性规则，对于网站不同的模块添加描述性的Landmark&#8212;&#8212;或者直接叫role，有利于读屏软件更好的理解你的网页，从而让视障用户更好的使用你的网站。</p> <p>&lt;nav role="navigation"&gt;<br>&lt;div id="maincontent" role="main"&gt;<br>&lt;form action="search.php" role="search"&gt;</p> <p>3.增强focus定义</p> <p>其实很多网站会用尽一切办法去掉浏览器的:focus样式，特别是对于IE浏览器，其实，浏览器默认带上:focus样式是有道理的，它能指示用户当前的鼠标焦点位置是在哪里。这个对于键盘流特别重要。</p> <p>所以请不要去掉:focus样式，甚至，你觉得默认的样式不好看或者不统一（IE是虚线框，Webkit是高亮的实线框，并且，Safari是蓝色，Chrome是橙色）也可以自己给定义一个高亮色：</p> <p>a:focus{<br>&#160;&#160;&#160; outline:1px solid red;<br>&#160;&#160;&#160; background:yellow;<br>}</p> <p>如果你的产品经理或者视觉设计师坚持要去掉focus状态的话，把TA的鼠标拿走一天并告诉TA只能用Tab切换链接就好了。。。</p> <p>4.定义必填表单项</p> <p>用aria-required属性可以定义表单中的必填项&#8212;&#8212;嗯，主要还是告诉读屏软件：</p> <p>&lt;input type="text" name="username" aria-required="true"&gt;</p> <p>5.给你的页面添加一个h1</p> <p>原因很简单，不只是有利于SEO，对网站整体的可用性和可读性都很有帮助。另外，你没有代码洁癖么？</p> <p>6.定义表格的表头</p> <p>通常很多人习惯表格全部使用td标签，其实，表格不止有hd标签，还有th、col、scope等。</p> <p>所以简单来说，表头换成th标签吧：</p> <p>&lt;th scope="col"&gt;Date&lt;/th&gt;</p> <p>7.定义表格描述</p> <p>不要简单的在表格前面/后面加个p了事了，表格有专用的caption标签可用，就像图片一样。</p> <p>&lt;table&gt;<br>&#160;&#160;&#160; &lt;caption&gt;Class Schedule&lt;/caption&gt;<br>&lt;tr&gt;<br>……</p> <p>8.避免“点击此处”</p> <p>虽然这样的链接描述对普通人都无所谓，但是对读屏软件来说，是相当糟糕的，它其实是对视障用户的一种干扰。</p> <p>所以，直接把链接用到正地方吧。</p> <p>9.去掉tabindex</p> <p>曾经，很多人用tabindex来“增强”用户体验，但是这个属性却会打乱页面的正常阅读顺序，对视障用户是灾难性的，对普通用户也未必是友善的。</p> <p>所以千万不要滥用tabindex属性。</p> <p>10.在线检测一下</p> <p>呃，看到这里发现其实是个广告，但是如果能检测出来网站可用性问题，也是件好事情，WebAIM开发的一个网页工具，输入URL就会自动检测。测试了一下还不错，<a href="http://wave.webaim.org/">http://wave.webaim.org/</a><br></p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">字符编码的前世今生.</font> </td> </tr></tbody></table> <blockquote> <p>由于“<span class="wp_keywordlink_affiliate">字符编码</span>”这个话题牵涉到的历史久远、机构众多、专业术语较多，所以本篇文章可能会略长，为了避免内容过于枯燥，我会尽量用一种通俗易懂的语言来写这篇文章。</p> <p>其中本文的第一篇章会对历史中的主要<span class="wp_keywordlink_affiliate">字符编码</span>进行介绍，由于篇幅较长，如果读者对此已很了解，可直接跳过进行第二章的阅读。</p> <p>完成本篇文章的过程中参考和阅读了大量的文章和文献，写本篇文章的目的一是让自己对“<span class="wp_keywordlink_affiliate">字符编码</span>”能够做一个较深的理解，二是希望给曾经徘徊或正在徘徊在编码困惑中的前端们一个很好的参考，搞清楚字符编码问题是前端万事之基石。由于本人才疏学浅，好多信息也是从网络和书籍中参考而来，错误之处难免，请大家指正。&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;题记</p> </blockquote> <h2>跟随历史的足迹看字符编码</h2> <h3>古代的通信方式</h3> <p>很久很久以前，人们之间的长途通讯主要是用信鸽、骑马送报、烽烟等方式进行：</p> <p><img width="624" height="160" class="aligncenter" alt="imgchar1" src="http://www.webjx.com/files/allimg/130802/1200390.jpg"></p> <p>不过这些方式无不例外都是出奇的慢，同时也受天气、地理等因素的影响。</p> <h3>世界第一条电报</h3> <p>直到1837年，世界第一条电报诞生，当时美国科学家莫尔斯尝试用一些“点”和“划”来表示不同的字母、数字和标点符号，这套表示字符的方式也被称为“摩尔斯电码”：</p> <p><img width="624" height="160" class="aligncenter" alt="imgchar2" src="http://www.webjx.com/files/allimg/130802/1200391.jpg"></p> <h3>世界第一台计算机</h3> <p>再后来到了1946年，世界第一台计算机诞生。发明计算机的同学们用8个晶体管的“通”或“断”组合出一些状态来表示世间万物，不过当时的计算机有一间半教室那么大，六头大象重，从现在看来这简直就是个怪物，但在当时却是震惊世界与改变世界的一项重要发明：</p> <p style="text-align: center;"><img width="640" height="214" class="aligncenter" alt="imgchar3" src="http://www.webjx.com/files/allimg/130802/1200392.jpg"></p> <h3>ASCII</h3> <p>8个晶体管的“通”或“断”即可以代表一个字节，刚开始，计算机只在美国使用，所有的信息在计算机最底层都是以二进制（“0”或“1”两种不同的状态）的方式存储，而8位的字节一共可以组合出256（2的8次方）种状态，即256个字符，这对于当时的美国已经是足够的了，他们尝试把一些终端的动作、字母、数字和符号用8位(bit)来组合：</p> <ul> <li>0000 0000 ~ 0001 1111 共&#160;<strong>33</strong>&#160;种状态用来表示终端的特殊动作，如打印机中的响铃为 0000 0111 ，当打印机遇到 0000 0111 这样的字节传过来时，打印机就开始响铃；</li> <li>0010 0000 ~ 0010 1111 、 0011 1010~0110 0000 和 0111 1101 ~ 0111 1110 共&#160;<strong>33</strong>&#160;种状态来表示英式标点符号，如 0011&#160;1111 &#160;既代表英式问号“?”；</li> <li>0011 0000 ~ 0011 1001 共&#160;<strong>10&#160;</strong>种状态来表示“0~9”10个阿拉伯数字；</li> <li>0100 0001 ~ 0101 1010 和 0110 0001 ~ 0111 1010共&#160;<strong>52</strong>种状态来表示大小写英文字母；</li> </ul> <p>自此，一共只用到了128种状态，即128个字符，刚好占用了一个字节中的后7位，共包括33个控制字符和95个可显示字符，这一字符集被称为ASCII（American&#160;<strong>S</strong>tandard&#160;<strong>C</strong>ode for&#160;<strong>I</strong>nformation&#160;<strong>I</strong>nterchange，美国信息交换标准代码<strong>）</strong>，这一套字符集在<strong>1967年</strong>被正式公布。</p> <h4>讲到这里，引出几个基础概念：</h4> <ul> <li> <strong>比特（bit）</strong>：也可称为“位”，是计算机信息中的最小单位，是&#160;binary digit（二进制数位）<strong>&#160;</strong>的 缩写，指二进制中的一位</li> <li> <strong>字节（Byte）</strong>：计算机中信息计量的一种单位，一个位就代表“0”或“1”，每8个位（bit）组成一个字节（Byte）</li> <li> <strong>字符（Character）</strong>：文字与符号的总称，可以是各个国家的文字、标点符号、图形符号、数字等</li> <li> <strong>字符集（Character Set）：</strong>是多个字符的集合</li> <li> <strong>编码（Encoding）：</strong>&#160;信息从一种形式或格式转换为另一种形式的过程</li> <li> <strong>解码（decoding）：</strong>&#160;编码的逆过程</li> <li> <strong>字符编码（Character Encoding）：</strong>&#160;按照何种规则存储字符</li> </ul> <p>现在我们来看我们文章开头提到的第一条电报的诞生，莫尔斯编码中包含了大小写英文字母和数字等符号。</p> <p>这里的每一个符号其实就是<strong>&#8968;字符&#8971;</strong>，</p> <p>而这所有的字符的集合就叫做<strong>&#8968;字符集&#8971;</strong>，</p> <p>“点”或“划”与字符之间的对应关系即可以称为<strong>&#8968;字符编码&#8971;</strong>。</p> <h3>而电报的原理是：</h3> <blockquote> <p>“点”对应于短的电脉冲信号，“划”对应于长的电脉冲信号，这些信号传到对方，接收机把短的电脉冲信号翻译成“点”，把长的电脉冲信号转换成“划”，译码员根据这些点划组合就可以译成英文字母，从而完成了通信任务。</p> </blockquote> <p>这里把字符表示为“点”或“划”并对应为电脉冲信号的过程既是<strong>&#8968;编码&#8971;</strong>，</p> <p>而译码员把接收机接收到的脉冲信号转化成点划后译成字符的过程即为<strong>&#8968;解码&#8971;</strong>。</p> <p>而对于计算机诞生之后，只不过是将摩斯电码中的“点”和“划”换成了以8位字节二进制流的方式表示，如数字1的二进制流是0011&#160;0001，对应的十进制流是49，十六进制流是31。</p> <h3><span class="wp_keywordlink_affiliate">EASCII</span></h3> <p>虽然刚开始计算机只在美国使用，128个字符的确是足够了，但随着科技惊人的发展，欧洲国家也开始使用上计算机了。不过128个字符明显不够呀，比如法语中，字母上方有注音符号，于是，一些欧洲国家就决定，利用字节中闲置的最高位编入新的符号。比如，法语的é的二进制流为1000 0010，这样一来，这些欧洲国家的编码体系，可以表示最多256个字符了。</p> <p>但是，这里又出现了新的问题。不同的国家有不同的字母，因此，哪怕它们都使用256个符号的编码方式，代表的字母却不一样。比如，1000 0010在法语编码中代表了é，在希伯来语编码中却代表了字母Gimel (&#1490;)，在俄语编码中又会代表另一个符号。但是不管怎样，所有这些编码方式中，0&#8211;127表示的符号是一样的，不一样的只是128&#8211;255的这一段。</p> <p><strong><span class="wp_keywordlink_affiliate">EASCII</span></strong>（<strong>Extended ASCII</strong>，延伸美国标准信息交换码）由此应运而生，EASCII码比ASCII码扩充出来的符号包括表格符号、计算符号、希腊字母和特殊的拉丁符号:</p> <p><img width="573" height="322" class="aligncenter" alt="o_EXT-ASC" src="http://www.webjx.com/files/allimg/130802/1200393.gif"></p> <h3>GB2312</h3> <p>EASCII码对于部分欧洲国家基本够用了，但过后的不久，计算机便来到了中国，要知道汉字是世界上包含符号最多并且也是最难学的文字。</p> <p>据不完全统计，汉字共包含了古文、现代文字等近10万个文字，就是我们现在日常用的汉字也有几千个，那么对于只包含256个字符的EASCII码也难以满足天朝的需求了。</p> <p>于是&#8968;<strong>中国国家标准总局</strong>&#8971;（现已更名为&#8968;国家标准化管理委员会&#8971;）在<strong>1981年</strong>，正式制订了<strong>中华人民共和国国家标准简体中文字符集</strong>，全称<strong>《<strong>信息交换用汉字编码字符集&#183;基本集</strong>》，</strong>项目代号为<strong>GB 2312</strong>&#160;或&#160;<strong>GB 2312-80</strong>（GB为国标汉语拼音的首字母），此套字符集于当年的5月1日起正式实施。</p> <h4>包含字符：</h4> <p>共包含7445个字符，6763个汉字和682个其他字符（拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母）</p> <h4>存储方式：</h4> <p>基于EUC存储方式，每个汉字及符号以两个字节来表示，第一个字节为“高位字节”，第二个字节为“低位字节”</p> <h3>BIG5</h3> <p>要知道港澳台同胞使用的是繁体字，而中国大陆制定的GB2312编码并不包含繁体字，于是信息工业策进会在<strong>1984年</strong>与台湾13家厂商签定“16位个人电脑套装软件合作开发（BIG-5）计划”，并开始编写并推出BIG5标准。</p> <p>之后推出的倚天中文系统则基于BIG5码，并在台湾地区取得了巨大的成功。在BIG5诞生后，大部分的电脑软件都使用了Big5码，BIG5对于以台湾为核心的亚洲繁体汉字圈产生了久远的影响，以至于后来的window 繁体中文版系统在台湾地区也基于BIG5码进行开发。</p> <h4>包含字符：</h4> <p>共收录13,060个汉字及441个符号</p> <h4>编码方式：</h4> <p>用两个字节来为每个字符编码，第一个字节称为“高位字节”，第二个字节称为“低位字节”</p> <h3><span class="wp_keywordlink_affiliate">Unicode</span></h3> <h4>由来：</h4> <p>在计算机进入中国大陆的相同时期，计算机也迅速发展进入了世界各个国家。</p> <p>特别是对于亚洲国家而言，每个国家都有自己的文字，于是每个国家或地区都像中国大陆这样去制定了自己的编码标准，以便能在计算机上正确显示自己国家的符号。</p> <p>但带来的结果就是国家之间谁也不懂别人的编码，谁也不支持别人的编码，连大陆和台湾这样只相隔了150海里，都使用了不同的编码体系。</p> <p>于是，世界相关组织意识到了这个问题，并开始尝试制定统一的编码标准，以便能够收纳世界所有国家的文字符号。</p> <p>在前期有两个尝试这一工作的组织：</p> <ul> <li>国际标准化组织（ISO）</li> <li>统一码联盟</li> </ul> <p>国际标准化组织（ISO）及国际电工委员会（IEC）于1984年联合成立了ISO/IEC小组，主要用于开发统一编码项目；</p> <p>而Xerox、Apple等软件制造商则于1988年组成了统一码联盟，用于开发统一码项目。</p> <p>两个组织都在编写统一字符集，但后来他们发现各自在做相同的工作，同时世界上也不需要两个不兼容的字符集，于是两个组织就此合并了双方的工作成果，并为创立一个单一编码表而协同工作。</p> <p><img width="200" height="200" class="aligncenter" alt="200px-Unicode_logo.svg" src="http://www.webjx.com/files/allimg/130802/1200394.png"><br>1991年，两个组织共同的工作成果<span class="wp_keywordlink_affiliate">Unicode</span> 1.0正式发布，不过Unicode 1.0并不包含CJK字符（即中日韩）。</p> <h4>版本历史：</h4> <ul> <li>Unicode 1.0：1991年10月</li> <li>Unicode 1.0.1：1992年6月</li> <li>Unicode 1.1：1993年6月</li> <li>Unicode 2.0：1997年7月</li> <li>Unicode 2.1：1998年5月</li> <li>Unicode 2.1.2：1998年5月</li> <li>Unicode 3.0：1999年9月</li> <li>Unicode 3.1：2001年3月</li> <li>Unicode 3.2：2002年3月</li> <li>Unicode 4.0：2003年4月</li> <li>Unicode 4.0.1：2004年3月</li> <li>Unicode 4.1：2005年3月</li> <li>Unicode 5.0：2006年7月</li> <li>Unicode 5.1：2008年4月</li> <li>Unicode 5.2：2009年10月</li> <li>Unicode 6.0：2010年10月</li> <li>Unicode 4.1：2005年3月</li> <li>Unicode 6.1：2012年1月31日</li> <li>Unicode 6.2：2012年9月</li> </ul> <h3> <strong>ISO/IEC</strong> 8859</h3> <p>ISO/IEC小组在1984年成立后的第三年（即<strong>1987年</strong>）开始启动ISO 8859标准的编写，ISO 8859是一系列8位字符集的标准，主要为世界各地的不同语言（除CJK）而单独编写的字符集，一共定义了15个字符集：</p> <ul> <li>ISO/IEC 8859-1：西欧语言</li> <li>ISO/IEC 8859-2&#160;&#160;：中欧语言</li> <li>ISO/IEC 8859-3&#160;：南欧语言</li> <li>ISO/IEC 8859-4：&#160;北欧语言</li> <li>ISO/IEC 8859-5：&#160;斯拉夫语</li> <li>ISO/IEC 8859-6：&#160;阿拉伯语</li> <li>ISO/IEC 8859-7：希腊语</li> <li>ISO/IEC 8859-8：希伯来语</li> <li>ISO/IEC 8859-9：土耳其语</li> <li>ISO/IEC 8859-10： 北日耳曼语</li> <li>ISO/IEC 8859-11：泰语</li> <li>ISO/IEC 8859-13： 波罗的语族</li> <li>ISO/IEC 8859-14： 凯尔特语族</li> <li>ISO/IEC 8859-15：西欧语言，收录芬兰语字母和大写法语重音字母，以及欧元（&#8364;）符号</li> <li>ISO/IEC 8859-16&#160;：东南欧语言，主要供罗马尼亚语使用，并加入欧元（&#8364;）符号</li> </ul> <p>其中ISO/IEC 8859-1至ISO/IEC 8859-4四个项目早在1982年就已经编写出来，只不过是由ANSI与ECMA合作完成，并于1985年正式公布，ISO/IEC小组成立后，这一成果被其收录，并改名为ISO/IEC 8859 前四个项目。</p> <p>大家其实发现以上15个字符集中并没有代号为“ISO/IEC 8859 -12”的字符集，据说-12号本来是预留给印度天城体梵文的，但后来却搁置了（阿三有了自己的编码－ISCII）。由于英语没有任何重音字母，故可使用以上十五个字符集中的任何一个来表示。</p> <h3>&#160;ISO/IEC<strong> 10646 /&#160;</strong>UCS</h3> <p>1993年，ISO/IEC 10646标准第一次发表，ISO/IEC 10646是ISO 646的扩展，定义了1个31位的字符集。ISO 10646标准中定义的字符集为UCS，UCS是Universal Character Set的缩写，中文译作<strong>通用字符集。</strong></p> <h4>版本：</h4> <p>ISO/IEC 10646-1：第一次发表于1993年，现在的公开版本是2000年发表的ISO/IEC 10646-1:2000。</p> <p>ISO/IEC 10646-2：在2001年发表。</p> <h4>包含字符：</h4> <p>最初的ISO 10646-1:1993的编码标准，即Unicode 1.1，收录中国大陆、台湾、日本及韩国通用字符集的汉字共计20,902个，当然每个版本的Unicode标准的字符集所包含的字符数不尽相同，UCS包含了已知语言的所有字符，除了拉丁语、希腊语、斯拉夫语、希伯来语、阿拉伯语、亚美尼亚语、格鲁吉亚语，还包括中文、日文、韩文这样的方块文字，此外还包括了大量的图形、印刷、数学、科学符号。</p> <p>UCS给每个字符分配一个唯一的代码，并且赋予了一个正式的名字，通常在表示一个Unicode值的十六进制数的前面加上“U+”，例如“U+0041”代表字符“A”。</p> <h4>编码方案：</h4> <p>UCS仅仅是一个超大的字符集，关于UCS制定的编码方案有两种：<strong>UCS-2</strong>和<strong>UCS-4</strong>，Unicode默认以UCS-2编码。</p> <p>顾名思义，UCS-2就是用两个字节编码，UCS-4就是用4个字节（实际上只用了31位，最高位必须为0）编码。那么UCS-2其实可以容纳的字符数为65536（2的16次方），而UCS-4可以容纳的字符数为2147483648（2的31次方）。其实对于UCS-2已经是完全够用了，基本可以包含世界所有国家的常用文字，如果需要考虑一些偏僻字，那么UCS-4则绝对可以满足了，21亿个字符哪怕是整个宇宙也够用了吧！</p> <h3>UTF</h3> <p>Unicode 诞生，随之而来的计算机网络也发展了起来，Unicode&#160;如何在网络上传输也是一个必须考虑的问题，于是在1992年，面向网络传输的UTF标准出现了。</p> <p>UTF是<strong>U</strong>nicode&#160;<strong>T</strong>ransformation&#160;<strong>F</strong>ormat的缩写，中文译作Unicode转换格式。其实我们从现在可以把Unicode看作是一个标准或组织，而UCS就是一个字符集，那么UCS在网络中的传输标准就是UTF了。</p> <p>前面提到了UCS的编码实现方式为UCS-2和UCS-4，即要么是每个字符为2个字节，要么是4个字节。如果一个仅包含基本7位ASCII字符的Unicode文件，每个字符都使用2字节的原Unicode编码传输，其第一字节的8位始终为0，这就造成了比较大的浪费。但是，聪明的人们发明了UTF-8，UTF-8采用可变字节编码，这样可以大大节省带宽，并增加网络传输效率。</p> <h4>UTF-8</h4> <p>使用1~4个字节为每个UCS中的字符编码：</p> <ol> <li>128个ASCII字符只需一个字节编码（Unicode范围由U+0000至U+007F）</li> <li>拉丁文、希腊文、西里尔字母、亚美尼亚语、希伯来文、阿拉伯文、叙利亚文及它拿字母需要二个字节编码（Unicode范围由U+0080至U+07FF）</li> <li>大部分国家的常用字（包括中文）使用三个字节编码</li> <li>其他极少使用的生僻字符使用四字节编码</li> </ol> <h4>UTF-16/UCS-2</h4> <p>UCS-2的父集，使用2个或4个字节来为每个UCS中的字符编码：</p> <ol> <li>128个ASCII字符需两个字节编码</li> <li>其他字符使用四个字节编码</li> </ol> <h4>UTF-32/UCS-4</h4> <p>等同于UCS-4，对于所有字符都使用四个字节来编码</p> <h3>GB13000</h3> <p>前面提到了Unicode的迅速发展，至1993年时，包含CJK的Unicode 1.1已经发布了，天朝的ZF也意识到了需要一个更大的字符集来走向世界，于是在同一年，中国大陆制定了几乎等同于Unicode1.1的GB13000.1-93国家编码标准（简称GB13000）。是的，你没听错，中华人民共和国信息产业部把Unicode里的所有东东拿过来，然后自己重新修订发布了下，改为了国家标准GB13000。此标准等同于&#160;<em>ISO/IEC 10646.1:1993和Unicode 1.1。</em></p> <h3>GBK</h3> <p>1995年，在GB13000诞生后不久，中国教育科研网（NCFC）与美国NCFnet直接联网，这一天是中国被国际承认为开始有网际网路的时间。此后网络正式开始在中国大陆接通，个人计算机开始在中国流行，虽然当时只是高富帅才消费得起的产品。中国是一个十几亿人口的大国，微软意识到了中国是一个巨大的市场，当时的微软也将自己的操作系统市场布局进中国，进入中国随之而来要解决的就是系统的编码兼容问题。</p> <p>之前的国家编码标准GB 2312，基本满足了汉字的计算机处理需要，它所收录的汉字已经覆盖中国大陆99.75%的使用频率。但对于人名、古汉语等方面出现的罕用字和繁体字，GB 2312不能处理，因此微软利用了GB2312中未使用的编码空间，收录了GB13000中的所有字符制定了汉字内码扩展规范<strong>GBK</strong>（K为汉语拼音 Kuo Zhan中“扩”字的首字母）。所以这一关系其实是大陆把Unicode1.1借鉴过来改名为了GB13000，而微软则利用GB2312中未使用的编码空间收录GB13000制定了GBK。所以GBK是向下完全兼容GB2312的。</p> <h4>包含字符：</h4> <p>共收录21886个字符， 其中汉字21003个， 字符883个</p> <h4>编码方式：</h4> <p>GBK只不过是把GB2312中未使用的空间，编码了其他字符，所以GBK同样是用两个字节为每个字符进行编码。</p> <h3>GB18030</h3> <p>微软到了99年前后，说GBK已经落伍了，现在流行UTF-8标准，准备全盘转换成UTF-8，但中国ZF不是吃素的，编写并强制推出了GB18030标准。GB18030的诞生还有一个原因是GBK只包含了大部分的汉字和繁体字等，我们的少数民族兄弟根本木有考虑！中国有56个民族，其中有12个民族有自己的文字，那怎么办呢？在<strong>2000年</strong>，电子工业标准化研究所起草了GB18030标准，项目代号“<strong>GB 18030-2000</strong>”，全称<strong>《信息技术-信息交换用汉字编码字符集-基本集的扩充》</strong>。此标准推出后，在中国大陆之后的所售产品必须强制支持GB18030标准，不然不得卖！（这招挺狠的 &#8211; -#）</p> <h4>版本：</h4> <ul> <li>GB 18030-2000</li> <li>GB 18030-2005</li> </ul> <h4>包含字符：</h4> <p>GB18030收录了GBK中的所有字符，并将Unicode中其他中文字符（少数民族文字、偏僻字）也一并收录进来重新编码。其中GB 18030-2000共收录27533个汉字，而GB 18030-2005共包含70244个汉字。</p> <h4>编码方式：</h4> <p>采用多字节编码，每个字符由1或2或4个字节进行编码</p> <h2>&#160;前端眼中的字符编码</h2> <p>前面我们穿越回过去对字符编码做了下了解，那么这些字符编码跟我们到底有啥关系？</p> <h3>基本原理：</h3> <p>当我们打开编辑器coding时，按下ctrl+s的那一刻，其实等于是将自己的工作成果存储进了计算机，而这里最关键的是我们以什么字符编码来进行存储，我们以intellij编辑器为例：</p> <p><img width="420" height="320" class="aligncenter" alt="charset_f1" src="http://www.webjx.com/files/allimg/130802/1200395.png"></p> <p>我们在编写此文档时，是以UTF-8编码方式进行coding，当我们按下ctrl+s时，则此文档以utf-8编码方式存储进了计算机（右下角的UTF-8），而head区域中的<strong>&lt;meat charset=”utf-8″&gt;</strong>的作用则是告诉浏览器此文档以utf-8编码方式编码。</p> <p>我们此时用Hex编辑器打开这个文件，来看看他的二进制流：</p> <p><img width="527" height="268" class="aligncenter" alt="charset_f2" src="http://www.webjx.com/files/allimg/130802/1200396.png"></p> <p>其中红框标注出的即为“小海”两个中文字的二进制流，第一个为”11100101 10110000 10001111″转化为十六进制则为“E5B08F”，第二个为“10110101 10110111 00001101”转化为十六进制为“E6B5B7”，而当我们去查询UTF-8的码表时发现“E5B08F”对应的字符为“小”，“E6B5B7”对应的字符则为“海”，至此当我们用浏览器进行预览页面时，由于浏览器同样以UTF-8方式对此页面进行解码，“小海”两个字则可以被正确的显示出来。</p> <h3>乱码是个XX</h3> <p>做过前端的基本都遇到过乱码问题吧？好吧，下面就带大家来揭开这一神秘的面纱。</p> <h4>我们用notepad打开上面的文件，并重新以GBK方式编码，然后用intellij打开后：</h4> <p><img width="434" height="291" class="aligncenter" alt="charset_f4" src="http://www.webjx.com/files/allimg/130802/1200397.png"></p> <p>乱了有木有！居然变成了“C&#65533;&#65533;”，木有道理呀！我在用notepad编辑文件时采用的是gbk编码，而头部申明的也是gbk，本身notepad打开也是正常，但用intellij打开却乱了！</p> <p>罪魁祸首：<strong>编辑器默认编码</strong>。每个编辑器都会有默认编码，如果没有为一个项目单独设置过默认编码，打开一个单独的文件，编辑器往往以自己的默认编码去解码这个文件，如上图，我们的inellij编辑器的默认是UTF-8解码，而文件是GBK编码方式，那么打开肯定就是乱的拉。</p> <p>所以编辑器也是一个因素，DW则可以智能判断文件的编码方式，上述文件用DW打开并不会乱码，而intellij可能对中文的支持并不是很好，所以还不能智能判断中文编码，默认以UTF-8解码（当然默认编码自己是可以修改的）。</p> <p>很多读者可能还有一个疑问，为啥乱码出来的是“C&#65533;&#65533;”？</p> <p>其实原理已在上面的基本原理中做过介绍，即编辑器ctrl+s存进计算机时是GBK，但尝试用utf-8来解析，对应的utf-8中的码表中却找到了“C&#65533;&#65533;”，感兴趣的同学可以自己研究下。</p> <h4>我们现在将文件重新编辑，即编辑时采用GBK，但头部申明为UTF-8：</h4> <p><img width="414" height="284" class="aligncenter" alt="charset_f5" src="http://www.webjx.com/files/allimg/130802/1200398.png"></p> <p>然后用浏览器打开后，就是这样了：</p> <p><img width="398" height="90" class="aligncenter" alt="charset_f7" src="http://www.webjx.com/files/allimg/130802/1200399.png"></p> <p>乱了有木有！这个其实和编辑器打开一个文件乱码的原理是一致的：即<strong>编辑器编码时所采用的字符编码和解码时所采用的字符编码不一致</strong>。上述栗子，我们在coding时采用的是GBK编码，但头部却告诉浏览器这个文档是UTF-8编码，那么浏览器在用UTF-8解码时就会出现了乱码。</p> <h3>&#160;申明编码的方式</h3> <p>我们在coding时需要告诉浏览器自己的文件采用了什么字符编码，下面列出一些常见的方法：</p> <p>&lt;meta charset="gb2312"&gt; //html5<br>&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; //html4 xhtml<br>&lt;script src="http://ossweb-img.qq.com/images/js/foot.js" charset="gb2312"&gt;&lt;/script&gt;<br>&lt;link href="http://gameweb-img.qq.com/css/common.css" rel="stylesheet" charset="gb2312" &gt;</p> <p>我们可以在head区域的meta元素中为整个页面申明编码方式<br>，也可以为单独的外链文件申明编码方式（link/script等元素）。问题是如果页面头部和外链文件中只有部分申明或者全部申明，那么对应的到底是以什么方式解码呢？这里就有一个优先级的问题，具体的判定关系如下：</p> <p><img width="637" height="386" class="aligncenter" alt="charset_f8" src="http://www.webjx.com/files/allimg/130802/12003910.png"></p> <p>通过上述判定，我们其实可以发现，一个页面中优先级最高的其实是服务端的编码设置，如果一旦服务端设置了编码A，那么页面即以A来解析。</p> <p>目前Google采用的是这一做法，这样的传输效率会更高，不需要在头部额外再单独申明编码，但这样其实也有一定的风险，除了需要有一个严谨的编码规范，还需要确保服务器上的页面都保持同一编码，一旦不一致就会造成乱码，所以目前这一方案在国内用的并不多。</p> <p>其他的，如果外链资源设置了编码C，那么即以C来解析，无论服务端和头部是否申明编码。</p> <p>但必须要提醒大家的是：<strong>申明的编码只是告诉浏览器相关的内容是以什么方案去解码，并不是这一部分内容就采用了这个编码。</strong>所以大家在coding时的编码一定要确保和你申明的保持统一，不然就会出现乱码的问题。</p> <h3>BOM是个神马</h3> <p>BOM是<strong>byte-order mark</strong>的缩写，为Unicode标准为了用来区分一个文件是UTF-8还是UTF-16或UTF-32编码方式的记号，又称字节序。</p> <p>UTF-8以单字节为编码单元，并没有字节序的问题，而UTF-16以两个字节为编码单元，在解释一个UTF-16文本前，首先要弄清楚每个编码单元的字节序。例如“奎”的Unicode编码是594E，“乙”的Unicode编码是4E59。如果我们收到UTF-16字节流“594E”，那么这是“奎”还是“乙”？这是UTF-16文件开头的BOM就有作用了。</p> <p>采用Unicode编码方式的文件如果开头出现了“FEFF”，“FEFF”在UCS中是不存在的字符，也叫做“ZERO WIDTH NO-BREAK SPACE”，那么就表明这个文件的字节流是Big-Endian（高字节在前）的；如果收到“FFFE”，就表明字节流是Little-Endian（低字节在前）。</p> <p>在UTF-8文件中放置BOM主要是微软的习惯，BOM其实是为UTF-16和UTF-32准备的，微软在UTF-8使用BOM是因为这样可以把UTF-8和ASCII等编码明确区分开，但这样的文件在Window以外的其他操作系统里会带来问题。</p> <h3>我们以Window下的文本文件为例：</h3> <p><img width="201" height="113" alt="charset_f9" src="http://www.webjx.com/files/allimg/130802/12003911.png"></p> <p>在保存时可以选择ANSI、Unicode、Unicode big endian和UTF-8四种编码方式。</p> <ul> <li>其中ANSI是默认的编码方式，对于英文文件是ASCII编码，对于简体中文文件是GB2312编码（只针对Windows简体中文版，如果是繁体中文版会采用Big5码）；</li> <li>Unicode其实是UTF-16 endian big编码方式，这个把带有BOM的小端序UTF-16称作Unicode而又不详细说明，也是微软的习惯；</li> <li>而Unicode big endian则是带有BOM的大端序编码方式</li> </ul> <p>目前UTF-16通常用于系统文件的编码，而UTF-32由于对每个字符都采用四个字节编码，所以现在互联网中大部分都采用UTF-8来进行编码传输。</p> <h2>关于未来的展望</h2> <h3>概述</h3> <p style="text-align: center;"><img width="364" height="238" alt="charset_1" src="http://www.webjx.com/files/allimg/130802/12003912.jpg"></p> <p style="text-align: center;">（图：中国地区ALEXA排名前20的站点所采用的编码占比）</p> <p style="text-align: center;"><img width="426" height="238" alt="charet_2" src="http://www.webjx.com/files/allimg/130802/12003913.jpg"></p> <p style="text-align: center;">（图：腾讯互娱所有业务所采用的编码占比）</p> <p>左图表明GB2312、GBK与UTF-8编码三分天下，而右图显示腾讯互娱的业务大多数采用了GB2312，零星的采用了其他编码。总的就是不同的字符编码方案基本都存在了，而这也与各公司业务的历史原因也有一定的关系。</p> <p>当我们在项目的最初期时采用了一种非Unicode编码方案时，随着业务的壮大，积累的页面越来越多，到后期想去改成Unicode编码方案，就会担心出错的问题，所以现在大多数公司都采用了延用初期编码的方式，如淘宝，腾讯互娱等，以及四大门户。</p> <h3>摆在眼前的问题</h3> <p>可是，某一天了，我们的网站用户港澳台用户也变多了，我们需要支持繁体怎么办？</p> <p>某一天，我们的业务拓展到东南亚了，我们需要我们的网站也能支持那些国家的语言怎么办？</p> <p>如今，国内大多数公司采用的方案是，为相应的环境单独做一套编码文件，如&#160;http://big5.china.com.cn/&#160;，又如&#160;http://big5.qidian.com。</p> <p>再比如，哪一天了，我们的网站需要支持少数民族的语言怎么办？</p> <p>难道像央视这样切成图么？</p> <p><img width="565" height="35" alt="" src="http://www.webjx.com/files/allimg/130802/12003914.png"></p> <p>嗯，这一切都只是暂时的方案，但人一旦变得懒起来，就不愿意去改变一些东西，就比如UTF-8。</p> <h3>拥抱国际化标准</h3> <p>一切就等着我们敞开胸怀去拥抱，而不是沉浸在过去的喜悦中。最终的编码方案决定权在我们自己手里，改变，只是时间的问题。</p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">绝对应当收藏的10个实用HTML5代码片段。</font> </td> </tr></tbody></table> <p>HTML5是WEB技术发展的重要的里程碑，对于前端开发来说，如果能够找到一些未来大家开发中可能需要经常重复使用的代码的话，相信大家一定不会拒绝，下面是我们精心收集的10多个HTML5代码片段，相信大家一定喜欢！</p> <h2>HTML5的最简单模板</h2> <p>如果你需要开始一个新的HTML5项目的话，大家肯定会需要一个最简单的模板，这里是一个非常简单并且清晰的HTML5模板，相信大家会喜欢！</p> <pre>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br> &lt;head&gt;<br> &lt;meta charset="utf-8"&gt;<br> &lt;title&gt;Untitled&lt;/title&gt;<br> &lt;!--[if lt IE 9]&gt;<br> &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;<br> &lt;![endif]--&gt;<br> &lt;/head&gt;<br> &lt;body&gt;<br> web的主要内容<br> &lt;/body&gt;<br>&lt;/html&gt;</pre> <h2>表单获取Google地图</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>这里有一段非常简单的代码，通过用户输入地点，获取google地图地点，非常适合生成联系人表单</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;form action="http://maps.google.com/maps" method="get" target="_blank"&gt;<br> &lt;label for="saddr"&gt;输入地点&lt;/label&gt;<br> &lt;input type="text" name="saddr" /&gt;<br> &lt;input type="hidden" name="daddr" <br>value="350 5th Ave New York, NY 10018 (Empire State Building)" /&gt;<br> &lt;input type="submit" value="Get directions" /&gt;<br>&lt;/form&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>Base64编码的1x1大小的空白GIF文件</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>个人不推荐使用这个透明的空白gif，但是即使在2013年，很多人仍旧使用。可能你也喜欢使用这种方式。</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>正则表单式验证电子邮件</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>HTML5中允许使用正则表单式来做输入验证：</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" /&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>正确的嵌入flash</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>如果你经常需要在网页中插入flash的话，这段代码你应该用的上：</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;object type="application/x-shockwave-flash" <br> data="your-flash-file.swf" <br> width="0" height="0"&gt;<br> &lt;param name="movie" value="your-flash-file.swf" /&gt;<br> &lt;param name="quality" value="high"/&gt;<br>&lt;/object&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>视频并且支持flash的fallback</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>另外一个HTML5中最有用的特性是video标签，允许你很方便的嵌入video文件。但是很多老版本的浏览器不支持，所以下面这段代码将会非常有用</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;video width="640" height="360" controls&gt;<br> &lt;source src="__VIDEO__.MP4" type="video/mp4" /&gt;<br> &lt;source src="__VIDEO__.OGV" type="video/ogg" /&gt;<br> &lt;object width="640" height="360" type="application/x-shockwave-flash"<br> data="__FLASH__.SWF"&gt;<br> &lt;param name="movie" value="__FLASH__.SWF" /&gt;<br> &lt;param name="flashvars" value="controlbar=over&amp;amp;<br>image=__POSTER__.JPG&amp;amp;file=__VIDEO__.MP4" /&gt;<br> &lt;img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"<br> title="No video playback capabilities, please download the video below" /&gt;<br> &lt;/object&gt;<br>&lt;/video&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>iPhone call &amp; sms links</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>iphone中苹果介绍了一个非常方便的方式来创建电话和短信链接。代码如下：</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;a href="tel:1-408-555-5555"&gt;1-408-555-5555&lt;/a&gt;<br>&lt;a href="sms:1-408-555-1212"&gt;New SMS Message&lt;/a&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>HTML5的数据自动补齐功能</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>使用datalist元素，HTML5允许使用一组数据来生成自动补齐功能，现在你不需要使用第三方js代码或者类库啦！</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;input name="frameworks" list="frameworks" /&gt; <br> &lt;datalist id="frameworks"&gt;<br> &lt;option value="MooTools"&gt;<br> &lt;option value="Moobile"&gt;<br> &lt;option value="Dojo Toolkit"&gt;<br> &lt;option value="jQuery"&gt;<br> &lt;option value="YUI"&gt;<br>&lt;/datalist&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>可直接下载文件</h2> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;!-- will download as "expenses.pdf" --&gt;<br>&lt;a href="/files/adlafjlxjewfasd89asd8f.pdf" <br>download="expenses.pdf"&gt;Download Your Expense Report&lt;/a&gt;</pre> <h2 style='margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: "Segoe UI", Tahoma, Arial; font-size: 18px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>Crash老版本浏览器IE6</h2> <p style='font: 14px/26px "Segoe UI", Tahoma, Arial; margin: 1em 0px; padding: 0px; color: rgb(0, 0, 0); text-transform: none; text-indent: 2em; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(245, 250, 255); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>要知道IE6在国内使用量可不小，如果在你的web应用或者网站中不支持IE6的话，加上这段代码吧，相信你的用户都会升级IE6滴，嘿嘿！</p> <pre class="prettyprint linenums" style='background-position: 20px 20px; font: 14px/26px Consolas, "Courier New", monospace; margin: 0px 0px 20px; padding: 15px 15px 5px 65px; border-radius: 15px; border: 1px solid rgb(43, 153, 230); width: 1000px; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; z-index: 1000; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-image: url("http://img.chinaz.com/templates/chinaz/Revelation/img/blockquote.png"); background-repeat: no-repeat no-repeat; background-color: rgb(242, 244, 247); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>&lt;style&gt;*{position:relative}&lt;/style&gt;&lt;table&gt;&lt;input&gt;&lt;/table&gt;</pre>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">CSS经典教程:CSS选择器的优先级.</font> </td> </tr></tbody></table> <p><a target="_blank" href="/files/130425/1_112536.png"><img width="618" height="435" alt="CSS选择器优先级" border="0" src="http://www.webjx.com/files/130425/1_112536.png"></a><br></p> <p>关于这个东西教程太多了，就不必自己再来整个了。</p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">InMotion hosting发布了一份清单，叫做“HTML5 Cheat Sheet”（HTML5备忘录清单）分三个部分详细list出了。</font> </td> </tr></tbody></table> <p>InMotion hosting发布了一份清单，叫做“HTML5 Cheat Sheet”（HTML5备忘录清单）分三个部分详细list出了<br>A: tags 标签<br>B: Event Handler Attributes事件处理程序的内容属性<br>C: Browser Support浏览器支持的情况。</p> <h2>A: tags 标签</h2> <p sizset="0" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130604/0951560.png"></p> <h2>B: Event Handler Attributes事件处理程序的内容属性</h2> <p sizset="1" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130604/0951561.png"></p> <h2>C: Browser Support浏览器支持的情况。</h2> <p sizset="2" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130604/0951562.png"></p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">今天在整理文档时候找到了一份关于表单设计的分享，里面有关于「表单5大元素」「情感」「设计」的分享，里面表单的例子是去年的，可能有些网站已经重新设计过，不过不影响阅读文档。</font> </td> </tr></tbody></table> <p sizset="0" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130705/1056340.png"></p> <p>今天在整理文档时候找到了一份关于表单设计的分享，里面有关于「表单5大元素」「情感」「设计」的分享，里面表单的例子是去年的，可能有些网站已经重新设计过，不过不影响阅读文档。</p> <blockquote sizset="21" sizcache="4"> <p sizset="21" sizcache="4"><a href="http://vdisk.weibo.com/s/Im8Vu" target="_blank">点击下载: 「表单那些事」</a></p> </blockquote> <p sizset="1" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130705/1056341.png"></p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">谈导航栏返回按钮的替代方案.</font> </td> </tr></tbody></table>【导读】本文主要讨论返回按钮的设计，如果手机尺寸略大，那么你将不得不使用另一只手来点击返回按钮。我猜这也是很多安卓手机会在左下角放置硬件返回按钮的原因之一;不过这种解决方案也不是最优的，因为在安卓平台中，应用内的“返回上一级”按钮与硬件返回按钮的功能还是有所区别的。 <p>　　这里进入译文。我(英文原文作者)爱iPhone5，那多出来的640×176像素的空间非常有用。不过我时常会在点击那个最重要的按钮时遇到麻烦，是的，就是返回按钮。UX设计当中有一条规则，如果某个功能是很常用的，那么它应该被放在最容易点击到的位置上。</p> <p>　　49%的移动用户在使用手机时是单手操作的，这就意味着每两个用户当中就有一个会每天多次通过单手来点击返回按钮;算起来的话这可是数以亿计的点击率。如果手机尺寸略大，那么你将不得不使用另一只手来点击返回按钮。我猜这也是很多安卓手机会在左下角放置硬件返回按钮的原因之一;不过这种解决方案也不是最优的，因为在安卓平台中，应用内的“返回上一级”按钮与硬件返回按钮的功能还是有所区别的。</p> <p sizset="0" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/0928220.jpg"></p> <p><strong>通过手势来解决问题</strong></p> <p>　　要解决返回按钮的问题，最简单的方案就是使用手势。在用户已经熟悉了应用操作方式的前提下，手势还是很有效的。另外，将手势操作作为可视化按钮的一种补充形式也是不错的做法。</p> <p sizset="1" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/0928221.png"></p> <p>　　让我有些惊讶的是，在试用了无数个应用之后，我发现市面上已经有很多产品在通过这种方法解决返回按钮的问题了。当然，没有哪种解决方案能适用于所有的情况，但至少这是个开始。我个人真心希望设计师们能够逐渐找到更多更有创意的方案。</p> <p><strong>抛甩(toss)</strong></p> <p>　　“抛甩”是对我们与真实物体之间互动方式的一种隐喻，使用这种模式，你可以很轻松地将当前的活动界面“甩开”。例如在Letterpress中，用户可以通过向下快速滑动的手势将弹出提示甩走，有点意思。</p> <p sizset="2" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/0928222.png"></p> <p>在Facebook里，当你全屏查看一张图片时，可以将图片向上或向下甩开，回到之前的界面当中。</p> <p sizset="3" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/0928223.png"></p> <p><strong>横向滑动</strong></p> <p>　　新界面从屏幕右侧向左滑入视图，这是iOS当中的标准动效。相应的，我们也可以通过向相反的方向执行轻扫来导航回之前的界面，例如你可以在Pinterest当中通过向右轻扫的手势将大图界面向右移走，回到之前的界面。</p> <p sizset="4" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/0928224.png"></p> <p>类似的，在Flipboard里，你也可以在某主题下的内容界面中通过向右轻扫回到主界面。</p> <p sizset="5" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/0928225.png"></p> <p>　　在iBooks中，并没有明确的视觉指引告诉你可以通过左右轻扫的手势来打开下一页或回到上一页。不过除了轻扫以外，点击屏幕的左右两部分也能起到同样的导航作用，这样，由于缺乏视觉指引所导致的导航功能不可发现的概率就大大降低了。而且由于翻页效果使用了强有力的隐喻，所以一旦用户通过点击屏幕完成了一次翻页操作之后，很容易根据漂亮的翻页动效来发现左右轻扫的导航功能。</p> <p sizset="6" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/0928226.png"></p> <p><strong>纵向拖动</strong></p> <p>　　与横向滑动的初衷相似，如果某些界面是从屏幕底部或顶部向上滑入视图的，那么可以尝试使用纵向拖动的方式来进行后退导航。Day One应用就打造了这样一套属于他们自己的“下拉刷新”，使用户可以在纵向的操作中直接进入之前或之后的一篇内容。</p> <p sizset="7" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/0928227.png"></p> <p>在Clear里，你可以通过向下长拖动来回退到上一级列表，而向下短拖动则用来创建新的事项。</p> <p sizset="8" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/0928228.png"></p> <p>而Haze允许用户通过向下拖动界面来进入设置界面;当然严格的讲这不属于“回退”方面的导航操作。</p> <p sizset="9" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/0928229.png"></p> <p><strong>长按或双击如何?</strong></p> <p>　　长按和双击都是可以由拇指独立完成的操作，所以我个人觉得它们将来有可能在回退导航上体现出价值。<br>　　从视觉和布局的角度解决问题<br>　　诚然，按照iOS设计规范所要求的那样将返回按钮放在导航栏左侧，看上去是最自然的。但这不能阻止我们在必要的时候完全改变返回按钮的视觉样式或位置;它甚至可以看上去不那么像个按钮。<br>　　Basecamp将待办事项内容界面设计成半覆盖的面板形式，用户点击左侧未遮盖的空间即可将面板向右收起，返回到之前的界面。</p> <p sizset="10" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/09282210.png"></p> <p>　　如果内容类型适合，我们确实可以像Basecamp那样将子界面处理成某种覆盖层或面板的形式，并使用“完成(Done)”按钮进行关闭，返回上级界面。完成按钮可以被放置在界面右上角，相比于左上角的位置，更容易被点击到。</p> <p sizset="11" sizcache="8"><img style="_width: atuo;" alt="null" src="http://www.webjx.com/files/allimg/130708/09282211.png"></p> <p><strong>总结</strong></p> <p>　　除非苹果推出一款更纤细、边缘更薄的手机，否则我个人还是建议设计师们能够抱着更开放的心态来看待使用手势执行常规操作这件事。如果你能充分理解交互对象的运动方式以及人们对这些运动规律的认知，并将这些理解体现到设计当中，那么手势会成为非常高效和符合直觉的操作方式。作为设计师，我们必须清楚人们在实际当中是怎样使用手机的，只有这样，才能设计出让人们愉悦而不是感到受挫的产品。</p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">一个网页就好像是一栋房子，HTML结构就是一面面的墙，而标签则是一块块的砖，砖要摆放有序，整整齐齐，墙才会牢固。最后css则是装饰材料，美不美就靠她了。因此，我们要有一个优秀的网页，既要提供一个干净而又有清晰结构的HTML，更加离不开css的极致美化。</font> </td> </tr></tbody></table> <p sizset="false" sizcache06854236741271188="19 19 519">前段时间，在网上浏览时，发现国内几家互联网巨头公司的前端开发招聘题目，依然都提到一个<strong>标签语义化</strong>的问题，这个话题在已经是老生常谈了，但依旧问题多多，归结于一个习惯吧，有时间我也太懒，没有多加考虑就直接写代码，我知道我错了！童鞋们，我们得让标签语义化成为一种习惯！今天就再普及一下标签语义化，也鞭策下自己，别整天迷迷糊糊的！</p> <p>在网页设计中，我们时常都会听到标签语义化这个名词，HTML标签语义化的设计思维其实就是给某块内容用上一个最恰当最合适的标签，这样一来，不管是谁都能看懂这块内容是什么。</p> <p sizset="false" sizcache06854236741271188="19 19 520">一个网页就好像是一栋房子，HTML结构就是一面面的墙，而标签则是一块块的砖，砖要摆放有序，整整齐齐，墙才会牢固。最后css则是装饰材料，美不美就靠她了。因此，我们要有一个优秀的网页，既要提供一个干净而又有清晰结构的HTML，更加离不开css的极致美化。</p> <p>从上面也说明标签语义化极其重要，HTML每个标签都有自己的语义，都有自己适用的范围。但往往会被我们忽略或者被我们滥用，举个例子：在一个页面中&lt;div&gt;用了几十个甚至上百个，这是个无意义的标签，只是表示一个层而已，非常不利于后期的维护；而&lt;table&gt;标签则是一个数据标签，该用的时候，我们就要大胆使用。</p> <h4>标签语义化的好处</h4> <p>让你使用标签语义化的理由可以有无数条：</p> <ol> <li>去掉样式或者样式丢失时页面结构依然清晰分明 </li> <li>移动设备能够更加完美的展示你的网页（移动设备对css的支持较弱） </li> <li>阅读器会根据标签的语义自动解析，呈现更容易阅读的内容形式（无障碍阅读） </li> <li>搜索引擎会根据标签的语义确定上下文和权重问题 </li> <li>便于后期的开发以及维护，团队合作效率提高 </li> <li>…… </li> </ol> <h4>HTML标签语义汇总</h4> <p>为了更快更好的运用标签语义化，下面的表单列出了所有的HTML标签以及标签的描述。以下列表按字母顺序排列，其中 <span style="color: blue;">new</span>&#160;:为 HTML5 中的新标签。</p> <table border="1" cellspacing="0"><tbody> <tr> <th width="30%" height="26">标签</th> <th height="26">描述</th> </tr> <tr> <td height="26">&lt;!&#8211;…&#8211;&gt;</td> <td height="26">定义注释。</td> </tr> <tr> <td height="26">&lt;!DOCTYPE&gt;</td> <td height="26">定义文档类型。</td> </tr> <tr> <td height="26">&lt;a&gt;</td> <td height="26">定义超链接。</td> </tr> <tr> <td height="26">&lt;abbr&gt;</td> <td height="26">定义缩写。</td> </tr> <tr> <td height="26">&lt;acronym&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义首字母缩写。</td> </tr> <tr> <td height="26">&lt;address&gt;</td> <td height="26">定义地址元素。</td> </tr> <tr> <td height="26">&lt;applet&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义 applet。</td> </tr> <tr> <td height="26">&lt;area&gt;</td> <td height="26">定义图像映射中的区域。</td> </tr> <tr> <td height="26" class="html5_new">&lt;article&gt;</td> <td height="26">定义 article。</td> </tr> <tr> <td height="26" class="html5_new">&lt;aside&gt;</td> <td height="26">定义页面内容之外的内容。</td> </tr> <tr> <td height="26" class="html5_new">&lt;audio&gt;</td> <td height="26">定义声音内容。</td> </tr> <tr> <td height="26">&lt;b&gt;</td> <td height="26">定义粗体文本。</td> </tr> <tr> <td height="26">&lt;base&gt;</td> <td height="26">定义页面中所有链接的基准 URL。</td> </tr> <tr> <td height="26">&lt;basefont&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>请使用 CSS 代替。</td> </tr> <tr> <td height="26" class="html5_new">&lt;bdi&gt;</td> <td height="26">定义文本的文本方向，使其脱离其周围文本的方向设置。</td> </tr> <tr> <td height="26">&lt;bdo&gt;</td> <td height="26">定义文本显示的方向。</td> </tr> <tr> <td height="26">&lt;big&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义大号文本。</td> </tr> <tr> <td height="26">&lt;blockquote&gt;</td> <td height="26">定义长的引用。</td> </tr> <tr> <td height="26">&lt;body&gt;</td> <td height="26">定义 body 元素。</td> </tr> <tr> <td height="26">&lt;br&gt;</td> <td height="26">插入换行符。</td> </tr> <tr> <td height="26">&lt;button&gt;</td> <td height="26">定义按钮。</td> </tr> <tr> <td height="26" class="html5_new">&lt;canvas&gt;</td> <td height="26">定义图形。</td> </tr> <tr> <td height="26">&lt;caption&gt;</td> <td height="26">定义表格标题。</td> </tr> <tr> <td height="26">&lt;center&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义居中的文本。</td> </tr> <tr> <td height="26">&lt;cite&gt;</td> <td height="26">定义引用。</td> </tr> <tr> <td height="26">&lt;code&gt;</td> <td height="26">定义计算机代码文本。</td> </tr> <tr> <td height="26">&lt;col&gt;</td> <td height="26">定义表格列的属性。</td> </tr> <tr> <td height="26">&lt;colgroup&gt;</td> <td height="26">定义表格列的分组。</td> </tr> <tr> <td height="26" class="html5_new">&lt;command&gt;</td> <td height="26">定义命令按钮。</td> </tr> <tr> <td height="26" class="html5_new">&lt;datalist&gt;</td> <td height="26">定义下拉列表。</td> </tr> <tr> <td height="26">&lt;dd&gt;</td> <td height="26">定义定义的描述。</td> </tr> <tr> <td height="26">&lt;del&gt;</td> <td height="26">定义删除文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;details&gt;</td> <td height="26">定义元素的细节。</td> </tr> <tr> <td height="26">&lt;dfn&gt;</td> <td height="26">定义定义项目。</td> </tr> <tr> <td height="26">&lt;dir&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义目录列表。</td> </tr> <tr> <td height="26">&lt;div&gt;</td> <td height="26">定义文档中的一个部分。</td> </tr> <tr> <td height="26">&lt;dl&gt;</td> <td height="26">定义定义列表。</td> </tr> <tr> <td height="26">&lt;dt&gt;</td> <td height="26">定义定义的项目。</td> </tr> <tr> <td height="26">&lt;em&gt;</td> <td height="26">定义强调文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;embed&gt;</td> <td height="26">定义外部交互内容或插件。</td> </tr> <tr> <td height="26">&lt;fieldset&gt;</td> <td height="26">定义 fieldset。</td> </tr> <tr> <td height="26" class="html5_new">&lt;figcaption&gt;</td> <td height="26">定义 figure 元素的标题。</td> </tr> <tr> <td height="26" class="html5_new">&lt;figure&gt;</td> <td height="26">定义媒介内容的分组，以及它们的标题。</td> </tr> <tr> <td height="26">&lt;font&gt;</td> <td height="26"><span class="deprecated">HTML 5 中不支持。</span></td> </tr> <tr> <td height="26" class="html5_new">&lt;footer&gt;</td> <td height="26">定义 section 或 page 的页脚。</td> </tr> <tr> <td height="26">&lt;form&gt;</td> <td height="26">定义表单。</td> </tr> <tr> <td height="26">&lt;frame&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义子窗口（框架）。</td> </tr> <tr> <td height="26">&lt;frameset&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义框架的集。</td> </tr> <tr> <td height="26">&lt;h1&gt; to &lt;h6&gt;</td> <td height="26">定义标题 1 到标题 6。</td> </tr> <tr> <td height="26">&lt;head&gt;</td> <td height="26">定义关于文档的信息。</td> </tr> <tr> <td height="26" class="html5_new">&lt;header&gt;</td> <td height="26">定义 section 或 page 的页眉。</td> </tr> <tr> <td height="26" class="html5_new">&lt;hgroup&gt;</td> <td height="26">定义有关文档中的 section 的信息。</td> </tr> <tr> <td height="26">&lt;hr&gt;</td> <td height="26">定义水平线。</td> </tr> <tr> <td height="26">&lt;html&gt;</td> <td height="26">定义 html 文档。</td> </tr> <tr> <td height="26">&lt;i&gt;</td> <td height="26">定义斜体文本。</td> </tr> <tr> <td height="26">&lt;iframe&gt;</td> <td height="26">定义行内的子窗口（框架）。</td> </tr> <tr> <td height="26">&lt;img&gt;</td> <td height="26">定义图像。</td> </tr> <tr> <td height="26">&lt;input&gt;</td> <td height="26">定义输入域。</td> </tr> <tr> <td height="26">&lt;ins&gt;</td> <td height="26">定义插入文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;keygen&gt;</td> <td height="26">定义生成密钥。</td> </tr> <tr> <td height="26">&lt;isindex&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义单行的输入域。</td> </tr> <tr> <td height="26">&lt;kbd&gt;</td> <td height="26">定义键盘文本。</td> </tr> <tr> <td height="26">&lt;label&gt;</td> <td height="26">定义表单控件的标注。</td> </tr> <tr> <td height="26">&lt;legend&gt;</td> <td height="26">定义 fieldset 中的标题。</td> </tr> <tr> <td height="26">&lt;li&gt;</td> <td height="26">定义列表的项目。</td> </tr> <tr> <td height="26">&lt;link&gt;</td> <td height="26">定义资源引用。</td> </tr> <tr> <td height="26">&lt;map&gt;</td> <td height="26">定义图像映射。</td> </tr> <tr> <td height="26" class="html5_new">&lt;mark&gt;</td> <td height="26">定义有记号的文本。</td> </tr> <tr> <td height="26">&lt;menu&gt;</td> <td height="26">定义菜单列表。</td> </tr> <tr> <td height="26">&lt;meta&gt;</td> <td height="26">定义元信息。</td> </tr> <tr> <td height="26" class="html5_new">&lt;meter&gt;</td> <td height="26">定义预定义范围内的度量。</td> </tr> <tr> <td height="26" class="html5_new">&lt;nav&gt;</td> <td height="26">定义导航链接。</td> </tr> <tr> <td height="26">&lt;noframes&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义 noframe 部分。</td> </tr> <tr> <td height="26">&lt;noscript&gt;</td> <td height="26">定义 noscript 部分。</td> </tr> <tr> <td height="26">&lt;object&gt;</td> <td height="26">定义嵌入对象。</td> </tr> <tr> <td height="26">&lt;ol&gt;</td> <td height="26">定义有序列表。</td> </tr> <tr> <td height="26">&lt;optgroup&gt;</td> <td height="26">定义选项组。</td> </tr> <tr> <td height="26">&lt;option&gt;</td> <td height="26">定义下拉列表中的选项。</td> </tr> <tr> <td height="26" class="html5_new">&lt;output&gt;</td> <td height="26">定义输出的一些类型。</td> </tr> <tr> <td height="26">&lt;p&gt;</td> <td height="26">定义段落。</td> </tr> <tr> <td height="26">&lt;param&gt;</td> <td height="26">为对象定义参数。</td> </tr> <tr> <td height="26">&lt;pre&gt;</td> <td height="26">定义预格式化文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;progress&gt;</td> <td height="26">定义任何类型的任务的进度。</td> </tr> <tr> <td height="26">&lt;q&gt;</td> <td height="26">定义短的引用。</td> </tr> <tr> <td height="26" class="html5_new">&lt;rp&gt;</td> <td height="26">定义若浏览器不支持 ruby 元素显示的内容。</td> </tr> <tr> <td height="26" class="html5_new">&lt;rt&gt;</td> <td height="26">定义 ruby 注释的解释。</td> </tr> <tr> <td height="26" class="html5_new">&lt;ruby&gt;</td> <td height="26">定义 ruby 注释。</td> </tr> <tr> <td height="26">&lt;s&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义加删除线的文本。</td> </tr> <tr> <td height="26">&lt;samp&gt;</td> <td height="26">定义样本计算机代码。</td> </tr> <tr> <td height="26">&lt;script&gt;</td> <td height="26">定义脚本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;section&gt;</td> <td height="26">定义 section。</td> </tr> <tr> <td height="26">&lt;select&gt;</td> <td height="26">定义可选列表。</td> </tr> <tr> <td height="26">&lt;small&gt;</td> <td height="26">将旁注 (side comments) 呈现为小型文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;source&gt;</td> <td height="26">定义媒介源。</td> </tr> <tr> <td height="26">&lt;span&gt;</td> <td height="26">定义文档中的 section。</td> </tr> <tr> <td height="26">&lt;strike&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义加删除线的文本。</td> </tr> <tr> <td height="26">&lt;strong&gt;</td> <td height="26">定义强调文本。</td> </tr> <tr> <td height="26">&lt;style&gt;</td> <td height="26">定义样式定义。</td> </tr> <tr> <td height="26">&lt;sub&gt;</td> <td height="26">定义下标文本。</td> </tr> <tr> <td height="26" class="html5_new">&lt;summary&gt;</td> <td height="26">定义 details 元素的标题。</td> </tr> <tr> <td height="26">&lt;sup&gt;</td> <td height="26">定义上标文本。</td> </tr> <tr> <td height="26">&lt;table&gt;</td> <td height="26">定义表格。</td> </tr> <tr> <td height="26">&lt;tbody&gt;</td> <td height="26">定义表格的主体。</td> </tr> <tr> <td height="26">&lt;td&gt;</td> <td height="26">定义表格单元。</td> </tr> <tr> <td height="26">&lt;textarea&gt;</td> <td height="26">定义 textarea。</td> </tr> <tr> <td height="26">&lt;tfoot&gt;</td> <td height="26">定义表格的脚注。</td> </tr> <tr> <td height="26">&lt;th&gt;</td> <td height="26">定义表头。</td> </tr> <tr> <td height="26">&lt;thead&gt;</td> <td height="26">定义表头。</td> </tr> <tr> <td height="26" class="html5_new">&lt;time&gt;</td> <td height="26">定义日期/时间。</td> </tr> <tr> <td height="26">&lt;title&gt;</td> <td height="26">定义文档的标题。</td> </tr> <tr> <td height="26">&lt;tr&gt;</td> <td height="26">定义表格行。</td> </tr> <tr> <td height="26" class="html5_new">&lt;track&gt;</td> <td height="26">定义用在媒体播放器中的文本轨道。</td> </tr> <tr> <td height="26">&lt;tt&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义打字机文本。</td> </tr> <tr> <td height="26">&lt;u&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义下划线文本。</td> </tr> <tr> <td height="26">&lt;ul&gt;</td> <td height="26">定义无序列表。</td> </tr> <tr> <td height="26">&lt;var&gt;</td> <td height="26">定义变量。</td> </tr> <tr> <td height="26" class="html5_new">&lt;video&gt;</td> <td height="26">定义视频。</td> </tr> <tr> <td height="26">&lt;xmp&gt;</td> <td height="26"> <span class="deprecated">HTML 5 中不支持。</span>定义预格式文本。</td> </tr> </tbody></table>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">填写互联网表单几乎是每个用户每天的经历，如用户进行网站注册和登录、购物等，都需要填写各种表单。用户为了获得想要的东西，表单成了用户完成需求和网站系统需要数据之间的互动形式。那么表单设计的首要目标也更清晰：让用户迅速高效快捷并且轻松地完成填写。</font> </td> </tr></tbody></table> <p sizset="0" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501430.gif"></p> <p>　　填写互联网表单几乎是每个用户每天的经历，如用户进行网站注册和登录、购物等，都需要填写各种表单。用户为了获得想要的东西，表单成了用户完成需求和网站系统需要数据之间的互动形式。那么表单设计的首要目标也更清晰：让用户迅速高效快捷并且轻松地完成填写。</p> <p>　　设计目标已清晰，那么如何设计表单呢，以下从表单的内容、组织方式、流程、表单元素控件及交互等方面详细阐述。</p> <p><strong>表单的元素</strong></p> <p>　　研究如何提高表格可用性之前，我们先简要了解下一般表单的元素，这里我们暂且这么总结：<br>　　标签：告诉用户表单问题是什么?<br>　　输入框：供给用户填写答案信息;<br>　　动作：用户提交表单，即用户点击一个按钮或链接，执行一个操作;<br>　　帮助文字：为如何填写表单提供帮助;<br>　　输入反馈：针对用户输入给出反馈，输入正确还是错误;</p> <p sizset="1" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501431.gif"></p> <p><strong>提高表单可用性的一些技巧</strong></p> <p><strong>一 信息内容的合理组织</strong></p> <p>　　考虑用户填写表单的目的，哪些表单需要填写，去掉没必要的表单项，确定完表单内容。如何组织起来呢?表单项并不是一个个从上到下无序罗列，而是根据表单内容，按照一定的逻辑，经过组织，分成不同的内容组，不同的主题。同时各个逻辑组和同一个主题的表单项，也是按照逻辑顺序或者用户熟悉的模式顺序，使用户浏览和填写自如。如果表单过长时，也可拆解成不同网页，类似于任务拆解，让用户一步步填写。</p> <p>　　品牌1.0系统，新建订单时，将表单内容，进行逻辑划分为两个内容组：基本信息(重要/必填)和附加信息 (次要/选填)，通过分割线区分内容组，结构清晰，易于浏览。考虑区分内容组时，应当考虑采用较少的视觉信息，过多的视觉信息可能会导致注意力分散，给表单带来大量视觉噪音。</p> <p sizset="2" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501432.gif"></p> <p>　　新建百度Union账户，表单内容较长，同时有若干主题，一个网页信息量太大，所以采用多个网页来组织表单，分步骤给用户，提供清晰的路径步骤，即清晰又简单。用户在填写时，提供进程指示，避免紧张和疑惑。</p> <p sizset="3" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501433.gif"></p> <p><strong>二 简化表单 突出重点</strong></p> <p>　　根据用户使用数据，适当将使用频次不高、或者提供给专业用户的高级表单项隐藏起来。比如品牌1.0的新建创意表单，90%的人不进行曝光监控链接的填写，那么默认收起，保持表单的简洁，让绝大多数用户快速完成，避免大量的表单给用户的焦虑，而又满足了小众用户的需求。</p> <p sizset="4" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501434.gif"></p> <p><strong>三 清晰的浏览线</strong></p> <p>　　思考如何设计表单结构和路径时，需要有个基本原则：由始至终提供清晰的浏览线。采用眼动仪实验即可检验用户的浏览线。如标签的对齐方式、输入框的布局等都影响着用户的浏览线。当提供了垂直单一路径，使用户减少注意力分散，可以迅速对问题作出回答，完成任务所花时间最少。</p> <p>　　如下面Etre(www.etre.com)提供的眼动跟踪数据图，表单各个元素构成垂直轴，提供了单一路径，用户有清晰的浏览线，可以迅速对问题做出答复。而另一张图，完成过程变成了弯曲的眼球运动，采用单一路径更容易处理表单问题。</p> <p sizset="5" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501435.gif"></p> <p><strong>四 考虑用户场景 保证主流程顺畅</strong></p> <p>　　我们在设计表单时，定义了清晰的线性步骤，但很少真正实现。考虑用户场景，保证主流程不要中断，将导致人们放弃填写的元素解决。例如，招商银行卡号密码的付款流程，分为三项表单步骤：填写银行卡号、填写其他验证信息、支付成功。但在用户填完卡号和其他验证信息后，经常会发现付款额超出每日限额，以前的流程是，用户中断付款流程，不得不新打开一个网页，招行主页 → 网上个人银行登录 → 选择一卡通(输一卡通卡号、查询密码、附加码)登录后→ 网上支付 → 网上支付额度管理调整额度，然后再次重新支付，使用户在两个操作流程中切换，让用户各种折腾。而改版后的设计，可谓十分贴心，给予信息提示的同时，用户可在当前流程设置限额，避免了付款流程的中断，同时大大节省了用户的操作成本。</p> <p sizset="6" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501436.gif"></p> <p>　　还有新建广告位时，选择所属频道，如果没有想要的频道，就需要新建频道，增加额外的页面来添加新频道，而在设计时，考虑到用户的此场景，在下拉选择框旁边，增加“新建频道”按钮，为用户提供便捷，减少了新建广告位流程的打断。</p> <p sizset="7" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501437.gif"></p> <p><strong>五 选择合适的标签对齐方式</strong></p> <p>　　“输入框标签应该是顶对齐、右对齐、左对齐还是输入框内标签?”是我们在设计表单时最常见的问题。其实业界有很多针对此问题的实验和研究(Matteo Penzo的眼动实验、Luke Wroblewski的Luke Wroblewski’s findings、Vitaly Friedman的web表单设计之注册表单)，都表明每种方式有不同的优缺点，根据具体目标等因素具体考虑。</p> <p>　　Matteo Penzo的眼动实验发现，顶部标签方式，标签移动到输入框需50毫秒，比左对齐标签方式(500毫秒)快了10倍，比右对齐标签方式(240毫秒)快了5倍左右。</p> <p sizset="8" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501438.gif"></p> <p>　　总之，顶部标签方式，填表时间最短。但如果尽量减少垂直面积，可以考虑右对齐方式。如果希望用户填表时认真浏览标签，了解仔细考虑表单的每个输入框时，可以采用左对齐方式。</p> <p sizset="9" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/1501439.gif"></p> <p><strong>六 提供帮助</strong></p> <p>　　为了用户快地填写表单，一般在难以理解的表单项增加帮助信息，引导用户成功填表。帮助信息，提示用户应该如何填写，常见的帮助，一般在标签或者输入框旁提供帮助文字，交互方式也有一直展现(即一直出现在输入框右侧、下方或输入框内)、即时帮助(即激活输入框时，帮助文字自动出现)、用户激活的即时帮助(即帮助信息默认不显示、用户鼠标悬浮触发帮助图标来显示帮助)、用户激活的区域帮助(将表单所有的帮助信息统一放在一个位置)等多种方式。其实可以考虑更多的方式来更好地帮助用户，例如经常见到的信用卡有效期填写，当用户激活输入框时，右侧出现可视化的帮助信息，更简洁直观，更好理解。</p> <p sizset="10" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/15014310.gif"></p> <p><strong>七 智能默认</strong></p> <p>　　网络表单中有很多地方能利用智能默认减少必要的选择和输入次数，加速表单完成过程。一般通过恰当设置满足大多数人需要的默认选择和数值，推送默认每个人都相同。还有个性化默认方式，它与表单对象相关。如京东购买的订单信息，智能默认与个人相关，不需要表单输入，默认之前的收货地址信息、支付配送方式、发票信息等，符合用户的需求习惯，同时避免了重复输入的成本。品牌1.0的新建广告设置，96%的用户折扣率为所属订单的折扣率，但又要满足KA用户修改广告折扣率的需求，所以输入框预置默认为订单折扣率，加速绝大多数用户的表单填写。</p> <p sizset="11" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/15014311.gif"></p> <p><strong>八 即时反馈验证</strong></p> <p>　　虽然设计表单时，保证表单的内容结构清晰，提供有意义的输入帮助，但总有些答案不止一个。此时，直接反馈有助于再次确保人们的回答有效，提供即时校验。即时验证分为多类反馈：确认输入合适、建议有效回答、核对输入信息，通过实时更新设计以帮助用户控制在必要的限制范围内。这类反馈通常发生在用户在输入框开始、继续输入或者停止输入的时候。</p> <p>　　如在设置密码时，要求用户输入字符数有限制、字符类型有限制的密码，利用即时验证，不仅告诉用户输入的密码是否有效，是否合格，而不是填完所有表单，提交之后，才告我密码需要修改，同时还能说明密码的安全程度，采用高度可视化方式让用户衡量密码质量。</p> <p>　　直接反馈不仅限于确认所提供的答案，还能提供输入建议。用户在搜索时，搜索框能够在输入过程中自动补全、提供相关联的搜索建议，既可以避免用户输入出错，又可以节约用户的拼写时间(这一点在手机端更加需要)。</p> <p><strong>九 额外输入</strong></p> <p>　　额外输入可以提供更多选项或者高级选项，满足有需要的用户，同时不妨碍许需要的用户。如图不到10%的用户会填写一个以上的曝光监控链接，这类用户可以选择点击“添加”按钮来进行更多的输入，即时增加并不阻碍完成任务。</p> <p sizset="12" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/15014312.gif"></p> <p><strong>十 其它方法</strong></p> <p>　　如果用户填写的表单与已有表单的表单项大多数相同，为避免用户重复的输入，提供复制导入表单数据功能，用户只需修改少量数据即可。</p> <p>　　将重点信息或者难以理解的信息可视化，清晰有效地传达与沟通信息，形成高效的功能、使用映射，使用户高效完成任务目标。如将广告管家1.0选择创意模版，表格列表形式清晰，但用户理解成本和选择判断成本较大;新方案默认缩略图形式，强调对创意的直观，一图胜千言，用户选择较高效。</p> <p sizset="13" sizcache="8"><img style="_width: 620px;" alt="null" src="http://www.webjx.com/files/allimg/130716/15014313.gif"></p> <p>　　除以上方法，还有一些主动作和次动作的差异、采用垂直或水平选项卡、采用叠层等方法。当用户在填写表单时，他们希望尽可能快的完成任务。因此十分有必要将表单设计得清晰和整齐。</p> <p><strong>后续</strong></p> <p>　　随着科技的发展，语音智能、拍照及传感器等新技术的出现，这些必定会对表单设计打开新的思路。也可能以后人们不通过表单形式，直接通过声音、眼神等完成与系统互动，表单或许更加弱化或消失。</p> <p>参考资料</p> <p>http://www.etre.com</p> <p>http://www.lukew.com/ff/entry.asp?1502</p> <p>http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/Luke Wroblewski 《Web Form Design: Filling in the Blanks》</p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">利用前端技术驱动用户体验的文章较少，希望通过这篇文章给大家带来新的视角与思考，最终目的是希望用户能有更好的体验。</font> </td> </tr></tbody></table> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631420.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>Hua：最近对网站轮播图做了一些优化，虽然它看似简单，但从用户角度去思考，却能得到有趣的体验。<br>轮播图对于很多网站必不可少，它在有限空间展示更多内容，并且可以利用炫目的切换效果吸引用户，以下是一些知名网站截图：</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631421.jpg"><br><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631422.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>利用前端技术javascript制作轮播图并不难，首先要实现3个基本功能：</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>1、图片按照一定时间间隔循环播放；<br>2、数字导航随图片一起循环；<br>3、数字导航控制图片展示；</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>体验后是不是觉得不爽，比如鼠标移进图片刚想看清楚细节时却跳到下张，是的，这非常伤害用户感情。如何解决，原理很简单，鼠标移进图片暂停轮播，鼠标移出恢复轮播。<br>虽然很多网站早已实现该功能，但是无一例外存在一个问题&#8212;&#8212;鼠标移出图片时，仍然需要等待几秒钟才会跳到下一张，这种体验合理吗？从用户角度，当用户看完后，鼠标移出图片，合理的逻辑应该是立即跳到下张；从产品或者运营角度，他们也希望用户能够看到更多的广告图。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>有些网站的轮播图尺寸往往比较大，特别是电商网站，为了吸引用户眼球，制造欢乐气氛，这些都是合理的。但是轮播图变大，其占据首屏的空间就会变大，当用户在页面进行操作时，可能会不小心滑过图片，然后又滑出图片，这个过程极为短暂，如果这时立即响应对应方法导致页面发生或者不发生变化，会给用户带来困惑甚至不便。比如用户在一段时间内误滑进滑出轮播图多次，导致轮播图响应暂停，一直停留在固定图片上，这会让用户感觉轮播失效。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>所以需要对这种情况给出容错机制，也就是延迟响应，如果发现用户只是瞬间移过，则不响应，就像鼠标从来没有经过图片；当鼠标在图片停留到一定时间，则认为用户的确是要看图片，对应方法才会响应，这个延迟时间一般认为不要低于200ms。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>综上所诉，要实现的增强体验功能有两点：</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>4、鼠标移上图片暂停，移出图片后立即跳到下张图片并继续轮播；<br>5、鼠标经过延迟响应；</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>吐槽了那么多，来看看代码，非前端同学可能会以为实现上述两个功能要许多代码，实际只有短短几行：</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631423.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>虽然代码不多，但还是有一些基本技巧，比如红框处布尔值控制是延时功能关键。<br>写到这里，用户体验貌似还算可以，那还有没有优化空间呢？！<br>中国的网速在世界上排名较后，甚至很多地方网速还在1M左右，提高低网速用户体验同样重要。按需加载轮播图便是方法之一，当跳到对应图片，才下载所需图片，这是加快图片显示和节省流量的不二法则。但是任何事物都有两面性，有利便有弊，看图：</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631424.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>这应该是经常看到的画面，图片加载过程暴露在用户面前，这在低网速下尤为明显。弥补这一缺陷的方法也很简单&#8212;&#8212;图片预加载并且在加载时给出等待图标提示，继续看图：</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130806/1631425.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>预加载可以使图片一次性完整展示，而不会暴露加载过程，从而给用户合理预期。<br>最后实现的两个增强体验如下：</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>6、图片按需加载；<br>7、图片预加载并且在加载过程给出等待图标提示。<br>同学可以点击这里体验增强版轮播图效果。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>利用前端技术驱动用户体验的文章较少，希望通过这篇文章给大家带来新的视角与思考，最终目的是希望用户能有更好的体验。</p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">这里我们介绍一个可以在线制作HTML5动画banner生成工具，内置多个常用用的动画效果，像FLASH的渐变、滑动、模糊这些效果都非常流畅。</font> </td> </tr></tbody></table> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>HTML5动画已经流行一段时间，但是作为设计师，很难懂这些代码，不过没关系，这里我们介绍一个可以在线制作HTML5动画banner生成工具，内置多个常用用的动画效果，像FLASH的渐变、滑动、模糊这些效果都非常流畅。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130902/2014510.png"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><strong style="color: rgb(220, 37, 35); font-size: 16px;">右戳体验神器→<span class="Apple-converted-space">&#160;</span></strong><a style="color: rgb(40, 71, 144); text-decoration: underline;" href="http://html5maker.com/" target="_blank">html5maker</a></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>使用这个HTML5 MAKER来设计banner比用FLASH还要简单，一般的效果我们已经够用，不过也是有据点的，就是语言支持问题，还未支持中文啊。<br>对于HTML5，国内还未成熟，但是如果用于做英文站的朋友可以尝试使用，因为国外的CSS3、HTML5已经普及。</p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'><img style="padding: 4px; border-radius: 4px; border: 1px solid rgb(221, 221, 221); max-width: 800px; box-shadow: 0px 0px 4px rgb(238,238,238);" alt="null" src="http://www.webjx.com/files/allimg/130902/2014511.jpg"></p> <p style='font: 13px/24px "microsoft yahei", verdana, arial; margin: 11px 0px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgb(255, 255, 255); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;'>网站上内置了一些banner模板，大家可以使用它来修改你的banner。</p>

<p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">HTML5将给企业带来什么？</font> </td> </tr></tbody></table> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>HTML5 是近年来互联网行业的热门词汇，火的很。微软 IE 产品总经理发文： 未来的网络属于 HTML5。乔布斯生前也在公开信《Flash 之我见》中预言：像 HTML5 这样在移动时代中创立的新标准，将会在移动设备上获得胜利。更有人高调宣称“APP 将在几年内灭亡，HTML5 取而代之”。怪吓人的。</p> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>这么革命性的东西，不能只是技术宅们的那杯茶，在商业应用上也该有所作为。更具体些：HTML5 到底将给企业带来什么？本文中我们做了如下探讨：</p> <h3 style='margin: 0px; padding: 15px 0px 0px; text-align: left; color: rgb(51, 51, 51); text-transform: none; line-height: normal; text-indent: 0px; letter-spacing: normal; font-family: "Microsoft YaHei", "SimHei "; font-size: 14px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>一、改变企业网络广告的模式与分布</h3> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>广告是企业网络营销的主要方式之一。十几年来，无论是展示还是互动，基本被 Adobe Flash 所主宰。然而，HTML5 网页的多媒体特性、三维、图形及特效，超炫的浏览体验，使得 HTML5 不仅在电脑浏览器上可以呈现令人惊叹的效果，在移动设备上更加表现不凡。而苹果将 Flash 拒之门外，起了推波助澜的作用。</p> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>敏锐的网站所有者已经意识到 HTML5 将成为网络广告的新宠，因为 Flash 能做的事情，HTML5 也可以做到，而且做得更好。未来，企业网络广告的模式和分布将因 HTML5 而改变， Flash 广告将逐步被 HTML5 所替代。而更多更丰富的互联网广告也会在移动端涌现。</p> <h3 style='margin: 0px; padding: 15px 0px 0px; text-align: left; color: rgb(51, 51, 51); text-transform: none; line-height: normal; text-indent: 0px; letter-spacing: normal; font-family: "Microsoft YaHei", "SimHei "; font-size: 14px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>二、传统企业IT应用移动化</h3> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>如今，办公室里充斥着大量移动智能终端， BYOD（员工自带设备办公）将是个趋势。毕竟谁都愿意拿最称手的工具干活。但国内大多数的企业级 IT 应用仍然部署在电脑上，而且仅限于 Windows。将这些传统应用重构代码，以原生应用的形式移植到<span class="wp_keywordlink_affiliate">移动平台</span>上绝不是一件容易的事情。HTML5 标准相对规范，部署简单，势必将引发传统企业 IT 应用移动化的趋势。在国外，有以色列的Gizmox公司做这个事，帮企业把传统 IT 应用转为 HTML5 应用，获得了 Atlas Venture 领投的 750 万美元融资。</p> <h3 style='margin: 0px; padding: 15px 0px 0px; text-align: left; color: rgb(51, 51, 51); text-transform: none; line-height: normal; text-indent: 0px; letter-spacing: normal; font-family: "Microsoft YaHei", "SimHei "; font-size: 14px; font-style: normal; font-variant: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>三、帮助企业构建应用平台</h3> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>HTML5 与移动互联网现在如胶如漆。HTML5 具有的本地存储功能、设备兼容性、地理位置信息等特性，非常适用于移动开发。“自适应网页设计”，可使每个网页自动适应不同的屏幕，根据屏幕大小自动调整布局。因此，移动开发者们如获至宝，HTML5 被广泛使用于手机网站中。</p> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>但企业能得到的绝不仅仅是个手机网站。借助 HTML5，企业可以构建 Web APP 应用平台。除了展示品牌形象，还可以集成微信、微博、短信、在线客服、CRM 系统等多平台接口，将数据汇聚，形成移动端的统一入口。进一步扩展出互动营销、会员管理乃至移动商城等复杂应用。再与内部系统打通……嗯，齐活了。</p> <p style='font: 14px/26px Arial, sans-serif, "Microsoft YaHei", 微软雅黑; margin: 12px 0px 10px; padding: 0px; text-align: left; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; background-color: rgba(249, 249, 249, 0.949219); -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;'>总之，HTML5 这盘棋海了去了，商业应用刚开个了头。这里有不少细分市场，足够滋养一大堆 to B 公司。尤其是上面讲的第三点，如果能解决标准化问题，涌现一两家企业级移动服务的巨头，也算不上让小伙伴们惊呆的事。</p>