查看“前端入门”的源代码

https://www.bilibili.com/video/BV1p84y1P7Z5/

=== 教程简介 ===
https://www.bilibili.com/video/BV1p84y1P7Z5?p=1

学习路线

html4→css2→html5→css3

=== 浏览器内核 ===
Chrome

早期使用 webkit 内核，现在使用 Blink 内核。Blink 是 Chromium 项目的一部分。

Safari

使用 webkit 内核。

IE

使用 Trident 内核。

Firefox

使用 Gecko 内核。

Opera

早期使用 Presto 内核（已放弃维护），现在使用 Blink 内核。

Microsoft Edge

Chromium 内核。

=== 网页的组成部分（网页标准） ===
{| class="wikitable"
!结构
!表现
!行为
|-
|HTML
|CSS
|JavaScript
|}
HTML，全称：HyperText Markup Language，译为：超文本标记语言。

=== 跑马灯 ===
<syntaxhighlight lang="html">
<marquee>尚硅谷，让天下没有难学的技术！</marquee>
</syntaxhighlight>规范：标签名大写

=== VS Code 安装 LiveServer 插件 ===
https://www.bilibili.com/video/BV1p84y1P7Z5?p=14

=== HTML 注释 ===
https://www.bilibili.com/video/BV1p84y1P7Z5?p=15

=== HTML 文档声明 ===
https://www.bilibili.com/video/BV1p84y1P7Z5?p=16

H5 标准<syntaxhighlight lang="html">
<!DOCTYPE html>
</syntaxhighlight>https://www.w3.org/QA/2002/04/valid-dtd-list.html

=== 字符编码 ===
https://www.bilibili.com/video/BV1p84y1P7Z5/?p=17

ASCⅡ => 大写字母、小写字母、数字、一些符号，共计 128 个。

ISO 8859-1 => 在 ASCⅡ 基础上，扩充了一些希腊字符等，共计是 256 个。

GB2312 => 继续扩充，收录了 6763 个常用汉字、682 个字符。GB 是国标的意思。

GBK => 收录了的汉字和符号达到 20000+，支持繁体中文。K 是扩充的意思。

UTF-8 => 万国码，包含世界上所有语言的：所有文字与符号。—— 很常用。

'''<big>原则1：存储时，务必采用合适的字符编码。</big>'''

否则：无法存储，数据会丢失！打开文本都是 ????， 这种情况在存储的时候数据就丢失了，没得救了。

'''<big>原则2：存储时采用哪种方式编码，读取时就必须采用相同方式解码。</big>'''

否则：数据能呈现，但数据错乱（乱码）！打开文本都是乱码，这种情况还有救，选对了解码字符集就好了。

写网页的人编码，看网页的人通过浏览器解码。

主流浏览器已经默认使用 UTF-8 解码。<syntaxhighlight lang="html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
</syntaxhighlight><meta charset="UTF-8"> 就是用来告诉浏览器使用哪种字符集解码的。

坑：自己做乱码测试尝试重现乱码，源文件用 UTF-8 编码，使用 <meta charset="GBK"> 告诉浏览器用 GBK 解码以重现乱码的话，Live Server 会修正故意写错的 <meta charset="xxx"> 中的字符集。但单独用浏览器打开网页就还是会乱码。

https://www.bilibili.com/video/BV1p84y1P7Z5/?p=18

=== HTML设置语言 ===