HTML5的新的结构元素介绍
HTML5的新的结构元素介绍
一、HTML5与HTML4的区别
1. 取消了一些过时的HTML4的标签
其中包括纯粹显示效果的标记,如<font>
和<center>
,它们已经被 CSS
完全取代。
其他取消的属性:acronym
, applet
, basefont
, big
, center
, dir
, font
, frame
, frameset
, isindex
, noframes
, strike
,tt
2. 添加了一些新的元素
更加智能的表单元素:date
, email
, url
等; 更加合理的标签:<section>
, <video>
, <progress>
, <nav>
, <meter>
,<time>
, <aside>
, <canvas>
等。
3. 文件类型声明
仅有一种类型,<!DOCTYPE html>
二、HTML5的新结构标签
在讲这些新标签之前,我们先看一个普通的页面的布局方式:
以上是很常见的div
+css
布局模式,通过class
来区分不同的结构,包括头部、导航、文章内容、右边栏,还有底部模块。
而HTML5新标签带来的新的布局则是下面这种情况:
代码如下:
<!DOCTYPE html>
<html><head> <title>my page</title> </head> <body> <header>header</header> <nav>nav</nav> <article> <section>section</section> </article> <aside>aside</aside> <footer>footer</footer> </body> </html>
拥有具体含义的标签,使得代码有很直观的感受,搜索器也能很容易地抓取合适的信息。
下面介绍HTML5中相关的结构标签
<section>
定义文档中的节。它用来表现普通的文档内容或应用区块,但section
元素标签并非一个普通的容器元素,它表示一段专题性的内容,一般会带有标题。
<section><h1>section是什么?</h1> <h2>一个新章节</h2> <article> <h2>关于section</h2> <p>section的介绍</p> ... </article> </section>
<article>
特殊的section
标签,它比section
具有更明确的语义,它代表一个独立的、完整的相关内容块。当我们描述一件具体的事物的时候,通常鼓励使用article
来代替section
。
article
会有标题部分(通常包含在header
内),也可以包含footer
。
article
可以嵌套,内层的article
对外层的article
标签有隶属关系。
<article><header><hgroup> <h1>这是一篇介绍HTML 5结构标签的文章</h1> <h2>HTML 5的革新</h2> </hgroup> <time datetime="2011-03-20">2011.03.20</time> </header> <p>文章内容详情</p> </article>
<nav>
可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分,使html代码在语义化方面更加精确,同时对于屏幕阅读器等设备的支持也更好。
<nav><ul><li>厚德IT</li> <li>FlyDragon</li> <li>J飞龙天惊</li> </ul> </nav>
<aside>
aside
标签用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告,成组的链接,侧边栏等等。
<aside><h1>作者简介</h1> <p>厚德IT</p> </aside>
<header>
header
标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。
通常header
标签至少包含一个标题标记(h1
-h6
),还可以包括hgroup
标签,还可以包括表格内容、标识、搜索表单、nav
导航等。
<header><hgroup><h1>网站标题</h1> <h1>网站副标题</h1> </hgroup> </header>
<footer>
footer
标签定义section
或document
的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。 它和header
标签使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入footer
,那么它就相当于该区段的页脚了。
<footer>页脚信息
</footer>
<hgroup>
hgroup
标签是对网页或区段section
的标题元素(h1
-h6
)进行组合。例如,在一区段中你有连续的h系列的标签元素,则可以用hgroup
将他们括起来。
<hgroup><h1>这是一篇介绍HTML 5结构标签的文章</h1> <h2>HTML 5的革新</h2> </hgroup>
<figure>
用于对元素进行组合。多用于图片与图片描述组合。
<figure><img src="img.gif" alt="figure标签" title="figure标签" /> <figcaption>这儿是图片的描述信息</figcaption> </figure>
HTML5的新的结构元素介绍相关推荐
- 下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍
HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...
- HTML5基础 | (3)HTML常用元素介绍
目录 一.段落.标题与格式化文本 1.段落标签 2.标题标签 3.格式化标签 二.行内文本标签详解 三.数据展示利器--表格 四.生动网页之源--图片元素 五.有序列表与无序列表 1.有序列表 2.无 ...
- 下列不属于html5语义元素,HTML5 新的语义元素
HTML5 提供了新的语义元素来明确一个Web页面的不同部分: HTML5中新的语义元素 HTML5 元素 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 根据W ...
- html5添加新标签,HTML5新添加的标签及用
HTML5和HTML其实是很类似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只需有html+css基础即可以,今天知识看了下新的标签. 一.定义文档类型 在文件的开头总是 ...
- HTML5新标签-结构标签、表单元素、媒体标签
文章目录 新的结构标签 新的表单元素 新的媒体标签 1. audio 音频标签(src controls autoplay loop muted) 2.video 视频标签(src controls ...
- 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...
- HTML5 新增结构元素分为主体结构元素和非主体结构元素
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介 ...
- html5语义化标记元素_语义HTML5元素介绍
html5语义化标记元素 Semantic HTML elements are those that clearly describe their meaning in a human- and ma ...
最新文章
- C语言的变量的内存分配
- 有了这个科研思路,高水平SCI就在手边!
- 学JS的心路历程Day28 - PixiJS -基础(二)
- 牛客小白赛190615场
- MYSQL中只知表名查询属于哪个SCHEMA
- linux对于zombie的处理
- 怎么更好掌握Web前端技术?JS的跨域是怎么回事?
- 中rsa非对称加密_HTTP的数据传输中,对称加密和非对称加密的区别是什么?
- collectionutils包_基于springframework的集合处理工具类CollectionUtils对常见对象查找包含转换操作...
- SDN 技术介绍整理 学习网站 - (持续更新)
- esxi7.0 打包网卡驱动
- zui之0001 npm install zui
- 牛逼程序员职业提升必看的书
- 计算机网络宽带越大 网速越快,100M宽带, 网速却很慢, 测速只有60M? 一分钟学会解决办法...
- 让宝宝长高的四大要素
- python计算时间加减,python datetime库使用和时间加减计算
- 皇家墨尔本理工大学计算机科学专业,皇家墨尔本理工大学计算机科学本科专业.pdf...
- 通达信一根均线变色主图指标公式,实现均线向上向下变色
- 多目标跟踪DeepSort
- Pyhthon3《机器学习实战》学习笔记二:决策树
热门文章
- ping命令的作用。
- JavaSE学习总结(八)—— 异常处理(Exception)
- 远程服务异常处理的实践之一:客户端
- webpack+vue解决前端跨域问题
- object references an unsaved transient instance - save the transient instance before flushing异常问题处理
- 【问题解决方案】git clone失败的分析和解决
- 我可以在输入字段上使用:before或:after伪元素吗?
- 什么是在Vim中评论/取消注释行的快速方法?
- win11系统卡死怎么办 Windows11系统卡死的解决方法
- mac 图形化安装mysql,mac安装mysql图形化工具?