01-HTML语义化的案例分析 | 豆包MarsCode AI刷题

这是第一次写markdown笔记，如有不足之处，请多多指教！

1、语义化是什么？

• HTML 标签语义化是指在编写 HTML 代码时，使用具有明确语义的标签来构建网页内容。例如，使用<h1> - <h6>标签表示标题，<p>标签表示段落，<nav>标签表示导航栏等。这些标签能够准确地传达其包含内容的类型和用途。

2、为什么要HTML语义化

• 我们在写HTML文件习惯性的使用div标签，常常在div中用class给div标签赋予类别。我们为了不在CSS的渲染之下，更直观的、更方便的呈现html文件的结构，我们可以使用语义化标签来凸显文件内容的结构，而不再是一眼望去满屏的<div>。使用语义化的标签更加有效的提高了代码的可读性和修改完善效率。

3、常见的语义化标签

• header --- 头部标签
• nav ------ 导航标签
• section -- 块级标签
• aside ---- 侧边栏标签
• footer --- 尾部标签

header头部标签和footer尾部标签

<header> 元素和footer尾部标签两个性质类似，但是二者使用的功能需求不一样。头部标签用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如搜索框、作者名称。而尾部标签通常是一个页面的页脚，页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

nav导航标签

<nav> 元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。注意的是：

• 不是所有的链接都必须使用 <nav> 元素，它只用来将一些热门的链接储存到导航栏里面；
• 譬如header,footer这一类的标签元素不要成为nav的子标签。

<nav>
    <h1>课程重点</h1>
    <dl>
        <li>首页</li>
        <li>动态</li>
        <li>工作台</li>
        <li>我的</li>
    </dl>
</nav>

section块级标签

section元素相当于在页面的正文主体部分的盒子，通常用在页面主题的大盒子的子标签。一般会包含一个小标题，作为小section部分的主题。

<section>
    <h1>课程重点</h1>
    <ol>
        <li>前端工作的定义</li>
        <li>前端技术栈拆解与分析</li>
        <li>HTML 作用解析</li>
        <li>HTML 语义化</li>
    </ol>
</section>

aside侧边栏标签

aside元素一般在页面中的主体部分的两侧，譬如页面侧边的返回顶部按钮、随机推送视频侧边的“换一下”的按钮。被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。

最后