前端web开发前沿知识

76433橘子
134 阅读12分钟

前端web开发前沿知识

熟悉电脑

我们在实现我们的网站的开发的时候，我们需要实现的就是我们的拥有电脑来实现我们的最基本的电脑的熟悉程度
​
电脑的配置: 显示我们的文件后缀名以及显示文件的扩展名，显示我们的隐藏文件，后缀名就是实现的是我们的通过文件扩展名来常见不同的文件
​
隐藏文件显示出来  文件的后缀名实现显示

程序员需要使用的软件含有:
vscode 编译器
xmind 思维导图的绘制
typora 一个用来实现我们的文档的书写。markdown的编辑模式，用来实现的是书写我们的readme的文档的书写

认识网页和网站

网页的专业术语: web page(web application)
网页就是一个打开我们的每一个页面就是我们的网页
网页的内容含有的就是我们的: 文字，链接，图片，音乐，视频

网站: 网站就是通过的是我们的多个网页组成的

网页的显示过程

用户通过一个浏览器输入一个网站
浏览器通过用户输入的网址来实现寻找到对应的服务器地址，发送请求，获取静态资源
浏览器通过我们的DNS服务器解析来实现我们的解析我们的静态资源
DNS 就是我们的: domain name system
通过DNS的解析，我们实现的就是我们的: 将我们的一个url地址来实现解析成一个一个的ip地址
html css javascript 是一个我们在请求时候的静态的资源文件(static的目录文件)
浏览器具有的就是我们的 渲染引擎 + js引擎
​
​
一个网页的呈现步骤就是: 通过我们的DNS来实现我们的将输入的url地址来实现解析为特定的ip地址，然后实现通过我们的ip地址请求静态资源和动态资源，然后通过浏览器的一些 渲染引擎 + js引擎 来实现将网页实现渲染

image-20240921160319011.png

网页的显示过程-前端工程师

1.开发项目(html css javascript vue react)
2.实现打包和部署项目到服务器里面
​
​
服务器又是什么耶:
我们的日常生活中我们实现接触到的是我们的客户端，前端的内容
但是我们实际上我们实现的时候，数据的来源就是来源于的我们的 服务器 中的
如果所有的玩意我们实现的时候都来缓存在本地，那么就会导致内存的占用，所以说我们实现的是将数据存储到服务器中
服务器就是一个普通的电脑，或者说就是一台主机，然后我们实现的时候，服务器是二十四个小时稳定运行的，莫得显示器的，一般的安装的是linux系统上面的(centos)
​
目前来说的话，我们的大部分的公司都是实现的是使用云服务器的(阿里云，腾讯云，华为云，字节云等等)

image-20240921160711424.png

网页的组成三部分

Berners-Lee 上线了我们的世界上的第一个网站，就是我们的万维网的介绍  https://xcme.wnu.edu.cn/info/1219/4811.htm
​
网站实现开发的时候的基本组成:
1.html元素
2.html元素 + CSS样式
3.html元素 + CSS样式 + Javascript语言
​
html 是我们的网页的内容结构的组成: 网页的骨架
CSS 是一个我们的网页的样式的设计,就是我们的视觉体验: 网页的样式
Javascript 网页的交互处理: 网页的交互行为
​
然后我们实现使用我们的浏览器的时候，我们是可以实现的是调试的
然后我们实现我们的最终的代码的书写的时候，我们需要实现的就是我们的将我们的三个部分实现区分的书写，就是代码模块化的开发思想
但是实际上最终的实现的时候，我们都需要要注重的就是我们的原生的开发
html CSS javascript 这个三个部分都是十分重要的

image-20240921171447909.png

Typora 的基本使用

首先我们的这个的书写笔记的软件使用的是我们的 markdown 的文本格式

标题注解

我们的markdown的实现的书写就是:
1.# 的多少就是来实现了决定了我们的最终的几级标题的书写，有多少个就是几级标题
  # 是我们的一级标题
  ## 就是我们的二级标题
  ### 就是我们的三级标题 ...

黑点和小圆圈的呈现

完善的应用程序包含那些:
* 我们通过这个符号可以实现我们的出现小黑点
​
* + tab 就可以实现我们的空白小圆圈
  • 服务端的开发
  • ios开发，Android开发
  • web开发
  • 桌面开发(window mac os)

