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”*“表示乘号，加倍


更多的功能参照：


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=1px


border-spacing生效了




改用cellspacing=1px，无效




问题解决中。。。。。。
												


											
emmet插件学习，练习中遇到一些问题的更多相关文章
	

    
								
  1. VS2013 EMMET插件学习
		
    在VS2013中搜索EMMET插件,安装,重启IDE,即可使用. 最简单的一个用法示例: 在编辑器里输入:ul>li*5 按快捷键:CTRL+1 即可生成如下代码: <ul> < ...
    
		
    2. 
						
  2. Zend Studio 中安装emmet插件的方法
		
    本人的Zend Studio版本是Zend Studio 10.0.0. 1. 打开Zend Studio,点击 Help --> Install New Software,如下图: 2.  在 ...
    
		
    3. 
						
  3. 如何在Notepad++ 中成功地安装Emmet 插件
		
    对于前端来说,Emmet 是一个好东西,但是好几次在 “Notepad++” 中安装后不能使用.今天认认真真地查找了失败原因,配置完成后,终于可以在 “Notepad++” 下正常使用了.故把过程记录 ...
    
		
    4. 
						
  4. sublime text3中emmet插件的使用
		
    首先,想要快速编码需 要在编辑器中安装常用插件,下面是emmet插件的使用: html5文档结构的生成方式: 1).!+tab键 2).html:5 +tab键 头部head中meta字符集的生成:  ...
    
		
    5. 
						
  5. sublime课程3 emmet插件中的常用符号有哪些
		
    sublime课程3 emmet插件中的常用符号有哪些 一.总结 一句话总结:emmet插件中的符号和css选择器里面哪些符号的意思很像. 1.+是干嘛的? 组合 2.{}是干嘛的? 标签里面的inn ...
    
		
    6. 
						
  6. Html5 学习笔记 Sublime text3 和 Emmet 插件
		
    下载地址 :https://pan.baidu.com/s/1MpkaYdAcZd6RmPpmvOdK7w Emmet 压缩包 并且解压: 安装 Sublime Text 3, 选择首选项 浏览插件  ...
    
		
    7. 
						
  7. Atom编辑器中安装Emmet插件失败的问题
		
    今天使用Atom编辑器安装Emmet插件的时候,刚开始的时候报错: 报错内容如下: Installing “emmet@2.4.3” failed.Show output… Compiler tool ...
    
		
    8. 
						
  8. visual studio code中使用emmet插件在.vue文件失效
		
    使用visual studio code编辑.vue文件时,emmet插件无法使用,可以通过以下两种试解决: 1.文件→设置,在右侧窗口添加以下代码: "emmet.syntaxProfil ...
    
		
    9. 
						
  9. 第 30 章 使用 Emmet 插件
		
    学习要点: 1.安装方式 2.自定义!生成 3.快速生成   主讲教师:李炎恢 本章主要探讨了解一下 Sublime Text3 的一个 HTML5 代码提示插件:Emmet,这个插件比自带原生的要强 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C程序员学bash shell容易掉坑的注意点（未完待续）
			
    shell解释器很娇气,有一点点不合乎规范的编码风格都会让脚本歇菜. 1. 空格该有还是该没有要看情况.该有的时候不能没有!该没有的时候不能有! 变量赋值的等号两边不能有空格. 2. 在shell中是 ...
    
			
    2. 
						
  2. middleware中间件的概念
			
    简要来说express就是一个由路由和中间件构成的 web 开发框架. 当express服务收到客户端的请求时,会通过一组函数来处理请求. 这些函数用于解析请求体数据,处理错误,或者负责返回各种情况对 ...
    
			
    3. 
						
  3. 做WP程序时遇到的一些问题及解决方法
			
    问题1:Type 'JDBYSJ.Data.NewsChannel' cannot be serialized. Consider marking it with the DataContractAt ...
    
			
    4. 
						
  4. .net之微信企业号开发(三) 回调模式的接口开发
			
    一.前言 微信企业号应用中,有两种模式,一种是普通模式,这种模式只能进行简单网页链接,以及发送固定的消息.为了可以让企业号的用户更好的与应用交互,微信提供了回调模式,这种回调模式的可以将用户发送给微信 ...
    
			
    5. 
						
  5. make基础（转）
			
    1. 基本规则 请点评 除了Hello World这种极简单的程序之外,一般的程序都是由多个源文件编译链接而成的,这些源文件的处理步骤通常用Makefile来管理.Makefile起什么作用呢?我们先 ...
    
			
    6. 
						
  6. java基础2_算术运算
			
    一 算术运算符,包括+,-,*,/,%, 1. 如果在一个算术运算中有int,double,float那么最终运算的结果是double,那么也就是说参与运算的类型和得到的结果:结果一定是参与运算的精度 ...
    
			
    7. 
						
  7. C#的linq在winform中简单应用
			
    一.创建窗体应用程序 二.在窗体应用程序中添加linqtosql类,并且连接到sql server数据库中去 三.在资源管理器里打开数据表拖入linqtosql的视图中,并自己设置主键,并将同步设置为 ...
    
			
    8. 
						
  8. Http压力测试工具HttpTest4Net
			
    HttpTest4Net是一款基于C#实现的和HTTP压力测试工具,通过工具可以简单地对HTTP服务进行一个压力测试.虽然VS.NET也集成了压力测试项目,但由于VS自身占用的资源导致了在配置不高的P ...
    
			
    9. 
						
  9. ASP.NET MVC 学习笔记(一)
			
    很久很久没有在博客园写过东西了,很多大虾也说过展示自己最好的地方就是有一个博客作为笔记,展示一下自己的学习和研究成果. 最近决心将公司的一款产品改用MVC的方式实现,于是乎就开始在园子里面疯狂的寻找各 ...
    
			
    10. 
						
  10. OAuth 2.0 授权原理
			
    出处:http://www.cnblogs.com/neutra/archive/2012/07/26/2609300.html 最近在做第三方接入的,初步定下使用OAuth2协议,花了些时间对OAu ...
    
			
    11.