结合使用 Emmet 工具包快速编译 Dreamweaver中的代码

本文链接：https://blog.csdn.net/zhaoaiqq/article/details/78768783

Emmet 是一个插件，可用于快速编码并生成 HTML 和 CSS 代码。

在 Dreamweaver 的“代码”视图或代码检查器中使用 Emmet 缩写，然后按 Tab 键将这些缩写展开为 HTML 标记或 CSS。

HTML 缩写将在 HTML 和 PHP 页面中展开。CSS 缩写将在 CSS、LESS、SASS、SCSS 页面中或 HTML 页面的样式标签内展开。

以下几个示例演示如何在“代码”视图中使用 Emmet 缩写。有关详细信息和参考，请参阅 Emmet 文档。

注意:

Dreamweaver 当前支持 Emmet 1.2.2 缩写。

示例 1：使用 Emmet 插入 HTML 代码

若要快速添加包含三个元素的未排序列表的 HTML 代码，请打开 HTML 文件并在 <body></body> 的“代码”视图中键入以下 Emmet 缩写：

 
         div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

现在，确保光标正好位于 Emmet 缩写后面，然后按 Tab 展开缩写。或者，选择整个缩写然后按 Enter。

缩写将展开为以下代码：

 
         <div> 
        
         <ul> 
        
         <li>Lorem Ipsum</li> 
        
         <li>Lorem Ipsum</li> 
        
         <li>Lorem Ipsum</li> 
        
         </ul> 
        
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p> 
        
         <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p> 
        
         <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p> 
        
         <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p> 
        
         </div>

示例 2：使用 Emmet 插入 CSS 代码

若要插入 CSS 代码以创建带供应商前缀的边框半径，请打开 CSS 文件并在某个类中键入以下 Emmet 缩写：

 
         -bdrs

按 Tab 键时，缩写将展开为以下代码：

 
         -webkit-border-radius: ; 
        
         -moz-border-radius: ; 
        
         border-radius: ;

注释是您在 HTML 代码中插入的描述性文本，用来解释该代码或提供其他信息。注释文本只在“代码”视图中出现，不会显示在浏览器中。

要添加注释，请先键入注释文本。然后，您可以将光标置于插入点，并从工具栏单击“插入”图标以打开“应用注释”子菜单。

您也可以选择文本，然后将其设为注释。所选文本将包括在注释块中。

添加注释

您可以使用各种语法选项添加注释。选择相应语法，然后 Dreamweaver 将为您插入标签。您需要做的只是输入注释文本。

您也可以使用 Ctrl+/（在 Windows 上）或 Cmd+/（在 Mac 上）键盘快捷键添加注释。

如果您在未选中任何文本的情况下使用键盘快捷键，则注释将应用于当前行。如果您已选择文本并使用键盘快捷键，则注释将应用于所选文本。

要删除代码注释，请选择该代码，然后单击工具栏中的“删除注释”图标。也可以使用 Ctrl-/（在 Windows 上）或 Cmd-/（在 Mac 上）键盘快捷键删除注释。

要在“代码”视图中的显示注释和隐藏注释之间切换，只需对所选注释或行按 Ctrl+/（在 Windows 上）或 Cmd+/（在 Mac 上）。

使用 Dreamweaver 的多光标功能在多个位置添加光标，或选择多个代码部分并同时编辑这些部分。

注意:

多个光标或多个选择不可用于完成复制粘贴和查找替换操作。

您可采用不同的方式添加多个光标，具体取决于您的要求。

如果要在不替换任何现有文本的情况下在多个位置中添加相同文本，请添加多个光标。

如果要替换现有文本，则可进行多个选择。您可以选择连续文本行和/或非连续文本行，然后向它们添加光标。

在连续行中的相同列上添加多个光标或多个选择：

按住 Alt 键，然后单击以垂直拖动。在垂直拖动时，光标将添加到拖过的每个行。

在多个行上的光标处添加的文本

若要选择连续文本行，请按住 Alt 键并沿对角线方向拖动。在沿对角线方向拖动时，Dreamweaver 将在该选区内选择一个矩形文本块。

同时选择和更新多个文本行

注意:

若要在某个选区中快速添加光标或包含多个行，请使用 Shift-Alt-Up 或向下键。

一旦您在多个位置添加光标（或所选文本），即可继续操作并开始键入。

如果有多个光标，则将添加新文本

如果在多个文本行中选择了内容，则所选文本将替换为输入的新文本。

要在各行中的不同列上添加多个光标：

若要将光标添加到非连续文本行，只需按住 Ctrl 键，然后单击要将光标放置到的各个行。

将光标添加到多个非连续文本行

若要选择非连续文本行，请选择一些文本，然后按 Ctrl 键 (Windows) 或 Cmd 键 (Mac)，并继续进行进一步的选择。

在每行的开头/末尾添加光标：

选择多个文本行并按住向左键或向右键。

在某个选区的前面或后面的行中添加光标：

按 Shift+Alt+向上/向下键，然后按向右键。

要选择连续文本行和非连续文本行：

您可以将这些方法结合使用，在某个选区内同时选择连续文本行和单独的文本行。

首先选择非连续文本行，然后按 Ctrl-Alt 键（在 Windows 上）或 Cmd-Alt 键（在 Mac）上，然后拖动以将一组行添加到现有的多个选择。

同时选择连续文本行和非连续文本行

官方链接：https://helpx.adobe.com/cn/dreamweaver/using/writing-editing-code.html#emmet

结合使用 Emmet 工具包快速编译 Dreamweaver中的代码

使用代码注释

向代码添加注释

从代码中删除注释

切换代码注释

使用多个光标在多个位置添加或更改文本

添加多个光标或多个选择