HTML5 语义元素

- 日理万妓 2022-09-21 01:38 190阅读 0赞

语义元素：能够清楚的描述其意义给浏览器和开发者。  
无语义：`<div> <span>`  
语义元素实例：`<form> <table> <img>`  
1.section元素  
定义文档中的节，比如章节，页眉，页脚或文档的其他部分。

<section>
      <h1>WWF</h1>
      <p>The World Wide Fund for Nature (WWF) is....</p>
    </section>

2.ariticle元素  
定义独立的内容

<article>
      <h1>Internet Explorer 9</h1>
      <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
      the  public on March 14, 2011 at 21:00 PDT.....</p>
    </article>

3 .nav元素，标签定义导航链接部分

<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
    </nav>

4 aside元素  
标签定义页面主区域内容之外的内容（比如：侧边栏）  
5.header元素  
定义了文档的头部区域，用于定义内容的介绍展示区域。  
6.footer 元素  
元素定义了文档的底部区域，一个页脚通常包含文档的作者，著作权，联系信息等。  
7.figure和figcaption  
figure规定独立的流内容（图像，图表，照片，代码等）。内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。  
figcaption定义figure元素的标题

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    
    <figure>
      <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
      <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    </figure>

7.除了figcaption之外，其他的新元素都是块级元素，为了让代码可以让旧版本浏览器支持，可以在样式表中设置

header, section, footer, aside, nav, article, figure
    { display: block; }

8.在IE8以及更早的IE浏览器版本中无法再这些元素中渲染css效果。  
解决办法：使用HTML5 Shiv Javascript脚本来解决IE兼容的问题。  
下载后，在网页的head中添加如下的代码：