HTML+CSS3自学笔记（HTML篇 网页语义化布局）

本文章仅用于学习，未经同意请勿转载
本文章为0基础自学笔记，文章略显粗略，如有错误，希望大家指正，感谢！

---

自学来源：
绿叶学习网（HTML入门教程）
菜鸟教程（学习HTML）
B站小甲鱼《零基础入门学习Web开发》（HTML5&CSS3）

一、语义元素

在HTML5中，提供了新的语义元素定义了网页的不同部分：
header ⇒ 定义简介形式的内容
nav ⇒ 定义网页主导航功能
main ⇒ 定义主内容，主内容中可有各种子内容区段（article、section、div等）
article ⇒ 定义独立的文章内容，与页面其它部分无关（如一篇博文）
section ⇒ 定义文档中的节，与article类似，但更使用于组织页面使其按照功能分块
aside ⇒ 定义侧边栏（作者简介，相关链接等）
footer ⇒ 定义页脚部分的内容
details ⇒ 定义额外的细节
summary ⇒ 定义details元素的标题
div ⇒ 块级无语义元素

二、小功能

想要实现点击一张图片内不同位置，可以跳转至不同网页的功能，我们需要用到map元素和area元素

map元素定义一个客户端图像映射，即是在图片中画出一定范围的区域，使该区域变为可点击图像。
area元素一定嵌套在map元素里，用来定义图像中的映射区域。如下例：

<img src="test/test.png" alt="test" usemap="#book"><!--usemap里前头必须带有"#"-->
<map name="map">