實(shí)現(xiàn)快捷生成HTML代碼

ublime / vscode 快捷生成HTML代碼的實(shí)現(xiàn)

文章目錄

1.基本html結(jié)構(gòu)

2.生成div加類名的快捷鍵

3.帶類名的div

4.帶id的div

5.屬性【】

6.后代>

7.兄弟+

8.上級(jí)^

9.乘法*

10.文本{}

1、基本html結(jié)構(gòu)

操作：輸入 !+Enter鍵

注意：這里輸入“！”+回車鍵前，需要清空原來生成的基本結(jié)構(gòu)

實(shí)現(xiàn)效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     
</body>
</html>

2、生成div加類名的快捷鍵

操作：輸入 div.list>div.item_$*6

實(shí)現(xiàn)效果：

<div class="list">
    <div class="item_1"></div>
    <div class="item_2"></div>
    <div class="item_3"></div>
    <div class="item_4"></div>
    <div class="item_5"></div>
    <div class="item_6"></div>
</div>

3、帶類名的div

操作：輸入 div.wrapper

實(shí)現(xiàn)效果：

<div class="wrapper"></div>

4、帶id的div

操作： div#wrapper

實(shí)現(xiàn)效果：

<div id="wrapper"></div>

5、屬性 []

操作： span[title=“test”]

實(shí)現(xiàn)效果：

<span title="test"></span>

6、后代 >

操作：輸入div>span>a

實(shí)現(xiàn)效果：

<span title="test"></span>

7、兄弟 +

操作： div+p+span

實(shí)現(xiàn)效果：

<div></div>
<p></p>
<span></span>

8、上級(jí) ^

操作： div>span^i

實(shí)現(xiàn)效果：

<div><span></span></div>
<i></i>

9、乘法 *

操作： ul>li*2

實(shí)現(xiàn)效果：

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

10、文本 {}

操作： div>span{這是文本}

實(shí)現(xiàn)效果：

<div><span>這是文本</span></div>

ublime text 文本編輯軟件，軟件小巧簡(jiǎn)潔，運(yùn)行速度快是一款非常受人歡迎的代碼編輯工具。

使用Sublime text，尤其是安裝了強(qiáng)大的插件——emmet后，將擁有更加強(qiáng)大的代碼自動(dòng)補(bǔ)全功能。

如何快速生成html網(wǎng)頁結(jié)構(gòu)：只需一個(gè)!+Tab鍵，就生成一個(gè)HTML頁面。

Sublime Text快速構(gòu)造HTML頁面

具體方法如下：

1. 安裝sublime

