专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

从零开始学前端 第一季 第002期:编写属于自己的第一个网页

ins518 2024-10-11 16:26:42 技术文章 10 ℃ 0 评论



欢迎语

哈喽大家好，又跟大家见面了。不管在看到这篇文章之前你做什么工作，是一位厨师、一位老师、一位建筑工人、又或者是一名医生。我相信在你的工作或者生活当中都接触过电脑或者手机，在使用电脑或手机的过程当中，你肯定也使用了浏览器或者各种手机软件。不知道你在使用的过程当中有没有好奇这些网站或者软件是如何做的。如果你心存好奇，那么今天我就告诉你这个秘密，同时我也将带着你一起编写属于自己的第一个网页。

开始写代码

1、打开我们昨天安装的编辑器vscode如图。

2、创建项目文件夹存储我们将要编写的代码，就好比圈一块地为我们开建大楼做准备一个道理如图

3、项目文件夹下建index.html文件，该文件为编写网页代码的文件如图所示

4、现在开始正式编写代码，教大家一个快捷方式快速生成网页基础结构输入html编辑器会自动提示选择第二行html:5按回车键即可生成如图

5、写第一个标签<h1></h1>,在<h1>和</h1>标签之间，输入Hello World 字符串向编程世界问声好，或者也可以想自己女朋友爱人表白。同时修改<title>Document</title>为<title>我的第一个网页</title>，此时我们的第一行代码，第一个网页已经编写完成,同时按command+s键保存刚才写的代码。

  <!DOCTYPE html>
     <html lang="en">
     <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>我的第一个网页</title>
     </head>
   <body>
   <h1>Hello World</h1>
  </body>
 </html>
复制代码

6、安装open in browser 插件（该插件可以提供在编辑器里边直接打开html文件）

7、打开我们刚才写的index.html文件

8、此时浏览器里边已经出现我们刚才编写的程序效果到此属于我们自己的第一个网页就完成了。

结束语

今天的练习很简单，但我想对于之间只使用过网页的人，能通过自己写出这属于自己的第一个网页，已经是很大的进步，我相信，只要我们继续保持这种好奇心，学习欲望，坚持不断学习不就将来我们自己也可以变成一个前端工程师，写出漂亮的网页来。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表