前端语言串讲 | 青训营

用户2833358745832
120 阅读10分钟

一、前端语言的基本功能

1、HTML(Hypertext Markup Language)

HTML是一种用于创建网页结构和内容的标记语言，它由一系列标签组成，这些标签描述了网页上的各个元素的属性和内容，主要作用是构建框架结构。

2、CSS (Cascading Style Sheets)

层叠样式表是一种用于描述网页样式和外观的样式表语言，CSS样式表由一系列规则组成，每个规则包含一个选择器和一组属性值，用于给网页添加样式，适配不同的屏幕尺寸，让网页适配响应特征。

/* 选择器为所有 <p> 元素 */
p {
  color: blue;
  font-size: 16px;
}

CSS（层叠样式表）中有多种选择器，用于选择要应用样式的元素。以下是一些常见的CSS选择器： 元素选择器、类选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类选择器、伪元素选择器。

3、JavaScript

JavaScript是一种广泛用于网页开发的脚本语言，用于增加网页的交互性和动态性。 JavaScript通用的能力是网页上执行各种操作，如处理用户的输入、修改网页内容、与服务器进行数据交互等。

JavaScript中常见的数据类型分为两大类：

基本数据类型：字符串类型（String）、数字类型（Number）、布尔类型（Boolean）、空值（Null）、未定义（Undefined）、象征类型（Symbol）和BigInt。

引用数据类型：对象类型（Object）、数组类型（Array）、函数类型（Function）。

4、Browser

  1. 渲染引擎是浏览器引擎中的一个重要组成部分，负责解析网页内容并将其渲染成可视化的界面。渲染引擎负责解析HTML、CSS和JavaScript，计算布局、绘制元素并处理用户交互等任务。

  2. JavaScript引擎是负责解释和执行JavaScript代码的软件组件。它将JavaScript代码转换为机器可执行的指令，并管理代码的执行环境。

二、前端语言的协作配合

1、CSS在HTML中的应用

  1. 内联样式（Inline Styles）

    使用style属性直接在HTML元素内部定义样式。示例如下：

    <p style="color: blue; font-size: 16px;">Hello world!</p>

  2. 内部样式表（Internal Style Sheet）

    在HTML文档的标签中使用。示例如下：

    <head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>

  3. 外部样式表（Internal Style Sheet）

    创建一个独立的CSS文件（比如styles.css），并在其中定义所需的样式。示例如下：

    /* styles.css */
p {
  color: blue;
  font-size: 16px;
}

    <link>标签的rel属性指定了样式表的关系类型为"stylesheet"，type属性指定了样式表的MIME类型为"text/css"，href属性指定了样式表文件的路径。示例如下：

    <link rel="stylesheet" type="text/css" href="styles.css">

2、JavaScript在HTML中的应用

  1. 内联脚本（Inline Script）

    在HTML元素的<script>标签内部直接编写JavaScript代码。这种方式适用于简单的功能或者特定页面的特定需求。示例如下：

    <button onclick="alert('Hello, World!')">点击</button>

  2. 内部脚本（Internal Script）

    在HTML文档的<script>标签内部编写JavaScript代码块。这种方式适用于在整个HTML文档中使用相同的脚本代码。示例如下：

    <script>
  function hello() {
    alert('Hello, World!');
  }
</script>

  3. 外部脚本（External Script）

    将JavaScript代码保存在一个独立的文件中，然后通过<script>标签的src属性引入该外部文件。这种方式适用于多个页面需要共享相同的脚本代码。示例如下：

    <script src="script.js"></script>

  4. 异步加载脚本（Asynchronous Script Loading）

    一般情况下，浏览器会默认将<script>标签中的脚本执行操作视为同步执行，即会阻塞页面的解析和渲染。要解决默认情况下<script>标签阻塞页面解析和渲染的问题，可以采用以下方法：

    • 使用defer属性：将<script>标签中的defer属性设置为true。这会告诉浏览器延迟脚本的执行，直到页面解析完毕后再执行。多个带有defer属性的脚本会按照它们在页面中的顺序执行。示例：
    <script src="script.js" defer></script>
    • 使用async属性：如果脚本不依赖于页面解析的内容，则可以使用async属性。这会告诉浏览器在下载脚本时继续解析后续的HTML文档，并在脚本下载完成后立即执行，不会阻塞页面的渲染。多个带有async属性的脚本在下载完成后会按照它们下载完成的顺序执行，而不是按照它们在页面中的顺序执行。示例：
    <script src="script.js" async></script>
    • 动态创建<script>元素：通过JavaScript动态创建<script>元素，并设置其src属性指向脚本文件的URL。然后使用addEventListener方法将脚本的加载和执行过程与页面的加载事件绑定，如DOMContentLoaded或load事件。这样可以控制脚本的加载和执行时机，以避免阻塞页面的解析和渲染。示例：
    <script>
  var script = document.createElement('script');
  script.src = 'script.js';

  script.addEventListener('load', function() {
    // 脚本加载完成后的回调操作
  });

  document.head.appendChild(script);
