6hz7vif 发表于 2024-6-30 00:56:45

HTML编辑器-HTML5极速入门


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">前言</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>我的 <a style="color: black;">个人博客</a>。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">
      <div style="color: black; text-align: left; margin-bottom: 10px;">
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">视频资源加载失败</div>
                  </div>
                </div>
            </div>
      </div>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">工欲善其事，必先利其器。一个好的编辑器会让编程过程变得事半功倍。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><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>是Dreamweaver，这还是我在读大学那会儿<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;">在我参加工作之后<span style="color: black;">便是</span><span style="color: black;">运用</span>Webstorm编辑器了，这款软件<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>代码补全、<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;">近几年<span style="color: black;">显现</span>了一款后起之秀，<span style="color: black;">亦</span><span style="color: black;">便是</span>VSCode。这是微软出的一款编辑器。当我<span style="color: black;">第1</span>次接触到这款软件就对他爱不释手了。以至于我一时激愤将我电脑上绝大<span style="color: black;">都数</span>的编辑器都卸载了，接下来的编程都是在VSCode上完成的。<span style="color: black;">例如</span>Python、Java、PHP、Vue等等。</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><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;"><span style="color: black;">按照</span>我的经验，我<span style="color: black;">举荐</span><span style="color: black;">大众</span><span style="color: black;">运用</span> VSCode 来编写HTML代码。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">下载安装包</h3>
    <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;">官网</a>下载VSCode的安装包。比较简单，<span style="color: black;">这儿</span>就不演示了。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">安装拓展</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>安装2个拓展：Chinese (Simplified) Language Pack for Visual Studio Code 和 open in browser。这两个拓展分别是用来<span style="color: black;">表示</span>中文和快速调用浏览器展示网页的。如下所示：</p>

    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-4be2b2f0a947028837d7d7b932ee3010_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">编写HTML代码</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>新建文本 test.html，如下所示：</p>

    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-1a0d2a2b29742556ad49a32c65a849aa_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文件中写入代码：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;潘高的小站&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
      我的<span style="color: black;">第1</span>个博客网址是 http://blog.pangao.vip
      &lt;/body&gt;
      &lt;/html&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最后按 alt + B 调用浏览器，展示网页效果，如下所示：</p>

    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-8e0540d0d303b0859a7af423720569bb_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>就完<span style="color: black;">成为了</span><span style="color: black;">运用</span>VSCode编写一个简单网页的过程，是不是很简单呢？！</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>请关注公众号：潘高陪你学编程</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-07d4fa9feb45b227453c7d28fe9ae102_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>




vip51888 发表于 2024-8-28 05:13:56

外贸网站建设方法 http://www.fok120.com/

听听海 发表于 2024-8-28 17:25:20

我完全同意你的观点，说得太对了。

情迷布拉格 发表于 2024-8-29 09:15:12

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

nykek5i 发表于 2024-10-16 17:43:35

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

1fy07h 发表于 2024-11-2 02:16:23

回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。
页: [1]
查看完整版本: HTML编辑器-HTML5极速入门