一、前端语言的基本能力

HTML（超文本标记语言）：作为构建网页结构的基础，了解和掌握HTML标记语言、语义化以及基本的DOM操作是必要的。
CSS（层叠样式表）：CSS用于控制网页的布局和样式，需要了解CSS选择器、盒模型、布局方式、动画效果等。
JavaScript：JavaScript是前端开发中最重要的语言之一。掌握JavaScript语法、变量、运算符、条件语句、循环、函数、事件处理等是必须的。

二、前端语言的协作配合

1. CSS/JS in HTML

在 HTML 中使用 CSS 和 JavaScript 可以通过以下几种方式实现：

内联方式（Inline）：直接在 HTML 元素的 style 属性中添加 CSS 样式，或在标签中使用 onclick 等事件属性直接嵌入 JavaScript 代码。例如：

html 复制代码

<p style="color: red;">这是红色的文本。</p>
<button onclick="alert('Hello, World!')">点击我</button>

内部样式表（Internal Stylesheet）：在 HTML 文件的标签内使用标签定义 CSS 样式。例如：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是蓝色的文本。</p>
</body>
</html>

外部样式表（External Stylesheet）：将 CSS 样式代码保存到一个独立的 .css 文件中，并在 HTML 文件中使用标签引入。例如：

在 styles.css 文件中：

css 复制代码

p {
    color: green;
}

在 HTML 文件中：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是绿色的文本。</p>
</body>
</html>

外部 JavaScript 文件：将 JavaScript 代码保存到一个独立的 .js 文件中，并在 HTML 文件中使用

在 script.js 文件中：

js 复制代码

function sayHello() {
    alert('Hello, World!');
}

在 HTML 文件中：

html 复制代码

<!DOCTYPE html>
<html>
<body>
    <button onclick="sayHello()">点击我</button>
    
    <script src="script.js"></script>
</body>
</html>

通过以上几种方式，在 HTML 中嵌入或引用 CSS 和 JavaScript ，可以实现样式的定制和页面互动的效果。

2. HTML/CSS in JavaScript

在JavaScript中操作HTML和CSS是通过DOM（文档对象模型）实现的。DOM允许JavaScript通过编程的方式改变HTML元素的结构、样式和内容。

操作HTML元素：

使用JavaScript可以通过以下方法来操纵HTML元素：

获取元素：使用 document.getElementById()、document.getElementsByClassName() 或 document.querySelector() 等方法获取HTML元素的引用：

js 复制代码

// 通过id获取元素
const myElement = document.getElementById('myElement');

// 通过类名获取元素
const myElements = document.getElementsByClassName('myClass');

// 通过选择器获取元素
const myElement = document.querySelector('.myClass');

修改元素内容和属性：可以使用元素的属性和方法来修改其内容和属性：

js 复制代码

// 修改元素文本内容
myElement.textContent = 'New text content';

// 修改元素属性
myElement.setAttribute('src', 'image.jpg');

添加、移除和修改元素：可以通过 appendChild()、removeChild()、createElement() 和 replaceChild() 等方法来添加、移除和修改HTML元素：

js 复制代码

// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = 'New element';

// 添加新元素到父元素中
parentElement.appendChild(newElement);

// 移除子元素
parentElement.removeChild(childElement);

操作CSS样式：

使用JavaScript可以通过以下方法来操纵CSS样式：
- 修改元素的样式属性：可以直接修改元素的 style 属性来改变其样式属性：
  js 复制代码
```
// 修改元素的背景颜色
myElement.style.backgroundColor = 'red';

// 修改元素的字体大小
myElement.style.fontSize = '20px';
```
- 添加或移除CSS类名：可以利用 classList 属性来添加或移除元素的CSS类名，从而改变元素的样式：
  js 复制代码
```
// 添加CSS类名
myElement.classList.add('myClass');

// 移除CSS类名
myElement.classList.remove('myClass');
```

这些只是JavaScript中操作HTML和CSS的基本方法，实际应用中还有更多的操作和技巧，可以根据具体需求进一步学习和应用。

三、HTML5

HTML5 引入了许多新的功能和 API，为 Web 开发提供了更多的能力和更丰富的用户体验。以下是一些 HTML5 中新增的主要功能：

语义化标签：HTML5 引入了一些新的语义化标签，如 <header>、<footer>、<nav>、<article>、<section> 等，使开发者能够更准确地描述文档的结构，同时提升了网页的可访问性和 SEO 优化能力。
视频和音频：HTML5 引入了 <video> 和 <audio> 标签，使得在网页上直接嵌入视频和音频变得更加简单与灵活，无需依赖于插件（如 Flash），支持更多的媒体格式。
Canvas：HTML5 的 <canvas> 元素提供了一个绘制图形的区域，可以通过 JavaScript 动态绘制2D和3D图形、图像处理和动画等。它为游戏开发、数据可视化和交互式图形应用提供了强大的工具。
表单增强：HTML5 提供了一些新的表单元素和属性，如 <input type="date">、<input type="email">、<input type="number"> 等，使得开发者能够更方便地输入和验证用户的数据。
本地存储：HTML5 提供了 localStorage 和 sessionStorage API，使得在浏览器端可以方便地进行本地数据的存储和读取，不再依赖于 cookie。
WebSocket：HTML5引入了WebSocket协议，允许在浏览器和服务器之间建立持久性的双向通信连接，实现实时通信和数据交换。

这只是HTML5的一部分功能，还有其他一些功能和API。它们为 Web 开发者提供了更多的工具和能力，使得现代 Web 应用可以更丰富、更高效和更交互。

四、拓展

MVC（Model-View-Controller）、MVVM（Model-View-ViewModel）和MVP（Model-View-Presenter）是三种常用的软件架构模式，用于组织和管理应用程序的代码和逻辑。

MVC模式：
- Model（模型）：负责处理应用程序的数据逻辑和状态。通常包括数据模型、数据库操作和业务逻辑。
- View（视图）：负责展示数据给用户，并提供用户界面的交互和反馈。通常包括界面元素、布局和样式。
- Controller（控制器）：负责协调Model和View之间的交互和通信。处理用户输入和事件，并更新Model和View的状态。
这种模式的特点是Model与View是分离的，由Controller充当中介来协调二者之间的交互。
MVVM模式：
- Model（模型）：与MVC中的Model一样，负责处理数据逻辑和状态。
- View（视图）：与MVC中的View一样，负责展示数据和用户界面交互。
- ViewModel（视图模型）：作为View和Model之间的中介，封装了View的状态和行为，并提供了对应的数据绑定和命令处理。
MVVM模式的特点是通过数据绑定实现视图和视图模型之间的同步，避免了直接的交互逻辑，使得代码更加简洁和可维护。
MVP模式：
- Model（模型）：负责处理数据逻辑和状态。
- View（视图）：与MVC和MVVM中的View不同，MVP中的View是更加被动的，仅负责将用户输入和事件传递给Presenter，并展示Presenter返回的数据。
- Presenter（表示器）：作为View和Model之间的中介，处理用户输入和事件，并更新视图和数据。
MVP模式的特点是Presenter负责控制和协调View和Model之间的交互，并将这些逻辑从View中解耦，使得View更关注展示和用户交互。

这三种模式都有各自的优势和适用场景，选择合适的模式取决于具体的应用需求和开发团队的偏好。在实践中，也可以根据需要结合不同模式的特点来设计和实现软件架构。

前端语言串讲 | 青训营

一、前端语言的基本能力

二、前端语言的协作配合

1. CSS/JS in HTML

2. HTML/CSS in JavaScript

三、HTML5

四、拓展