how2j.cn


工具版本兼容问题
使用<font>标签表示字体

步骤 1 : 字体元素   
步骤 2 : 颜色表示方法   
步骤 3 : 颜色速查手册   

步骤 1 :

字体元素

顶 折
font常用的属性有 color和size, 分别表示颜色和大小
"); window.frames["iframe_show2087"].document.write(decodeHtml($("textarea#stepcodeTextarea2087").val())); window.frames["iframe_show2087"].document.close(); $(window.frames["iframe_show2087"]).load(function(){ $("#iframe_show2087").height($("#iframe_show2087").contents().find("body").height()+showittryitheight); }); $("#iframe_show2087").height($("#iframe_show2087").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<font color="green">绿色默认大小字体</font> <br> <font color="blue" size="+2">蓝色大2号字体</font> <br> <font color="red" size="-2">红色小2号字体</font> 
<font color="green">绿色默认大小字体</font>
<br>
<font color="blue" size="+2">蓝色大2号字体</font>
<br>
<font color="red" size="-2">红色小2号字体</font>
"); window.frames["iframe2087"].document.write(decodeHtml(code2087)); window.frames["iframe2087"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2087"]).load(function(){ $("#iframe2087").height($("#iframe2087").contents().find("body").height()+showittryitheight); }); $("#iframe2087").height($("#iframe2087").contents().find("body").height()+showittryitheight); alreadyWriteCode2087 = code2087; $("#rendering2087").hide(); $("#rendered2087").show(); } var tRereshRetry2DemoPanel2087 = setInterval(rereshRetry2DemoPanel2087,1000); var binded2087 = false; $("textarea#stepcodeTextarea2087").keyup(function(){ if(!binded2087){ $(window).bind('beforeunload',function(){ binded2087 = true; return "xxxx"; }); } var newCode = $(this).val() code2087 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2087!=newCode){ // window.frames["iframe2087"].document.write("
"); // window.frames["iframe2087"].document.write(decodeHtml($("textarea#stepcodeTextarea2087").val())); // window.frames["iframe2087"].document.close(); // $(window.frames["iframe2087"]).load(function(){ // $("#iframe2087").height($("#iframe2087").contents().find("body").height()+showittryitheight); // }); // code2087 = newCode; // } }); $(".tryButton2087").click(function(){ $("#tryDiv2087").show(); $("#stepcodeTextarea2087").focus(); $("#stepcodeTextarea2087").height(200); $("#iframe2087").height(0); window.frames["iframe2087"].document.write("
"); window.frames["iframe2087"].document.write(decodeHtml($("textarea#stepcodeTextarea2087").val())); window.frames["iframe2087"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2087"]).load(function(){ $("#iframe2087").height($("#iframe2087").contents().find("body").height()+showittryitheight); }); $("#iframe2087").height($("#iframe2087").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2087.focus(); editor2087.setSize(null, "250"); $("#rendering2087").hide(); $("#rendered2087").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor2087 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2087"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor2087.on("change",function(doc){ if(!binded2087){ $(window).bind('beforeunload',function(){ binded2087 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2087 = newCode; $("textarea#stepcodeTextarea2087").val(newCode); if(alreadyWriteCode2087!=code2087){ lastModifedTime2087 = new Date().getTime(); $("#rendering2087").show(); $("#rendered2087").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2087 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2087.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2087").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

颜色表示方法

顶 折
在html中，颜色通常使用两种方式来表示：
1. 颜色名，比如red, blue
2. 颜色对应的16进制，比如#ff0000 就表示红色
"); window.frames["iframe_show2088"].document.write(decodeHtml($("textarea#stepcodeTextarea2088").val())); window.frames["iframe_show2088"].document.close(); $(window.frames["iframe_show2088"]).load(function(){ $("#iframe_show2088").height($("#iframe_show2088").contents().find("body").height()+showittryitheight); }); $("#iframe_show2088").height($("#iframe_show2088").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<font color="red" >用red表示红色字体</font> <br> <font color="#ff0000" >用#ff0000表示红色字体</font> 
<font color="red" >用red表示红色字体</font>
<br>
<font color="#ff0000" >用#ff0000表示红色字体</font>
"); window.frames["iframe2088"].document.write(decodeHtml(code2088)); window.frames["iframe2088"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2088"]).load(function(){ $("#iframe2088").height($("#iframe2088").contents().find("body").height()+showittryitheight); }); $("#iframe2088").height($("#iframe2088").contents().find("body").height()+showittryitheight); alreadyWriteCode2088 = code2088; $("#rendering2088").hide(); $("#rendered2088").show(); } var tRereshRetry2DemoPanel2088 = setInterval(rereshRetry2DemoPanel2088,1000); var binded2088 = false; $("textarea#stepcodeTextarea2088").keyup(function(){ if(!binded2088){ $(window).bind('beforeunload',function(){ binded2088 = true; return "xxxx"; }); } var newCode = $(this).val() code2088 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2088!=newCode){ // window.frames["iframe2088"].document.write("
"); // window.frames["iframe2088"].document.write(decodeHtml($("textarea#stepcodeTextarea2088").val())); // window.frames["iframe2088"].document.close(); // $(window.frames["iframe2088"]).load(function(){ // $("#iframe2088").height($("#iframe2088").contents().find("body").height()+showittryitheight); // }); // code2088 = newCode; // } }); $(".tryButton2088").click(function(){ $("#tryDiv2088").show(); $("#stepcodeTextarea2088").focus(); $("#stepcodeTextarea2088").height(200); $("#iframe2088").height(0); window.frames["iframe2088"].document.write("
"); window.frames["iframe2088"].document.write(decodeHtml($("textarea#stepcodeTextarea2088").val())); window.frames["iframe2088"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2088"]).load(function(){ $("#iframe2088").height($("#iframe2088").contents().find("body").height()+showittryitheight); }); $("#iframe2088").height($("#iframe2088").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2088.focus(); editor2088.setSize(null, "250"); $("#rendering2088").hide(); $("#rendered2088").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor2088 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2088"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor2088.on("change",function(doc){ if(!binded2088){ $(window).bind('beforeunload',function(){ binded2088 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2088 = newCode; $("textarea#stepcodeTextarea2088").val(newCode); if(alreadyWriteCode2088!=code2088){ lastModifedTime2088 = new Date().getTime(); $("#rendering2088").show(); $("#rendered2088").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2088 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2088.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2088").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果
步骤 3 :

颜色速查手册

顶 折
"); window.frames["iframe_show2089"].document.write(decodeHtml($("textarea#stepcodeTextarea2089").val())); window.frames["iframe_show2089"].document.close(); $(window.frames["iframe_show2089"]).load(function(){ $("#iframe_show2089").height($("#iframe_show2089").contents().find("body").height()+showittryitheight); }); $("#iframe_show2089").height($("#iframe_show2089").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
<style> table.colorTable { border-collapse:collapse; } table.colorTable td{ border: solid 1px gray; padding: 8px; font-size:12px; background-color:#f1f1f1; } table.colorTable tr.head td{ background-color:#ddd; font-size:15px; font-weight:bold; } </style> <table class="colorTable" > <tr class="head"> <td width="25%">颜色名</th> <td width="25%">十六进制颜色值</th> <td width="50%">颜色</th> </tr> <tr> <td>AliceBlue</td> <td>#F0F8FF</td> <td style="background-color:#F0F8FF">&nbsp;</td> </tr> <tr> <td>AntiqueWhite</td> <td>#FAEBD7</td> <td style="background-color:#FAEBD7">&nbsp;</td> </tr> <tr> <td>Aqua</td> <td>#00FFFF</td> <td style="background-color:#00FFFF">&nbsp;</td> </tr> <tr> <td>Aquamarine</td> <td>#7FFFD4</td> <td style="background-color:#7FFFD4">&nbsp;</td> </tr> <tr> <td>Azure</td> <td>#F0FFFF</td> <td style="background-color:#F0FFFF">&nbsp;</td> </tr> <tr> <td>Beige</td> <td>#F5F5DC</td> <td style="background-color:#F5F5DC">&nbsp;</td> </tr> <tr> <td>Bisque</td> <td>#FFE4C4</td> <td style="background-color:#FFE4C4">&nbsp;</td> </tr> <tr> <td>Black</td> <td>#000000</td> <td style="background-color:#000000">&nbsp;</td> </tr> <tr> <td>BlanchedAlmond</td> <td>#FFEBCD</td> <td style="background-color:#FFEBCD">&nbsp;</td> </tr> <tr> <td>Blue</td> <td>#0000FF</td> <td style="background-color:#0000FF">&nbsp;</td> </tr> <tr> <td>BlueViolet</td> <td>#8A2BE2</td> <td style="background-color:#8A2BE2">&nbsp;</td> </tr> <tr> <td>Brown</td> <td>#A52A2A</td> <td style="background-color:#A52A2A">&nbsp;</td> </tr> <tr> <td>BurlyWood</td> <td>#DEB887</td> <td style="background-color:#DEB887">&nbsp;</td> </tr> <tr> <td>CadetBlue</td> <td>#5F9EA0</td> <td style="background-color:#5F9EA0">&nbsp;</td> </tr> <tr> <td>Chartreuse</td> <td>#7FFF00</td> <td style="background-color:#7FFF00">&nbsp;</td> </tr> <tr> <td>Chocolate</td> <td>#D2691E</td> <td style="background-color:#D2691E">&nbsp;</td> </tr> <tr> <td>Coral</td> <td>#FF7F50</td> <td style="background-color:#FF7F50">&nbsp;</td> </tr> <tr> <td>CornflowerBlue</td> <td>#6495ED</td> <td style="background-color:#6495ED">&nbsp;</td> </tr> <tr> <td>Cornsilk</td> <td>#FFF8DC</td> <td style="background-color:#FFF8DC">&nbsp;</td> </tr> <tr> <td>Crimson</td> <td>#DC143C</td> <td style="background-color:#DC143C">&nbsp;</td> </tr> <tr> <td>Cyan</td> <td>#00FFFF</td> <td style="background-color:#00FFFF">&nbsp;</td> </tr> <tr> <td>DarkBlue</td> <td>#00008B</td> <td style="background-color:#00008B">&nbsp;</td> </tr> <tr> <td>DarkCyan</td> <td>#008B8B</td> <td style="background-color:#008B8B">&nbsp;</td> </tr> <tr> <td>DarkGoldenRod</td> <td>#B8860B</td> <td style="background-color:#B8860B">&nbsp;</td> </tr> <tr> <td>DarkGray</td> <td>#A9A9A9</td> <td style="background-color:#A9A9A9">&nbsp;</td> </tr> <tr> <td>DarkGreen</td> <td>#006400</td> <td style="background-color:#006400">&nbsp;</td> </tr> <tr> <td>DarkKhaki</td> <td>#BDB76B</td> <td style="background-color:#BDB76B">&nbsp;</td> </tr> <tr> <td>DarkMagenta</td> <td>#8B008B</td> <td style="background-color:#8B008B">&nbsp;</td> </tr> <tr> <td>DarkOliveGreen</td> <td>#556B2F</td> <td style="background-color:#556B2F">&nbsp;</td> </tr> <tr> <td>Darkorange</td> <td>#FF8C00</td> <td style="background-color:#FF8C00">&nbsp;</td> </tr> <tr> <td>DarkOrchid</td> <td>#9932CC</td> <td style="background-color:#9932CC">&nbsp;</td> </tr> <tr> <td>DarkRed</td> <td>#8B0000</td> <td style="background-color:#8B0000">&nbsp;</td> </tr> <tr> <td>DarkSalmon</td> <td>#E9967A</td> <td style="background-color:#E9967A">&nbsp;</td> </tr> <tr> <td>DarkSeaGreen</td> <td>#8FBC8F</td> <td style="background-color:#8FBC8F">&nbsp;</td> </tr> <tr> <td>DarkSlateBlue</td> <td>#483D8B</td> <td style="background-color:#483D8B">&nbsp;</td> </tr> <tr> <td>DarkSlateGray</td> <td>#2F4F4F</td> <td style="background-color:#2F4F4F">&nbsp;</td> </tr> <tr> <td>DarkTurquoise</td> <td>#00CED1</td> <td style="background-color:#00CED1">&nbsp;</td> </tr> <tr> <td>DarkViolet</td> <td>#9400D3</td> <td style="background-color:#9400D3">&nbsp;</td> </tr> <tr> <td>DeepPink</td> <td>#FF1493</td> <td style="background-color:#FF1493">&nbsp;</td> </tr> <tr> <td>DeepSkyBlue</td> <td>#00BFFF</td> <td style="background-color:#00BFFF">&nbsp;</td> </tr> <tr> <td>DimGray</td> <td>#696969</td> <td style="background-color:#696969">&nbsp;</td> </tr> <tr> <td>DodgerBlue</td> <td>#1E90FF</td> <td style="background-color:#1E90FF">&nbsp;</td> </tr> <tr> <td>Feldspar</td> <td>#D19275</td> <td style="background-color:#D19275">&nbsp;</td> </tr> <tr> <td>FireBrick</td> <td>#B22222</td> <td style="background-color:#B22222">&nbsp;</td> </tr> <tr> <td>FloralWhite</td> <td>#FFFAF0</td> <td style="background-color:#FFFAF0">&nbsp;</td> </tr> <tr> <td>ForestGreen</td> <td>#228B22</td> <td style="background-color:#228B22">&nbsp;</td> </tr> <tr> <td>Fuchsia</td> <td>#FF00FF</td> <td style="background-color:#FF00FF">&nbsp;</td> </tr> <tr> <td>Gainsboro</td> <td>#DCDCDC</td> <td style="background-color:#DCDCDC">&nbsp;</td> </tr> <tr> <td>GhostWhite</td> <td>#F8F8FF</td> <td style="background-color:#F8F8FF">&nbsp;</td> </tr> <tr> <td>Gold</td> <td>#FFD700</td> <td style="background-color:#FFD700">&nbsp;</td> </tr> <tr> <td>GoldenRod</td> <td>#DAA520</td> <td style="background-color:#DAA520">&nbsp;</td> </tr> <tr> <td>Gray</td> <td>#808080</td> <td style="background-color:#808080">&nbsp;</td> </tr> <tr> <td>Green</td> <td>#008000</td> <td style="background-color:#008000">&nbsp;</td> </tr> <tr> <td>GreenYellow</td> <td>#ADFF2F</td> <td style="background-color:#ADFF2F">&nbsp;</td> </tr> <tr> <td>HoneyDew</td> <td>#F0FFF0</td> <td style="background-color:#F0FFF0">&nbsp;</td> </tr> <tr> <td>HotPink</td> <td>#FF69B4</td> <td style="background-color:#FF69B4">&nbsp;</td> </tr> <tr> <td>IndianRed </td> <td>#CD5C5C</td> <td style="background-color:#CD5C5C">&nbsp;</td> </tr> <tr> <td>Indigo </td> <td>#4B0082</td> <td style="background-color:#4B0082">&nbsp;</td> </tr> <tr> <td>Ivory</td> <td>#FFFFF0</td> <td style="background-color:#FFFFF0">&nbsp;</td> </tr> <tr> <td>Khaki</td> <td>#F0E68C</td> <td style="background-color:#F0E68C">&nbsp;</td> </tr> <tr> <td>Lavender</td> <td>#E6E6FA</td> <td style="background-color:#E6E6FA">&nbsp;</td> </tr> <tr> <td>LavenderBlush</td> <td>#FFF0F5</td> <td style="background-color:#FFF0F5">&nbsp;</td> </tr> <tr> <td>LawnGreen</td> <td>#7CFC00</td> <td style="background-color:#7CFC00">&nbsp;</td> </tr> <tr> <td>LemonChiffon</td> <td>#FFFACD</td> <td style="background-color:#FFFACD">&nbsp;</td> </tr> <tr> <td>LightBlue</td> <td>#ADD8E6</td> <td style="background-color:#ADD8E6">&nbsp;</td> </tr> <tr> <td>LightCoral</td> <td>#F08080</td> <td style="background-color:#F08080">&nbsp;</td> </tr> <tr> <td>LightCyan</td> <td>#E0FFFF</td> <td style="background-color:#E0FFFF">&nbsp;</td> </tr> <tr> <td>LightGoldenRodYellow</td> <td>#FAFAD2</td> <td style="background-color:#FAFAD2">&nbsp;</td> </tr> <tr> <td>LightGrey</td> <td>#D3D3D3</td> <td style="background-color:#D3D3D3">&nbsp;</td> </tr> <tr> <td>LightGreen</td> <td>#90EE90</td> <td style="background-color:#90EE90">&nbsp;</td> </tr> <tr> <td>LightPink</td> <td>#FFB6C1</td> <td style="background-color:#FFB6C1">&nbsp;</td> </tr> <tr> <td>LightSalmon</td> <td>#FFA07A</td> <td style="background-color:#FFA07A">&nbsp;</td> </tr> <tr> <td>LightSeaGreen</td> <td>#20B2AA</td> <td style="background-color:#20B2AA">&nbsp;</td> </tr> <tr> <td>LightSkyBlue</td> <td>#87CEFA</td> <td style="background-color:#87CEFA">&nbsp;</td> </tr> <tr> <td>LightSlateBlue</td> <td>#8470FF</td> <td style="background-color:#8470FF">&nbsp;</td> </tr> <tr> <td>LightSlateGray</td> <td>#778899</td> <td style="background-color:#778899">&nbsp;</td> </tr> <tr> <td>LightSteelBlue</td> <td>#B0C4DE</td> <td style="background-color:#B0C4DE">&nbsp;</td> </tr> <tr> <td>LightYellow</td> <td>#FFFFE0</td> <td style="background-color:#FFFFE0">&nbsp;</td> </tr> <tr> <td>Lime</td> <td>#00FF00</td> <td style="background-color:#00FF00">&nbsp;</td> </tr> <tr> <td>LimeGreen</td> <td>#32CD32</td> <td style="background-color:#32CD32">&nbsp;</td> </tr> <tr> <td>Linen</td> <td>#FAF0E6</td> <td style="background-color:#FAF0E6">&nbsp;</td> </tr> <tr> <td>Magenta</td> <td>#FF00FF</td> <td style="background-color:#FF00FF">&nbsp;</td> </tr> <tr> <td>Maroon</td> <td>#800000</td> <td style="background-color:#800000">&nbsp;</td> </tr> <tr> <td>MediumAquaMarine</td> <td>#66CDAA</td> <td style="background-color:#66CDAA">&nbsp;</td> </tr> <tr> <td>MediumBlue</td> <td>#0000CD</td> <td style="background-color:#0000CD">&nbsp;</td> </tr> <tr> <td>MediumOrchid</td> <td>#BA55D3</td> <td style="background-color:#BA55D3">&nbsp;</td> </tr> <tr> <td>MediumPurple</td> <td>#9370D8</td> <td style="background-color:#9370D8">&nbsp;</td> </tr> <tr> <td>MediumSeaGreen</td> <td>#3CB371</td> <td style="background-color:#3CB371">&nbsp;</td> </tr> <tr> <td>MediumSlateBlue</td> <td>#7B68EE</td> <td style="background-color:#7B68EE">&nbsp;</td> </tr> <tr> <td>MediumSpringGreen</td> <td>#00FA9A</td> <td style="background-color:#00FA9A">&nbsp;</td> </tr> <tr> <td>MediumTurquoise</td> <td>#48D1CC</td> <td style="background-color:#48D1CC">&nbsp;</td> </tr> <tr> <td>MediumVioletRed</td> <td>#C71585</td> <td style="background-color:#C71585">&nbsp;</td> </tr> <tr> <td>MidnightBlue</td> <td>#191970</td> <td style="background-color:#191970">&nbsp;</td> </tr> <tr> <td>MintCream</td> <td>#F5FFFA</td> <td style="background-color:#F5FFFA">&nbsp;</td> </tr> <tr> <td>MistyRose</td> <td>#FFE4E1</td> <td style="background-color:#FFE4E1">&nbsp;</td> </tr> <tr> <td>Moccasin</td> <td>#FFE4B5</td> <td style="background-color:#FFE4B5">&nbsp;</td> </tr> <tr> <td>NavajoWhite</td> <td>#FFDEAD</td> <td style="background-color:#FFDEAD">&nbsp;</td> </tr> <tr> <td>Navy</td> <td>#000080</td> <td style="background-color:#000080">&nbsp;</td> </tr> <tr> <td>OldLace</td> <td>#FDF5E6</td> <td style="background-color:#FDF5E6">&nbsp;</td> </tr> <tr> <td>Olive</td> <td>#808000</td> <td style="background-color:#808000">&nbsp;</td> </tr> <tr> <td>OliveDrab</td> <td>#6B8E23</td> <td style="background-color:#6B8E23">&nbsp;</td> </tr> <tr> <td>Orange</td> <td>#FFA500</td> <td style="background-color:#FFA500">&nbsp;</td> </tr> <tr> <td>OrangeRed</td> <td>#FF4500</td> <td style="background-color:#FF4500">&nbsp;</td> </tr> <tr> <td>Orchid</td> <td>#DA70D6</td> <td style="background-color:#DA70D6">&nbsp;</td> </tr> <tr> <td>PaleGoldenRod</td> <td>#EEE8AA</td> <td style="background-color:#EEE8AA">&nbsp;</td> </tr> <tr> <td>PaleGreen</td> <td>#98FB98</td> <td style="background-color:#98FB98">&nbsp;</td> </tr> <tr> <td>PaleTurquoise</td> <td>#AFEEEE</td> <td style="background-color:#AFEEEE">&nbsp;</td> </tr> <tr> <td>PaleVioletRed</td> <td>#D87093</td> <td style="background-color:#D87093">&nbsp;</td> </tr> <tr> <td>PapayaWhip</td> <td>#FFEFD5</td> <td style="background-color:#FFEFD5">&nbsp;</td> </tr> <tr> <td>PeachPuff</td> <td>#FFDAB9</td> <td style="background-color:#FFDAB9">&nbsp;</td> </tr> <tr> <td>Peru</td> <td>#CD853F</td> <td style="background-color:#CD853F">&nbsp;</td> </tr> <tr> <td>Pink</td> <td>#FFC0CB</td> <td style="background-color:#FFC0CB">&nbsp;</td> </tr> <tr> <td>Plum</td> <td>#DDA0DD</td> <td style="background-color:#DDA0DD">&nbsp;</td> </tr> <tr> <td>PowderBlue</td> <td>#B0E0E6</td> <td style="background-color:#B0E0E6">&nbsp;</td> </tr> <tr> <td>Purple</td> <td>#800080</td> <td style="background-color:#800080">&nbsp;</td> </tr> <tr> <td>Red</td> <td>#FF0000</td> <td style="background-color:#FF0000">&nbsp;</td> </tr> <tr> <td>RosyBrown</td> <td>#BC8F8F</td> <td style="background-color:#BC8F8F">&nbsp;</td> </tr> <tr> <td>RoyalBlue</td> <td>#4169E1</td> <td style="background-color:#4169E1">&nbsp;</td> </tr> <tr> <td>SaddleBrown</td> <td>#8B4513</td> <td style="background-color:#8B4513">&nbsp;</td> </tr> <tr> <td>Salmon</td> <td>#FA8072</td> <td style="background-color:#FA8072">&nbsp;</td> </tr> <tr> <td>SandyBrown</td> <td>#F4A460</td> <td style="background-color:#F4A460">&nbsp;</td> </tr> <tr> <td>SeaGreen</td> <td>#2E8B57</td> <td style="background-color:#2E8B57">&nbsp;</td> </tr> <tr> <td>SeaShell</td> <td>#FFF5EE</td> <td style="background-color:#FFF5EE">&nbsp;</td> </tr> <tr> <td>Sienna</td> <td>#A0522D</td> <td style="background-color:#A0522D">&nbsp;</td> </tr> <tr> <td>Silver</td> <td>#C0C0C0</td> <td style="background-color:#C0C0C0">&nbsp;</td> </tr> <tr> <td>SkyBlue</td> <td>#87CEEB</td> <td style="background-color:#87CEEB">&nbsp;</td> </tr> <tr> <td>SlateBlue</td> <td>#6A5ACD</td> <td style="background-color:#6A5ACD">&nbsp;</td> </tr> <tr> <td>SlateGray</td> <td>#708090</td> <td style="background-color:#708090">&nbsp;</td> </tr> <tr> <td>Snow</td> <td>#FFFAFA</td> <td style="background-color:#FFFAFA">&nbsp;</td> </tr> <tr> <td>SpringGreen</td> <td>#00FF7F</td> <td style="background-color:#00FF7F">&nbsp;</td> </tr> <tr> <td>SteelBlue</td> <td>#4682B4</td> <td style="background-color:#4682B4">&nbsp;</td> </tr> <tr> <td>Tan</td> <td>#D2B48C</td> <td style="background-color:#D2B48C">&nbsp;</td> </tr> <tr> <td>Teal</td> <td>#008080</td> <td style="background-color:#008080">&nbsp;</td> </tr> <tr> <td>Thistle</td> <td>#D8BFD8</td> <td style="background-color:#D8BFD8">&nbsp;</td> </tr> <tr> <td>Tomato</td> <td>#FF6347</td> <td style="background-color:#FF6347">&nbsp;</td> </tr> <tr> <td>Turquoise</td> <td>#40E0D0</td> <td style="background-color:#40E0D0">&nbsp;</td> </tr> <tr> <td>Violet</td> <td>#EE82EE</td> <td style="background-color:#EE82EE">&nbsp;</td> </tr> <tr> <td>VioletRed</td> <td>#D02090</td> <td style="background-color:#D02090">&nbsp;</td> </tr> <tr> <td>Wheat</td> <td>#F5DEB3</td> <td style="background-color:#F5DEB3">&nbsp;</td> </tr> <tr> <td>White</td> <td>#FFFFFF</td> <td style="background-color:#FFFFFF">&nbsp;</td> </tr> <tr> <td>WhiteSmoke</td> <td>#F5F5F5</td> <td style="background-color:#F5F5F5">&nbsp;</td> </tr> <tr> <td>Yellow</td> <td>#FFFF00</td> <td style="background-color:#FFFF00">&nbsp;</td> </tr> <tr> <td>YellowGreen</td> <td>#9ACD32</td> <td style="background-color:#9ACD32">&nbsp;</td> </tr> </table>
"); window.frames["iframe2089"].document.write(decodeHtml(code2089)); window.frames["iframe2089"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2089"]).load(function(){ $("#iframe2089").height($("#iframe2089").contents().find("body").height()+showittryitheight); }); $("#iframe2089").height($("#iframe2089").contents().find("body").height()+showittryitheight); alreadyWriteCode2089 = code2089; $("#rendering2089").hide(); $("#rendered2089").show(); } var tRereshRetry2DemoPanel2089 = setInterval(rereshRetry2DemoPanel2089,1000); var binded2089 = false; $("textarea#stepcodeTextarea2089").keyup(function(){ if(!binded2089){ $(window).bind('beforeunload',function(){ binded2089 = true; return "xxxx"; }); } var newCode = $(this).val() code2089 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code2089!=newCode){ // window.frames["iframe2089"].document.write("
"); // window.frames["iframe2089"].document.write(decodeHtml($("textarea#stepcodeTextarea2089").val())); // window.frames["iframe2089"].document.close(); // $(window.frames["iframe2089"]).load(function(){ // $("#iframe2089").height($("#iframe2089").contents().find("body").height()+showittryitheight); // }); // code2089 = newCode; // } }); $(".tryButton2089").click(function(){ $("#tryDiv2089").show(); $("#stepcodeTextarea2089").focus(); $("#stepcodeTextarea2089").height(200); $("#iframe2089").height(0); window.frames["iframe2089"].document.write("
"); window.frames["iframe2089"].document.write(decodeHtml($("textarea#stepcodeTextarea2089").val())); window.frames["iframe2089"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe2089"]).load(function(){ $("#iframe2089").height($("#iframe2089").contents().find("body").height()+showittryitheight); }); $("#iframe2089").height($("#iframe2089").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor2089.focus(); editor2089.setSize(null, "250"); $("#rendering2089").hide(); $("#rendered2089").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor2089 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2089"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor2089.on("change",function(doc){ if(!binded2089){ $(window).bind('beforeunload',function(){ binded2089 = true; return "xxxx"; }); } var newCode = doc.getValue(); code2089 = newCode; $("textarea#stepcodeTextarea2089").val(newCode); if(alreadyWriteCode2089!=code2089){ lastModifedTime2089 = new Date().getTime(); $("#rendering2089").show(); $("#rendered2089").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor2089 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor2089.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv2089").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。


关于 前端部分-HTML-字体 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。 也可进本站QQ群交流: 620943819
提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了，都统一放在了这里， 方便大家下载： http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图