后面，打算讲在之前沉淀的一些前端知识体系相关的文章陆陆续续整理一下，在html和css中，有一些不是常常被提及，但是又非常有用的一些知识，这里面非常值得一说要数语义化标签和布局断点了。
语义化标签
HTML语义化标签的用处主要是为了让页面的结构更加清晰，便于开发者理解，同时也帮助搜索引擎和辅助技术（比如屏幕阅读器）更好地解析页面的内容。
在HTML5之前，我们通常使用<div>和<span>等标签来构建页面的各个部分，这些标签本身并不包含任何关于它们内容的信息。随着HTML5的到来，也一起引入了一系列的语义化标签，让我们能够用更加具有描述性的方式来标记内容。
一些常见的HTML5语义化标签及其用法：
<header>：用于定义页面或页面区域的头部。通常包含标题、导航链接或者一些介绍性的内容。<nav>：用于包裹导航链接，通常用在头部（<header>）或者侧边栏。<article>：用于包裹独立的内容区块，比如博客帖子、新闻文章等。<section>：用于定义文档中的一个区段，比如章节、页眉、页脚或页面中的其他部分。<aside>：用于包裹一些与页面主要内容不直接相关的内容，比如侧边栏、广告、友情链接等。<footer>：用于定义页面或页面区域的底部，通常包含版权信息、联系信息等。
但是我发现一个很奇怪的现象，居然不是很多人知道这一点，而且很少去用他，依然可能习惯上去使用 div span 的方式，的确，没这些语义化标签也确实可以解决问题。
但是语义化标签，其实有挺多好处的，就比如：通过使用这些语义化标签，我们的页面结构变得更加清晰，也更容易被搜索引擎优化(SEO)和屏幕阅读器理解，从而提升了网站的可访问性和用户体验。
比如下面就是一个比较不错的例子：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<title>我的博客</title>
<style>
body {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 5fr 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
header {
grid-area: header;
background: bisque;
text-align: center;
border-radius: 4px;
}
nav ul {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
background: linear-gradient(to right, bisque, burlywood, bisque);
padding: 10px 0;
margin: 0;
text-decoration: none;
unicode-bidi: embed;
}
nav a {
text-decoration: none;
color: #333;
font-weight: bold;
font-size: 1.2em;
}
nav a:hover {
color: rgb(97, 85, 85);
}
aside {
grid-area: sidebar;
background: beige;
padding: 10px;
}
section {
grid-area: main;
padding: 10px;
background: bisque transparent;
}
footer {
grid-area: footer;
text-align: center;
background: bisque;
}
</style>
</head>
<body>
<header>
<h2>我的博客标题</h2>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于我</a></li>
</ul>
</nav>
</header>
<section>
<h2>文章标题</h2>
<article>
<h3>第一篇博客帖子</h3>
<p>这是我的第一篇博客帖子的内容...</p>
</article>
<article>
<h3>第二篇博客帖子</h3>
<p>这是我的第二篇博客帖子的内容...</p>
</article>
</section>
<aside>
<h3>侧边栏</h3>
<p>这里可以放置广告或者其他链接。</p>
</aside>
<footer>
<p>版权所有 © 2023 我的博客</p>
</footer>
</body>
</html>
布局断点
布局断点（Breakpoints）是指在不同屏幕尺寸或设备上，页面布局需要发生变化的点。它允许开发者为不同的屏幕宽度定制CSS样式，从而确保网站在各种设备上都能提供良好的用户体验。布局断点通常在CSS中使用媒体查询（Media Queries）来定义。媒体查询允许你根据不同的媒体类型（如屏幕）和某些特定的特征（如屏幕宽度）来应用不同的样式规则。
我下面举一个简单的例子，并且在代码里面给出一个相应的注释，你就可以瞬间明白这个玩意的玩法，它几乎就是专门用来做响应式计的。
代码语言：javascript复制/* 基础样式，适用于移动设备，通常我们大多数情况下应该这么选择，先做移动端设计 */
.container {
width: 100%;
padding: 10px;
}
/* 中等屏幕（大于或等于768px宽）的样式 */
@media (min-width: 768px) {
.container {
width: 750px; /* 固定宽度 */
}
}
/* 大屏幕（大于或等于992px宽）的样式 */
@media (min-width: 992px) {
.container {
width: 970px; /* 固定宽度 */
}
}
/* 非常大的屏幕（大于或等于1200px宽）的样式 */
@media (min-width: 1200px) {
.container {
width: 1170px; /* 固定宽度 */
}
}在这个例子中，.container 类的基础样式是100%宽度，这意味着它会在小屏幕设备上占满整个屏幕宽度。随着屏幕宽度的增加，我们定义了三个断点：768px、992px 和 1200px。当屏幕宽度达到这些断点中的任何一个时，.container 的宽度会被设置为一个固定的宽度，而不是100%。会留一定的白，不至于内容，特别是图片被拉的不像样子，另外，我的上篇文章说grid布局的时候，其实就用到了这个，基于不同的屏幕尺寸合理的摆放内容，可以增强不少体验。
总结
本篇文章实际上理解难度非常低，但是了解了之后，可以起到很大的帮助，至少，你在写页面的时候就懂得使用一些语义化的标签来增强代码的可读性，另外使用布局断点来做响应式，来满足不同尺寸设备的适配需求，个人对于初学web布局的读者建议：
- 语义化标签
- grid layout flex layout
- 布局断点
另外，这我是个人很久之前沉淀的前端知识体系图谱，希望对你有一定的帮助。
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
