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

林檬百香果
39 阅读3分钟

这是我参与【第六届青训营】伴读笔记创作活动的第6天

前端三大部件 指的是网页前端开发中常用的三个技术部分，分别是HTML、CSS和JavaScript。这三个技术部分可以分别负责网页的结构、样式和交互功能，它们常常被同时使用来创建现代的网站和web应用程序。

HTML（超文本标记语言）是一种用于创建网页结构和内容的标记语言，它定义了不同元素和标签的属性和用途，并通过这些标签来描述网页的结构和内容。

CSS（层叠样式表）则是控制网页外观的样式语言，通过定义颜色、字体、布局等样式属性，可以让网页看起来更加美观和有吸引力。

JavaScript是一种用于创建交互性的脚本语言，通过JavaScript，网页可以与用户进行实时交互，从而实现动态效果和响应式设计，使用户的操作更加流畅和自然。

<div class="content" id="main">Hello, world!</div>

#main { color: red; } .content { color: blue; } div { color: green; } 屏幕截图 2023-04-25 162232.png

当然，我们编写html是最基础的技能，我们通过用html来编写我们的主要页面，让我们的页面有一个总体的框架，但这样远远不够，这就需要我们掌握好css里面的基础知识，我们在编写css的时候，有时改里面的样式却不起作用，就需要我们对里面的权重比较清楚；

下面是CSS选择器的权重规则：

  1. 若是内联样式，则权重为1000。
  2. 每个ID选择器的权值为100.
  3. 每个类，属性或伪类选择器的权值为10。
  4. 每个元素选择器或伪元素选择器的权值为1。
  5. 如果有多个选择器作用于同一元素，则会将每个选择器的权重相加，以得出最终权重。

下面是JavaScript的基本语法包括以下几个方面的基本语法：

屏幕截图 2023-04-25 160304.png

1.png

基本语法包括以下几个方面：

  1. 变量：可以使用var、let、const等关键字声明变量，例如：

javascript var a = 10; let b = 20; const c = 30;

  1. 数据类型：JavaScript有多种数据类型，包括数字、字符串、布尔值、null、undefined、对象和数组等，例如：

javascript let num = 123; let str = 'hello'; let bool = true; let obj = {name: 'Tom', age: 18}; let arr = [1, 2, 3];

  1. 运算符：与其他编程语言相似，JavaScript支持基本的数学运算符（+、-、*、/、%）、比较运算符（>、<、>=、<=、==、!=）和逻辑运算符（&&、||、!）等。
  2. 条件语句：JavaScript中最常用的条件语句是if-else语句，也可以使用switch-case语句。
  3. 循环语句：JavaScript支持for循环、while循环、do-while循环等。
  4. 函数：JavaScript中函数是一组可重复使用的代码块，可以接受参数并返回结果，例如：

javascript function add(x, y) { return x + y; }

  1. 对象：JavaScript中的对象是一组属性和方法的集合，可以使用点号或方括号访问其属性或方法，例如：

javascript let person = {name: 'Tom', age: 18}; console.log(person.name); // 输出 'Tom'

  1. 事件：JavaScript可以监听用户在页面上的交互行为，例如点击、滚动等操作，并触发相应的函数来处理这些事件。

当然，我们在页面引入css的方式也很多，比如下面三种：

  1. 内部样式表：将CSS样式直接写在HTML文档的<head>标签中的<style>标签内，例如：
html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
    }
  </style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
```

2.  外部样式表：将CSS样式定义在一个独立的外部文件中，然后使用`<link>`标签引入该文件，例如：

`
html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
`

其中，`href`属性指定要加载的CSS文件的URL。

3.  内联样式：将CSS样式直接应用到HTML元素上，使用`style`属性来定义样式，例如：

`
html
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 style="color:navy;">This is a heading</h1>
<p style="background-color:lightblue;">This is a paragraph.</p>

</body>
</html>

这种方式不太常用，因为它会让HTML代码变得冗长，并且难以维护。一般情况下，我们使用最广泛的方式是外部样式表，因为这样可以让HTML和CSS分离，降低了代码的耦合度。

屏幕截图 2023-04-25 162232.png

屏幕截图 2023-04-25 162954.png 从上图可知，cookie的存储内存是最少的，它更适合维持状态，但不太适合用于保存数据，我们可以使用localStorage和sessionStorage来保存数据，这里的cookie如果用于http请求的话，会大大减低性能，所以最好不要用cookie来存储数据；

avatar
文章
阅读
粉丝