标签:lis 技巧 text tle abc 编辑 styles 前端 安装
一、前端开发工具介绍:
1.chrome谷歌浏览器的访问助手安装和激活;
2.sublime text3编辑器的配置与插件安装;
3.Atom编辑器的配置与插件、主题的安装与卸载;
4.浏览器的实时刷新工具BrowserSync的安装与配置;
5.前端神器Emmet插件的使用技巧;
具体介绍第5点.前端神器Emmet插件的使用技巧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端神器Emmet插件的使用技巧</title> <script src=""></script> <link rel="stylesheet" href="style.css"> </head> <body> <!--5.1 html:5或者!可以生成html5文档结构--> <!--5.2. link:css,script:src 可以生成css和js的调用样式--> <p>5.3. 生成带类样式标签:div#book</p> <div class="book"></div> <p>5.4. 生成带ID的标签:div.book</p> <div class="book"></div> <p>5.5 a标签</p> <a href=""></a> <a href="http://"></a> <a href="mailto:"></a> <p>5.6 根据标签之间的位置关系来生成标签</p> <!-- 生成同级,兄弟标签 h2.header+p.info--> <h2 class="header"></h2> <p class="info"></p> <!--后代标签,也叫下线标签 ul>li*数量 --> <ul> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul> <!-- 生成当前标签的父级标签,也是上级标签 h2>span^p.info--> <h2><span></span></h2> <p class="info"></p> <!-- 生成标签的时候,同时生成内部文本--> <!-- {} --> <a href="">php中文网</a> <!-- [] --> <p title="这是一段说明文字"></p> <a href="http://www.abc.com"></a> <p>重复生成功能:*</p> <!--快速生成一个8个列表的导航--> ul.list>li.item*8>a{导航} 给标签自动添加编号或者排序:$,@ ul.list>li.item*8>a{导航$} ul.list>li.item*8>a{导航$$@-} ul.list>li.item*8>a{导航$$@100} ul.list>li.item*8>a{导航$$$@100} <ul class="list"> <li class="item"><a href="">导航0100</a></li> <li class="item"><a href="">导航0101</a></li> <li class="item"><a href="">导航0102</a></li> <li class="item"><a href="">导航0103</a></li> <li class="item"><a href="">导航0104</a></li> <li class="item"><a href="">导航0105</a></li> <li class="item"><a href="">导航0106</a></li> <li class="item"><a href="">导航0107</a></li> </ul> </body> </html>
标签:lis 技巧 text tle abc 编辑 styles 前端 安装
原文地址:http://www.cnblogs.com/qinglin/p/7991982.html