前端语言串讲 | 豆包MarsCode AI刷题

Fallengenius
64 阅读10分钟

昨天看完了进入青训营的第一个前端视频《前端语言串讲》，遂写以下笔记： 网课分四大块来进行对前端语言的简洁介绍：

前端语言的基本能力

首先前端包含三大语言

  • HTML
  • CSS
  • Javascript
三者的关系
  • HTML是一切的基础，以人来为例，HTML便是骨架部分
  • CSS可以说是装饰，美观我们的网页外表，同样以人来为例，CSS便是在骨架的基础上有了血肉
  • Javascrip是实现交互的部分，以人来为例，Javascript有了肌肉可以进行一系列动作

三大语言的使用

HTML

HTML是标记语言，含有一系列元素，这种元素也称作标签，一个基本的 HTML 文件包含以下部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页内容在这里显示
</body>
</html>
CSS

CSS（层叠样式表）主要用于控制网页的外观和布局，使 HTML 内容更加美观和易于阅读。

  • 基础语法
    • 选择器 { 键值对 }
JS

视频先为我们展示了JS的发展经历和发展来源，发展经历就不过多叙述，以下是发展来源的总结：

  • 借鉴了多种语言的特性
    • 借鉴C语言的基本语法
    • 借鉴 Java 语言的数据类型和内存管理
    • 借鉴 Scheme 语言，将函数提升到第一等公民（first class）的地位
    • 借鉴 Self 语言，使用基于原型（prototype）的继承机制

接着为我们展示了JS的特点

  • 首先是普遍的特点
  1. 验证用户输入。
  2. 简单的客户端计算和更强的控制。
  3. 平台独立性。
  4. 处理数据和时间。
  5. 生成 HTML 内容。
  6. 检测用户的浏览器和操作系统。
  • 然后是现代JS语言的特点
  1. let/const声明变量。
  2. 箭头函数。
  3. 模板字面量。
  4. 新的数组函数。
  5. 默认参数。
  6. 属性简写。
JS的语法
  1. String：“Any text”、“123.45” 等表示文本内容。
  2. Number：数字类型。
  3. Boolean：true 或 false。
  4. Null：表示空值。
  5. Undefined：未定义的值。
  6. Symbol：Symbol('something')。
  7. Object：包括对象字面量（{key: 'value'}）、数组（[1, "text", false]）和函数（function name (){}）
Js基本词汇
  1. 变量：一个命名的对值的引用，例如 “var a”。
  2. 操作符：是保留字，对值和变量执行操作，例如 “=”“*”“in”“===”“typeof”“!=” 等。
  3. 关键字 / 保留字：任何作为编程语言一部分的单词都称为关键字（也称为保留字），例如 “var”“let”“const”“if”“for” 等，用于声明变量等任务。
  4. 语句：一组单词、数字和操作符，执行一项任务，例如 “var a =...”。
  5. 表达式：一个引用、值或一组引用与操作符组合，结果为单个值。

网页结构

视频为我们简单展示了一个网页结构

一个网页的结构展示，包括 HTML 中的<head>和<body>部分，涉及meta、html、title等标签，以及多个div标签，并展示了网页构建过程中的一些关键步骤，如构建 DOM 树、计算 CSS 树、排版、渲染合成和绘制

然后为我们展示V8引擎的现有工作流程

  • 首先是源程序经过源代码解析器（Source code Parser）生成抽象语法树（AST）。
  • 接着进入 Ignition 解释器执行字节码（Bytecode Execute）。
  • 如果函数变热（Hot Function），则会进入 Turbofan 优化编译器进行优化，生成机器码（Machine code）。
  • 在执行过程中可能会出现 StackCheck、Ldara、Add a0, [0]、Return、Deoptimize 等操作，并根据不同的处理器架构如 Intel、ARM、MIPS 执行相应的机器码。
