新课速递

我们又双叒叕发布新课啦！《这样学HTML最简单》

为什么要发布这个课呢？有如下几个原因：

市面上的html太旧啦，还用dreamweaver开发，简直老掉牙啦！ 市面上的html课程太能忽悠啦，本来很简单的技术硬是搞得那么复杂，简直误人子弟呀！ 没有文档呀！我们免费的呀！

下面安排两节课，大家自己体会一下。

使用vscode编写html

下载安装vscode

下载地址：https://code.visualstudio.com/安装非常简单一路下一步就搞定了，这里不再赘述。

创建html

可以使用快捷键Ctrl+n，再使用快捷键Ctrl+s保存

点击Explorer边栏的，快捷工具栏创建，并保存为扩展名为.html

快速生成html模板，输入叹号!，再按Tab键自动生成html模板结构。

这个是Emmet插件功能，后面有详细介绍

安装插件

安装LiveServer插件，可以模拟页面在服务器中预览。 安装HTMLFormat插件，可以格式化html。 也可以安装openinbrowser在浏览器中打开。

实时预览

在html编辑器中，右键单击，选择PreviewHTML，或者使用快捷键Ctrl+Shift+V实时预览。

使用Emmet提高html开发效率

Emmet简介

Emmet是一个web开发工具，可以极大的提高html和css的编写效率。官方网站：https://docs.emmet.io/

常用语法

叹号!生成html基本模板.

子元素>

div>ul>li <div> <ul> <li></li> </ul> </div>

兄弟元素+

div+p+bq <div></div> <p></p> <blockquote></blockquote>

跳出嵌套子元素^

div+div>p>span+em^bq <div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>

多次重复*

ul>li*5 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

分组()

div>(header>ul>li*2>a)+footer>p <div> <header> <ul> <li><ahref=""></a></li> <li><ahref=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>

属性操作id和class

div#header+div.page+div#footer.class1.class2.class3 <divid="header"></div> <div class="page"></div> <divid="footer"class="class1class2class3"></div>

语法：elem#idelem.class

原文链接：