HTML5基础

1.安装Google访问助手,安装html5 outliner

2.游览器安装emmet插件

3.browsersync.cn安装与启动步骤 ---按ctrl+s自动更新

　　参考网址  ------  http://www.browsersync.cn

1. 安装 Node.js -- http://nodejs.cn/download/

2. 安装 BrowserSync包  -- npm install -g browser-sync

3. 切换到项目目录 -- 例如 D:/wamp64/www/code/test
 
4.启动 BrowserSync   -- 建议第一种
 // --files 路径是相对于运行该命令的项目（目录） 
            browser-sync start --server --files "css/*.css, *.html"
  // 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 
            browser-sync start --server --files "**/*.css, **/*.html" 

4.emmet插件编写HTML文档

新建一个HTML文档，输入“!”或“html:5”，然后按Tab键：
1、生成后代元素：>    命令：nav>ul>li 
2、生成兄弟元素：+    命令：div+p+bq  
3、生成上级元素：^    命令：div+div>p>span+em^bq 
4、生成类名： .          命令：.container    命令： .container.wrapper.more
5、生成ID：#            命令：#containe
6、生成分组：()          命令：(.foo>h1)+(.bar>h2) 
7、重复生成多份：*    命令：ul>li*5   
8、对生成内容依次编号：$  命令：ul>li.item$*5  
     $ 后面增加 @- 来实现倒序排列： 命令：ul>li.item$@-*5 
     @N 指定开始的序号                  命令：ul>li.item$@3*5  
9、生成自定义属性：[attr]             命令：td[rowspan=2 colspan=3 title]  
10、生成文本内容：{}                  命令：a{Click me} 

基础:
link   script:src   img  inp  input:p  btn  btn：s   btn：r

常用:
ul>li.item${item$}*3 
#content>.article>h1.ok[title=parpername][style=color:#000;]+h3.no[title=subname][style=color:#fff;]+p.words
.header>ul.nav>li*6>a[style=block]>span{name}
table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$)+(tfoot>td*5)
html>(head>title+style[type=text/css]+script[type=text/javascript][src=abc$.js]*3)+(body>(.content>.nav>ul>li>a>span)+(.sidebar>.top+.middle+.bottom)+(.mian>.article*3>h1{article$}))+(.footer{copyright})

5.emmet插件编写css

单位：

p 表示%
e 表示 em
r表示 rem
宽度：

命令：w100   结果：width:100px; 默认单位px

命令：w100p   结果：width:100%;  

高度：

 命令：h100r   结果：height: 100rem;

颜色：

命令：c#3    结果： color: #333;

命令：c#e0    结果： color: #e0e0e0;

命令：c#fc0    结果： color: #ffcc00;

CSS3前缀：

w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
命令：-wmso-transform  

命令：h10p+m5e   结果：height: 10%;margin: 5em;