三大语言的协作
CSS IN HTML
  • Inline CSS：在<p>标签中使用style属性设置文本颜色为蓝色，如<p style="color: blue;">This is a paragraph.</p>。
  • Internal CSS：在<head>标签内使用<style>标签设置样式，例如设置body的背景颜色为蓝色，p标签的文本颜色为黄色，即<style type = text/css> body {background-color: blue;} p{ color: yellow;}</style>。
  • External CSS：在<head>标签内使用<link>标签引入外部 CSS 文件style.css，即<head></head> <link rel="stylesheet" type="text/css" href="style.css">
JS IN HTML
引入 JavaScript 的方式

  1. 内联脚本：

    • 可以直接在 HTML 文件的<script>标签中编写 JavaScript 代码。例如：
      <script>console.log('Hello from inline script!');</script>。
    • 这种方式简单直接，但不利于代码的维护和重用。如果页面中有多个地方需要相同的功能，就需要重复编写代码。

  2. 外部脚本文件：

    • 通过<script>标签的src属性引入外部的 JavaScript 文件。比如：
      <script src="path/to/your/javascript/file.js"></script>。
    • 这样可以将 JavaScript 代码分离到单独的文件中，使得 HTML 页面更加清晰，同时也方便代码的维护和重用。多个页面可以共享同一个外部脚本文件。
HTML IN JS

  1. 使用模板字符串

    • 在 JavaScript 中，可以使用模板字符串来嵌入 HTML 代码。例如：

  2. 借助模板引擎

    • 像 Mustache、Handlebars 等模板引擎可以在 JavaScript 中方便地生成 HTML。它们允许开发人员定义模板，然后将数据传递给模板进行渲染。

  3. 前端框架特定的语法

    • React 使用 JSX（JavaScript XML）语法，它看起来像 HTML，但实际上是在 JavaScript 环境中运行。
    • Vue.js 使用模板语法，可以在 .vue 文件中直接编写 HTML 结构，并与 JavaScript 逻辑紧密结合。
CSS IN JS
  1. 使用库和框架
  • 有许多专门的库和框架支持 CSS in JS，如 styled-components、Emotion 等。这些工具提供了简洁的 API，使得在 JavaScript 中定义和应用样式变得非常容易。
  1. 内联样式
  • 在 React 等框架中，可以直接使用内联样式来为元素添加样式。虽然这种方式可能会导致代码冗长，但在某些情况下非常有用。

在说完三大语言的交互协作后，视频更加深入的讲解HTML的知识

HTML的标签

分类标签示例
文档型<DOCTPE>、<head>、<body>
闭合标签<p></p>
换行型<br>
空标签<img>、<input>
块级标签<h1>,<h2>...<h6>
行内标签<span>
语义化标签无具体示例，可后续补充
媒体标签<video>、<audio>
H5 新元素<embed>
表单标签<input type="date">、<input type="color">
功能标签<progress>、<canvas>

HTML的标签较多，多加运用熟记即可，不多赘述，下面更多的是我并没有了解的知识

HTML ARIA

在并没有对ARIA了解的现状下我去豆包AI询问认识到ARIA是“可访问的富互联网应用”，它使得网页和富互联网应用能够更好地服务于包括残障人士在内的所有用户。 不过视频当中不仅提到对不方便人士的帮助，还有对UI系统提供指导意义

  • UI 系统即用户界面（User Interface）系统，是软件、网站、移动应用、游戏等数字产品中人与机器进行交互的部分。

HTML5

  • HTML5 带来了许多新的特性和改进，使网页开发更加灵活、高效且功能强大。它不仅增强了网页的语义化，还扩展了对多媒体和本地存储等方面的支持。这些新特性让开发者能够构建出更接近原生应用体验的富互联网应用。

在询问AI后我认识到HTML5和HTML的区别和关系

