![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：语义化很好理解, 就像是父母给孩子起一个有寓意的好名字一样, 总不能都叫张三李四对吧
Collection
Collection
语义 = 意义
语义元素 = 有意义的元素
语义元素能够清楚的描述其意义给浏览器和开发者。
无语义元素实例:
<div>和<span>- 无需考虑内容.
语义元素实例:<header>,<table>, and<img>- 清楚的定义了它的内容.
HTML5提供了新的语义元素来明确一个Web页面的不同部分:
<header> 元素为文档或节规定页眉，一般是由导航, logo 等元素组成。<header> 元素应该被用作介绍性内容的容器。
<footer> 元素为文档或节规定页脚。
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
<aside> 标签定义页面主区域内容之外的内容（比如与主体无关的信息，广告位, 相关推荐, 阅读排行等）。
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，是文档或主体中的通用小组件
<main> 标签展示页面主体内容,建议一个页面,只出现一次。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>结构化语义元素</title></head><body><!-- <header>元素 规定页眉 --><header><h1><header></h1></header><div class="container"><!-- <aside>元素 设置边栏 --><aside><h1><aside></h1></aside><!-- <main>元素 设置主体 --><main><h1><main></h1><div><!-- <section> 元素 定义文档中的节--><section><h1><section></h1></section><section><h1><section></h1></section></div></main></div><!-- <footer>元素 规定页脚 --><footer><h1><footer></h1></footer></body></html>
| 标签 | 描述 |
|---|---|
| <article> | 定义文章 |
| <details> | 定义用户能够查看或隐藏的额外细节 |
| <figure> | 规定自包含内容，比如图示、图表、照片、代码清单等 |
| <figcaption> | 定义 <figure> 元素的标题 |
| <mark> | 定义重要的或强调的文本 |
| <nav> | 定义导航链接 |
| <summary> | 定义 <details> 元素的可见标题 |
| <time> | 定义日期/时间 |
天蓬老师