首页 > 代码库 > 如何提高web效率

如何提高web效率

2024-10-27 08:10:38   210人阅读

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

1、提高HTML页面的编辑速度
（1）Emmet语法，对于emmet语法的熟练运用，可以在很大程度上提高你的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>

//主要是这些 还有其他的自行链接

 

2、了解你的编辑器（主要是学会安装一些有用的插件和使用快捷键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（显而易见跑默认浏览器），未完待续....

如何提高web效率


联系
我们