HTML5语意元素

    xiaoxiao2022-07-12  151

    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>

     

    我们可以开始使用这些语义元素吗?

    以上的元素都是块元素(除了<figcaption>).

    为了让这些块及元素在所有版本的浏览器中生效,你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

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

    Internet Explorer 8 及更早IE版本中的问题

    IE8 及更早IE版本无法在这些元素中渲染CSS效果,以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.

    解决办法: 你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址:http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js

    下载后,将以下代码放入到网页中:

    <!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->

    以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中,因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素

     

    参考:https://www.runoob.com/html/html5-semantic-elements.html

    最新回复(0)