Byadmin
网页基本知识
浏览器内核
内核就是浏览器的核心，用于处理浏览器得到的各种资源。
Chrome 浏览器：Blink
Safari：webkit
FireFox：Gecko
...
网页结构
网址
网页
网页结构：结构（HTML） + 表现（css） + 行为（JS）
图片格式繁多，每种格式都有其特定的应用场景和优缺点。以下是一些常见图片格式的详细介绍，包括它们的重点特点和主要用途：
常用图片格式
JPEG (Joint Photographic Experts Group)
特点：JPEG 是一种广泛使用的有损压缩图像格式，特别适合于彩色或灰度影像的压缩。JPEG 格式可以在保持相对较高图像质量的同时，显著减小文件大小。
用途：主要用于网页图像、摄影和数字相机拍摄的照片等。
PNG (Portable Network Graphics)
特点：PNG 是一种无损压缩的图像格式，支持透明度（Alpha 通道）和更好的颜色深度。与 JPEG 相比，PNG 在图像质量上没有损失，但文件大小通常会更大。
用途：适用于网页设计、图标、透明背景图像以及需要高质量图像的场合。
GIF (Graphics Interchange Format)
特点：GIF 是一种早期的图像格式，支持动画和透明背景，但仅限于 256 种颜色。它采用 LZW 压缩算法进行无损压缩。
用途：广泛用于制作简单动画、网页图标和小图像。
BMP (Bitmap Image File)
特点：BMP 是 Windows 环境下的一种无损压缩且未压缩的图像文件格式，支持多种颜色深度。文件大小通常较大，因为它不使用压缩。
用途：主要用于 Windows 操作系统中的桌面背景、图形用户界面元素等。
TIFF (Tagged Image File Format)
特点：TIFF 是一种灵活的图像格式，支持多种颜色和数据类型。它可以是无损的也可以是有损的（通过 JPEG 压缩），并且可以包含多页图像（如扫描文档）。
用途：主要用于专业图像存储，如摄影、印刷行业和图像编辑。
SVG (Scalable Vector Graphics)
特点：SVG 是一种基于 XML 的矢量图形格式，支持动画和互动性。由于它是矢量的，SVG 图像可以在不失真的情况下缩放到任何大小。
用途：适用于网页图标、图表、复杂动画和响应式设计中的图形。
WebP
特点：WebP 是由 Google 开发的一种现代图像格式，支持无损和有损压缩，并且在相同的图像质量下，文件大小比 JPEG 小 25%-34%。WebP 还支持透明度和动画。
用途：用于提高网页加载速度，适合网站开发、在线媒体和应用程序中。
HEIF/HEIC (High Efficiency Image File Format/High Efficiency Image Coding)
特点：HEIF 是一种用于存储单张图片或一系列图片（如连拍照片或动画）的容器格式。HEIC 是基于 HEIF 的，由苹果在 iOS 设备中使用，采用了高效的编码技术来减小文件大小，在保持相同图像质量的同时，文件大小只有 JPEG 的一半左右。
用途：主要用于苹果设备拍摄的照片和视频，以及其他希望提高存储和传输效率的场合。
颜色表示
颜色名称
使用一些预定义的颜色名称来表示颜色，例如 red、green、blue、yellow 等。
颜色名称是不区分大小写的。
十六进制表示法（HEX 表示法）
使用十六进制数来表示颜色。每种颜色由 6 个字符组成，前两个字符表示红色值，中间两个字符表示绿色值，后两个字符表示蓝色值。
例如，红色可以表示为 #FF0000，绿色可以表示为 #00FF00，蓝色可以表示为 #0000FF。
RGB 表示法
RGB 表示法是一种将红、绿、蓝三原色的值以数字形式表示的方法。
可以使用 rgb() 或 rgba() 函数来表示颜色。
rgb() 函数的三个参数分别表示红、绿、蓝三原色的值，取值范围为 0~255；
rgba() 函数除了三个参数外，还可以添加一个表示透明度的参数，取值范围为 0~1。
例如，红色可以表示为 rgb(255, 0, 0)，半透明的红色可以表示为 rgba(255, 0, 0, 0.5)。
HSL 表示法
HSL 表示法是一种将颜色的色相、饱和度和亮度以数字形式表示的方法。
可以使用 hsl() 或 hsla() 函数来表示颜色。
hsl() 函数的三个参数分别表示色相、饱和度和亮度，取值范围为 0(360（色相）、0)100%（饱和度和亮度）；
hsla() 函数除了三个参数外，还可以添加一个表示透明度的参数，取值范围为 0~1。
例如，红色可以表示为 hsl(0, 100%, 50%)，半透明的红色可以表示为 hsla(0, 100%, 50%, 0.5)。
常用单位(css)
像素（px）：像素是最常见的单位，它是相对于显示器屏幕的最小单位。像素单位直接指定一个具体的数值，例如 width: 200px;。
百分比（%）：百分比单位是相对于父元素的大小计算的。例如，将一个元素的宽度设置为父元素宽度的 50%，可以使用 width: 50%;。
em：em 单位是相对于元素的字体大小计算的。如果一个元素的字体大小为 16 像素，设置 margin: 1em; 将会产生一个 16 像素的外边距。 （相对于当前元素的 font-size 的倍数）
rem：rem 单位也是相对于根元素（即 标签）的字体大小计算的。与 em 不同，rem 单位不会受到父元素的字体大小的影响。例如，设置 font-size: 16px; 后，margin: 1rem; 将会产生一个 16 像素的外边距，无论元素的父元素的字体大小如何。
vw 和 vh：vw 和 vh 分别表示视口宽度（viewport width）和视口高度（viewport height）的百分比单位。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。例如，将一个元素的宽度设置为视口宽度的 50%，可以使用 width: 50vw;。
原始单位：除了上述常见的单位外，CSS 还支持其他一些单位，如英寸（in）、厘米（cm）、毫米（mm）、点（pt）和派卡（pc）。这些单位通常用于打印样式表或特殊应用场景。
auto： 自动单位用于根据内容或布局来决定尺寸。