在线
客服

在线客服
尊敬的客户,我们24小时竭诚为您服务 公司总机: 0755-83312037 (32条线)

客服
热线

0755-83312037 (32条线)
7*24小时客服服务热线

?

关注
微信

关注官方微信

返回
顶部

13

2019-04
HTML教程XHTML教程:HTML标记嵌套使用技巧

<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>

Read more+

13

2019-04
网页重构尽量避免使用代码注释

<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>

Read more+

13

2019-04
HTML5未来:WebGL强大的图形创作和动画

<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>

Read more+

13

2019-04
网页设计技巧:网站易用性设计技巧10则

<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>

Read more+

13

2019-04
网页制作基础知识:全面学习掌握字符编码

<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>

Read more+

13

2019-04
HTML5代码学习:值得收藏的HTML5代码片段

<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>

Read more+

17

2018-05
CSS经典教程:CSS选择器的优先级

<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>

Read more+

17

2018-05
HTML5备忘录:tags标签、事件内容属性和浏览器支持

<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>

Read more+

17

2018-05
网页表单设计:网页表单用户体验设计

<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>

Read more+

17

2018-05
移动WEB设计:论返回按钮的设计

<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>

Read more+