HTML5 常见的语义标记(布局)

显示网站名称、主题或者主要信息

网站的连接菜单

用于侧边栏

表示页面的主要显示内容, 页面有且只有一个,

不应该被任何其他结构标签包含, 不能是以下元素的后代:
section/nav/footer/header/aside/article等。

用于定义主内容区

用于章节或段落

结构化标志也可以可以自由配置，并没有规定

标记一定得写在

标记下方。

article和section可以相互嵌套


<!DOCTYPE HTML>
<html>
<head>
<meta charset="GB2312"/>
<title>背包客旅行札记</title>
</head>
<body>
<header id="header">
<hgroup>
<h1>背包客旅行札记</h1>
<h4>旅行是一种休息，而休息是为了走更长远的路</h4>
</hgroup>
<nav>
<ul>
<li><a href="#">关于背包客</a></li>
<li class="current-item"><a href="#">国内旅游</a></li>
<li><a href="#">国外旅游</a></li>
<li><a href="#">与我联络</a></li>
</ul>
</nav>
</header>
<article id="travel">
<section>
<h2>Hello World!</h2>
<p>四季都是结合旅行的季节。</p>
<p>不一定要花大钱，做点功课和多点自信，就能享受旅游的美好</p>
</section>
<aside>
<figure>
<img src="photo.png" alt="悠闲"/>
</figure>
</aside>
</article>
<footer>
HTML网页练习
</footer>
</body>
</html>

注意：

标签用于对网页或区段(section)的标题进行组合。

标签规定独立的流内容(图像、图表、照片、代码等等)。

相关阅读:
全网最硬核 Java 新内存模型解析与实验单篇版（不断更新QA中）
FOC控制算法
javaEE -10（11000字详解5层重要协议）
ESP8266-Arduino编程实例-PWM
初识vue渲染函数-rander
2-STM32GPIO输入之按键
【canvas】了解canvas，并实现会议预定记录钟表盘、页面水印
线性代数学习笔记1：何为线性代数
【白话前端】数字孪生(桌面端)的常用技术栈和软件：极简版
LeetCode //C - 79. Word Search

原文地址：https://blog.csdn.net/yuxingwu9872/article/details/138187938