CSS3笔记：https://blog.csdn.net/weixin_43869741/article/details/134638720
CSS2笔记：https://mp.csdn.net/mp_blog/creation/editor/134370721
前言
W3C官网： www.w3c.org
W3School： www.w3school.com.cn
MDN： developer.mozilla.org —— 平时用的最多。
一、HTML字符编码
1. 计算机对数据的操作：
存储时，对数据进行：编码。
读取时，对数据进行：解码。
2. 编码、解码，会遵循一定的规范 —— 字符集。
3. 字符集有很多中，常见的有（了解）：
1. ASCII：大写字母、小写字母、数字、一些符号，共计128个。
2. ISO 8859-1：在 ASCII 基础上，扩充了一些希腊字符等，共计是256个。
3. GB2312：继续扩充，收录了 6763 个常用汉字、682个字符。
4. GBK：收录了的汉字和符号达到 20000+ ，支持繁体中文。
5. UTF-8 ：包含世界上所有语言的：所有文字与符号。—— 很常用。
4. 使用原则是怎样的？
原则1：存储时，务必采用合适的字符编码 。
否则：无法存储，数据会丢失！
原则2：存储时采用哪种方式编码 ，读取时就采用哪种方式解码。
否则：数据错乱（乱码）！
例如下面文字中，包含有：中文、英文、泰文、缅甸文
我爱你
I love you!
ฉนรกเธอนะ
ကꢀနမက ချစတယ။
若使用 ISO8859-1 编码存储，在存入的那一刻，就出问题了，因为 ISO8859-1仅支持英
文！
为保证所有的输入，都能正常存储和读取，现在几乎全都采用： UFT-8编码。
所以我们编写 html文件时，也都统一用 UFT-8编码。
5. 总结：
平时编写代码时，统一采用 UTF-8编码（最稳妥）。
为了让浏览器在渲染 html文件时，不犯错误，可以通过 meta标签配合 charset属性指
定字符编码。
二. HTML 设置语言
1. 主要作用：
让浏览器显示对应的翻译提示。
有利于搜索引擎优化。
2. 具体写法：
3. 扩展知识： lang属性的编写规则（作为一个课外扩展知识，了解即可）。
1. 第一种写法（ 语言-国家/地区 ），例如：
zh-CN ：中文-中国大陆（简体中文）
zh-TW ：中文-中国台湾（繁体中文）
zh ：中文
en-US ：英语-美国
en-GB ：英语-英国
2. 第二种写法（ 语言—具体种类）已不推荐使用，例如：
zh-Hans ：中文—简体
zh-Hant ：中文—繁体
3.W3School 上的说明：《语言代码参考手册》、《国家/地区代码参考手册》
4.W3C官网上的说明：《LanguagetagsinHTML》
三. HTML标准结构
HTML标准结构如下：
输入 !，随后回车即可快速生成标准结构。
生成的结构中，有两个meta标签，我们暂时用不到，可以先删掉。
配置 VScode的内置插件 emmet，可以对生成结构的属性进行定制。
在存放代码的文件夹中，存放一个 favicon.ico图片，可配置网站图标。
四、标签样式
4.1. 排版标签
1.h1 最好写一个， h2~h6 能适当多写。
2.h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
3.p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签（暂时先这样记，后面会说规律）。
4.2. 语义化标签
概念：用特定的标签，去表达特定的含义。
原则：标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要！
举例：对于 h1 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。
优势：
代码结构清晰可读性强。
有利于 SEO（搜索引擎优化）。
方便设备解析（如屏幕阅读器、盲人阅读器等）。
4.3.文本标签_常用的
1. 用于包裹：词汇、短语等。
2. 通常写在排版标签里面。
3. 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
4. 文本标签通常都是行内元素。
生活中的例子： div 是大包装袋， span 是小包装袋。
4.4.文本标签_不常用的
备注：
1. 这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。
2. blockquote 与 address是块级元素，其他的文本标签，都是行内元素。
3. 有些语义感不强的标签，我们很少使用，例如：
small、 b、 u、 q、 blockquote
4. HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些：
h1~h6、 p、 div、 em、 strong、 span
4.5. 图片标签
4.5.1. 基本使用
总结：
1. 像素（ px）是一种单位，学到 CSS时，我们会详细讲解。
2. 尽量不同时修改图片的宽和高，可能会造成比例失调。
3. 暂且认为 img是行内元素（学到 CSS时，会认识一个新的元素分类，目前咱们只知道：
块、行内）。
4. alt属性的作用：
搜索引擎通过 alt属性，得知图片的内容。—— 最主要的作用。
当图片无法展示时候，有些浏览器会呈现 alt属性的值。
盲人阅读器会朗读 alt属性的值。
4.5.2. 路径的分类
1. 相对路径：以当前位置作为参考点，去建立路径。
注意点：
相对路径中的 ./ 可以省略不写。
相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。
2. 绝对路径：以根位置作为参考点，去建立路径。
本地绝对路径： E:/a/b/c/奥特曼.jpg 。（很少使用）
网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。
注意点：
使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。
使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入
失败。
4.6 常见图片格式
1.jpg 格式：
概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节
丢弃了）。
主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等 。—— 该格式网
页中很常见。
2.png 格式：
概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。
主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司logo图、重要配
图等。
3.bmp 格式：
概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动
态图。
使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片 。（网页中很少使
用）
4.gif 格式：
概述：扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。
主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
使用场景：网页中的动态图片。
5.webp 格式：
概述：扩展名为 .webp，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景：网页中的各种图片。
6. base64格式
1. 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
2. 原理：把图片进行 base64编码，形成一串文本。
3. 如何生成：靠一些工具或网站。
4. 如何使用：直接作为 img标签的 src属性的值即可，并且不受文件位置的影响。
5. 使用场景：一些较小的图片，或者需要和网页一起加载的图片。
4.7 超链接
主要作用：从当前页面进行跳转。
可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定应用。
4.7.1. 跳转到页面
注意点：
1. 代码中的多个空格、多个回车，都会被浏览器解析成一个空格！
2. 虽然 a是行内元素，但 a元素可以包裹除它自身外的任何元素！
想展示多个回车或空格，怎么办呢？ —— 后面会讲。
4.7.2. 跳转到文件
!-- 浏览器能直接打开的文件 -->
注意1：若浏览器无法打开文件，则会引导用户下载。
注意2：若想强制触发下载，请使用 download属性，属性值即为下载文件的名称。
4.7.3. 跳转到锚点
什么是锚点？—— 网页中的一个标记点。
具体使用方式：
第一步：设置锚点
我是一个位置
注意点：
1. 具有 href 属性的 a标签是超链接，具有 name 属性的 a标签是锚点。
2. name和 id都是区分大小写的，且 id最好别是数字开头。
第二步：跳转锚点
4.7.4. 唤起指定应用
通过 a标签，可以唤起设备应用程序。
4.8. 列表
4.8.1. 有序列表
概念：有顺序或侧重顺序的列表。
要把大象放冰箱总共分几步
- 把冰箱门打开
- 把大象放进去
- 把冰箱门关上
4.8.2. 无序列表
概念：无顺序或不侧重顺序的列表。
我想去的几个城市
- 成都
- 上海
- 西安
- 武汉
4.8.3. 列表嵌套
概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把解构写完整）。
我想去的几个城市
- 成都
上海
- 外滩
- 杜莎夫人蜡像馆
- 迪士尼乐园
- 西安
- 武汉
注意： li 标签最好写在 ul 或 ol 中，不要单独使用。
4.8.4. 自定义列表
1. 概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
2. 一个 dl就是一个自定义列表，一个 dt就是一个术语名称，一个 dd就是术语描述（可以有多
个）。
如何高效的学习？
- 做好笔记
- 笔记是我们以后复习的一个抓手
- 笔记可以是电子版，也可以是纸质版
- 多加练习
- 只有敲出来的代码，才是自己的
- 别怕出错
- 错很正常，改正后并记住，就是经验
4.9. 表格
4.9.1. 基本结构
1. 一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
2. 表格涉及到的标签：
table：表格
caption ：表格标题
thead ：表格头部
tbody：表格主体
tfoot：表格注脚
tr：每一行
th、 td：每一个单元格（备注：表格头部中用 th，表格主体、表格脚注中用： td）
3. 具体编码：
| 姓名 | 性别 | 年龄 | 民族 | 政治面貌 |
|---|---|---|---|---|
| 张三 | 男 | 18 | 汉族 | 团员 |
| 李四 | 女 | 20 | 满族 | 群众 |
| 王五 | 男 | 20 | 回族 | 党员 |
| 赵六 | 女 | 21 | 壮族 | 团员 |
| 共计：4人 |
4.9.2. 常用属性
注意点：
1.
发表评论