前言

感谢菜鸟教程、部分视频讲解老师 pink老师。本文只是最基础的前端知识，笔记仅记录自己认为重要的，不适用新手，可用于检索问题。

本文内容开始于 2025-08-29，内容可能包括 HTML、CSS、JavaScript，以及 常用组件 ( Echarts 、AJAX 等) 的学习。

本文使用 Obsidian 撰写/ VS Code 编写代码/ AI-Qwen3 整理内容。

image.png

HTML5 基础

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML5 基础，基本常见的 HTML 标签。

01 HTML 简介

1、网页

image.png

网页是图片、链接、文字、声音、视频等元素组成其实就是一个 HTML 文件 (后缀名为 HTML )
网页生成制作：有前端人员书写 HTML 文件，然后浏览器打开，就能看到了网页

2、浏览器

浏览器内核
浏览器内核（渲染引|擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器内核备注
IETridentIE、猎豹安全、360极速浏览器、百度浏览器
FirefoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
Chrome/OperaBlinkChrome/Opera浏览器内核。Blink其实是 WebKit 的分支。

这里也想到了 UA之乱的有趣事情：WebAIM: History of the browser user-agent string

3、Web 标准

Web 标准的构成：主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

标准说明
结构结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript。

02 HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>寒士杰克-喜欢捣鼓，不断进步</title>
    </head>
    <body>
        <h1>寒士杰克</h1>
        <p>喜欢捣鼓，不断进步</p>
    </body>

</html>

image.png
F12控制台也可以看到：
image.png

[label txt=图片来源菜鸟教程] 02A7DD95-22B4-4FB9-B994-DDB5393F7F03.jpg[/label]

说明：

  • <html> 是 HTML 页面的根元素。
  • <head> 包含页面的元数据，如标题、样式表链接、脚本等。
  • <body> 包含页面的实际内容，如文本、图片、链接、表单等。

1、<!DOCTYPE>文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

2、lang 语言种类

<html lang="en">

用来定义当前文档显示的语言。

  1. en定义语言为英语
  2. zh-CN定义语言为中文
    简单来说定义为en就是英文网页，定义为zh-CN就是中文网页。其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文

3、字符集

字符集 (Character set) 是多个字符的集合。以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的 charset 属性来规定HTML文档应该使用哪种字符编码。

<meta charset=" UTF-8" />

charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
image.png

注意： 对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk"> 。

4、HTML 标题

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML 标题（Heading）是通过 <h1> - <h6> 标签来定义的。

image.png

5、HTML 段落

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

image.png

6、HTML 链接

HTML 链接是通过标签 <a> 来定义的。

<a href="https://www.runoob.com">这是一个链接</a>

herf 用于链接

7、HTML 图像

<img src="/images/logo.png" width="258" height="39" />

image.png

CSS3 基础

CSS3 基础，基本常见的 CSS 标签。

H5C3 提高

HTML5 新增标签、CSS3样式。

参考文献

HTML 教程 | 菜鸟教程