HTML5语义化标签
  • HTML5 引入了许多新的语义元素，如 <header>、<nav>、<section>、<article>、<aside> 和 <footer> 等。这些元素使网页的结构更加清晰，便于开发者组织内容，也有利于搜索引擎优化（SEO）。相比之下，HTML 中缺乏这些明确的语义元素，网页结构的定义通常依赖于 <div> 等通用容器元素。
HTML5 Audio && Video
  • HTML5 大大增强了对多媒体的支持。它提供了 <audio> 和 <video> 元素，使得在网页中嵌入音频和视频变得更加容易，无需依赖第三方插件如 Flash。而在 HTML 中，要实现多媒体播放通常需要借助插件，这可能会带来兼容性问题和安全风险。
HTML5 SVG && Canvas
  • HTML5 的 <canvas> 和 <svg> 元素允许开发者在网页上绘制图形和创建动画，具有很高的灵活性和交互性。而 HTML 通常需要借助外部图形库或插件来实现类似的效果。
HTML5表单增强
  • HTML5 对表单进行了改进，增加了新的输入类型，如 email、url、date、time、number 等，这些输入类型可以在浏览器端进行数据验证，提高了用户输入的准确性和效率。HTML 在表单功能上相对较为简单。
HTML5存储
  • HTML5 支持离线应用，通过应用缓存（AppCache）和本地存储（LocalStorage、SessionStorage）等技术，使得网页在没有网络连接的情况下也能继续运行部分功能。HTML 则没有这样的内置功能。
对比项目CookiesLocal StorageSession Storage
容量4kb10mb5mb
支持的浏览器版本HTML 4/HTML 5HTML 5HTML 5
可访问范围任何窗口任何窗口同一标签页
过期时间可手动设置永不标签页关闭时
存储位置浏览器和服务器仅浏览器仅浏览器
是否随请求发送是否否
HTML5 PWA && AMP

一、HTML5 PWA 进程：

  • 首先判断是否存在激活的服务工作者线程（service worker）。
  • 如果存在激活的服务工作者线程，可能进行后续的操作，具体流程中未明确提及 PWA 的更多特定步骤，但可以推测服务工作者线程可能会对 PWA 的功能实现起到关键作用，比如离线缓存、后台同步等。

二、AMP 进程：

  • 判断是否是 AMP，如果是 AMP，接着判断是否符合 AMP 规范。
  • 若符合 AMP 规范，执行 Service Worker 文件，激活后绑定生命周期事件，缓存 AMP 内容，拦截请求并触发事件，最终完成收录。
  • 如果不是 AMP，在注册时创建 Worker 工作线程并启动 AMP Server，然后判断是否有更新且再次判断是否符合 AMP 规范，若符合则执行与上述 AMP 相同的后续流程。
HTML5 二进制

HTML5 中文件处理相关的知识：

  • 涉及对象：

    • File对象：类型为图片，是 Node.js Blob对象的继承对象。可以通过FileReader转化为不同格式。
    • Buffer：未明确具体介绍与其他对象的关系，但在整体知识体系中可能有一定关联。
    • Blob对象：被File对象继承。
    • FileReader：可以将File对象转化为文本字符串格式（readAsText方法）、二进制数组格式（readAsArrayBuffer方法）、DataURL 格式字符串（readAsDataURL方法）。
    • Text、Data Url、ArrayBuffer：FileReader转化后的不同格式。其中ArrayBuffer能读不能写。
    • TypedArray和DataView：提供写能力。
移动设备支持
  • HTML5 针对移动设备进行了优化，具有更好的响应式设计支持，可以适应不同屏幕尺寸的设备。它还支持触摸事件等移动设备特有的交互方式。HTML 在移动设备上的表现相对较弱，需要更多的额外工作来适应移动环境。

最后的拓展交流老师与我们交流了当前端的发展，Web的风靡和大前端的现状，让我感觉前端的发展仍有无限可能，坚定学习前端的信心并为之努力

avatar
文章
阅读
粉丝