如何在VS Code中快速写HTML？
 
VS Code是我最近听代码时间podcast才了解到的一个新的编辑器。用完之后发现，这款编辑器还真的很好用！但是当我开始写HTML时候才发现，生成一个标准格式的代码还有点困难。（好吧，其实是我菜鸡，巨硬怎么可能让人一行一行敲代码呢？）
 
于是，便探寻到了以下方法：
 
1.在第一行输入！
 
2.按下tab键
 
3.完成
 
结果如图： 
 

快速写html代码
 
打开VScode
 
新建文件
 
ctrl+s保存为html格式
 
 
第一行输入一个  !  (注意  英文状态下的 !)
 
然后按tab  
 
 
就会自动出现html模板
 
 
 
 
 
 
怎么调用浏览器预览html呢
 
点这个  进入扩展商店
 
 
输入open   下载安装  open in browser
 
 
然后 安装完了  重启vscode
 
打开一个 html文件  按快捷键  alt+b   就好了
 
 
 
 
 
 

Visual Studio Code关于写html的快捷键
 
这几天写html，找别人学了一些有趣的快捷键，作用不一定很大，但还是记录一下。
 
多个平级标签
 
输入 div*5 会有提示，按回车，出现下面的代码
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
多个平级排序标签
 
输入 div{$}*4 出现提示后，按回车，出现下面的代码
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
 
给标签加id和class
 
输入 div#tagId 提示，回车
<div id="tagId"></div>

输入 div.tagClass 提示，回车
<div class="tagClass"></div>
 
多层嵌套标签
 
多层嵌套标签用>右尖括号，还可以任意组合。
 
span>div>section
<span>
    <div>
        <section></section>
    </div>
</span>

span>div*3>section
<span>
    <div>
        <section></section>
    </div>
    <div>
        <section></section>
    </div>
    <div>
        <section></section>
    </div>
</span>

span>div{$}*3>section
<span>
    <div>
        1
        <section></section>
    </div>
    <div>
        2
        <section></section>
    </div>
    <div>
        3
        <section></section>
    </div>
</span>

span>div*3>section{$}*3
<span>
    <div>
        <section>1</section>
        <section>2</section>
        <section>3</section>
    </div>
    <div>
        <section>1</section>
        <section>2</section>
        <section>3</section>
    </div>
    <div>
        <section>1</section>
        <section>2</section>
        <section>3</section>
    </div>
</span>

如果写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好点？为什么？ 
 
 

  不考虑人力因素（手写HTML太费时间排除），请从读取和解析或者其他的角度分析。谢谢
 
 
 
 
 

  添加评论 
   
  
 
   
 
    

     分享
    
 
    

      
    
 
   
 
  
 
 
 
 
 
  
 
  
 
 
 
 
 
 

  按投票排序
  按时间排序
   
 
 
 
6 个回答
 
 
 
 

   
  

   10赞同 
   反对，不会显示你的姓名 
  
 
  
 
   

     
    尤雨溪
    ，不会搞艺术的程序员不是好设计师 
   
 
   

    奔跑的糖球、王佳、知乎用户 
    等人赞同 
   
 
  
 
  
 
   

    可能我把题主的问题想得太复杂了，因为原问题几乎没有回答的意义。静态的页面肯定是直接 HTML 比用 js 生成快。要用到 js，那肯定是因为有动态的内容需求，需要基于数据来渲染 HTML，那么这个问题就可以引申到 服务端渲染 vs. 客户端渲染。首先，单纯从首屏… 
     显示全部 
   
 
   

    可能我把题主的问题想得太复杂了，因为原问题几乎没有回答的意义。静态的页面肯定是直接 HTML 比用 js 生成快。
    
 
    
 要用到 js，那肯定是因为有动态的内容需求，需要基于数据来渲染 HTML，那么这个问题就可以引申到 服务端渲染 vs. 客户端渲染。
    
 首先，单纯从首屏渲染速度来说，几乎一定是服务端渲染更快。原因如下：
    
 
    
