emmet插件学习：帮助提高敲代码效率的插件
参考文献：Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/116906.html
首先 需要记住的是光标必须在代码末尾，按ctrl+e，切记
若输入(.test$>p)*2,按下ctrl+e，将得到
<div class="test1"> <p></p> </div> <div class="test2"> <p></p> </div>
1”（）“为分组管理
2代码中“.”也可以换成“#”等，将自动才、生成带class或id的div；
3“$”代表序号，也可以用“$$”表示两位数；
4“>”其实与选择器中运用效果相同，例子中其实就是给div添加了一个子级< p >。你也可也用“+”，增加同级（sibling）标签，用“^"向上一层添加创建元素
<!-- ”^“示例 -->
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- 此处代码为div>p>a^p --> <div> <p><a href=""></a></p> <p></p> </div> <!-- 此处代码为div>p>a^^p --> <div> <p><a href=""></a></p> </div> <p></p> </body> </html>
从”^“与”^^“的比较知，向上是指向上一层添加同级元素，如例子div>p>a^p 中，是指在a的上一级添加一个与p同级的p元素；如div>p>a^^p，则是指向上上级，即a的爷级div添加一个与div同级的p元素
5”*“表示乘号，加倍
更多的功能参照：
Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/116906.html
表格制作中遇到的问题:
1关于<caption>
caption为table标签设置标题（如果有），默认为在表格上方居中。
2制作细线表格：cellspacing=1px与border-spacing=1px的不同，暂时没有解决。先上两则在细线表格中的不同。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table width="500" cellpadding="10" align="center" cellspacing="1px"> <tr bgcolor="yellow"> <th style="text-align:center;color:green">1系列</th> <th style="text-align:center;color:green">2系列</th> <th style="text-align:center;color:green">3系列</th> </tr> <tr bgcolor="yellow"> <td style="text-align:center">1.1</td> <td style="text-align:center">1.2</td> <td style="text-align:center">1.3</td> </tr> <tr bgcolor="yellow"> <td align="center">2.1</td> <td align="center">2.2</td> <td align="center">2.3</td> </tr> <tr bgcolor="yellow"> <td align="center">3.1</td> <td align="center">3.2</td> <td align="center">3.3</td> </tr> </table> </body> </html>
若把cellspacing=1px换成border-spacing=1px，将是
问题是：下面的例子恰好与上面的结果相反！
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>表格</title> <style type="text/css"> tr,th,td{ margin: 0; padding: 0; } table{ background-color: gray; text-align: center; border: 0; border-spacing: 1px; } caption{ margin-bottom: 10px; } th{ width: 40px; padding: 20px; } td{ width: 160px; padding: 20px; background-color: white; } th{ background-color:#F7F7c7; } </style> </head> <body> <table> <caption>运费详情</caption> <thead> <tr> <th>区域</th> <th>寄达地</th> <th>首重（元/1000g)</th> <th>续重（元/1000g)</th> </tr> </thead> <tbody> <tr> <th rowspan="2">一区</th> <td>浙江、上海、江苏</td> <td>6</td> <td>1</td> </tr> <tr> <td>江西、安徽</td> <td>7</td> <td>1</td> </tr> <tr> <th>二区</th> <td>吉林、黑龙江、云南</td> <td>10</td> <td>6</td> </tr> <tr> <th>三区</th> <td>新疆、西藏</td> <td>15</td> <td>10</td> </tr> </tbody> </table> </body> </html>
border-spacing生效了
改用cellspacing=1px，无效
问题解决中。。。。。。