HTML5语义元素总结

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的新元素。

时间: 2024-10-25 02:29:14

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

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

本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.<footer>.<header>.<main>.<nav>.<section>等元素. 目录 1. 语义元素介绍 1.1 何为语义元素 1.2 特点 2. 原先界面布局 3. 页面结构语意元素 3.1 说明 3.2 详细介绍 3.3 示例图 1. 语义元

HTML5 语义元素

返回目录 http://hovertree.com/h/bjaf/html5zixueji.htm 一个语义元素能够清楚的描述其意义给浏览器和开发者.无语义 元素实例: <div> 和 <span> - 无需考虑内容.语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容. <title>是一个典型的语义化标签,定义文档的标题.效果图: HTML5中新的语义元素许多现有网站都包含以下HTML代码

HTML5的语义元素有什么作用?

如今,web开发慢慢走向了html5的时代,今天主要说说 html5的语义化元素的意义 1.容易修改和维护.在html5出来之前,传统的网页基本是div用来布局,要想理解整体布局和不同区块的重要程度,其实是有点困难的(虽然说可以加上语义化的类):而通过html5语义元素,通过标记就可以迅速了解基本结构信息.这样,等你几个月回头修改时,就会比较轻松了.并且,当别人接手你的项目时,就显得更重要了! 2.无障碍性.方便屏幕阅读器和其他辅助工具对页面进行扫描,为让残疾人士提供更好的上网体验 3.搜索引擎

努力学习 HTML5 (4)&mdash;&mdash; 浏览器对语义元素的支持情况

经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> 元素就行了.为此我们要做的就是为它们添加点样式规则.之后就可以得到超级可靠的语义元素了,即使使用10年前的浏览器也可以正常浏览. 为语义元素添加样式 浏览器遇到不认识的元素时,会把它们当做内联(inline)元素.大多数 HTML5 语义元素都是块级元素. 因此我们添加一条超级规则,为9个 HTML5 元素

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

1.语义元素 大多数HTML5语义元素的用途是标识页面中的一个内容区块,为标注的内容赋予额外的含义,不真正做任何事. 2.使用语义元素的原因 容易修改和维护: 无障碍性(现代Web设计的一个重要主题): 对搜索引擎的友好性高: 适应未来的浏览器和Web设计工具的发展趋势 3.语义元素的来历 在发明HTML5之前,其发明者花很长时间研究已有的网页,还研读了谷歌对十几亿个网页的统计信息.谷歌公布的这个调查分析并列出了Web作者在自己网页中使用的类名,将Web页面中一些共性的东西(比如页面都有页眉.页

HTML5的文档结构和新的语义元素

学习前端的东西似乎没有什么捷径,就是直接上手撸就完了 本文目标:(熟知) 1.创建基本HTML5文档结构 2.使用新的语义元素来布局页面 下面直接上代码: <!DOCTYPE html> <!-- DOCTYPE简洁声明,强制现代的浏览器使用标准模式 --> <html lang="en"> <!-- 使用lang指定文档语言 --> <head> <meta charset="UTF-8">

HTML5 语义化元素

语义= 意义. 语义元素 = 元素的意义. 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容. 浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素. 注意: Internet Exp

HTML5新增的语义元素、JS常用对象

HTML5新增的语义元素 <header>元素表示页面中一个内容区域或整个页面的标题,通常他可能是一个页面中的(指主体标记中的第一个元素),可以包含站点的标题.Logo和旗帜广告 <header> <img src="logo.png"> <h1>YEN的Java Web之路</h1> </header> <footer>元素表示整个页面或页面中一个区域块的脚注,通常包含一些基本信息,包括一些基本信息:

HTML5学习:语义元素section

HTML5学习:语义元素section一.定义<section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 二.用法section标签下一般有一个标题<h1></h1>.还有一个内容<p></p>.示例代码如下: <!DOCTYPE html> <html>   <head>     <meta name="content-type" con