5ep9lzv 发表于 2024-6-29 15:13:36

前端小白入门系列——HTML 编辑器


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">HTML 编辑器<span style="color: black;">举荐</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">能够</span><span style="color: black;">运用</span>专业的 HTML 编辑器来编辑 HTML，为<span style="color: black;">大众</span><span style="color: black;">举荐</span>几款常用的编辑器：</p>VS Code：<a style="color: black;"><span style="color: black;">https://</span><span style="color: black;">code.visualstudio.com/</span></a>Sublime Text：<a style="color: black;"><span style="color: black;">http://www.</span><span style="color: black;">sublimetext.com/</span></a>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">你<span style="color: black;">能够</span>从以上软件的官网中下载对应的软件，按<span style="color: black;">过程</span>安装<span style="color: black;">就可</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接下来<span style="color: black;">咱们</span>将为<span style="color: black;">大众</span>演示<span style="color: black;">怎样</span><span style="color: black;">运用</span> VS Code <span style="color: black;">工具</span>来创建 HTML 文件。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">VS Code</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Visual Studio Code（简<span style="color: black;">叫作</span> VS Code）是一个由微软<span style="color: black;">研发</span>，<span style="color: black;">同期</span>支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">VS Code 安装教程参考：<a style="color: black;"><span style="color: black;">https://www.</span><span style="color: black;">runoob.com/w3cnote/vsco</span><span style="color: black;">de-tutorial.html</span></a></p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">过程</span> 1: 新建 HTML 文件</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在 VS Code 安装完成后，<span style="color: black;">选取</span>" 文件(F)-&gt;新建文件(N) "，在新建的文件中输入以下代码：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;

      &lt;h1&gt;我的第一个标题&lt;/h1&gt;

      &lt;p&gt;我的<span style="color: black;">第1</span>个段落。&lt;/p&gt;

      &lt;/body&gt;
      &lt;/html&gt;</div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-8113831aa8c4e5b2206df679c8759628_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">过程</span> 2: 另存为 HTML 文件</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span><span style="color: black;">选取</span>" 文件(F)-&gt;另存为(A) "，文件名为 runoob.html:</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-666a32909060a2b936124d5d14a126a0_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当您<span style="color: black;">保留</span> HTML 文件时，既<span style="color: black;">能够</span><span style="color: black;">运用</span> .htm <span style="color: black;">亦</span>可以<span style="color: black;">运用</span> .html 扩展名。两者<span style="color: black;">无</span>区别，完全<span style="color: black;">按照</span>您的<span style="color: black;">爱好</span>，我<span style="color: black;">意见</span>统一用 .html。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在一个容易记忆的文件夹中<span style="color: black;">保留</span>这个文件，<span style="color: black;">例如</span> runoob</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">过程</span> 3: 在浏览器中运行这个 HTML 文件</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span>鼠标右击编辑器上的文件名，<span style="color: black;">选取</span>在默认浏览器打开（<span style="color: black;">亦</span><span style="color: black;">能够</span>其他的浏览器）:</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-4b7968a02059c99fd5a0a72a89f9ef49_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>注：vscode 中<span style="color: black;">运用</span>浏览器打开 html 文件<span style="color: black;">必须</span> 安装 "open in browser" 扩展。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">运行<span style="color: black;">表示</span>结果类似如下:</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-b9b8dab3f26483a510e99e261b7d0737_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">VS Code 和 Sublime Text 还<span style="color: black;">能够</span><span style="color: black;">协同</span> Emmet 插件来<span style="color: black;">加强</span>编码速度。</p>Emmet 官网：<a style="color: black;"><span style="color: black;">http://</span><span style="color: black;">emmet.io/</span></a>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我建了一个前端小白交流群，私信我，进入交流群。我会给<span style="color: black;">大众</span>分享我收集整理的<span style="color: black;">各样</span>学习资料，组织<span style="color: black;">大众</span><span style="color: black;">一块</span>做项目练习，<span style="color: black;">帮忙</span><span style="color: black;">大众</span>匹配一位学习伙伴互相监督学习，欢迎加入</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">链接：<a style="color: black;">HTML编辑器</a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">源自</span>：<a style="color: black;"><span style="color: black;">http://</span><span style="color: black;">RUNOOB.COM</span></a></p>




情迷布拉格 发表于 2024-8-21 16:07:35

感谢你的精彩评论，为我的思绪打开了新的窗口。

流星的美 发表于 2024-9-6 01:41:15

软文发布论坛开幕式圆满成功。 http://www.fok120.com

nykek5i 发表于 2024-9-29 16:05:45

“板凳”（第三个回帖的人）‌

1fy07h 发表于 2024-10-25 12:35:17

论坛外链网http://www.fok120.com/

1fy07h 发表于 2024-10-26 03:42:08

系统提示我验证码错误1500次 ＼~゛，

qzmjef 发表于 2024-10-30 02:52:00

这篇文章真的让我受益匪浅，外链发布感谢分享！

b1gc8v 发表于 2024-11-12 20:07:27

期待你更多的精彩评论，一起交流学习。
页: [1]
查看完整版本: 前端小白入门系列——HTML 编辑器