“前端入门”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
 
（未显示同一用户的30个中间版本）
第1行： 第1行：
 
https://www.bilibili.com/video/BV1p84y1P7Z5/
 
https://www.bilibili.com/video/BV1p84y1P7Z5/
  
−
 
+
=== 教程简介 ===
 
https://www.bilibili.com/video/BV1p84y1P7Z5?p=1
 
https://www.bilibili.com/video/BV1p84y1P7Z5?p=1
−
 
−
教程简介
 
  
 
学习路线
 
学习路线
第10行： 第8行：
 
html4→css2→html5→css3
 
html4→css2→html5→css3
  
−
=== 内核 ===
+
=== 浏览器内核 ===
−
chrome
+
Chrome
  
−
早期使用 webkit 内核，现在使用 Blink 内核。
+
早期使用 webkit 内核，现在使用 Blink 内核。Blink 是 Chromium 项目的一部分。
  
 
Safari
 
Safari
第30行： 第28行：
  
 
早期使用 Presto 内核（已放弃维护），现在使用 Blink 内核。
 
早期使用 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设置语言 ===
 +
（语言-国家/地区）<syntaxhighlight lang="html">
 +
<html lang="en"><!-- 英语 -->
 +
<html lang="zh"><!-- 中文 -->
 +
<html lang="zh-CN"><!--中文-中国大陆（简体中文）-->
 +
<html lang="zh-TW"><!--中文-中国台湾（繁体中文）-->
 +
<html lang="en-US"><!-- 英语-美国 -->
 +
<html lang="en-GB"><!-- 英语-英国 -->
 +
</syntaxhighlight>主要作用：
 +
 +
# 让浏览器显示对应的翻译提示。
 +
# 有利于搜索引擎优化。
 +
 +
语言代码参考手册
 +
 +
https://www.w3school.com.cn/tags/html_ref_language_codes.asp
 +
 +
https://www.w3school.com.cn/tags/html_ref_country_codes.asp
 +
 +
=== HTML标准结构 ===
 +
https://www.bilibili.com/video/BV1p84y1P7Z5/?p=19<syntaxhighlight lang="html">
 +
<!DOCTYPE html>
 +
<html lang="zh-CN">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <title>Document</title>
 +
</head>
 +
<body>
 +
   
 +
</body>
 +
</html>
 +
</syntaxhighlight>
 +
 +
=== 开发者文档 ===
 +
https://www.bilibili.com/video/BV1p84y1P7Z5/?p=20
 +
 +
W3C官网：http://www.w3c.org/
 +
 +
W3School：http://www.w3school.com.cn/
 +
 +
MDN：http://developer.mozilla.org/ √

2024年8月4日 (日) 13:48的最新版本

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 内核。

网页的组成部分（网页标准）

结构 表现 行为
HTML CSS JavaScript

HTML，全称：HyperText Markup Language，译为：超文本标记语言。

跑马灯

<marquee>尚硅谷，让天下没有难学的技术！</marquee>

规范：标签名大写

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 标准

<!DOCTYPE html>

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 => 万国码，包含世界上所有语言的：所有文字与符号。—— 很常用。

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

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

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

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

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

主流浏览器已经默认使用 UTF-8 解码。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<meta charset="UTF-8"> 就是用来告诉浏览器使用哪种字符集解码的。

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

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

HTML设置语言

（语言-国家/地区）

<html lang="en"><!-- 英语 -->
<html lang="zh"><!-- 中文 -->
<html lang="zh-CN"><!--中文-中国大陆（简体中文）-->
<html lang="zh-TW"><!--中文-中国台湾（繁体中文）-->
<html lang="en-US"><!-- 英语-美国 -->
<html lang="en-GB"><!-- 英语-英国 -->

主要作用：

  1. 让浏览器显示对应的翻译提示。
  2. 有利于搜索引擎优化。

语言代码参考手册

https://www.w3school.com.cn/tags/html_ref_language_codes.asp

https://www.w3school.com.cn/tags/html_ref_country_codes.asp

HTML标准结构

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

开发者文档

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

W3C官网：http://www.w3c.org/

W3School：http://www.w3school.com.cn/

MDN：http://developer.mozilla.org/ √

取自“https://www.jihongchang.top/index.php?title=前端入门&oldid=8123”