HTML5学习笔记(二):用于构建页面的语义元素

时间:2021-10-08 19:56:49

1、语义元素

大多数HTML5语义元素的用途是标识页面中的一个内容区块,为标注的内容赋予额外的含义,不真正做任何事。

2、使用语义元素的原因

  • 容易修改和维护;
  • 无障碍性(现代Web设计的一个重要主题);
  • 对搜索引擎的友好性高;
  • 适应未来的浏览器和Web设计工具的发展趋势

3、语义元素的来历

在发明HTML5之前,其发明者花很长时间研究已有的网页,还研读了谷歌对十几亿个网页的统计信息。谷歌公布的这个调查分析并列出了Web作者在自己网页中使用的类名,将Web页面中一些共性的东西(比如页面都有页眉、页脚导航菜单等)从人们普通的做法中提取出相应的语义。发明者依据这个调查制定成了规范。

4、浏览器对语义元素的支持情况

HTML5的语义元素基本得到了所有现代浏览器的支持,最大的绊脚石还是IE9之前的Internet Exploer。

浏览器在遇到不认识的元素时,会把它们当成内联(inline)元素挤在一起,为了解决这个问题,可为HTML5的这些语义元素添加一个样式,可转化为块级元素:

article,aside,figure,figcaption,header,footer,nav,main,section,details,summary {
display:block;
}

在支持HTML5元素的浏览器中并不会有影响。

5、用语义元素构建页面

  • <article>元素

  这个元素表示一个完整的、自成一体的内容块,比如博客文章或者新闻报道。<article>元素应该包含所有相关的内容,包括标题、作者署名以及正文,但不包含<footer>元素。例:

<article>
<header>
<h1>This is blog's title</h1>
</header>
<div class="content">
......
</div>
</article> <footer>
......
</footer>
  • aside元素:用来添加附注  

  此元素表示与它周围的文本无密切的内容,可以用此元素介绍另一个相关的话题,或者对主文档提出的某个观点进行解释;另外,也可以用<aside>元素来盛放广告、相关内容或者链接,甚至可以添加醒目引文。

<aside>
  <img src="quotes_start.png" alt="quote" /> <!--,开始引用符号的图片-->
  <span>We don't know how the universe started, so we can't be sure it won't just end, maybe today.</span>
  <img src="quotes_end.png" alt="quote" /><!--结束引用符号的图片-->
</aside>
  • <figure>+<figcaption>元素

  为页面添加插图(与普通图片区分),插图是与文本相关的,文本会提到它,且常常伴有图题(<figcaption>)。

<figure class="FloatFigure">
<img src="human_skull.jpg" alt="Human skull">
<figcaption>Will you be the last person standing if one of these apocalyptic scenarios plays out?</figcaption>
</figure>
  • <header>元素

  一个网页中可以包含多个<header>元素,有两种使用方式,差别并不是很大。

  一种是用它标注内容的标题,此种情况除非必要,否则不必使用,只有在内容标题还附带了其他信息的情况下,才有必要,例:

<header>
<h1>......</h1>
<p>......</p>
<p>......</p>
</header>

  另一种是它标注网页的页眉。

  • <footer>元素

  HTML5规定,只能在<footer>元素中放一些网站的版权信息、作品来源、法律限制以及链接之类的信息,不能放太多其他内容。

  为了不违反HTML5的规定且在页面底部放入更多内容,可用如下:

<div class="fatfooter">
<aside>
<img src="..." />
<p>......</p>
</aside>
<footer>
<p>......</p>
</footer>
</div>
  • <nav>元素:标注导航链接
<nav>
<ul>
<li><a href="#">......</a></li>
<li><a href="#">......</a></li>
<li><a href="#">......</a></li>
</ul>
</nav>
  • <section>元素

  可用于:和页面主体内容并列的小内容块、独立性内容(但并不是文章)、分组内容等。

  • <details>和<summary>元素:折叠栏(但目前只有Chrome、Opera和Safari浏览器支持)
<details>
<summary>Section #1</summary>
<p>......</p>
</details>
  • <main>元素

  用于标识网页的主要内容,一个页面只能有一个此元素,对屏幕阅读器非常重要。