HTML入门：07HTML5语义化布局
warning:
这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 语义化布局示例</title>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>文章标题</h2>
<time datetime="2023-01-01">发布日期: 2023年1月1日</time>
</header>
<p>这里是文章内容...</p>
<footer>
<ul>
<li>标签1</li>
<li>标签2</li>
</ul>
</footer>
</article>
</section>
<aside>
<h3>侧边栏标题</h3>
<section>
<h4>子标题</h4>
<p>侧边栏内容...</p>
</section>
</aside>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>这个示例代码展示了如何使用HTML5的语义化标签来构建一个简单的网站布局。通过使用 <header>, <nav>, <section>, <article>, <aside>, 和 <footer> 等语义化标签，可以使得页面结构更清晰，有利于搜索引擎的爬取和页面的可访问性。
评论已关闭