基础

image (5).png

HTML

HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它定义了网页的结构和内容，通过使用不同的标签来标记不同的元素，从而告诉浏览器如何显示网页的各个部分。HTML是前端开发的基础，与CSS和JavaScript共同构成了现代网页的三大核心技术。

CSS（Cascading Style Sheets）

CSS是一种样式表语言，用于描述网页的布局和外观。通过CSS，开发人员可以选择性地应用样式到HTML元素，例如设置字体、颜色、大小、边框、背景等。CSS使用选择器来选择要样式化的元素，并使用属性-值对来定义样式。它使开发人员能够轻松地对网页进行样式和布局的控制，使网页更具吸引力和可读性。

JavaScript

JavaScript是一种高级的脚本编程语言，用于为网页添加动态功能和交互性。通过JavaScript，开发人员可以对网页进行事件处理、操作DOM（Document Object Model）、执行异步请求、创建动画效果等。JavaScript是一种强大而灵活的语言，它为网页带来了丰富的交互性和动态性。

浏览器引擎

浏览器引擎是一种软件模块，用于解析和渲染网页。它负责将HTML、CSS和JavaScript转换为可视化的网页，并管理网页的交互和动态效果。不同的浏览器有不同的引擎，例如Chrome使用Blink引擎，Firefox使用Gecko引擎，Safari使用WebKit引擎等。

协作

在前端开发中，HTML、CSS和JavaScript之间的协作非常重要。它们经常交互使用，互相支持和补充，以创建出功能完善、外观吸引人的网页。

CSS/JavaScript in HTML

在HTML中，可以使用<style>标签来嵌入CSS样式，或使用<link>标签引用外部的CSS文件。通过CSS，可以为HTML元素指定样式和布局，使网页呈现出所需的外观。

同样，在HTML中也可以使用<script>标签来嵌入JavaScript代码，或通过<script src="...">标签引入外部的JavaScript文件。通过JavaScript，可以对网页进行动态操作，例如处理用户的交互行为、向服务器发送请求、更新网页内容等。

HTML/CSS in JavaScript

JavaScript也可以使用DOM API（Document Object Model Application Programming Interface）来操作HTML元素和CSS样式。通过DOM API，可以动态地创建、修改或删除HTML元素，以及改变元素的样式。这种方式使JavaScript能够实现动态的网页效果和交互性。

JavaScript可以通过获取HTML元素的引用，使用DOM API来操作这些元素。例如，可以使用document.getElementById()方法获取特定元素的引用，并使用其他DOM方法来修改其内容、样式或属性。这种方式使JavaScript能够根据用户的交互动作或其他事件来动态更新网页内容。

此外，JavaScript还可以通过操作CSS样式表来修改网页的外观。可以使用element.style属性来直接修改元素的内联样式，也可以使用classList属性来添加或移除元素的CSS类，从而改变其样式。通过JavaScript的计算能力和逻辑控制，可以实现复杂的样式变化和动画效果。

HTML

HTML使用标签来定义网页的结构和内容。常用的HTML标签包括<html>、<head>、<body>、<div>、<p>、<h1>等。以下是一些HTML的主要特点和功能：

语义化：HTML提供了一系列语义化的标签，如<header>、<nav>、<article>、<footer>等，用于描述文档的结构和意义，使页面更加清晰和易于理解。
存储/音视频：HTML提供了一些标签和API，用于在网页中嵌入和播放音频、视频和图像。例如，<audio>和<video>标签可以用来插入音频和视频内容，<img>标签用于显示图像。
浏览器API：HTML通过提供一些内置的浏览器API，使开发人员能够访问和操作浏览器的功能和信息。例如，navigator对象提供了浏览器相关的信息，localStorage和sessionStorage对象用于在浏览器中存储数据。

CSS

CSS用于描述网页的样式和布局。以下是CSS的一些主要特点和功能：

选择器：CSS使用选择器来选择要样式化的元素。选择器可以根据元素的标签名、类名、ID等属性进行匹配，从而选择特定的元素应用样式。
样式属性：CSS使用属性-值对来定义样式。可以设置元素的背景、字体、颜色、大小、边框等属性，以及布局和定位的属性。
层叠和继承：CSS具有层叠和继承的特性。层叠指的是多个样式规则同时应用于元素时，根据优先级和特定规则来确定最终的样式。继承指的是子元素可以继承父元素的某些样式属性。
响应式布局：CSS提供了一些技术和单位，使开发人员能够创建响应式布局和自适应设计。通过使用媒体查询、弹性布局、网格系统和相对单位等技术，可以使网页在不同设备和屏幕尺寸上呈现出最佳的布局和样式。

