在线
客服

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

客服
热线

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

?

关注
微信

关注官方微信

返回
顶部

13

2019-04
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">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>

Read more+

13

2019-04
iio Engine:开源的创建HTML5应用的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">开源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>

Read more+

13

2019-04
网页技巧:表单(textarea)有关焦点的用法

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

Read more+

13

2019-04
HTML5代码示例:渐进增强版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">渐进增强版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>

Read more+

13

2019-04
hr标记代码应用:兼容浏览器的hr代码

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

Read more+

13

2019-04
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">在定义了规范后,元素、属性(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>

Read more+

13

2019-04
2013年主流浏览器HTML5与CSS3兼容性对比

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

Read more+

13

2019-04
HTML5+CSS3教程:使用SVG高校处理网页图片

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

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

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

Read more+