整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML 编辑器


TML编辑器是一种用于创建、编辑和预览HTML（超文本标记语言）代码的工具或应用程序。它提供了一个直观的界面，使用户能够轻松地编写和设计网页内容。本文主要介绍HTML 常用编辑器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。


参考文档：https://www.cjavapy.com/article/3299/


1、Visual Studio Code（VS Code ）


Visual Studio Code（简称VS Code）是一款由微软开发的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。VS Code是一款轻量级的代码编辑器，启动迅速，占用资源少。VS Code提供了丰富的扩展和插件，可以根据需求安装插件来增强编辑器功能。


1）安装和配置


官网地址：Visual Studio Code - Code Editing. Redefined


根据操作系统下载并安装相应版本的VS Code。打开VS Code后，可以根据自己的喜好配置编辑器设置，如主题、字体等。


2）新建HTML文件


在 VS Code 安装完成后，选择" 文件(F)->新建文件(N) "，在新建的文件中输入以下代码：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>


3）编辑HTML文件


在VS Code中，点击左上角的"文件"菜单，选择"打开文件"，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。


在编辑器中可以直接修改HTML文件的内容。VS Code会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。


4）插件推荐


HTML CSS Support：提供对HTML和CSS的支持，包括代码片段、自动补全等功能。


Live Server：启动一个本地开发服务器，实时预览HTML页面的效果。


Prettier：格式化HTML代码，使代码结构更整洁。


Auto Close Tag：自动闭合HTML标签，提高编码效率。


Bracket Pair Colorizer：对成对的括号进行着色，方便识别代码块。


2、Sublime Text


Sublime Text是一款流行的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。


Sublime Text的界面非常简洁，没有多余的菜单和工具栏，更便于专注于代码编辑。Sublime Text支持多种编程语言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text拥有强大的插件系统，用户可以根据需要安装插件来扩展编辑器功能。用户可以自定义快捷键、主题、颜色方案等，以满足个性化需求。Sublime Text启动迅速，响应快速，适合于快速编辑代码。


1）安装和配置


官网地址：Sublime Text - Text Editing, Done Right


根据操作系统下载并安装相应版本的Sublime Text。打开Sublime Text后，可以根据自己的喜好进行编辑器设置，如字体、主题等。


2）新建HTML文件


在Sublime Text 安装完成后，选择" File->New File "，在新建的文件中输入以下代码：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>


3）编辑HTML文件


在Sublime Text中，点击左上角的"File"菜单，选择"Open File"，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。在编辑器中可以直接修改HTML文件的内容。Sublime Text会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。


4）插件推荐


Emmet：提供HTML/CSS快速编写和自动完成功能，可以大大提高编码效率。


Sublime Linter：对代码进行实时语法检查，帮助发现潜在的错误和警告。


Color Highlighter：对CSS中的颜色进行高亮显示，方便调试和修改样式。


SideBarEnhancements：增强侧边栏功能，提供更多文件操作选项。


3、Dreamweaver


Dreamweaver是由Adobe公司开发的一款全球知名的网页设计和开发工具。它为开发人员和设计师提供了一个可视化的界面，可以直观地创建和编辑网页内容，同时也支持手动编辑代码。Dreamweaver提供可视化界面，可以直观地拖拽和编辑网页元素，无需手动编写代码。除了可视化界面，Dreamweaver也支持手动编辑代码，适合于开发人员和设计师。Dreamweaver可在Windows和macOS等多个平台上运行。Dreamweaver集成了代码编辑器、预览窗口、文件管理器等功能，提供全面的开发环境。


1）安装和配置


官网地址：Website design software | Adobe Dreamweaver


根据操作系统下载并安装相应版本的Dreamweaver。打开Dreamweaver后，，根据需要进行编辑器设置，如界面语言、字体、代码颜色等。


2）编辑HTML文件


在Dreamweaver中，点击左上角的"File"菜单，选择"New"，然后选择"HTML"，即可新建一个空白的HTML文件。内容如下：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>


使用可视化界面，可以直接拖拽页面元素、调整布局、插入图片等。若需要手动编辑HTML代码，可以在下方的代码编辑器中进行修改。Dreamweaver会自动提供代码补全和语法高亮功能。在Dreamweaver中，可以实时预览网页效果，点击右上角的"Live View"按钮即可。


3）CSS和JavaScript支持


Dreamweaver也支持CSS和JavaScript的编辑和预览，可以帮助创建更丰富的网页效果。在编辑器中可以直接编辑CSS样式和JavaScript代码，并实时查看效果。


4）网页上传和发布


Dreamweaver集成了FTP功能，可以直接将编辑好的网页上传到服务器。点击"Site"菜单，选择"Manage Sites"，配置好站点设置，即可进行上传和发布。


5）Dreamweaver模板和库


Dreamweaver提供模板和库功能，可以保存和复用常用的网页元素和样式，提高开发效率。


