HTML学习第七天(二)
HTML学习第七天(二)
新增的非主体结构
- header元素
- footer元素
- hgroup元素
- address元素
header元素:通常用于存放整个页面或页面内的一个区域块的标题,但也可以存放类似于数据表格搜索表单或相关的logo图案,header一般会包含一个handing元素,也可以不放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- H5之前的写法 --> <!--<div class="header"></div>--> <!--<div class="content"></div>--> <!--<div class="footing"></div>--> <header> <h1>IT最新技术</h1> </header> <article> <header> <a href="index.html"></a> <nav> <ul> <li><a href="#">学习</a> </li> <li><a href="#">技术</a></li> <li><a href="#">论坛</a></li> <li></li> </ul> </nav> </header> </article> <footer>CIP</footer> </body> </html>
footer元素:作为上层父级元素内容区域块的脚注,一般包括作者,相关阅读链接,以及版权信息,备案号等
<!-- H5之前的写法 --> <!--<div class="footer">--> <!--<ul>--> <!--<li><a href="#">备案号</a></li>--> <!--<li><a href="#">公安局备案</a></li>--> <!--<li><a href="#">版权归属</a></li>--> <!--</ul>--> <!--</div>--> <!-- 区块结尾 --> <article> <footer> 文章的底部 </footer> </article> <!-- 全局的底部 --> <footer> <ul> <li><a href="#">备案号</a></li> <li><a href="#">公安局备案</a></li> <li><a href="#">版权归属</a></li> </ul> </footer>
hgroup元素:将标题及其子标题进行分组的元素。hgroup元素常会将h1到h6元素进行分组,例如一个内容区块的标题及其子元素算一组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <article> <header> <hgroup> <!-- 降级 --> <h1> 这是文章标题 </h1> <p><time datetime="2020-02-02">2020-02-02</time></p> <h2>这是一个子标题</h2> </hgroup> </header> <div> 这是内容 </div> <footer>这是底部</footer> </article> </body> </html>
address元素:文档中所有的联系信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <address> <a href="#">aaa</a> <a href="#">www</a> <a href="#">vvv</a> </address> <footer> <div> <address> <a href="#">who</a> My,world </address> <time datetime="2020-02-02">2020-02-02</time> </div> </footer> </body> </html>
大道五十,天衍四九,人遁其一!