成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

VSCode中快捷輸入HTML代碼

dailybird / 3557人閱讀

VSCode中有一些快捷編輯HTML的方法，能大大提高工作效率，在這記錄一些。

1.輸入html:5，然后按tab鍵或enter鍵，效果如下：

 1 
 2 DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Documenttitle>
 9 head>
10 <body>
11     
12 body>
13 html>

2.輸入link:css引入css樣式文件，輸入script:src引入js

1 
2 <link rel="stylesheet" href="">
3 
4 <script src="">script>

3.輸入標(biāo)簽名自動(dòng)補(bǔ)齊

1 
2 <h1>HTML快捷輸入練習(xí)h1>
3 
4 <h2>填充文本h2>

4.隨機(jī)文本的輸入

1 
2 Lorem ipsum dolor sit amet consectetur adipisicing elit. At illum doloremque accusantium est, expedita tenetur minus nostrum perspiciatis. Repudiandae voluptatum mollitia corrupti adipisci pariatur accusantium praesentium quas, quisquam tempore debitis?
3 
4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem.
5 
6 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, debitis.
7 Sit accusamus nisi mollitia doloremque cumque praesentium quod velit vitae.
8 Quisquam qui ipsam beatae eaque non voluptatibus obcaecati voluptate exercitationem.

5.使用"#"輸入id，"."輸入class，"[]"輸入屬性

1 
2 <div id="main" class="content">div>
3 <div id="foot" class="foot" data="結(jié)束">div>
4 
5 <div alt="到底了">結(jié)束div>

6.使用">"輸入嵌套標(biāo)簽，"+" 輸入并列的兄弟標(biāo)簽，"^"上級(jí)元素

 1 
 2 <div>
 3     <div id="imgs">put some imgs herediv>
 4 div>
 5 
 6 
 7 <div id="left">I am leftdiv>
 8 <div id="right">I am rightdiv>
 9 
10 
11 
12 <div id="div1">
13     <p>p>
14 div>
15 <div id="div2">div>
16 
17 <div>
18     <div id="div1">
19         <p>p>
20     div>
21     <div id="div2">div>
22 div>
23 
24 
25 <div>
26     <p><img src="" alt="">p>
27     <div>
28         <ul>
29             <li>li>
30         ul>
31     div>
32 div>
33 
34 <div>
35     <div>
36         <div>div>
37     div>
38     <div>div>
39 div>
40 
41 <div>
42     <div>div>
43 div>
44 <div>div>

7.使用"{}"對(duì)標(biāo)簽分組及使用"*"生成多個(gè)相同的標(biāo)簽

 1 
 2 <div id="list1">
 3     <ul>
 4         <li>li>
 5         <li>li>
 6     ul>
 7 div>
 8 <div id="list1">
 9     <ul>
10         <li>li>
11         <li>li>
12     ul>
13 div>

8.自增符號(hào)$

 1 
 2 
 3 <ul>
 4     <li><img src="./imgs/1.jpg" alt="img 1">li>
 5     <li><img src="./imgs/2.jpg" alt="img 2">li>
 6     <li><img src="./imgs/3.jpg" alt="img 3">li>
 7 ul>
 8 
 9 
10 <ul>
11     <li><img src="./imgs/001.jpg" alt="img 001">li>
12     <li><img src="./imgs/002.jpg" alt="img 002">li>
13     <li><img src="./imgs/003.jpg" alt="img 003">li>
14 ul>
15     
16 
17 <ul>
18     <li><img src="./imgs/04.jpg" alt="img 04">li>
19     <li><img src="./imgs/05.jpg" alt="img 05">li>
20     <li><img src="./imgs/06.jpg" alt="img 06">li>
21 ul>

?這些快捷操作需要Emmet插件，本文是在VSCode下編寫的，其他編輯器如Atom、Sublime Text都支持Emmet，其功能還有很多，待以后慢慢學(xué)習(xí)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1198.html