前端开发内容

  • 前端开发任务

    • web 开发，小程序开发
    • 移动端开发, 桌面端开发(electron.react native)，服务器的开发(Nodejs)
  • 前端的学习的路线的实现

web前端的实现

  • 电脑的配置问题

    • 文件后缀名的显示
    • 隐藏文件的显示

  • 网页和网页的组成

    • 网页就是我们的web page
    • 一个网站就是由我们的一个一个的网页形成的

  • 网页的呈现步骤

    • 访问网页的url地址(在浏览器中实现输入)
    • DNS 解析器，这个就是用来实现的是我们的将我们的每一个url地址解析成一个一个的 ip 地址 （domain name system）
    • 通过 ip地址 向特定的服务器请求静态资源，静态资源包含了html CSS javascript
    • 最后通过我们的最终的浏览器的 渲染引擎 和 js引擎 来实现我们的一个网页的呈现

网页的组成部分

  • Html 就是来实现设计我们的网页的骨架结构的(身体结构)
  • CSS 就是来实现我们的网页的样式的设计的(外观)
  • Javascript 就是来实现我们的网页的行为的(灵魂)

浏览器的作用

  • 我们前端的基本的一些组成部分的话，我们就是那个三件套的实现书写

  • 我们的网页的渲染是通过的我们的浏览器来实现访问资源提示符(url) 来实现请求资源，然后实现渲染到页面的

  • 但是每一个浏览器的最核心的部分 就是我们的 渲染引擎 ，浏览器的内核 (Rendering Engine)

    • 浏览器内核的作用就是来实现我们的 解析网页的语法，并且实现渲染网页

    • 常见的浏览器含有我们的: 谷歌 Edge Opera 火狐 等等

    • 不同的浏览器在背后实现使用的浏览器的内核是不同的（通过渲染网页的时候，我们就是通过这个内核来实现的）

      • Trident（三叉戟）: IE浏览器， 360浏览器， 百度浏览器， UC浏览器...
      • Gecko（壁虎）: 火狐浏览器
      • Presto（急板乐曲）-> Blink(眨眼)：一起的opera
      • webKit： Safari , 360, 搜狐高速浏览器， 移动端浏览器
      • webKit -> Blink： 谷歌浏览器

    • 不同的浏览器的内核，含有不同的解析和渲染规则，所以说在同一个网页在不同的浏览器的渲染效果可能不同

      • 为了实现我们的在不同的浏览器的时候，我们为了实现浏览器的显示效果的相同，我们就要考虑浏览器适配

前端 web 开发的准备

编写第一个网页

  • 我们实现开发我们的第一个网页的时候，我们实现的是我们的直接通过我们的记事本来实现我们的代码的书写

    • 1.首先我们需要实现的时创建一个文本文档，在这个里面实现书写我们的基础的一些html代码
    • 2.然后修改我们的后缀名来实现我们的成为我们的可以运行的第一个网页的代码： 就是后缀名为: .html
    • 3.接下来实现的就是我们的直接点击我们的这个文件我们就可以实现最后的实现运行第一个网页
    • 4.但是我们实现使用我们的这个文本来实现编辑的时候，我们需要实现的是使用html元素实现标记
    • 5.我们实现我们的标记的时候，我们需要实现的是我们的使用我们的 html 元素 来布局基本的架构

HTML 元素

  • 英文全名: Hyper Text Markup Language （HTML）

  • 中文名称: 超文本标记语言

  • 作用 : 就是用来实现我们的创建网页的标记语言， html元素是用来实现构建网站的基石

  • 标记语言

    • 由无数个标记元素 （tag） 组成的
    • 实现对某些内容的特殊标记，然后被我们的浏览器来实现逐步的解析
    • 由标签和内容组成的部分，就是我们的元素（element）

  • html文件的扩展名

    • .html 就是现在的统一的使用的超文本的标记，然后我们以前实现使用的就是我们的: .htm

