emmet插件学习，练习中遇到一些问题

最新推荐文章于 2022-03-17 23:25:14 发布

???111

最新推荐文章于 2022-03-17 23:25:14 发布

阅读量119

点赞数

原文链接：http://www.cnblogs.com/wbengineer/p/4537491.html

版权

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添加了一个子级&lt p &gt。你也可也用“+”，增加同级（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”*“表示乘号，加倍

表格制作中遇到的问题:

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>