相關(guān)文章

  • 宇宙最強(qiáng)vscode教程（基礎(chǔ)篇）

    摘要：在命令面板中你可以輸入命令進(jìn)行搜索中英文都可以，然后執(zhí)行。命名面板中可以執(zhí)行各種命令，包括編輯器自帶的功能和插件提供的功能。 本文主要介紹vscode在工作中常用的快捷鍵及插件，目標(biāo)在于提高工作效率本文的快捷鍵是基于mac的，windows下的快捷鍵放在括號(hào)里 Cmd+Shift+P(win Ctrl+Shift+P) [TOC] 零、快速入門 有經(jīng)驗(yàn)的可以跳過(guò)快速入門或者大致瀏覽一...

    Jason_Geng 評(píng)論0 收藏0

  • VS Code配置及插件推薦

    摘要：宋體以像素為單位控制字號(hào)。將其設(shè)置為可隱藏窗格。是否已啟用自動(dòng)刷新是否啟用自動(dòng)拉取以像素為單位控制終端的字號(hào)，這是的默認(rèn)值。要求工作區(qū)使用高于版本的。 用戶設(shè)置 打開(kāi) 文件 > 首選項(xiàng) > 用戶設(shè)置(U)，（忽略覆蓋工作區(qū)提示） { // 一個(gè)制表符等于的空格數(shù)。該設(shè)置在 `editor.detectIndentation` 啟用時(shí)根據(jù)文件內(nèi)容進(jìn)行重寫。 editor.tabS...

    wpw 評(píng)論0 收藏0

  • 21 個(gè)VSCode 快捷鍵，讓代碼更快，更有趣

    摘要：在這篇文章中，我將列出我最喜歡的快捷鍵，這些快捷鍵讓我更快的編寫代碼，也讓編碼變得更有趣，以下是個(gè)快捷鍵，分享給你。打開(kāi)鍵盤快捷鍵或，搜索。在中，啟動(dòng)性能是很重要的。逐個(gè)選擇文本可以通過(guò)快捷鍵右箭頭右箭頭和左箭頭左箭頭逐個(gè)選擇文本。 為了保證的可讀性，本文采用意譯而非直譯。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ 注意：自己嘗試的時(shí)候，Mac(17, p...

    elina 評(píng)論0 收藏0

  • 如何優(yōu)雅地使用 VSCode 來(lái)編輯 vue 文件？

    摘要：注本文首發(fā)在我的個(gè)人博客最近有個(gè)項(xiàng)目使用了，本來(lái)一直使用的是來(lái)進(jìn)行開(kāi)發(fā)，可是遇到了很多問(wèn)題。此外，還有很多規(guī)范是幫助我們寫出更加優(yōu)雅而不容易出錯(cuò)的代碼的。，終于基本搞定了，可以愉快地開(kāi)發(fā)應(yīng)用了。 注：本文首發(fā)在 我的個(gè)人博客 最近有個(gè)項(xiàng)目使用了 Vue.js ，本來(lái)一直使用的是 PHPStorm 來(lái)進(jìn)行開(kāi)發(fā)，可是遇到了很多問(wèn)題。 后來(lái)，果斷放棄收費(fèi)的 PHPStorm ，改用 vsco...

    pekonchan 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)VScode常用插件

    摘要：名稱功能自動(dòng)閉合標(biāo)簽自動(dòng)提示修改標(biāo)簽時(shí)，自動(dòng)修改匹配的標(biāo)簽格式化編寫更加人性化的注釋添加行書簽的瀏覽器兼容性檢查運(yùn)行選中代碼段支持大量語(yǔ)言，包括單詞拼寫檢查在中彈出瀏覽器并搜索，可編輯搜索引擎顏色值在代碼中高亮顯示小窗口顯示顏色值，等等拾色 名稱 功能 Auto Close Tag 自動(dòng)閉合HTML標(biāo)簽 Auto Import...

    hellowoody 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<