第43章 Notepad++网页编辑

参与人数 1

本帖最后由 lee_st 于 2018-1-3 16:12 编辑

转帖

本章节为大家讲解网页编辑软件的使用。当前可用于Web前端的编辑器超多，而且都非常好用，比如代码提示、语法高亮和加速工程编辑的插件等，统统具备。我们教程选用Notepad++，本章节就为大家讲解Notepad++编辑HTML。

43.1 初学者重要提示

43.2 网页编辑软件介绍

43.3 使用Notepad++制作简单网页方法

43.4 用Notepad++调试网页方法

43.5 Notepad++结合Zen Coding快速编辑HTML

43.6 总结

lee_st · 2018-1-8 09:23:37

43.3.5 第5步：编辑HTML内容

点击新建按钮，效果如下：

lee_st · 2018-1-8 09:23:55

新建后设置语言为HTML。

lee_st · 2018-1-8 09:24:19

设置了语言格式后，Notepad会支持代码提示和HTML标签高亮。这个功能非常重要，会加速代码编辑。

lee_st · 2018-1-8 09:24:38

编写一个简单的HTML代码。
要编写的内容如下：

我的第一个标题

我的第一个段落。

lee_st · 2018-1-8 09:25:24

在Notepad++上编辑后，效果如下：

lee_st · 2018-1-8 09:26:18

可以看到，代码结构并不是层次分明的。这时，前面安装的Tidy2就派上用场了。点击插件->Tidy2->Tidy(config1)。

lee_st · 2018-1-8 09:27:01

格式后的效果如下（格式化后新添加的代码不用管，也可以删掉），代码已经变的错落有致了，非常方便阅读。

lee_st · 2018-1-8 09:27:30

最后一步，点击保存，这一步千万别忘记了。

lee_st · 2018-1-8 09:27:49

点击保存后弹出如下窗口：

lee_st · 2018-1-8 09:29:36

此时桌面就会多了一个HTML文件（我这里是Google浏览器，所以显示是这样的效果）。

lee_st · 2018-1-8 09:30:04

大家使用浏览器打开这个文件就可以看到效果了：

至此，大家就完成了一个完整的HTML网页编辑和显示过程

lee_st · 2018-1-8 09:30:22

43.4 使用Notepad++调试网页方法

为了方便大家调试，Notepad++支持各种主流浏览器的调用，调用前请务必保证已经保存了HTML文件，如果新建的文件还没有保存，调用浏览器是不成功的。大家用的什么浏览器，打开那个选项即可，我这里是Google Chrome，所以选择此选项。

lee_st · 2018-1-8 09:31:11

点击此选项后，就可以直接查看运行效果了，不需要进入到保存路径里面去打开HTML文件查看了。

lee_st · 2018-1-8 09:31:31

43.5 Notepad++结合Zen Coding快速编辑HTML
由于这个方法转载自网上，所以就不添加到教程里面了

lee_st · 2018-1-8 09:31:48

43.6 总结
本章节的实战性比较强，需要大家务必实际操作几遍，争取能够熟练掌握。

lee_st · 2018-1-8 09:32:04

分享完成，，，，，，，，

idianze · 2018-1-13 11:52:31

下面是存放了Tidy2

lee_st · 2018-1-13 13:50:36

客气了，谢谢支持的啊

lee_st · 2018-1-13 13:52:50

偶是灰常爱分享的啊

lee_st · 2018-1-13 13:53:16

建议大家一起来分享啊