</script>

  5. DOM事件机制

    DOM事件机制是一种用于处理用户交互和其他类型事件的机制。在浏览器中，当某种事件（如点击、滚动、键盘输入等）发生时，可以通过注册事件处理程序来响应事件。

    DOM事件机制的基本流程如下：

    • 注册事件处理程序：通过DOM API（如addEventListener）将事件处理函数注册到事件目标上，指定要监听的事件类型。
    • 等待事件触发：当注册的事件类型在事件目标上发生时，浏览器会生成事件对象，并将事件传递到事件目标。
    • 事件捕获（如果设置了）：如果在注册事件处理程序时指定了事件捕获阶段（capture）为true，则从根节点向下沿着DOM树的捕获阶段依次调用事件处理程序。
    • 事件冒泡：从事件目标开始，沿着DOM树的冒泡路径依次调用事件处理程序。在冒泡阶段，如果事件处理程序在某个节点上被调用并处理了事件，则可以阻止事件继续向上冒泡。
    • 执行事件处理函数：当事件处理程序被调用时，可通过事件对象（Event Object）访问相关信息，如事件类型、事件目标等。在事件处理函数中可以定义和执行事件发生时的行为。
    • 取消事件的默认行为（如果需要）：在事件处理函数中，可以通过调用事件对象的preventDefault方法来阻止事件的默认行为，如阻止链接点击跳转、表单提交等。

  6. JavaScript事件机制

    JavaScript事件机制是指JavaScript语言用来处理和响应各种事件的机制。在Web开发中，通过JavaScript可以注册事件处理程序来捕获和处理页面上发生的各种事件。

    JavaScript事件机制与DOM事件机制紧密相关，其主要步骤包括：

    • 注册事件处理程序：使用事件目标对象的方法（如addEventListener）来注册事件处理程序。可以将事件处理程序绑定到特定的事件目标（如DOM元素）上，并指定要监听的事件类型。
    • 定义事件处理函数：注册事件处理程序时，需要提供一个函数作为事件处理函数。事件处理函数是一个回调函数，它会在事件触发时被调用执行。事件处理函数可以接收一个事件对象作为参数，通过事件对象可以访问事件的相关信息。
    • 事件触发：当事件发生时（如点击、鼠标移动、按键按下等），浏览器会自动触发相应事件，然后调用与该事件关联的事件处理函数。
    • 事件处理函数执行：在事件触发时，绑定的事件处理函数会被调用执行。事件处理函数可以进行一系列的操作，如更新页面内容、修改DOM元素、发送AJAX请求等。

3、HTML在JavaScript中的应用

  1. 基于现成的渲染框架来动态渲染HTML内容

    • React：React 是一个流行的 JavaScript 库，用于构建用户界面。

    以下是一个使用 React 的示例：

    // 定义一个简单的React组件
function MyComponent() {
    const content = 'Dynamic Content';

    return <div>{content}</div>;
}

// 渲染组件到根元素
ReactDOM.render(<MyComponent />, document.getElementById('root'));
    • Vue：Vue 是一个渐进式的 JavaScript 框架，用于构建交互式的用户界面。

    以下是一个使用 Vue 的示例：

    <!-- 在HTML中定义一个Vue实例 -->
<div id="app">
    <p>{{ message }}</p>
</div>

<!-- 引入Vue库 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 创建Vue实例 -->
<script>
// 创建Vue实例
new Vue({
    el: '#app',
    data: {
        message: 'Dynamic Content'
    }
});
</script>

  2. Mustache

    Mustache 是一种逻辑-less 的模板语言，它具有简单、一致和易于理解的语法。它可以用于多种编程语言，包括 JavaScript、Python、Ruby、Java 等，并且有许多不同的实现。

    Mustache 模板使用双大括号 {{ }} 来标记变量或表达式，这些标记将被替换为实际的数据值。

  3. JSX（JavaScript XML）

    JSX（JavaScript XML）是一种在React框架中使用的语法扩展，用于编写组件的模板。它的设计目标是提供一种直观、灵活和强大的方式来描述用户界面的结构和交互。

    JSX 是一种类似于 XML 的语法，它允许在 JavaScript 代码中嵌入 HTML 标签和组件，并支持以 JavaScript 表达式的形式插入动态内容。通过使用 JSX，可以在组件的 render 方法中直接描述 UI 的结构和外观。

