DAY 03 CSS的认识
1. 元素的语义化以及好处
语义化是指使用具有明确含义的HTML标签来描述内容结构，而不是仅仅为了样式而使用标签。
好处：
提高可访问性：屏幕阅读器能更好地理解页面结构
利于SEO：搜索引擎更容易理解页面内容
代码可维护性：结构清晰的代码更容易维护
未来兼容性：语义化标签更符合Web标准
例如：使用<header>、<nav>、<main>、<article>、<section>、<footer>等标签。
2. 什么是SEO
SEO（Search Engine Optimization） 即搜索引擎优化，是通过优化网站结构、内容和外部因素，提高网站在搜索引擎自然搜索结果中的排名。
关键因素：
语义化HTML结构
合理使用标题标签（h1-h6）
优化页面加载速度
高质量的内容
移动端友好
外部链接质量
3. 认识字符编码
字符编码是计算机中表示字符的方式。常见的有ASCII、UTF-8、GBK等。
UTF-8是最常用的编码方式，可以表示世界上大多数语言的字符。在HTML中通过<meta charset="UTF-8">声明。
4. CSS的三种编写方法
内联样式：直接在HTML元素的style属性中编写
html
<div style="color: red;">内容</div>
内部样式表：在HTML文档的
<head>中使用<style>标签html
<style>div { color: red; } </style>外部样式表：使用单独的CSS文件，通过
<link>标签引入html
<link rel="stylesheet" href="styles.css">
5. 常见的CSS属性
font-size：设置字体大小（如：16px, 1rem, 1.2em）color：设置文本颜色background-color：设置背景颜色width：设置元素宽度height：设置元素高度
6. 不让div独占一行怎么设置
默认情况下，div是块级元素，会独占一行。要改变这种行为：
css
div {display: inline; /* 行内元素，不能设置宽高 *//* 或 */display: inline-block; /* 行内块元素，可以设置宽高 *//* 或 */display: flex; /* 弹性布局 */
}7. link元素以及常见属性
<link>元素用于链接外部资源到HTML文档。
常见属性：
rel：定义当前文档与链接资源的关系href：指定链接资源的URLtype：指定资源的MIME类型
示例：
html
<link rel="stylesheet" href="style.css" type="text/css"> <link rel="icon" href="favicon.ico" type="image/x-icon">
8. DNS-prefetch
DNS-prefetch是一种性能优化技术，让浏览器在后台预先解析域名，减少后续请求的DNS查找时间。
使用方法：
html
<link rel="dns-prefetch" href="//example.com">
9. 认识进制及十进制转其他进制
进制是表示数字的方法：
二进制：基数为2（0,1）
八进制：基数为8（0-7）
十进制：基数为10（0-9）
十六进制：基数为16（0-9,A-F）
十进制转二进制：连续除以2，记录余数，倒序排列
text
10 ÷ 2 = 5 余 0 5 ÷ 2 = 2 余 1 2 ÷ 2 = 1 余 0 1 ÷ 2 = 0 余 1 10的二进制是1010（从最后一个余数开始）
10. CSS颜色的表示方法
颜色名称：
red,blue,green十六进制：
#FF0000（红色）RGB：
rgb(255, 0, 0)（红色）RGBA：
rgba(255, 0, 0, 0.5)（半透明红色）HSL：
hsl(0, 100%, 50%)（红色）
11. RGB的表示方法
RGB通过红(Red)、绿(Green)、蓝(Blue)三原色的混合表示颜色：
每个颜色值的范围是0-255
rgb(255, 0, 0)表示纯红色rgb(0, 255, 0)表示纯绿色rgb(0, 0, 255)表示纯蓝色
12. RGBA略讲
RGBA在RGB基础上增加了Alpha通道，控制透明度：
A的取值范围是0（完全透明）到1（完全不透明）
rgba(255, 0, 0, 0.5)表示50%透明的红色
13. 浏览器的渲染过程
解析HTML：构建DOM（文档对象模型）树
解析CSS：构建CSSOM（CSS对象模型）树
合并：将DOM和CSSOM合并成渲染树
布局：计算每个节点在屏幕上的确切位置和大小
绘制：将每个节点绘制到屏幕上