--- title: "IT课程 HTML基础 016_语义元素" date: 2024-01-24T22:00:00.000Z tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "html5", "html5新特性", "html5新标签", "html5新属性", "html5新功能", "html语义化"] categories: ["学习", "HTML基础"] canonical: https://www.zhaojian.net/it-course-html-016/ author: 赵健 --- ### 语义元素 HTML5 引入了许多语义元素，这些元素的目的是提高文档结构的语义性，使得文档更具有可读性、可维护性，并且对搜索引擎和开发者都更友好。 一个页面结构通常包含：页眉、页脚、标题、导航、内容、侧边栏等等。 ##### 使用 `
` 元素 设计页面布局： ![示例效果](/uploads/2024/01/8-1.png) > [!小结] > - 不利于开发人员编写代码，当你面对满屏幕的 `
` 元素时，你很难快速分清楚他们所代表的含义。 > - 不利于搜索引擎优化（SEO），浏览器只知道你用了 `
` 元素，而 `div` 元素本身不具有任何含义，它只是一个容器。 ##### 使用语义化元素 设计页面布局： ![示例效果](/uploads/2024/01/8-2.png) 使用 `
` `