青训营第一节课| 豆包MarsCode AI刷题

别指望了
166 阅读10分钟

前端语言串讲

image.png

前端语言的基本能力

HTML基础

以下是一些常见的 HTML 标签及其用法：

  1. <html>: 定义整个 HTML 文档的根元素。

    <html lang="en">

  2. <head>: 包含文档的元数据（如标题、字符集、样式表链接等）。

    <head>
    <title>文档标题</title>
</head>

  3. <body>: 文档的主体，包含可见内容。

    <body>
    <h1>欢迎来到我的网站</h1>
</body>

  4. <h1> 到 <h6>: 标题标签，<h1> 是最高级别的标题，<h6> 是最低级别的。

    <h1>主标题</h1>
<h2>副标题</h2>

  5. <p>: 段落标签，用于定义文本段落。

    <p>这是一个段落。</p>

  6. <a>: 超链接标签，使用 href 属性指定链接地址。

    <a href="https://www.example.com">点击这里访问示例网站</a>

  7. <img>: 图像标签，使用 src 属性指定图像路径，alt 属性提供替代文本。

    <img src="image.jpg" alt="示例图像">

  8. <ul> 和 <ol>: 无序列表和有序列表，分别用于列出项目。

    <ul>
    <li>项目一</li>
    <li>项目二</li>
</ul>
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

  9. <div>: 块级元素，用于分组其他元素和布局。

    <div>
    <p>这是一个块级元素。</p>
</div>

  10. <span>: 行内元素，用于分组文本或其他行内元素。

    <span>这是一个行内元素。</span>

  11. <form>: 表单标签，用于收集用户输入。

    <form action="/submit" method="post">
    <input type="text" name="username" placeholder="用户名">
    <input type="submit" value="提交">
</form>

CSS基础

在前端工作中html负责结构，css负责样式，js负责交互

全称： cascading 层叠 style 样式 sheet 表

引入css的几种方法：

1.行间样式

2.页面级css

3.外部css文件

选择器

选择器作用：css如何选择属于自己的html

1.id选择器

image.png

一个元素只能有一个id值，也就是一个html元素只会有一个id元素

2.class选择器

image.png

多对多的一个关系，一个元素可以有多个class，一个class可以有多个元素

3.标签选择器

image.png

4.通配符选择器

5.父子选择器

image.png

父子选择器可以用其他的选择器来写。

6.直接子元素选择器

image.png

7.浏览器判断父子选择器的顺序：

image.png

自右向左

  1. 并列选择器 div.deom{ } image.png

9.字典

www.w3cschool.cn/css/dict#:~…

javascript基础

好的！以下是对你提供的 JavaScript 基础概念的中文解释：

变量（Variable） 变量是一个命名的引用，用于指向某个值。你可以用 var、let 或 const 来声明变量。

JavaScript 中有七种基本数据类型：

  1. 字符串（String）：例如 "任何文本"。
  2. 数字（Number）：例如 123.45。
  3. 布尔值（Boolean）：true 或 false。
  4. 空值（Null）：表示“无值”，写作 null。
  5. 未定义（Undefined）：表示一个变量已声明但未赋值，写作 undefined。
  6. 符号（Symbol）：用于创建唯一标识符，写作 Symbol('something')。
  7. 对象（Object）：用于存储键值对，例如 { key: 'value' }。

操作符（Operator） 操作符是用于对值和变量执行操作的保留字，例如 +、-、*、===、typeof 等。

表达式（Expression） 表达式是指一个引用、值或一组引用和值的组合，经过操作符处理后，结果为一个单一值。

对象（Object） 对象是一种数据类型，用于存储以键值对形式组合的数据。例如：

var user = {
    name: "Aziz Ali",
    yearOfBirth: 1988,
    calculateAge: function() {
        // 计算年龄的代码
    }
};

函数（Function） 函数是将一段代码封装在一起的一种方式。这段代码只有在函数被调用时才会执行。函数的作用是组织代码，使其更有条理，并且可以重复使用。

function someName(param1, param2) {
    // 这里是函数的代码块
    var a = param1 + " love " + param2;
    return a;
}

方法（Method） 如果对象的某个键对应的值是一个函数，这个函数被称为该对象的方法。

关键字（Keyword / Reserved Word） 关键字是编程语言的词汇中的一部分，用于执行特定的功能，例如 var、if、for 等。