JavaScript

JavaScript是一种脚本语言，用于为网页添加交互性和动态功能。以下是JavaScript的一些主要特点和功能：

事件驱动：JavaScript可以通过事件处理程序来响应用户的交互动作，例如点击按钮、提交表单、鼠标移动等。通过捕捉和处理这些事件，可以触发特定的动作和逻辑。
DOM操作：JavaScript可以使用文档对象模型（DOM）API来访问和操作HTML元素。可以通过获取元素的引用，修改其内容、样式、属性等，从而实现动态更新和交互效果。
数据交互：JavaScript可以通过AJAX技术与服务器进行数据交互。可以发送HTTP请求、接收和处理服务器返回的数据，实现异步加载、动态更新和实时通信等功能。
模块化和库：JavaScript支持模块化开发，可以将代码组织成模块，并使用模块加载器或打包工具进行管理和部署。此外，有许多JavaScript库和框架可用于简化开发任务，提供丰富的功能和工具。

浏览器引擎

浏览器引擎是浏览器的核心组件，负责解析和执行网页的HTML、CSS和JavaScript代码。每个浏览器都有自己的浏览器引擎，常见的浏览器引擎包括：

Blink：由Google开发，用于Google Chrome和其他基于Chromium的浏览器，如Opera。
WebKit：最初由Apple开发，用于Safari浏览器。现在也用于其他浏览器，如Chrome的旧版本。
Gecko：由Mozilla开发，用于Firefox浏览器。
Trident：由Microsoft开发，用于Internet Explorer浏览器。
EdgeHTML：由Microsoft开发，用于Microsoft Edge浏览器的旧版本。

不同的浏览器引擎在性能、标准支持、渲染效果等方面可能有所差异，开发人员需要考虑这些差异来确保网页在不同浏览器上的一致性和兼容性。

协作

HTML、CSS和JavaScript通常在Web开发中一起使用，开发人员可以在这些技术之间进行紧密的协作。下面是一些常见的协作方式：

CSS/JavaScript in HTML：可以在HTML文件中直接嵌入CSS和JavaScript代码。这种方式适用于简单的项目或需要快速实现功能的情况。通过将CSS和JavaScript代码直接放置在HTML文件中，可以更快地进行开发和调试。

htmlCopy code
<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
  <style>
    /* CSS样式 */
    body {
      background-color: #f2f2f2;
      font-family: Arial, sans-serif;
    }
  </style>
  <script>
    // JavaScript代码
    function greet() {
      var name = document.getElementById('name').value;
      alert('Hello, ' + name + '!');
    }
  </script>
</head>
<body>
  <h1>Welcome to My Web Page</h1>
  <input type="text" id="name" placeholder="Enter your name">
  <button onclick="greet()">Greet</button>
</body>
</html>

在上面的示例中，CSS样式被嵌入在<style>标签内，定义了页面的背景颜色和字体。JavaScript代码被嵌入在<script>标签内，定义了一个greet()函数，用于获取用户输入的姓名并弹出一个问候框。

HTML/CSS in JavaScript：可以使用JavaScript动态地创建HTML元素和修改CSS样式。这种方式适用于需要根据用户交互或其他条件来生成和更新页面内容的情况。

htmlCopy code
<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
  <script>
    // JavaScript代码
    function createPage() {
      var body = document.getElementsByTagName('body')[0];
      
      var h1 = document.createElement('h1');
      h1.textContent = 'Welcome to My Web Page';
      body.appendChild(h1);
      
      var input = document.createElement('input');
      input.setAttribute('type', 'text');
      input.setAttribute('id', 'name');
      input.setAttribute('placeholder', 'Enter your name');
      body.appendChild(input);
      
      var button = document.createElement('button');
      button.textContent = 'Greet';
      button.onclick = function() {
        var name = document.getElementById('name').value;
        alert('Hello, ' + name + '!');
      };
      body.appendChild(button);
    }
    
    window.onload = createPage;
  </script>
</head>
<body>
</body>
</html>

在上面的示例中，JavaScript代码使用createElement()函数创建了<h1>、<input>和<button>等HTML元素，并通过appendChild()函数将它们添加到页面中。同时，通过设置相应的属性和事件处理程序，实现了与前面示例相同的功能。

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

基础

HTML

CSS（Cascading Style Sheets）

JavaScript

浏览器引擎

协作

CSS/JavaScript in HTML

HTML/CSS in JavaScript

HTML

CSS

JavaScript

浏览器引擎

协作

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