4、CSS在JavaScript中的应用

  1. 通过JavaScript动态操作CSS

    • 修改样式。示例如下：
    div.style.width = "100px";
    • 批量操作
    div.style.ccText = "width:100px;height:100px";
    • 修改DOM的class属性
    div.setAttribute("class", "div2");
    • 修改link标签来引入外部样式
    link.setAttribute("href", "css2.css");

  2. React JSX引入class

import React from 'react';

function MyComponent() {
  return <div className="my-class">Hello, React!</div>;
}

export default MyComponent;

注意：在 JSX 中使用 class 属性是无效的，因为 class 是 JavaScript 的保留关键字。React 使用 className 属性来代替 class 属性。

  1. Vue 引入 CSS 类

  • 设置样式类：在 Vue 模板中，可以使用 class 或 :class 指令来动态设置元素的 CSS 类。

    • 使用字符串方式：
    <template>
  <div class="my-class">Hello, Vue!</div>
</template>
    • 使用表达式方式：
    <template>
  <div :class="{ 'my-class': isActive }">Hello, Vue!</div>
</template>

    在表达式中，isActive 是一个计算属性或者 data 属性，它决定是否应用 'my-class' 类名。

  • 引入外部 CSS 文件：

<template>
  <!-- Vue 模板内容 -->
</template>

<style src="./styles.css"></style>

  1. CSS Module技术

    CSS Module 是一种用于解决 CSS 样式冲突和作用域隔离问题的技术。使用 CSS Module 技术时，每个 CSS 文件都被视为一个独立的模块。在这个模块中，CSS 类名和选择器都会被自动转换成唯一的标识符。这样，每个模块的类名在全局范围都是唯一的，不会发生冲突。

  2. JSS（JavaScript Style Sheets）

    JSS是一种将 CSS 样式写入 JavaScript 文件的技术，用于在 JavaScript 中动态生成样式。它将样式的定义和应用集中在一起，通过 JavaScript 的编程能力来处理样式逻辑。

    JSS 的主要特点包括：

    • 写法灵活：JSS 允许使用 JavaScript 对象的语法来定义样式，可以使用 JavaScript 功能编写动态样式，例如变量、条件语句和循环。
    • 高度可组合：JSS 具有高度可组合性，可以通过组合样式、嵌套选择器和引用其他样式等方式来构建复杂的样式结构，提高了代码的可重用性。
    • 样式作用域控制：JSS 提供了样式作用域的控制，可以确保样式只应用于特定的组件或元素，避免全局样式的冲突问题。
    • 动态样式生成：JSS 允许根据组件状态、数据等动态生成样式，通过 JavaScript 的逻辑和条件判断，可以轻松实现动态样式的变化。

三、你不知道的HTML

1、HTML5

HTML5 引入了一些更语义化和功能丰富的元素，以下是一些 HTML5 中较常用的新元素：

  1. <header> 和 <footer>：用于表示网页或者文章的页眉和页脚。
  2. <nav>：用于定义导航链接的区域。
  3. <article>：用于定义独立的内容区块，如博客文章、新闻文章等。
  4. <section>：用于定义网页中的各个区块（section）。
  5. <aside>：用于定义网页中的侧边栏内容。
  6. <main>：用于定义网页的主要内容，在一个页面中应只使用一次。
  7. <figure> 和 <figcaption>：用于表示媒体内容（如图像、音频、视频等）和其标题。
  8. <video> 和 <audio>：分别用于嵌入视频和音频内容，支持多种格式和属性设置。
  9. <canvas>：用于通过 JavaScript 在网页上绘制图形、图像、动画等。
  10. <progress>：用于显示任务的完成进度。
  11. <meter>：用于表示某个度量值的数值范围。
  12. <details> 和 <summary>：用于创建可展开和收缩的详细内容区域。
  13. <datalist> 和 <option>：用于创建输入字段的选项列表。
  14. <time>：用于表示日期和时间的结构化信息。

这只是 HTML5 新元素的一部分，而 HTML5 标准中还包含其他一些元素、API 和功能。

本篇笔记为个人总结，学习交流使用，欢迎各位大佬评价指正，非常感谢！

avatar
文章
阅读
粉丝