参考文档：https://www.cjavapy.com/article/3299/

内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 800+ 字，整篇阅读约需 1 分钟。

今天分享一段优质 CSS 代码片段，轻松实现一键切换主题颜色，在任何项目中都可用。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

[data-theme='default'] {
  --font-primary: #fff;
  --background-main: #0678be;
}

[data-theme='black'] {
  --font-primary: #fff;
  --background-main: #393939;
}

<html lang="en" data-theme="default"></html>

body {
  color: var(--font-primary);
  background-color: var(--background-main);
}


分享原因

这段代码可以轻松实现网页主题的切换，且在各种项目中通用。

先定义不同主题的 CSS 变量，再通过 JavaScript 动态更改 data-theme 属性，从而实现页面样式的动态变化。

这种方法不仅简化了主题管理，还提高了代码的可读性和维护性，是我们项目中一般且常用的实现方式之一。

代码解析

1. 定义主题变量

CSS变量：声明自定义CSS属性，它包含的值可以在整个文档中重复使用。属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。

CSS属性选择器：匹配具有特定属性或属性值的元素。例如[data-theme='black']，将选择所有 data-theme 属性值为 'black' 的元素。

使用 [data-theme='default'] 和 [data-theme='black'] 选择器，根据 data-theme 属性的值定义不同的主题样式。

定义了两个 CSS 变量 --font-primary 和 --background-main，分别表示字体颜色和背景颜色。

2. 指定默认主题

在 <html> 元素上添加 data-theme="default"，指定默认主题为 default 。

后面用 js 动态切换 data-theme 属性值，然后 CSS 属性选择器将自动选择对应的 CSS 变量。

3. 应用 CSS 变量

Var函数：用于使用 CSS 变量。第一个参数为 CSS 变量名称，第二个可选参数作为默认值。

使用 var(--font-primary) 和 var(--background-main) 来引用之前定义的 CSS 变量。

这里设置 body 元素的 color 和 background-color 属性，分别引用 --font-primary 和 --background-main 变量，在项目中按需设置对应的元素即可。

果对您有帮助，可以点赞收藏一下，以备后续使用，节约资料查找时间


var HtmlUtil = {

/*1.用浏览器内部转换器实现html转码*/

htmlEncode: function (html) {

//1.首先动态创建一个容器标签元素，如DIV

var temp = document.createElement("div");

//2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(旧版火狐，google支持)

(temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);

//3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了

var output = temp.innerHTML;

temp = null;

return output;

},

/*2.用浏览器内部转换器实现html解码*/

htmlDecode: function (text) {

//1.首先动态创建一个容器标签元素，如DIV

var temp = document.createElement("div");

//2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)

temp.innerHTML = text;

//3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。

var output = temp.innerText || temp.textContent;

temp = null;

return output;

},

/*3.用正则表达式实现html转码*/

htmlEncodeByRegExp: function (str) {

var s = "";

if (str.length == 0) return "";

s = str.replace(/&/g, "&");

s = s.replace(/</g, "<");

s = s.replace(/>/g, ">");

s = s.replace(/\s/g, " ");

s = s.replace(/\'/g, "'");

s = s.replace(/\"/g, """);

s = s.replace(/"/g, '"');

return s;

},

/*4.用正则表达式实现html解码*/

htmlDecodeByRegExp: function (str) {

var s = "";

if (str.length == 0) return "";

s = str.replace(/&/g, "&");

s = s.replace(/</g, "<");

s = s.replace(/>/g, ">");

s = s.replace(/ /g, " ");

s = s.replace(/'/g, "\'");

s = s.replace(/"/g, "\"");


return s;

}

};

// 使用举例

// 用浏览器内部转换器实现html转码

var html = " <div>'我们在哪里'</div> "

var enCodehtml = HtmlUtil.htmlEncode(html);

//console.log(enCodehtml); // <div>'我们在哪里'</div>

// 用浏览器内部转换器实现html解码

var decodeHtml = HtmlUtil.htmlDecode(enCodehtml);

//console.log(decodeHtml); // <div>'我们在哪里'</div>

// ————————————————————————————————————————————————————————————————

// 用正则表达式实现html转码

var html2 = "<div> winne'hello'</div>";

var RegExpEnCodehtml = HtmlUtil.htmlEncodeByRegExp(html2)

//console.log(RegExpEnCodehtml); // <div> winne'hello'</div>

// 用正则表达式实现html解码

var RegExpDecodeHtml = HtmlUtil.htmlDecodeByRegExp(RegExpEnCodehtml);

//console.log(RegExpDecodeHtml); // <div> winne'hello'</div>


在线咨询
上一篇：HTML从基础到精通-css布局
下一篇：如何给HTML标签中的文本设置修饰线

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 冷水江市 贵溪市 大同区 和平县 阳原县 沧县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服