html5的主体结构元素和非主体结构元素
程序员文章站
2022-03-03 07:56:47
...
html5的主体结构元素和非主体结构元素
- html5 的网页结构
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<body>
<header></header>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<footer></footer>
</body>
</html>
- article元素
article元素是一个独立的区域，它有自己的标题和页脚。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>Article的标题</h1>
<p></p>
</header>
<p>
<b>正文</b>
</p>
<footer>
<p>Article的页脚</p>
</footer>
</article>
</body>
</html>
article的嵌套
内层的内容在原则上是需要与外层的内容相关联,例如文章和评论。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>Article的标题</h1>
<p></p>
</header>
<p>
<b>正文</b>
</p>
<footer>
<p>Article的页脚</p>
</footer>
</article>
<section>
<h2>读者评论</h2>
<article>
<header>
<h3>读者：张三</h3>
<p>
<time pudate datetime=”2020/05/30T19:00”>2小时前</time>
</p>
</header>
<p>文章很好！</p>
</article>
<h2>读者评论</h2>
<article>
<header>
<h3>读者：李四</h3>
<p>
<time pudate datetime=”2020/05/30T19:00”>2小时前</time>
</p>
</header>
<p>文章非常好！</p>
</article>
</section>
</body>
</html>
- section元素
section 元素定义文档中的节、区段。比如章节、页眉、页脚或其他部分。 - aside元素
aside标签定义其所处内容之外的内容,其内容应该与附近的内容相关。用于侧边栏，广告栏或引用等方面。
用于内容解释时：
<p>这篇文章是爱因斯坦写的</p>
<aside>
<h4>爱因斯坦</h4>
出生于德国巴登－符腾堡州乌尔姆市，毕业于苏黎世联邦理工学院，犹太裔物理学家。
</aside>
用于全局时：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<header>
<h1></h1>
<p></p>
</header>
</article>
<p></p>
<aside>
<h1>公告</h1>
<p>今日网站维护</p>
</aside>
</body>
</html>
- nav元素
用于页面导航的链接组。例如导航栏，翻页和页面内移动。但在页脚时，不建议使用 nav元素，建议使用footer。
<nav>
<a href="https://www.baidu.com">Home</a>
<a href="https://www.goole.com">Previous</a>
<a href="https://www.taobao.com">Next</a>
</nav>
- time元素
<p>我每天早上 <time>7:00</time> 起床</p>
<time datetime="2020-05-20">2020年5月20</time>
<time datetime="2020-05-20">2020年5月20日</time>
<time datetime="2020-05-20T19：30">2020年5月20日晚上7点</time>
<time datetime="2020-05-20T19：30Z">UTC标准时间2020年5月20日晚上7点</time>
<time datetime="2020-05-20T19：30+8：00">中国时间2020年5月20日晚上7点</time>
<!-->“+8：00”表示时差<-->
- pubdate元素
pubdate元素可以用在article元素里的time上，来表示当前网页的发布时间。
<p>发布时间<time datetime="2020-5-30"pubdate="pubdate">2020年5月30</time></p>
-
header元素
header元素是通常用于存放页面或者一个内容区块的标题，但除了标题以外也可以存放logo图片和搜索表单等。 -
hgroup元素
hgroup元素是用来将标题进行组合。
例如：
<hgroup>
<h1>标题1</h1>
<h2>标题2</h2>
</hgroup>