HTML5基础

1. 安装 Node.js -- http://nodejs.cn/download/2. 安装 BrowserSync包 ?-- npm install -g browser-sync3. 切换到项目目录 -- 例如 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" 

新建一个HTML文档，输入“!”或“html:5”，然后按Tab键：1、生成后代元素：> ???命令：nav>ul>li 2、生成兄弟元素：+ ???命令：div+p+bq ?3、生成上级元素：^ ???命令：div+div>p>span+em^bq 4、生成类名： . ?????????命令：.container ???命令： .container.wrapper.more5、生成ID：# ???????????命令：#containe6、生成分组：() ?????????命令：(.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})

单位：p 表示%e 表示 emr表示 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;