前端编译器的选择和配置

  • WebStorm 的使用

  • VSCode 就可以实现使用我们的这个编译器

  • HBuilder 这个就是我们的用来专门实现使用我们的 uniapp 的开发

  • jetbrains 公司的大部分的开发工具都是可以实现我们的开发前端

  • 选择编辑工具的原因

    • 智能提示
    • 高亮显示
    • 语法检查
    • 集成环境
    • 开发效率的提高

  • VSCode 的基本使用

    • 我们实现使用的我们的 VSCode 就是实现的是我们的 Electron 来实现的开发我们的一个桌面端应用

    • VSCode 的插件的选择

      • 使用我们的谷歌的时候，我们是可以选择使用我们的 bing.com 的搜索引擎
      • 同时我们还是可以实现使用我们的那个 百度 的搜索引擎的
      • 1.第一个插件: Chinese 可以实现我们的转换为中文的一个插件(中文简体)
      • 2.第二个插件: atom one dark 颜色主题
      • 3.第三个插件: VSCode Great Icons 文件夹图标
      • 4.第四个插件: open in browser、 Live Sever 在浏览器中打开网页
      • 5.第五个插件: auto rename tag 自动重命名标签名

    • VSCode 的配置

      • Auto Save 实现的是我们的自动保存
      • Font Size 这个就是我们的设置我们的代码的字体的大小
      • Word Wrap 代码的自动换行
      • Render Whitesapce 空格的渲染方式
      • Tab Size 代码的缩进，推荐两个空格

认识元素

  •       <html>
          <head>
              <title>网页名称</title>
          </head>
          <body>
              <div>Hello World</div>
          </body>
      </html>

  • 我们的一个网页的组成的时候，是由我们的一个一个的元素 Element 组成的

    • 元素 Element 的概念

      • 一个前端元素的话包含了数据项， 或者说一块文本， 一张图片

    • HTML 元素含有那些耶?

      • developer.mozilla.org/zh-CN/docs/… 元素参考书，就是我们的MDN的文档
      • 但是我们实现的时候，我们需要的注意的是我们的元素只是语义化的，只是含有默认的样式而已
      • 我们是可以通过后面的CSS样式的设计来实现改变我们的元素的呈现的效果的

    • HTML 元素的组成

      • 首先我们的元素的设置的时候，注意的是我们的元素含有 双标签元素 以及 单标签元素
      • 双标签元素: 就是具有我们的开始标签和结束标签的 <div></div>
      • 单元素标签: 就是我们的不具有结束标签的元素 <img src=''/> <input type='text'/>

    • HTML 元素书写时候的注意事项

      • HTML的标签实现书写的时候，我们是不用区分大小写的，但是推荐的是使用小写

元素属性

  • 元素是可以拥有属性的 (Attribute)

    • 我们实现的时候，我们的属性的设置就是实现的是我们的给我们的元素一个标记
    • 然后实现我们的对属性实现一个标记即可，然后通过一些后续的某些方法来实现控制
    • 属性的设置的时候，我们的具体实现就是: <标签名 属性名=“属性值”></标签名> 或者 <标签名 属性名=“属性值”/>
    • 我们可以实现的设置的属性含有: class id 等等
    • 我们实现属性的设置最原本的实现的目的就是通过我们的选择器这些来实现选择元素，然后实现控制显示
    • 同时也是可以通过后期的属性的设置来实现我们的 通过属性来获取我们的一些基本的javascript的页面的交互获取元素节点
    • 每一种的元素标签都是具有 共同具有的属性的 还有一些每个元素的特有属性
    • 元素的基本的结构: <标签名 属性名=“属性值”></标签名>

image-20240922012137364.png

元素嵌套

  • 就是我们的元素实际上是可以存放在我们的元素的内部的，形成一种嵌套关系，这个就是我们的元素的嵌套

  • 元素之间的关系

    • 父子关系: 比如说后面的 ul 和 li
    • 兄弟关系: 比如说后面的 div 和 span
    • 放心，我们的后面的实现的时候，我们的常用的元素除了 div 就是 div (玩笑话)

image-20240922012616709.png

HTML的注释

  • 在我们实现书写代码的时候，我们需要做的就是我们的 给我们的代码书写注释

  • 书写注释主要的目的就是来实现我们的便于维护以及便于实现理解

  • 注释就是我们对我们的代码的一个独特的说明

  • HTML 超文本标记语言的注释的基本的格式

    • <!-- 注释内容 --> 实现注释的快捷键就是: ctrl + /
avatar
文章
阅读
粉丝