【参考课程】黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程:b站课程链接
课程资料:素材和源码: 下载链接
【PPT】链接:https://pan.baidu.com/s/1jm1LUuk5NIM-PPhmAbjEkg 提取码:sp39
相关资料:W3C-CSS基础教程:网页链接
文章目录
01 Emmet语法
- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成
- 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
<!-- 输入 div*3 ,按tab -->
<div></div>
<div></div>
<div></div>
- 如果有父子级关系的标签,可以用 > 比如 ul > li就可以了
<!-- ul>li -->
<ul>
<li></li>
</ul>
- 如果有兄弟关系的标签,用 + 就可以了 比如 div+p
<!-- div+p -->
<div></div>
<p></p>
- 如果带有类名,直接写 .类名(如: .demo ) 带id名字的,写 #id(如: #two )tab 键就可以了
<!-- .nav -->
<div class="nav"></div>
<!-- #emo -->
<div id="emo"></div>
<!-- 未注明标签类型时默认为div标签,想要生成其他标签写明即可 -->
<!-- p.part -->
<p class="part"></p>
- 如果生成的div 类名是有顺序的, 可以用 自增符号 $
<!-- .demo$*5 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
- 如果想要在生成的标签内部写内容可以用 { } 表示
<!-- 我们想生成的标签里面默认显示几个文字: div{文字}-->
<!-- div{pink老师最帅} -->
<div>pink老师最帅</div>
<!-- div{$}*5 -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>