博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5的新的结构元素介绍
阅读量:6575 次
发布时间:2019-06-24

本文共 2021 字,大约阅读时间需要 6 分钟。

HTML5的新的结构元素介绍

一、HTML5与HTML4的区别

1. 取消了一些过时的HTML4的标签

其中包括纯粹显示效果的标记,如<font><center>,它们已经被 CSS完全取代。

其他取消的属性:acronymappletbasefontbigcenterdirfontframeframesetisindexnoframesstrike,tt

2. 添加了一些新的元素

更加智能的表单元素:dateemailurl等; 更加合理的标签:<section><video><progress><nav><meter>,<time><aside><canvas>等。

3. 文件类型声明

仅有一种类型,<!DOCTYPE html>

二、HTML5的新结构标签

在讲这些新标签之前,我们先看一个普通的页面的布局方式:

Alt text

以上是很常见的div+css布局模式,通过class来区分不同的结构,包括头部、导航、文章内容、右边栏,还有底部模块。

而HTML5新标签带来的新的布局则是下面这种情况:

Alt text

代码如下:

     my page   
header
section
footer

拥有具体含义的标签,使得代码有很直观的感受,搜索器也能很容易地抓取合适的信息。

下面介绍HTML5中相关的结构标签

<section>

定义文档中的节。它用来表现普通的文档内容或应用区块,但section元素标签并非一个普通的容器元素,它表示一段专题性的内容,一般会带有标题。

section是什么?

一个新章节

关于section

section的介绍

...

<article>

特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块。当我们描述一件具体的事物的时候,通常鼓励使用article来代替section

article会有标题部分(通常包含在header内),也可以包含footer

article可以嵌套,内层的article对外层的article标签有隶属关系。

这是一篇介绍HTML 5结构标签的文章

HTML 5的革新

文章内容详情

<nav>

可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分,使html代码在语义化方面更加精确,同时对于屏幕阅读器等设备的支持也更好。

<aside>

aside标签用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告,成组的链接,侧边栏等等。

<header>

header标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。

通常header标签至少包含一个标题标记(h1-h6),还可以包括hgroup标签,还可以包括表格内容、标识、搜索表单、nav导航等。

网站标题

网站副标题

footer标签定义sectiondocument的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。 它和header标签使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入footer,那么它就相当于该区段的页脚了。

页脚信息

<hgroup>

hgroup标签是对网页或区段section的标题元素(h1-h6)进行组合。例如,在一区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

这是一篇介绍HTML 5结构标签的文章

HTML 5的革新

<figure>

用于对元素进行组合。多用于图片与图片描述组合。

figure标签
这儿是图片的描述信息

转载地址:http://nwgjo.baihongyu.com/

你可能感兴趣的文章
python异常处理,日志处理
查看>>
COMMON INTERVIEW QUESTIONS
查看>>
HDU1164 Eddy's research I(解法二)
查看>>
UVA11192 Group Reverse
查看>>
UVA10603 Fill
查看>>
fwt模板
查看>>
立即执行函数: (function(){...})() 与 (function(){...}()) 有什么区别?
查看>>
sth else special(json distribution)
查看>>
如何让 height:100%; 起作用
查看>>
Java中list在循环中删除元素的坑
查看>>
[转]100个常用的linux命令
查看>>
cocos creator destroy方法
查看>>
第二课 HTML+CSS
查看>>
time random sys os模块
查看>>
第一章 台达组态软件的基本介绍
查看>>
DOM_04之常用对象及BOM
查看>>
LOJ#2085 循环之美
查看>>
Leetcode | Longest Common Prefix
查看>>
Filter实现用户自动登录
查看>>
第十九天笔记
查看>>