前端语言串讲笔记 ｜ 青训营

王立达114
243 阅读3分钟

前端语言串讲笔记 青训营前端基础班 Day1

前端语言的基本能力

前端三剑客：HTML CSS JavaScript 同等重要，缺一不可。

1.png

HTML（超文本标记语言）

用于定义网页结构和内容。HTML是一种用于创建网页的标记语言。它由一系列标签（tag）组成，这些标签用于描述网页的结构和内容。HTML标签告诉浏览器如何显示网页的各个部分，包括文字、图像、链接、表格等。

HTML是构建万维网的基础，与CSS和JavaScript等其他技术一起，可以创建出各种丰富多样的网页和交互式应用程序。

CSS （层叠样式表）

CSS是一种用于描述网页样式和布局的样式表语言，与HTML结合使用。CSS可以对HTML文档中的字体、颜色、大小、间距、背景、边框等元素的样式进行设置。CSS使用选择器（selector）来选择要应用样式的HTML元素，并使用属性-值对来定义具体的样式。

CSS为网页设计和开发提供了强大的样式控制能力，使得网页可以呈现出各种各样的视觉效果和交互效果。

JavaScript

JavaScript是一种用于为网页添加交互性和动态效果的脚本语言。它可以嵌入到HTML文档中，通过与HTML和CSS结合使用，实现对网页内容和样式的动态修改、用户交互和数据处理等功能。

特点： 1.借鉴 C 语言的基本语法；

2.借鉴 Java 语言的数据类型和内存管理；

3.借鉴 Scheme 语言，将函数提升到“第一等公民”（First class）的地位 ；

4.借鉴 Self 语言，使用基于原型（Prototype）的继承机制。

2.png

三种语言在浏览器中运行流程

3.png

前端语言的协作配合

4.png

5.png

6.png

JavaScript event loop机制，先执行微任务，再执行宏任务

7.png

8.png

9.png

你不知道的HTML

H5 新增语义化标签

常见的 HTML5 新增语义化标签：

  1. <article>：表示一个独立的内容块。
  2. <aside>：定义一个附属信息的区域。
  3. <details>：表示用户可以查看或隐藏的补充信息。
  4. <figcaption>：为图片或图表添加标题。
  5. <figure>：用于组合一组相关元素，例如图表和其标题。
  6. <footer>：定义文档的页脚。
  7. <header>：定义文档的页眉。
  8. <main>：代表文档或应用程序的主要内容。
  9. <nav>：用于定义导航链接集合的部分。
  10. <section>：用于划分页面上的段落、主题、内容区块等。

用比不用好,不用比用错好

H5 存储

HTML5 引入了两种新的客户端存储技术：Web 存储和 IndexedDB。

Web 存储

Web 存储包括 localStorage 和 sessionStorage 两种，可以保存在浏览器端，不需要每次向服务器请求数据，提高了网页加载速度。这两种存储方式都是以 key-value 对的形式进行存储，并且只能存储字符串类型的数据。

IndexedDB

IndexedDB 是浏览器中另一种存储机制，它是一种更灵活的对象数据库，允许存储非字符串类型的数据，例如 Blob 和 ArrayBuffer 等。

IndexedDB 使用异步 API 进行操作，需要使用数据库、事务、对象存储区域等概念。

拓展交流

15.png

课程总结

16.png

这节课简要介绍了前端三剑客的能力，归纳为 HTML - 结构，CSS - 外表，JavaScript - 功能，这三剑客的结合使用可以实现丰富多彩的前端页面。

此外本节课还介绍了三种语言在浏览器中的运行流程和它们配合，拓展了H5相关的内容。

总之想学好前端，就必须打好三件套的基础，并了解前端技术原理及其发展，积极学习相关技术。

avatar
文章
阅读
粉丝