2. 打開sublime text 3，按CTRL + `或者在菜單中選擇View > Show Console，可打開控制臺(tái)——也就是下面的一條輸入框。

3. 在輸入框中復(fù)制粘貼下以下代碼：

import urllib.request,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

然后回車。這時(shí)可以看到鼠標(biāo)變成了旋轉(zhuǎn)的彩色圓圈，稍等片刻，一些代碼出現(xiàn)在了控制臺(tái)的上面。重啟sublime text 3。

安裝emmet插件

4. 在sublime text 3中按下快捷鍵CTRL + SHIFT + P

或者在菜單中選擇Tools > Command Palette…

5. 在彈出的輸入框的自動(dòng)提示中選擇Package Control: Install Package。

6. 輸入Emmet并點(diǎn)擊。此時(shí)emmet開始安裝啦。等待幾分鐘，待最下面一行顯示幾行l(wèi)ine，幾個(gè)column時(shí)，emmet就算裝好了。再次重啟sublime text 3。

SCode中有一些快捷編輯HTML的方法，能大大提高工作效率，在這里分享給大家，權(quán)當(dāng)拋磚引玉，歡迎有更多的朋友分享更多的技術(shù)知識(shí)。

1.輸入html:5，然后按tab鍵或回車（Enter）鍵，效果如下：

注：輸入感嘆號(hào)"!"，然后按Tab鍵或者回車（Enter）鍵也可以生成html骨架。

2.輸入link:css引入css樣式文件，link:favicon引入網(wǎng)站logo，輸入script:src引入js

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

直接輸入標(biāo)簽名后回車

4.使用"#“輸入id，”.“輸入class，”[]"輸入屬性

<!-- 輸入div#main回車 -->
<div id="main"></div>
<!-- 輸入div.content回車 -->
<div class="content"></div>
<!-- 輸入div#main.content回車 -->
<div id="main" class="content"></div>
<!-- img[src=1.jpg][alt=pic1] -->
<img src="1.jpg" alt="pic1">

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

<!-- 輸入div#parent>div#child回車 -->
<div id="parent">
        <div id="child"></div>
</div>

<!-- 輸入div#bro1+div#bro2回車 -->
<div id="bro1"></div>
<div id="bro2"></div>

<!-- 輸入div#sup>div#child+div#bro^div#sub回車 -->
<div id="sup">
  <div id="child"></div>
<div id="bro"></div>
</div>
<div id="sub"></div>

6.使用{}輸入標(biāo)簽中的文本

<!-- div#main{input sth here} -->
<div id="main">input sth here</div>

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

<!-- (div#list1>ul>li*2)+(div#list2>ul>li*3) -->
<div id="list1">
  <ul>
  	<li></li>
		<li></li>
	</ul>
</div>
<div id="list2">
  <ul>
  	<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

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

<!-- $ 自增符號(hào) -->
<!-- ul>li*3>img[src=./imgs/$.jpg][alt=img$] -->
<ul>
  <li><img src="./imgs/1.jpg" alt="img1"></li>
	<li><img src="./imgs/2.jpg" alt="img2"></li>
	<li><img src="./imgs/3.jpg" alt="img3"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$.jpg][alt=img$$] -->
<ul>
  <li><img src="./imgs/01.jpg" alt="img01"></li>
	<li><img src="./imgs/02.jpg" alt="img02"></li>
	<li><img src="./imgs/03.jpg" alt="img 03"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$$.jpg][alt=img$$$] -->
<ul>
  <li><img src="./imgs/001.jpg" alt="img001"></li>
	<li><img src="./imgs/002.jpg" alt="img002"></li>
	<li><img src="./imgs/003.jpg" alt="img003"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt=img$$@4] -->
<ul>
  <li><img src="./imgs/04.jpg" alt="img04"></li>
	<li><img src="./imgs/05.jpg" alt="img05"></li>
	<li><img src="./imgs/06.jpg" alt="img06"></li>
</ul>

依此類推……

以上這些快捷操作是因?yàn)閂S Code自帶有Emmet插件。

Emmet插件非常強(qiáng)大，還有很多用法，大家還知道哪些呢，期待大家的分享。

在線咨詢

上一篇：零基礎(chǔ)學(xué)web前端！可以多看看這些書
下一篇：「技術(shù)筆記」 DOS基礎(chǔ)命令及HTML與CSS的基礎(chǔ)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

實(shí)現(xiàn)快捷生成HTML代碼

ublime / vscode 快捷生成HTML代碼的實(shí)現(xiàn)

文章目錄

1、基本html結(jié)構(gòu)

操作： 輸入 !+Enter鍵

實(shí)現(xiàn)效果：

2、生成div加類名的快捷鍵

操作： 輸入 div.list>div.item_$*6

實(shí)現(xiàn)效果：

3、帶類名的div

操作： 輸入 div.wrapper

實(shí)現(xiàn)效果：

4、帶id的div

操作： div#wrapper

實(shí)現(xiàn)效果：

5、屬性 []

操作： span[title=“test”]

實(shí)現(xiàn)效果：

6、后代 >

操作： 輸入div>span>a

實(shí)現(xiàn)效果：

7、兄弟 +

操作： div+p+span

實(shí)現(xiàn)效果：

8、上級(jí) ^

操作： div>span^i

實(shí)現(xiàn)效果：

9、乘法 *

操作： ul>li*2

實(shí)現(xiàn)效果：

10、文本 {}

操作： div>span{這是文本}

實(shí)現(xiàn)效果：

您的項(xiàng)目需求

操作：輸入 !+Enter鍵

操作：輸入 div.list>div.item_$*6

操作：輸入 div.wrapper

操作：輸入div>span>a