假设内容相同，两者解析 HTML 并渲染的速度是一样的，不同的是客户端渲染需要先请求并加载 js，然后执行 js，请求 API 数据，最后才能进入解析和渲染的步骤。
服务端的渲染可以用比 js 效率更高的语言执行，服务器的性能配置也通常胜过用户的机器配置。
 但是，服务端渲染由于计算量主要集中在服务端，那么在用户请求量很大的情况下系统负载会比客户端渲染的方案高一些。如果因此导致服务器响应变慢，那么用户体验也会下降。
    
 
    
 客户端渲染存在的主要理由是单页应用，在首屏渲染之后，还可能需要动态地创建很多 HTML，这时候刷新整个页面效率很低，通过在前端预先加载模板，之后请求变更的数据并在前端渲染的方式，可以很好地提升用户体验。另外这样的方案很自然地使得后端变为纯数据 API，前后解耦，开发维护上有一定好处。
    
 
    
 两者之间的选择主要取决于首屏加载速度对你的应用有多重要。对于单页富应用而言，主要的体验集中在首屏加载完毕以后的交互上（比如 gmail，加载很慢，但之后交互就很流畅），相比之下，内容类的网站，首屏加载速度则是个决定性因素。
    
 
    
 现在也有越来越多的采用前后结合的方式，即服务端渲染首屏，之后由 js 接管，接下来的更新进行局部的前端渲染。当然，实现起来比较麻烦一点，所以很多这样的方案是基于 Node.js 实现的，前后端可以共用模板和渲染逻辑。 
   
 
  
 
   
  
 
   

    编辑于 2014-09-05 
     4 条评论 
     感谢 
      
    
 
     
 
      

       分享
      
 
      

        
      
 
     
 
    
 
    收藏 
    • 
     没有帮助 
    • 
     举报 
    • 
     作者保留权利 
   
 
  
 
 
 
 

   
  

   3赞同 
   反对，不会显示你的姓名 
  
 
  
 
   

     
    杨光
    ，装逼遭雷劈 
   
 
   

    Jiahui Liu、KY Fish、知乎用户 
    赞同 
   
 
  
 
  
 
   

    如果页面有局部ajax的需求，比如股票行情，那么在页面第一次载入的时候就可以考虑ajax载入。另一种情况就是
    http://weibo.com的例子，数据每时每刻都在刷新，第一次载入的时候生成静态代码没有任何意义，所以也是所有代码用js动态生成。否则，不要让js动… 
     显示全部 
   
 
   

    如果页面有局部ajax的需求，比如股票行情，那么在页面第一次载入的时候就可以考虑ajax载入。
    
 另一种情况就是
    http://weibo.com的例子，数据每时每刻都在刷新，第一次载入的时候生成静态代码没有任何意义，所以也是所有代码用js动态生成。
    
 否则，不要让js动态生成代码。
    
 （所谓“js生成代码”，百分之九十九的情况是异步从服务器抓json。如果你不是这种情况，只是把html语句非要写到js代码里，然后再innerHTML一下，这就是逆天而行。） 
   
 
  
 
   
  
 
   

    编辑于 2014-09-06 
     添加评论 
     感谢 
      
    
 
     
 
      

       分享
      
 
      

        
      
 
     
 
    
 
    收藏 
    • 
     没有帮助 
    • 
     举报 
    • 
     作者保留权利 
   
 
  
 
 
 
 

   
  

   1赞同 
   反对，不会显示你的姓名 
  
 
  
 
   

     
    缪斯的情人
    ，每个铅笔盒都有种装B的欲望，你呢？ 
   
 
   

    知乎用户 
    赞同 
   
 
  
 
  
 
   

    反对第一名答案，根本没答道点上，题主的意思是js动态生成html标签和直接写html形式，和服务端渲染没啥关系，无论是js还是浏览器直接渲染都是客户端渲染。回到题主的问题，这个答案很明确了，在不考虑你说的成本外，当然首选html啊，所谓静态页原则就是能静… 
     显示全部 
   
 
   

    反对第一名答案，根本没答道点上，题主的意思是js动态生成html标签和直接写html形式，和服务端渲染没啥关系，无论是js还是浏览器直接渲染都是客户端渲染。
    
 回到题主的问题，这个答案很明确了，在不考虑你说的成本外，当然首选html啊，所谓静态页原则就是能静态就不要动态生成，js的每次dom操作都会涉及到重绘和重渲染，这是性能的一个主要损失点，虽然已经有很多优化方案，但还是不如直接写的静态html，很明显你可以试试写一个5000行的表格，分别用两种方法对比下。
    
 另外，排除性能因素，静态html更容易调整样式，能更好的与设计师协调，语义化的标签更易读 
   
 
  
 
   
  
 
   

    发布于 2014-09-05 
     1 条评论 
     感谢 
      
    
 
     
 
      

       分享
      
 
      

        
      
 
     
 
    
 
    收藏 
    • 
     没有帮助 
    • 
     举报 
    • 
     作者保留权利 
   
 
  
 
 
 
 

   
  

   0赞同 
   反对，不会显示你的姓名 
  
 
  
 
   

     
    安而遇
    ，喜欢js是因为它继成自lisp 的那一部分 
   
 
   
 
  
 
  
 
   

    我只想说，用JS动态生成之后那还叫静态页面吗……？ 
   
 
   

    我只想说，用JS动态生成之后那还叫静态页面吗……？ 
   
 
  
 
   
  
 
   

    发布于 2014-09-06 
     4 条评论 
     感谢 
      
    
 
     
 
      

       分享
      
 
      

        
      
 
     
 
    
 
    收藏 
    • 
     没有帮助 
    • 
     举报 
    • 
     作者保留权利 
   
 
  
 
 
 
 

   
  

   0赞同 
   反对，不会显示你的姓名 
  
 
  
 
   

     
    严天宇
    ，资深小胖 
   
 
   
 
  
 
  
 
   

    假如用户禁用了JavaScript......**************************************************************************************************之前看过《DOM编程艺术》。作者老在强调：“提防那些禁用JavaScript的家伙”。这里“禁用JavaScript的家伙”，一是指… 
     显示全部 
   
 
   

    假如用户禁用了JavaScript......
    
 
    
 **************************************************************************************************
    
 
    
 之前看过《DOM编程艺术》。作者老在强调：“提防那些禁用JavaScript的家伙”。
    
 这里“禁用JavaScript的家伙”，一是指那些使用了浏览器中“禁用JavaScript”功能的用户，二则是指“搜索引擎”。
    
 那些使用js动态生成的内容，搜索引擎是搜不到的。
    
 我想：“自己的网站隐形了”这个结果应该和一般的网站运营者的意愿相去甚远。 
   
 
  
 
   
  
 
   

    发布于 2014-09-05 
     1 条评论 
     感谢 
      
    
 
     
 
      

       分享
      
 
      

        
      
 
     
 
    
 
    收藏 
    • 
     没有帮助 
    • 
     举报 
    • 
     作者保留权利 
   
 
  
 
 
 
 

   
  

   0赞同 
   反对，不会显示你的姓名 
  
 
  
 
   

     
    rambo
    ，web全栈工程师 
   
 
   
 
  
 
  
 
   

    你是想说 用 纯html 跟 js拼接html。 还是一个在服务器用类似ejs jade跟浏览器前端渲染html比呢？ 这么说 你应该知道结果了吧。 不过我想你用得着考虑这个问题吗？ 以前网上抄的很热的 ejs 比 jade快很多。 测试结果 新的jade比ejs 也慢不了太多啊 最重要的… 
     显示全部 
   
 
   

    你是想说 用 纯html 跟 js拼接html。 还是一个在服务器用类似ejs jade跟浏览器前端渲染html比呢？ 这么说 你应该知道结果了吧。 不过我想你用得着考虑这个问题吗？ 以前网上抄的很热的 ejs 比 jade快很多。 测试结果 新的jade比ejs 也慢不了太多啊 最重要的还是你的使用习惯 
    
 
    js函数内，判断变量true后执行和false时跳出函数哪个方式比较快？