回顾HTML5的语义化元素

什么是语义化的元素

   语义即是意义的意思。意思就是通过这个标签的名字就可以知道这个标签的含义。

   比如div,p,span就不是语义化的元素,因为你不能通过这个标签来获悉它的含义。

   而header,img等就是语义化的元素,我们知道这个标签代表是什么。

为什么要推行语义化的元素

   对浏览器: 

    更好的搜索引擎收录。

    增强网页的结构性。

   对用户,工程师和维护团队:

    使用语义化无义增强了代码的可读性和维护性。

HTML5新增的语义化元素

  1.section(节)

     section常用来定义网页中的章节,页眉,页脚一类的。

    而且section也通常是呈现一组信息(包含了内容和标题),就像书本的中的章节一样。

<section>
	<h1>章节标题</h1>
	<p>章节内容</p>
</section>

  

  2、article

    article常用来定义独立的内容。

<article>
	<h1>章节标题</h1>
	<p>章节内容</p>
</article>

  

  我们可以看到section和article的使用很类似,那么怎区分它们呢。

  打个比方,section就像是一本书里面的大的章节部分,而article则是其中的小的,独立的一个部分,比如说注释的部分。article总是代表独立的一个章节,和上下文没有关联性。还有一点,section和article是可以互相嵌套使用。置于在你的网页中到底怎么使用,需要自己体会。

   3.nav

    nav标签是用来定义导航链接部分的标签,但注意的是,这并非定义链接(a)标签,也就是a标签可以单独使用。

   nav还有一个好处就是可以很好的实现响应式设计。比如在手机浏览器或者小屏幕浏览器上,我们可以看到有些导航栏默认是省略了的。

<nav>
	<a href="www.badu.com">百度</a>
	<a href="www.google.com">谷歌</a>
	<a href="https://cn.bing.com/">必应</a>
</nav>

  

   4.aside

    aside用来定义侧边栏。

    从语义化的角度来说,aside需要和主内容相关联。

	<aside>
			<p>这是侧边栏</p>
	</aside>

  

   5.header

    用来定义文档标题栏部分。

    header可以嵌套在article和section之中,可以包含<h1>-<h6>的标题头和其他内容,组成一个标题介绍区域。

    比如我们常看见的作者信息,logo,icon等就可以放在header之中。

<header>
		<h1>这是一个标题区域</h1>
		<p>可以包含其他的内容</p>
</header>

  

   6.footer

     和上面的header相对应的是footer。

     footer中包含的通常是版权信息,友情链接等等。这个部分在很多网站都是常见的,大部分网站的最底端就是这个footer。

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:[email protected]">
  [email protected]</a>.</p>
</footer>

  

   7.figure和figcaption

    用来定义一些独立的图片,代码块,插图和统计图表等。

    figuer把figcaption包含在内。figcaption就是对图片或者代码块的说明部分。

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

  

兼容性问题

  在IE8的早期版本中可能无法使用某些新增元素。

  需要下载HTML5 Shiv脚本

  然后在<head>部分插入下面的代码:

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

  

 

时间: 2024-11-05 18:30:11

回顾HTML5的语义化元素的相关文章

浅谈html语义化标签,Html5新增语义化标签

Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签. 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等. 2.为啥使用语义

HTML5 语义化元素

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

HTML5之语义化标签

在HTML5之前采用HTML+CSS文档结构写法: ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域) class选择器说明 class类选择器——可以应用于页面任意多个元素,非常适合标识内容类型或其他相似的条目. 代码: <body> <div id="header">...</div> <div id="nav">...

html5中语义化标签以及兼容性处理方法

1.html5中新增的语义化标签: artical footer header nav section aside 2.在IE8和IE8以下浏览器不支持以上新增的语义化标签 3.解决方案 方案1:在浏览器解析前动态创建标签元素,然后转成块级元素 例如: document.createdElement("header") 方案2:通过引入html5shiv.js插件动态创建元素 <!-- 小于等于 ie 8 才进行引包, 用于兼容 html5 语义化标签 --> <!-

HTML5常用语义化标签&amp;表单类型&amp;表单属性

HTML5语义化标签 1.<article>表示包含一个文档.页面.应用程序或网站中的一段独立的内容,也就是说,它能够独立地被发布或重新使用.可适用的地方有:一篇博客.一个论坛帖子.一篇新闻报道.一个用户评论... 2.<header>一般被放置在页面的顶部,或者页面中某个区块元素的顶部,包含整个页面或某个区块的标题.简介等信息. 一个文档中可以包含多个header标签header标签不一定只能显示在页面的上方,它的内容决定该地方是否需要使用header标签可以为body.arti

文本元素、语义化元素

元素 文本元素 h1-h6 :一级标题~6级标题 p:段落 blockquote:整段的引用 cite:对参考文献的引用 当做标签来用的时候:用于资料文献引用 当做属性来用的时候:表示引用内容的出处(来源),浏览器会忽略,但是屏幕阅读器是可以识别的 q:小段文本的引用 对引用的文本自动加上双引号 abbr对缩写词的引用 显式缩写的内容(关键词),title属性是鼠标移上去(悬停)的时候显式的内容 strong:重要的文本 文本加粗,语音阅读浏览器会着重阅读strong标签 em:强调的文本 b:

HTML5的全新语义化元素

1.<section> <section>元素用来定义文档或应用程序中的区域(或节).例如,可以用它组织你的个人信息,一个<section>用于联系信息,另一个用于新闻动态.需要重点理解的是用它的目的不是为了美化样式.如果你只想将某个元素包裹起来以便设置样式,那应该和以前一样继续使用<div>. 2.<nav> <nav>元素用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域.因为<nav>用于主导航区域

html5新增语义化标签

注意:body.section.nav 需要h1-h6. div.header则不需要. 1):<article> 显示一个独立的文章内容. 例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等.artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系. 例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中. <article> <h1>文章标题</h1> 这是一篇文章

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

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