前端语言串讲 | 青训营

一、前端基础部分

前端三大基础：HTML,CSS,JavaScript 广义上的网页三元素，HTML可以看作是结构，CSS可以看作是表现，JS可以看作是行为。

HTML： HTML 是 Web 页面的基础结构。它用于描述网页的内容和结构。HTML 使用一系列标记（称为标签）来定义页面元素，如标题、段落、列表、图片和链接等。浏览器解析 HTML 代码，并根据标签的语义来显示页面内容。HTML 为网页提供了基本的骨架，使浏览器能够呈现文本、图像和其他媒体。

CSS： CSS 用于描述 HTML 元素的外观和布局。CSS 允许我们定义如何显示 HTML 元素，例如字体、颜色、大小、间距等。通过使用 CSS，我们可以将样式与 HTML 结构分离，使得网站的设计和维护更加简便。CSS 还允许我们根据不同的设备和屏幕尺寸应用不同的样式(媒体查询)，以实现响应式设计。

JS：JavaScript 是一种脚本语言，用于在浏览器中增加交互性和动态效果。它允许我们编写脚本来处理用户操作，例如点击按钮、输入表单、拖动元素等。通过使用 JavaScript，我们也可以操作 HTML 和 CSS，动态更改页面内容和样式，从而提供丰富的用户体验。JavaScript 也可以与服务器进行通信，以便在不刷新整个页面的情况下获取或提交数据（即AJAX技术）。

浏览器引擎：前端浏览器引擎是浏览器中用于解析和渲染网页的核心组件。它负责将HTML、CSS和JavaScript等网页内容转换为可视化的网页，使得用户可以在浏览器中查看和与网页进行交互。不同的浏览器使用不同的引擎来处理网页，以下是一些常见的前端浏览器引擎：

Blink（Chrome、Edge）： Blink是由Google和Opera Software开发的浏览器引擎，目前主要用于Google Chrome和Microsoft Edge浏览器。Blink是WebKit引擎的分支，在2013年被Google采用并进行改进。
WebKit（Safari）： WebKit是由Apple开发的浏览器引擎，目前主要用于Safari浏览器。它是最早的开源浏览器引擎之一，并且在许多移动设备上得到广泛应用。
Gecko（Firefox）： Gecko是由Mozilla开发的浏览器引擎，主要用于Firefox浏览器。它是一款开源的引擎，具有出色的标准支持和高度的可定制性。

二、协作

1.CSS/JavaScript in HTML：

（1）CSS和HTML协作：

内联样式表：在HTML标签中使用style属性，直接定义样式规则。

内部样式表：将CSS代码放置在<style>标签中，位于<head>部分。

外部样式表：将CSS代码放置在一个独立的.css文件中，然后在HTML中使用<link>标签引用该文件

（2）JavaScript和HTML协作：

内联脚本：在HTML标签中使用<script>标签，直接嵌入JavaScript代码。

外部脚本：将JavaScript代码放置在一个独立的.js文件中，然后在HTML中使用<script>标签引用该文件。

DOM操作：JavaScript可以通过DOM（文档对象模型）来访问和操作HTML文档的元素和内容。

（3）CSS和JavaScript的协作：

CSS和JavaScript可以结合起来创建更复杂的交互和效果。例如，点击按钮，通过JavaScript更改元素的CSS的颜色以及大小。

<button id="myButton">点击我</button>
<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', () => {
    // 更改元素的颜色和大小
    button.style.backgroundColor = 'blue';
    button.style.color = 'white';
    button.style.fontSize = '24px';
  });
</script>

2.HTML/CSS in JavaScript：

（1）修改元素的CSS样式：使用JavaScript直接更改HTML元素的CSS样式，例如，更改背景颜色、文本颜色、字体大小等。

（2）添加/删除CSS类：通过JavaScript操作元素的类，可以实现更复杂的样式更改。可以在CSS中定义一些类，然后使用JavaScript添加或删除这些类来切换样式。

（3）计算CSS样式：在JavaScript中，你可以通过计算和处理数据来动态设置CSS样式。

三、HTML

1.标签：

head：在HTML中，<head>标签是位于<html>标签内部的一个元素，用于定义文档的头部部分。它不会直接显示在网页上，而是包含一些关键性的信息和元数据，以及与文档相关的资源引用和设置。常见的用途包括：

设置文档的标题（显示在浏览器的标题栏或标签页上）
引用外部资源，例如CSS文件和JavaScript文件
定义字符编码和语言
描述网页的内容和作者
设置网页的视口（用于移动设备上的显示）
引入网站图标（Favicon）
添加其他元信息或自定义的样式和脚本

<head>
  	<title>网页标题</title>
	<link rel="stylesheet" href="styles.css">
	<script src="script.js"></script>
	<meta charset="UTF-8">
  	<meta http-equiv="Content-Language" content="en">
	<meta name="description" content="这是网页的描述">
  	<meta name="author" content="作者的姓名">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	<!-- 其他元信息 -->
  	<link rel="stylesheet" href="custom.css">
  	<script src="custom.js"></script>
</head>

body：在HTML中，<body>标签是位于<html>标签内部的一个元素，用于定义文档的主体部分。它包含了实际要在网页上显示的内容，比如文本、图像、链接、表单、媒体元素等。所有在浏览器中可见的内容都应该放在<body>标签中。

