HTML5新增的结构元素 详解

这篇文章我们不老生常谈的讲基础的HTML 就讲讲H5中新添加的一些知识

?首先废话不多说 先来看看H5添加了那些新的结构元素

标签 说明
header 页面或页面中某一个区块的页眉,通常是一些引导和导航信息。
nav 可以作为页面导航的链接组
section 页面中的一个内容区块,通常由内容及其标题组成
article 代表一个独立的、完整的相关内容块,可独立于页面其它内容使用
aside 非正文的内容,与页面的主要内容是分开的,被删除而不会影响到网页的内容
footer 页面或页面中某一个区块的脚

?看完以上的标签我们发现 这些标签本身并没有其特殊的功能 其实万能的DIV就可以完成这些事情 为什么还要在H5中添加这些标签那?

这里要提到 语义化标签 这个概念,回想一下,我们通常用的div来完成的网页结构,一般我们都会用 id class来标识

这些元素的用途,但是从机器搜索引擎的角度出发,它并不认识这些div元素具体是用来做什么的,因为它看不懂这些id class的意义,所以 为了能够让机器理解这些元素的意义,我们就会用这些语义化标签来代替之前的div布局方式 这样的网页结构对于搜索引擎更加友好,使得网页内容能够更好的被搜索引擎抓取。

我们用一个比较暴走漫画的网站来更直观的说明这些标签的作用

在没有语义化标签之前的做法是

在有了语义化标签后的做法是

时间: 2024-10-26 23:53:04

HTML5新增的结构元素 详解的相关文章

HTML5新增的结构元素

HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档,页面或应用程序中独立的完整的,可以独自被外部引用的内容,<article> 标签定义外部的内容.article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联, 另外article元素也可以用来表示一个插件. <time> 标签定义日期或时间,或者两者.pubdate

《Web前端笔记2.10-2.11》 HTML5 新增的结构元素

课程背景: 在 HTML5 中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的元素. 核心内容:1.Article2.Section3.Nav4.Aside5.Time6.Pubdate 7. header 元素8. footer 元素9. hgroup 元素10. address 元素 article 元素 article 元素代表文档,页面或应用程序中独立的.完整的.可以独自被外部引用的内容. section 元素 本课时讲解 HMTL5 新增的主体结构元素

HTML5 中的Nav元素详解

什么是Nav元素 Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要的.基本的.重要的放在nav元素里面即可. 比如说页脚底部如果有个版权申明,我们就不建议使用nav元素,而是使用footer元素是最合适的.一个页面中我们可用多个nav元素作为整体或者不同部分的导航 nav元素的用法 <body> <h1>nav的使用方法</h1> <

Android目录结构(详解)

Android目录结构(详解) 下面是HelloAndroid项目在eclipse中的目录层次结构: 由上图可以看出项目的根目录下共有九个文件(夹),下面就这九个文件(夹)进行详解: 1.1src文件夹和assets文件夹: 每个Android程序都包含资源目录(src)和资产目录(assets),资源和资产听起来感觉没有多大差别,但在存储外部内容时用资源(src)比较多,其中它们的区别在于存放在资源(src)下的内容可以通过应用程序的R类进行访问,而存放在资产(assets)下的内容会保持原始

NetBios 的结构体详解(网络控制块NCB)

对之前网络基础编程用到控制块NCB进行介绍(补充): 在Win32环境下,使用VC++6.0进行NetBIOS程序开发时, 需要用到nb30.h文件和netapi32.lib静态链接库.前者定义了NetBIOS的所有函数声明和常数定义,后者定义了NetBIOS应用. Ncb的结构在nb30.h文件中定义.Ncb结构的定义:Ncb有64个字符,分为14个域(或称为字段)和一个10字节的保留域,表2.1显示了Ncb和它的域. 域名及字节偏移量说明. 各个命令详细说明: 1. 命令 NetBIOS命令

史上最全web.xml配置文件元素详解

一.web.xml配置文件常用元素及其意义预览 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></display-name> 5 6 <!--声明WEB应用的描述信息--> 7 <description></description> 8 9 <!--context-param元素声明应用范围内的初始化参数--> 10 <context-param&g

NetBios 的结构体详解

[NetBios 的结构体详解] 1.结构体. 2.命令 NetBIOS命令的使用方式有两种,即等待和非等待(或称为同步与异步)方式. 如果命令码的高阶位是0时是等待方式,命令将阻止提交命令的应用程序继续执行,直到该NetBIOS命令执行完毕后才允许这个应用程序继续执行.NetBIOS每次只能处理一个等待方式命令. 如果命令码的高阶位是二进制1时则是非等待方式,命令由NetBIOS在内部排队,并不阻止提交命令的应用程序继续执行.应用程序可通过对命令结束标志字段值的轮询来了解命令执行的状态(详见命

web.xml配置文件元素详解

一.web.xml配置文件常用元素及其意义 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></display-name> 5 6 <!--声明WEB应用的描述信息--> 7 <description></description> 8 9 <!--context-param元素声明应用范围内的初始化参数--> 10 <context-param>

web.xml配置文件元素详解(转载)

今天看到一篇关于web.xml配置文件元素的博文,觉得很全面,这里引用过来,方便学习和查询. http://www.cnblogs.com/hafiz/p/5715523.html 一.web.xml配置文件常用元素及其意义预览 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></display-name> 5 6 <!--声明WEB应用的描述信息--> 7 <description&g