对于实践记录来说，我为了练习html与css，找了小米网站进行了练习，还原出小米商城的界面
1. 语义化标签与非语义化标签的差异
语义化标签是指那些在HTML中明确表示其内容意义的标签，它们帮助网页结构更清晰，便于SEO优化和提高网页的可读性。常见的语义化标签包括 <header>, <footer>, <article>, <nav>, <section>, <main> 等。
非语义化标签如 <div> 和 <span>，这些标签没有内在的意义，主要用于结构化布局和样式控制，更多依赖CSS来表达其作用。
小米商城首页 HTML 结构（示例）
小米商城首页的HTML结构通常包括如下内容：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">路由器</a></li>
</ul>
</nav>
</header>
<main>
<section class="banner">
<img src="banner.jpg" alt="首页广告图">
</section>
<section class="product-list">
<h2>热销商品</h2>
<div class="product">
<img src="product1.jpg" alt="商品1">
<p>商品1描述</p>
</div>
<div class="product">
<img src="product2.jpg" alt="商品2">
<p>商品2描述</p>
</div>
<!-- 更多商品 -->
</section>
<footer>
<p>© 2024 小米公司</p>
<p>联系方式: 400-XXXX-XXXX</p>
</footer>
</main>
</body> </html>
语义化标签的使用：
<header>：标明页面的头部，通常包括网站logo、导航菜单等信息。<nav>：包裹导航菜单，明确标识网页中导航部分。<main>：定义网页的主要内容区域，帮助搜索引擎和辅助技术理解页面的核心内容。<section>：用于页面内容的分割，帮助结构化和语义化页面。<footer>：表示页面的页脚部分，包含版权信息、联系信息等。
非语义化标签的使用：
<div>和<span>：这些非语义化标签通常用于包裹和布局元素，特别是当需要控制样式或布局时，很多结构会依赖<div>标签。
对比：
- 语义化标签提供了更多的结构信息，有助于搜索引擎优化和可访问性（例如屏幕阅读器可以更好地理解页面结构）。
- 非语义化标签像
<div>和<span>提供更多的布局控制能力，灵活性高，但没有描述页面内容的含义，依赖于CSS来决定其表现。
汇总CSS布局技巧：浮动、定位、弹性盒子布局等
1. 浮动布局（Float）
浮动最初是用来实现文字环绕效果的，但随着时间的发展，它逐渐被用来做布局。浮动元素脱离正常的文档流，向左或向右浮动，常用于多列布局。
应用场景：
- 用于创建多列布局，尤其是经典的栅格布局。
- 创建环绕文字的效果。
- 需要让元素横向排列，但不想使用 Flexbox 或 Grid 时。
实操实践：
.container {
width: 100%;
}
.left, .right {
width: 45%;
float: left;
margin-right: 5%;
}
.clearfix::after {
content: '';
display: block;
clear: both; /* 清除浮动 */
}
问题：浮动布局容易导致父容器高度塌陷，可以使用 clearfix 技巧清除浮动。
2. 定位布局（Positioning）
CSS定位提供了四种主要方式：static（默认）、relative（相对定位）、absolute（绝对定位）和 fixed（固定定位）。
应用场景：
relative：常用于相对位置调整。absolute：用来把元素从文档流中取出，定位到指定的祖先元素或视口。fixed：常用于制作固定在页面上的元素，如固定导航栏或浮动按钮。
实操实践：
.fixed-header {
position: fixed;
top: 0; left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
应用场景：
- 固定导航栏：使用
position: fixed，使元素随着页面滚动而固定在视口顶部。 - 模态框：用
absolute定位将模态框放置在页面的中央。
3. 弹性盒子布局（Flexbox）
Flexbox 是一个一维布局系统，用于简化元素的排列、对齐和分配空间，特别适用于动态的布局。
应用场景：
- 水平和垂直居中：非常适合在父容器中水平或垂直居中元素。
- 响应式设计：非常方便地调整元素尺寸和顺序，适合在不同屏幕尺寸下自动适配布局。
- 动态布局：例如，自动填充剩余空间。
实操实践：
.container {
display: flex;
justify-content: space-between; /* 水平分布 */
align-items: center; /* 垂直居中 */
}
.item { flex: 1; /* 每个元素平分空间 */ }
常用属性：
justify-content：定义主轴（水平轴）的对齐方式，如center、space-between、flex-start等。align-items：定义交叉轴（垂直轴）的对齐方式，如center、flex-start等。flex：定义每个项的伸缩能力。
4. 网格布局（CSS Grid）
CSS Grid 是一个二维布局系统，可以同时控制行和列的布局，非常适合构建复杂的网页布局。
应用场景：
- 复杂布局，如多列和多行的内容。
- 页面元素需要精确对齐时，如在电商网站的商品展示页面中。
- 响应式设计，尤其是当需要根据屏幕尺寸调整布局时。
实操实践：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列 */
gap: 10px; /* 网格间隙 */
}
.item { background-color: lightgray; }
常用属性：
grid-template-columns：定义列的宽度。grid-template-rows：定义行的高度。grid-gap：定义网格之间的间隙。
在编写代码的过程中，会遇到很多问题，基本都是css的样式问题，在编写的过程中，遇到解决不了的问题时，我会去豆包MarsCode上去询问我出现错的原因，或者我会问他怎么样实现某种功能，来提升我得知识积累与编写代码的速度。