以下是一些常见的在<body>标签中使用的HTML元素：

1.文本内容：h1、p标签

2.图像：img标签

3.超链接：a标签

4.列表：ul、li标签

5.表单：form

6.媒体元素：video、audio标签

7.JavaScript脚本：script标签

2.HTML5：

语义化：HTML5引入了语义化标签，这些标签的目的是更好地描述网页内容的结构和含义，使得网页的结构更加清晰，对搜索引擎和开发者都更友好。使用这些语义化标签可以提高网页的可读性和可维护性，并有助于构建无障碍（accessible）的网站。以下是一些HTML5中常见的语义化标签。

<header>：定义文档或页面的头部，通常包含标题、logo、导航等内容。

<nav>：用于定义导航部分，包含导航链接。

<main>：用于定义页面的主要内容，一个文档只应包含一个<main>标签。

<article>：表示独立的、完整的内容单元，比如一篇博客文章、新闻文章。

<section>：表示文档中的一个独立节，通常包含相关的内容组。

<aside>：表示页面的侧边栏或附属信息区域。

<footer>：定义文档或页面的页脚，通常包含版权信息、联系方式等。

<figure>：用于包含一个媒体元素和其相关的标题或说明文本。

<figcaption>：用于定义<figure>元素的标题或说明文本。

<time>：用于表示日期、时间或时间范围。

<details>：用于创建一个可折叠的内容块，通常与<summary>标签一起使用。

<summary>：用于定义<details>元素的摘要或标题。

存储/音视频：

存储（Storage）： HTML5引入了两种客户端存储机制，分别是本地存储（Local Storage）和会话存储（Session Storage）。这些存储机制可以在浏览器端存储数据，以便在用户访问同一网站的不同页面时，可以跨页面共享数据。这样可以避免每次都向服务器发送请求来获取数据，提高网页的性能和用户体验。
- 本地存储（Local Storage）：使用localStorage对象可以将数据永久保存在浏览器中，即使关闭浏览器也能保留数据。数据不会过期，除非用户手动删除。
- 会话存储（Session Storage）：使用sessionStorage对象可以将数据保存在浏览器中，但数据只在当前会话期间有效。关闭浏览器或标签页后数据会被清除。
存储的数据是以键值对的形式进行存储，可以使用JavaScript来读取和写入存储中的数据。
音视频（Audio and Video）： HTML5引入了<audio>和<video>标签，使得在网页中嵌入音频和视频变得简单且无需使用第三方插件（如Flash）。这些标签提供了原生的支持，可以通过简单的HTML代码来嵌入音频和视频文件，并且可以通过JavaScript进行控制和交互。

浏览器API：HTML5引入了许多浏览器API（Application Programming Interface），这些API使得在网页中实现更多的功能和交互变得更加便捷和强大。这些API主要由JavaScript调用，用于与浏览器进行交互并获取各种信息。以下是HTML5中常见的一些浏览器API。

Geolocation API（地理位置API）：
允许网页获取用户设备的地理位置信息，可以用于展示地图、定位服务、天气预报等功能。

Web Storage API（Web存储API）：
提供了localStorage和sessionStorage对象，用于在浏览器中永久或会话期间存储数据。

IndexedDB API：
提供了一个用于在浏览器中存储大量结构化数据的数据库系统。

File API（文件API）：
允许网页读取和处理用户本地的文件，用于文件上传和处理等功能。

Web Workers API：
允许在后台线程中运行JavaScript代码，用于处理复杂计算，以避免阻塞主线程。

WebSockets API：
提供了实现WebSocket通信的接口，实现全双工通信，用于实时聊天和数据传输等场景。

Canvas API：
允许使用JavaScript在网页上绘制2D图形和动画，用于实现游戏、数据可视化等功能。

History API：
允许网页动态修改浏览器的历史记录，实现无刷新页面跳转和前进后退功能。

可视化相关：HTML5引入了许多可视化相关的功能和API，这些功能使得在网页中实现数据可视化和图形展示变得更加便捷和灵活。以下是HTML5中常见的一些可视化相关功能：

Canvas API： Canvas是HTML5提供的一个用于绘制2D图形和动画的元素。通过Canvas API，开发者可以使用JavaScript动态绘制图形、动画、图表等，从而实现复杂的数据可视化效果。Canvas API允许直接绘制图形，因此对于需要高度自定义的可视化效果，Canvas是一个非常强大的工具。
SVG（Scalable Vector Graphics）： SVG是一种基于XML的图像格式，可以在HTML中直接嵌入并通过CSS和JavaScript进行样式和交互控制。SVG提供了矢量图形，使得图像可以在不失真的情况下缩放，非常适合用于可视化图表和图形的展示。与Canvas相比，SVG更适合静态图形和矢量图的绘制。
CSS 动画和过渡： HTML5的CSS3增强了对动画和过渡的支持。通过使用CSS的@keyframes规则，可以创建复杂的动画效果，通过transition属性，可以实现元素属性的平滑过渡。这些功能可以用于创建简单的数据可视化动画，如过渡效果、图表的动态更新等。

四、总结

前端语言串讲.png