前端学习笔记——牛客网学习记录(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>