新增的非主体结构元素

来源：互联网发布：中长发发型知乎编辑：程序博客网时间：2024/05/22 13:02

header

hgroup

代码：

<!doctype html><html><head><meta charset="utf-8"><title>section的用法</title></head><body><!--article内容可以脱离上下文，可以作为完整的存在，整篇文章属于一个article，包含文章内容（article)和评论区(section)部分--><article><article><hgroup><h1>大标题</h1><h2>子标题1</h2><h2>子标题2</h2><h2>子标题3</h2></hgroup><header><h1>大标题</h1></header><section><header><h2>小标题1</h2></header><p>第一个小标题中的内容</p></section><section><header><h2>小标题2</h2></header><p>第二个小标题中的内容</p></section><section><header><h2>小标题3</h2></header><p>第三个小编题（段落）中的内容</p></section></article><!--section适合一段主题性的内容--><section><h1>评论区</h1><article><header>张三的评论</header><p>fjklsdjljfladsjfldasjfldjfkala;ajkfljd</p></article><article><header>李四的评论</header><p>akljsdfklajdflksajflkadjsflkdajlvnnl</p></article></section></article></body></html>

结果：

footer:

代码：

<!doctype html><html><head><meta charset="utf-8"><title>footer的用法</title></head><body><article><header><h1>网站标题</h1></header><footer><ul> <li>版权信息</lli> <li>联系电话</li> <li>联系地址</li></ul></footer></article></body></html>

结果：

figure:

代码：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><figure><img src="images/1.jpg"/><img src="images/2.jpg"/><img src="images/3.jpg"/></figure><figcaption>唯美图片</figcaption></body></html>

结果：

address

代码：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><footer><address><!--<a></a>表示超链接--><a href="http://blog.csdn.net/yanyanwenmeng/article/details/78160115">yanyanwenmeng的博客</a><a href="images/3.jpg">唯美图片</a></address>发表于<time datetime="2017-11-12">2017年11月12日</time></footer></body></html>

结果：

阅读全文

0 0