HTML5语义元素
语义=意义
语义元素=元素的意义
 
什么事语义元素？
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例：div、span。无需考虑内容。
语义 元素实例：form 、table、img清楚地定义了它的内容。
 
浏览器支持
IE9+、火狐、谷歌，Safari、opera支持语义元素。
 
HTML5新的语义元素
header、nav、section、article、aside、figcaption、figure、footer。
 
section标签定义文档中的节或者区段。比如章节，页眉、页脚或者文档中的其他部分。
section包含一组内容及其标题。
<section>
     <h1>大家好</h1>
     <p>这里是大家好的具体介绍！！！</p>
</section>
 
article标签定义独立的内容。
<article>
     <h1>大家好</h1>
     <p>这里是大家好的具体介绍！！！</p>
</article>
 
nav标签定义导航连接部分。
nav元素也可以定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在nav元素中。
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> 
 
aside标签定义页面主区域内容之外的内容比如侧边栏。
aside标签的内容应与主区域的内容相关。
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside> 
 
header标签描述文档的头部内容。
header标签注意用于定义内容的介绍内容的展示区域。
在页面中你可以有多个header标签。
 
footer标签描述了文档的底部区域。
一个页脚通常包括文档的作者，著作权信息，链接使用条款，联系信息等。
文档中你可以使用多个footer。
 
figure 和 figcaption
figure 标签规定独立的流内容图像，图表，照片，代码等等。
figure标签的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

figcaption标签定义figure元素的标题。

figcaption标签应该被置于figure元素的第一个或最后一个子元素的位置。
 
以上的元素都是块元素除了figcaption。
为了让这些块及元素在所有版本浏览器中生效，你需要在样式表文件设置一下属性。
以下代码可以让刘版本浏览器支持本文中介绍的块级元素。
header, section, footer, aside, nav, article, figure
{ 
display: block; 
} 
 
IE8及更早版本中的问题
IE8及更早版本无法再这些元素中渲染CSS效果，以基于你不能使用<header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.
解决办法：你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：http://code.google.com/p/html5shiv/

下载后，将以下代码放入的网页中：

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

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

HTML5语义元素总结的更多相关文章

  1. HTML5 语义元素、迁移、样式指南和代码约定

    语义元素是拥有语义的元素. 什么是语义元素? 语义元素清楚地向浏览器和开发者描述其意义. 非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息. 语义元 ...

  2. HTML5: HTML5 语义元素

    ylbtech-HTML5: HTML5 语义元素 1.返回顶部 1. HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发 ...

  3. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  4. HTML5 语义元素

    返回目录 http://hovertree.com/h/bjaf/html5zixueji.htm 一个语义元素能够清楚的描述其意义给浏览器和开发者.无语义 元素实例: <div> 和 & ...

  5. HTML5 语义元素(二)文本内容

    上一篇介绍的是关于页面结构方面的语义元素,本篇介绍文本内容方面,包含:<bdi>.<details>.<summary>.<mark>.<outp ...

  6. HTML5语义元素

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 新的HTML5语义元素

    先看一个传统的HTML4的文档: <div class="header"> <h1>My Site Name</h1> <h2>My ...

  8. 添加shiv让所有现代浏览器都支持 HTML5 语义元素 html5.js让IE（包括IE6）支持HTML5元素方法

    引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/htm ...

  9. 努力学习 HTML5 （4）—— 浏览器对语义元素的支持情况

    经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> ...

随机推荐

  1. BZOJ2730_矿场搭建_KEY

    题目传送门 这道题用Tarjan求出点-双连通分量,对联通块做一些玄学操作. 细节很多,不说了看code. code: /*************************************** ...

  2. LeetCode: 53. Maximum Subarray（Easy）

    1. 原题链接 https://leetcode.com/problems/maximum-subarray/discuss/ 2. 题目要求 给定一个整型数组,返回其子串之和的最大值 例如,[-2, ...

  3. 关于DataTable.Select方法偶尔无法正确查到数据的处理方法

    项目中经常用DataTable在内存中存储并操作数据,在进行报表开发的时候,报表的各种过滤功能用这个内存表可以大现身手,但最近在使用过程中却遇到一个奇怪的现象,现将该问题及处理方法记录一下.这是在做护 ...

  4. JEMTER简单的测试计划

    测试计划一 1)测试网站:http://www.geneedu.cn/和http://supu01.1688.com/ 2)测试目的是该网站在负载达到20 QPS 时的响应时间. 备注: QPS : ...

  5. Selenium自动化测试基础

    如有任何学习问题,可以添加作者微信:lockingfree 目录 Selenium自动化测试基础 Selenium自动化测试第一天(上) Selenium自动化测试第一天(下) Selenium自动化 ...

  6. Python内嵌函数与Lambda表达式

    //2018.10.29 内嵌函数与lambda 表达式 1.如果在内嵌函数中需要改变全局变量的时候需要用到global语句对于变 量进行一定的说明与定义 2.内部的嵌套函数不可以直接在外部进行访问 ...

  7. Unity编辑器 - Undo的坑

    Unity编辑器 - Undo的坑 编辑器通过脚本中改变值,Undo.RecordObject可能会无效,应该使用: Undo.RegisterCompleteObjectUndo(Object ob ...

  8. 使用flask_limiter设定API配额

    前言 闲来无事,突然想到了以前做过的关于后台API安全方面的事,关于接口访问配额的设置,flask有没有很好的库支持呢?一找还真有!主要是对照了库的官方文档自己写了下dome,以供参考. # -*- ...

  9. GIT: 分布式开发 代码管理工具使用命令大全

    代码管理工具: GIT     什么是GIT? Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目 Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常 ...

  10. CSP201609-1：最大波动

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...