[前端][HTML]怎样使用sublime Text 3编写HTML

怼烎@ 2023-10-11 13:01 10阅读 0赞

1.下载并安装Sublime Text 3.

2.打开Sublime Text 3界面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70][] 欢迎页面

3.按下Ctrl+N，新建页面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 1][] 新建页面

4. 按下Ctrl+S，另存为你所指定的文件名，使用.html后缀（后缀很重要，Sublime将会根据后缀判断语言类型并帮你开启相应的自动补全）。例如，文件名为test.html

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 2][] 此时，当前标签页的文件名已经变成了test.html

5.输入<h，如图弹出相应代码补全候选目录后，可以看到html位于第一个，按下回车，自动补全：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 3][]

6.如图，Sublime Text 3为我们自动生成了html页面的框架，我们再不必费心费力地输入大量起始内容了：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 4][] 注：其中的<!DOCTYPE html>为HTML5中的new feature

7.在<title>和</title>之间输入网页名称，它就是浏览器标签页上的名称。例如，输入index.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 5][]

8.在<body>和</body>之间输入 <h2后回车，Sublime Text 3将会为你添加二级标题的代码补全。例如，输入一个标题为Chapter 1后，按下Ctrl+S保存文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 6][]

9.不必关闭Sublime，直接使用任意一款流行的浏览器打开你的test.html文件;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 7][]

浏览器当前标签名即为你输入的title:index，地址栏内容为你的html文件本地路径。

Chapter 1为你刚刚输入的二级标题。

10.不要关闭浏览器，在Sublime中输入<p按下回车，Sublime将产生段落补全代码，在<p>和</p>之间输入Hello World Wide Web!后按下Ctrl+S保存文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 8][]

11.刷新浏览器，可以看到html显示内容发生了变化：（Chrome浏览器中刷新操作为右键菜单单击重新加载，或按下Ctrl+R）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 9][]

12.至此，使用Sublime编写HTML的入门部分就完成了，还实现了编写代码的同时用浏览器立即手动追踪显示效果的变化。我们还可以使用win10中的分屏将Sublime与浏览器并列在一起，便于观察。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 10][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190923215714813.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190923215732257.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190923220010258.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190923220157397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190923220328640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190923220447920.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190923220755401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2019092322095249.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20190923221256656.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20190923221409224.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/2019092322162093.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3b3JkdHJhdmVsbGVy,size_16,color_FFFFFF,t_70