学习前端的开始

绝地灬酷狼 2024-05-06 21:21 8阅读 0赞

![preview0214][]

**什么是前端**

Web前端，用来直接给用户呈现一个一个的网页一个软件通常情况下是由后端+前端完成。  
后端通常情况下通过Java,C++这样一个编程语言来完成一个相关的逻辑处理，将数据返回给前端。  
前端的工作把后端返回给自己的数据进行一系列拼装/组装之后，达到一个完美的页面呈现给用户。

**生活中会遇到哪些前端页面**

*  web页面
 *  PC端应用程序页面
 *  移动端APP页面
 *  除此之外,还有公众号,小程序……

**什么是HTML页面**  
HTML超文本标记语言  
超文本:文本、声音、图片、视频、表格、链接。  
标记:由许许多多的标签组成。  
HTML页面是运行到浏览器上面的,这里推荐的浏览器是Google Chrome浏览器。

**开发工具vscode的搭建**

> 前端开发工具除了vscode,还有sublime,idea(商业版).  
> 使用vscode的原因: 企业开发前端的时候非常常用的一个开发工具

**安装**

官网网址：https://code.visualstudio.com/

![image-20240208143631631][]

![image-20240208143827836][]

> 安装之后，一路点击next即可，没有需要注意的事项，不做阐述。

**vscode推荐使用的三个插件**

`Auto Rename Tag`、`view-in-browser`、`Live Server`

![image-20240208175351814][]

**编写第一个HTML页面**

前提: 记事本编写代码  
效果: 直接浏览器上输出hello world

![image-20240208195539421][]

> 按ctrl+S保存，文件的后缀改为html

![image-20240208195828878][]

**如何运行：**

> 直接双击文件即可

![在这里插入图片描述][e292778967da454184a59e9e916a558f.png_pic_center]

**运行结果:**  
![image-20240208200711627][]

需要注意的事情：HTML页面是支持各种文件的，也就相当于它是有许多标签的。而上述的代码中没有标签，只是一串字符串，所以这样的代码结构是不标准的。

标准的代码样式：  
![image-20240208202911794][]

> `<>`括起来的都叫`html`的标签  
> `<> </>` => 双标签：标签有开始有结束  
> 除此之外，还存在单标签。

<html>
        <head>
            <title>这是页面标题</title>
        </head>
        <body>
            这是页面内容
        </body>
    </html>

上述代码中的标签

> `html`：html文件根标签  
> `head`: 编写页面相关的属性  
> `title`: 页面标题  
> `body`：页面内容展示信息

每一个标签相当于一个节点，上述代码中的这些标签可以构成一个DOM树。所有的标签都是html子标签，head和body是兄弟标签、head和title是父子标签。每一个标签相当于是一个对象，程序员可以通过代码拿到这些对象，拿到之后就可以对这些对象进行增删查改。

**代码**

![image-20240208215442753][]

![在这里插入图片描述][5ceac99419b34b22bcc05b66f360fb8c.png_pic_center]

**运行效果**

![image-20240208215409956][]

[preview0214]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/65c8beeb677841f98466844d14a220a3.jpeg
[image-20240208143631631]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/df718dc10a104906bb1654dc79ad6c67.png
[image-20240208143827836]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/cd1c50cc1ada401fb2c2cd5beff25874.png
[image-20240208175351814]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1853b3493c77483e9465428323125fea.png
[image-20240208195539421]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/cc2bd43df95f4e069966f9580752aabb.png
[image-20240208195828878]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3048ac5ab184477eb1062d5452ad9bd1.png
[e292778967da454184a59e9e916a558f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/28f7bac10d0c4882a26943b701c59588.png
[image-20240208200711627]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/57b6a3775e70444aa0684a2d0064d151.png
[image-20240208202911794]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e109fe63ba8f43ebb2c043305d861e2d.png
[image-20240208215442753]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/9f2ec77953dd459f918fee1c44a07fea.png
[5ceac99419b34b22bcc05b66f360fb8c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/cbb383f20fc54ff5a8b0936487708b61.png
[image-20240208215409956]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f0cbae483b454a87af1fead3ca25c149.png