如何提升web效率

時間 2019-11-10

標籤如何提升 web 效率欄目 HTML 简体版

原文原文鏈接

Done is better than perfect（完成比完美更好）

一、提升HTML頁面的編輯速度
（1）Emmet語法，對於emmet語法的熟練運用，能夠在很大程度上提升你的html編輯速度html

//html的註釋爲<!-- -->的形式 此處使用"//"只是爲了更加快捷 語法上說是錯誤的
//後代（一層套一層時使用）：>
縮寫：nav>ul>li
代碼：
<nav>
    <ul>
        <li></li>
    </ul>
</nav>

//兄弟（相鄰同胞元素的時候使用）：+
縮寫：div+p
代碼：
<div></div>
<p></p>

//父級：^（能夠使用多個^^.... 表示的父父....級）
//Class/ID名
縮寫：div>p^div.hello+div#world
代碼：
<div>
    <p></p>
</div>
<div class="hello"></div>
<div id="world"></div>

//分組（當某標籤和父元素爲兄弟元素的時候使用）：（）
縮寫：div>(ul>li>a)+p>span
代碼：
<div>
    <ul>
        <li><a href=""></a></li>
    </ul>
    <p><span></span></p>
</div>

//乘法有不少使用方法
//單純的乘法（用來建立多個相同的標籤）：*
縮寫：ul>li*2
代碼：
<ul>
    <li></li>
    <li></li>
</ul>

//和自增號連用（用來建立多個相同卻帶序號的文本）：$
//用在Class/ID上
縮寫：ul>li.item$*2+li#hello$*2
代碼：
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li id="hello1"></li>
    <li id="hello2"></li>
</ul>

//同時自增多個元素
縮寫：h$[title=item$]{hello $}*2
代碼：
<h1 title="item1">hello 1</h1>
<h2 title="item2">hello 2</h2>

//規定自增的起始數字
縮寫：ul>li.item$@3*2
代碼：
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
</ul>

//自減
縮寫：ul>li.item$@-*2
代碼：
<ul>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

//多個數字
縮寫：ul>li.item$$*2
代碼：
<ul>
    <li class="item01"></li>
    <li class="item02"></li>
</ul>

//ID和類屬性
//ID和類（很少說了"#"和"."）

//ID和類同時設置
縮寫：div.hello#world
代碼：
<div class="hello" id="world"></div>

//多類名
縮寫：div.hello.world
代碼：
<div class="hello world"></div>

//自定義屬性（屬性選擇器可能更好記）：[ ]
縮寫：[a="value1" b='value2' c=value3 d]（雙引號、單引號、沒引號都沒區別）
代碼：
 <div a="value1" b="value2" c="value3" d=""></div>

//文本（用來編輯標籤內的文本）：{}
//縮寫：p>{hello}+a{world}+{!} || p{hello}>a{world}+{!} 
//此處的後代選擇器是必定要有的 否則p和a就爲兄弟元素了
//代碼：
<p>hello<a href="">world</a>!</p>

//文檔重複結構：！
縮寫：！
代碼：
<!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>

//主要是這些 還有其餘的自行連接

二、瞭解你的編輯器（主要是學會安裝一些有用的插件和使用快捷鍵VS Code）
（1）快捷鍵：如快速註釋ctrl+/、快速打開文件夾ctrl+k ctrl+o、快速選擇整行ctrl+i等等（能夠經過ctrl+shift+p查看）
（2）插件：Auto Close Tag（自動補充結束標籤）、Auto Rename Tag（更改開始標籤時改變相應的結束標籤）、HTML Snippets（html標籤包括H5）、HTML CSS Support（自動補全樣式表）、Class autocomplete for HTML（自動補全html）、Path Intellisense（自動路徑補全）、View In Browser（顯而易見跑默認瀏覽器），未完待續....瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。