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

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

文章目錄

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

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

3.帶類名的div

4.帶id的div

5.屬性【】

6.后代>

7.兄弟+

8.上級^

9.乘法*

10.文本{}

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

操作：輸入 !+Enter鍵

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

實現(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

實現(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

實現(xiàn)效果：

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

4、帶id的div

操作： div#wrapper

實現(xiàn)效果：

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

5、屬性 []

操作： span[title=“test”]

實現(xiàn)效果：

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

6、后代 >

操作：輸入div>span>a

實現(xiàn)效果：

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

7、兄弟 +

操作： div+p+span

實現(xiàn)效果：

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

8、上級 ^

操作： div>span^i

實現(xiàn)效果：

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

9、乘法 *

操作： ul>li*2

實現(xiàn)效果：

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

10、文本 {}

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

實現(xiàn)效果：

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

SEO必須要懂HTML，說的是一點都沒錯，不過其實是不需要全部都懂，最重點的你懂了會用，基本上都是事半功倍了。可以這么說一個不懂代碼的優(yōu)化人員不算是一個合格的好優(yōu)化。下面就總結(jié)一下做優(yōu)化，必須要懂得幾個最重要的html代碼，希望能幫到大家。

1.Title網(wǎng)站標(biāo)題標(biāo)簽

Title標(biāo)簽有兩個地方的用途一個是用在網(wǎng)站的主題說明，用來告訴網(wǎng)友這個網(wǎng)站的主旨是什么，是什么樣的網(wǎng)站，一般用來說明網(wǎng)站主題的詞2-3個為最佳。目前搜索引擎對Title的重視程度尤為重視所以建議慎重考慮關(guān)鍵詞。
Title標(biāo)簽的第二個用法是，在A標(biāo)簽里面對鏈接文字強(qiáng)調(diào)說明的。鼠標(biāo)經(jīng)過會有提示，可以增加網(wǎng)站關(guān)鍵詞的密度。

2.description描述標(biāo)簽

描述標(biāo)簽一般會出現(xiàn)在抓取的快照里面，對網(wǎng)站的收錄SEO排名也是有一定的影響，不過現(xiàn)在搜索引擎都是智能化的，有時候抓取的并不是你自己所寫的描述標(biāo)簽。而會根據(jù)用戶搜索關(guān)鍵詞相關(guān)度匹配。一般建議長度在100 個字左右不宜過長。

3.keywords關(guān)鍵詞標(biāo)簽

關(guān)鍵詞keywords設(shè)置現(xiàn)在在搜索比重上面也越來越不明顯了，好多搜索已定提出可以放棄設(shè)置，因為搜索引擎能夠自動抓取，建議適當(dāng)設(shè)置3個左右即可。

H標(biāo)簽

H1標(biāo)簽一般出現(xiàn)在頁面LOGO，或者單個文章的主標(biāo)題部分。一個頁面最好能控制在2個之內(nèi)切不可過多。
H2標(biāo)簽一般會用在網(wǎng)站欄目或者小標(biāo)題標(biāo)題部分。
H3標(biāo)簽一般用在側(cè)欄小標(biāo)題子標(biāo)題部分。

4.<b>和<strong>文字加粗標(biāo)簽

文字加粗著重強(qiáng)調(diào)這文字比較重要，它會告訴搜索引擎此文字，在整個頁面文字中比較重要，所以一般加粗一些關(guān)鍵詞，一篇文章設(shè)置3-5個為宜，不可整篇加粗或者整篇不加粗。

A標(biāo)簽中的，Nofollow權(quán)重不傳遞，_blank新窗口打開

rel標(biāo)簽的屬性Nofollow權(quán)重不傳遞屬性，一般用于友情鏈接，或者網(wǎng)站有轉(zhuǎn)出站外的鏈接。
target標(biāo)簽的屬性_blank新窗口打開，以保留用戶在網(wǎng)站的停留時間，降低網(wǎng)站跳出率。
se_prerender_url標(biāo)簽?zāi)壳斑€在研究，不過發(fā)現(xiàn)一些站長站都已經(jīng)用上，搜索發(fā)現(xiàn)是谷歌吸引爬蟲而出，目前尚不具體了解用途。

5.alt圖片描述標(biāo)簽

因為圖片不具有SEO屬性，所以alt越顯重要，ALT主要是圖片描述說明只用，用可以增加關(guān)鍵詞密度，但切記不可過多頻繁。

HTML的不同標(biāo)簽在SEO優(yōu)化中的權(quán)重分?jǐn)?shù)及權(quán)重排序