键（Key）与值（Value） 在对象中，键是用来标识数据的名称，值则是与该键相关联的数据。

从浏览器到页面

第一，渲染模型 image.png

第二，javascript模型 image.png

三个基本文件的相互协作

HTML5

HTML5 引入了许多语义化标签，这些标签不仅帮助浏览器和开发者理解页面结构，还有助于搜索引擎优化（SEO）和可访问性。以下是一些常用的 HTML5 语义化标签及其用途

image.png


### 1. `<header>`

用于定义文档的头部，通常包含网站的 logo、导航栏和标题等内容。

### 2. `<nav>`

用于定义导航链接的区域，包含页面内或网站内的链接。

### 3. `<main>`

用于指定文档的主要内容，页面中唯一的主要内容区域。

### 4. `<section>`

用于定义文档中的一个独立部分，通常包含一个主题或功能相关的内容。

### 5. `<article>`

用于表示独立的内容块，如博客文章、新闻报道或论坛帖子等，可以独立于其他内容存在。

### 6. `<aside>`

用于定义与主要内容稍微相关的内容，通常用于侧边栏或补充信息。

### 7. `<footer>`

用于定义文档的底部，通常包含版权信息、联系信息、社交媒体链接等。

### 8. `<figure>` 和 `<figcaption>`

`<figure>` 用于封装图像、图表或其他媒体，而 `<figcaption>` 则用于为这些媒体提供说明。

### 9. `<time>`

用于表示特定的时间或日期，通常用于时间戳、日历事件等。

### 10. `<mark>`

用于突出显示文档中的某些部分，通常表示重要性或相关性。

### 11. `<progress>`

用于表示某项任务的进度，例如下载或上传的进度条。

### 12. `<output>`

用于表示计算或用户操作的结果。

HTML5 对表单进行了多项增强，使得表单的创建和用户交互更加方便和高效。

image.png

### 1. 新类型的输入字段
HTML5 引入了多种新的输入类型，如：
-   `<input type="email">`：用于输入电子邮件地址，自动验证格式。
-   `<input type="url">`：用于输入网址，支持格式验证。
-   `<input type="tel">`：用于输入电话号码，提供适合的虚拟键盘。
-   `<input type="date">`、`<input type="time">`：提供日期和时间选择器，提升用户体验。

### 2. 占位符（Placeholder）
可以使用 `placeholder` 属性在输入框中显示提示信息，帮助用户理解需要输入的内容。

### 3. 自动完成（Autocomplete）
通过 `autocomplete` 属性，可以启用或禁用浏览器的自动完成功能，使得用户在输入时更快捷。

### 4. 必填字段（Required）
可以使用 `required` 属性标记必填字段，表单提交时会自动验证。

### 5. 自定义验证
HTML5 允许使用 `pattern` 属性定义正则表达式，进行更复杂的输入验证。

### 6. 进度条和范围输入
-   `<input type="range">`：创建一个滑动条供用户选择数值。
-   `<progress>`：显示任务的进度条，提供视觉反馈。

### 7. 文件上传
使用 `<input type="file">` 可以允许用户上传文件，并且支持多文件选择。

### 8. 新表单属性
如 `novalidate`（禁用表单验证）、`formaction`（指定表单提交的 URL）等，增强了表单的灵活性。

### 9. 语义化表单元素
通过使用 `<label>`、`<fieldset>` 和 `<legend>` 等元素，增强了表单的可读性和可访问性。

### 10. 适应移动设备
许多新类型的输入字段会根据用户设备提供合适的键盘布局，提升在移动设备上的输入体验。
这些增强功能使得 HTML5 表单更加易用、灵活和用户友好，极大地提升了用户体验和开发效率。

HTML5 提供了几种存储机制，允许网页在客户端保存数据。

image.png HTML5 提供了几种存储机制，允许网页在客户端保存数据。这些机制包括： Web Storage Web Storage 提供两种存储方式：localStorage 和 sessionStorage。

  • localStorage:
    • 数据持久性：存储的数据没有过期时间，关闭浏览器后数据依然保留。
    • 用法示例： 
      // 保存数据
localStorage.setItem('key', 'value');
// 读取数据
const value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();
  • sessionStorage:
    • 数据持久性：数据仅在当前会话中可用，关闭浏览器或标签页后数据会消失。
    • 用法示例： 
      // 保存数据
