前端学习笔记——牛客网学习记录(7)_HTML进阶之五：HTML语义元素有哪些

HTML5 语义元素

　　语义= 意义

　　语义元素 = 有意义的元素

什么是语义元素?

　一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容。
​
语义 元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容。

浏览器支持

　　Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 均支持语义元素。

注意: Internet Explorer 8 及更早版本不支持该元素，但是文章底部提供了兼容的解决方法。

 

HTML5中新的语义元素

许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部。
​
HTML5 提供了新的语义元素来明确一个 Web 页面的不同部分：
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

HTML5 语义元素常见用法如下图：

HTML5 <figure> 和 <figcaption> 元素

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
​
<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
​
<figcaption> 标签定义 <figure> 元素的标题。（非块状元素）
​
<figcaption> 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

实例

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>