內(nèi)部鏈接文字：10分

標(biāo)題title：10分

域名：7分

H1，H2字號標(biāo)題：5分

每段首句：5分

路徑或文件名：4分

相似度（關(guān)鍵詞堆積）：4分

每句開頭：1.5分

文本用法（內(nèi)容）：1分

title屬性：1分（不是<title>，是A標(biāo)簽中title屬性）

加粗或斜體：1分

alt標(biāo)記：0.5分

Meta描述（Description屬性）：0.5分

Meta關(guān)鍵詞（Keywords屬性）：0.05分

--------------------------------------------------------

想了解更多網(wǎng)站優(yōu)化，網(wǎng)絡(luò)營銷，網(wǎng)站運(yùn)營，SEO/SEM/DSP，微博微信營銷

可以百度搜索王塵宇查看更多進(jìn)行交流。

關(guān)注王塵宇個人QQ/微信：314111741

lt;!DOCTYPE html>

<head>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</header>

<main>

<h2>歡迎來到我的網(wǎng)頁</h2>

<p>這是一個簡單的 HTML5 網(wǎng)頁設(shè)計。</p>

</section>

<h2>我們的服務(wù)</h2>

<ul>

</ul>

</section>

</main>

</footer>

</body>

</html>

這個 HTML 參考?代碼?包括以下標(biāo)準(zhǔn) HTML 特性：

<!DOCTYPE html>：HTML5 的文檔類型聲明，指定文檔使用 HTML5 標(biāo)準(zhǔn)。
<html>：HTML 文檔的根元素。
<head>：包含文檔的元數(shù)據(jù)，如字符集、視口和標(biāo)題等。
<meta>：用于指定文檔的元數(shù)據(jù)，如字符集和視口等。
<title>：定義文檔的標(biāo)題，將顯示在瀏覽器標(biāo)簽頁上。
<header>：定義文檔的頭部，包括網(wǎng)站的標(biāo)題和導(dǎo)航欄。
<nav>：定義導(dǎo)航欄。
<ul> 和 <li>：定義無序列表和列表項。
<main>：定義文檔的主要內(nèi)容區(qū)域。
<section>：定義文檔的區(qū)域。
<h1> 到 <h6>：定義標(biāo)題級別，h1 為最高級別。
<p>：定義段落。
<img>：定義圖像。
<footer>：定義文檔的底部，包括版權(quán)和其他信息。

在線咨詢

上一篇：淺談Html的內(nèi)容加載及JS執(zhí)行順序
下一篇：HTML基礎(chǔ)操作：圖片顯示

您的項目需求

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

整合營銷服務(wù)商

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

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

文章目錄

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

操作： 輸入 !+Enter鍵

實現(xiàn)效果：

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

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

實現(xiàn)效果：

3、帶類名的div

操作： 輸入 div.wrapper

實現(xiàn)效果：

4、帶id的div

操作： div#wrapper

實現(xiàn)效果：

5、屬性 []

操作： span[title=“test”]

實現(xiàn)效果：

6、后代 >

操作： 輸入div>span>a

實現(xiàn)效果：

7、兄弟 +

操作： div+p+span

實現(xiàn)效果：

8、上級 ^

操作： div>span^i

實現(xiàn)效果：

9、乘法 *

操作： ul>li*2

實現(xiàn)效果：

10、文本 {}

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

實現(xiàn)效果：

HTML的不同標(biāo)簽在SEO優(yōu)化中的權(quán)重分?jǐn)?shù)及權(quán)重排序

您的項目需求

操作：輸入 !+Enter鍵

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

操作：輸入 div.wrapper

操作：輸入div>span>a