sessionStorage.setItem('key', 'value');
// 读取数据
const value = sessionStorage.getItem('key')；
// 删除数据
sessionStorage.removeItem('key');
// 清空所有数据
sessionStorage.clear();
  1. IndexedDB IndexedDB 是一个低级 API，用于在用户的浏览器中存储大量结构化数据。它支持事务，可以处理复杂的数据存储需求。
  • 特点：
    • 数据以对象的形式存储，可以进行索引查询。
    • 异步操作，避免阻塞主线程。
  • 用法示例： 
    // 打开或创建数据库
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  db.createObjectStore('myStore', { keyPath: 'id' });
};
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction('myStore', 'readwrite');
  const store = transaction.objectStore('myStore');
  // 添加数据
  store.add({ id: 1, name: 'Item 1' });
  // 查询数据
  const getRequest = store.get(1);
  getRequest.onsuccess = function() {
    console.log(getRequest.result);
  };
};
  1. File API File API 允许网页访问用户的本地文件系统，用户可以上传文件并进行操作。
  • 示例： 
    const input = document.querySelector('input[type="file"]');
input.addEventListener('change', function() {
  const file = this.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    console.log(e.target.result); // 输出文件内容
  };
  
  reader.readAsText(file); // 读取文本文件
});
  1. Cache API Cache API 用于存储请求和响应，常用于离线应用程序（PWA）中，可以帮助用户在没有网络连接的情况下访问内容。
  • 用法示例： 
    if ('caches' in window) {
  caches.open('my-cache').then(function(cache) {
    cache.add('/index.html'); // 缓存文件
  });
}
  1. Service Workers Service Workers 是一种可以在后台运行的脚本，能够拦截网络请求和缓存内容，从而实现离线功能和更高效的数据管理。 这些存储机制使得 HTML5 能够创建更丰富、响应更快的网页应用，增强用户体验和功能性。

image.png

在 HTML5 中，使用 <audio> 标签可以方便地嵌入音频文件。这个标签支持多种音频格式（如 MP3、WAV 和 OGG），并且提供了一些常用的属性和方法来控制音频的播放。 image.png

在 HTML5 中，处理二进制数据的主要方式是使用 ArrayBuffer 和相关的视图（如 TypedArray）。这些功能允许你在 JavaScript 中操作二进制数据，通常用于处理文件、图像、音频等多媒体内容。

基本概念

  1. ArrayBuffer: 一个通用的、固定长度的原始二进制数据缓冲区。
  2. TypedArray: 一系列视图对象，可以以不同的格式读取和写入 ArrayBuffer 中的数据。常见的视图有 Uint8Array, Float32Array, 等。

创建 ArrayBuffer

javascriptCopy Code
// 创建一个长度为 16 字节的 ArrayBuffer
const buffer = new ArrayBuffer(16);

使用 TypedArray 读取和写入数据

javascriptCopy Code
// 创建一个 Uint8Array 视图来操作 ArrayBuffer
const uint8View = new Uint8Array(buffer);
// 写入数据
uint8View[0] = 255;
uint8View[1] = 128;
// 读取数据
console.log(uint8View[0]); // 255
console.log(uint8View[1]); // 128

示例：处理文件 可以使用 HTML5 的文件 API 来读取二进制文件，例如用户上传的文件：

htmlCopy Code
<input type="file" id="fileInput">

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = function(e) {
        const arrayBuffer = e.target.result;
        const uint8View = new Uint8Array(arrayBuffer);

        console.log(uint8View); // 打印文件的二进制数据
    };

    reader.readAsArrayBuffer(file); // 读取文件为 ArrayBuffer
});
</script>

使用 WebSockets 发送二进制数据 WebSockets 也支持发送和接收二进制数据：

javascriptCopy Code
const socket = new WebSocket('ws://example.com');

socket.binaryType = 'arraybuffer'; // 设置二进制类型为 ArrayBuffer

socket.onmessage = function(event) {
    const arrayBuffer = event.data; // 接收二进制数据
    const uint8View = new Uint8Array(arrayBuffer);
    console.log(uint8View);
};

// 发送二进制数据
const buffer = new ArrayBuffer(8);
const uint8View = new Uint8Array(buffer);
uint8View[0] = 42;
socket.send(buffer);
avatar
文章
阅读
粉丝