简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

HTML5 新增结构元素

WBOY
Release： 2016-05-17 09:08:17
Original
2000 people have browsed it
HTML5 新增结构元素分为主体结构元素和非主体结构元素
•主体结构元素包括 article、section、nav、aside、time
•非主体结构元素包括 header、hgroup、footer、address

一、主体结构元素
article
article 标签，从语义化上看为文档、页面，其用法如下：
•通常是一篇文章、一个页面、一个独立完整的内容模块
•一般会带个标题，并放在 header 标签中
•article 元素可以互相嵌套
使用频率极高，强调独立性，多注意下与 header 标签的使用。
 

HTML5 新增结构元素

section
section 标签，从语义化上看为部分，其用法如下：

•用于页面内容的独立分块，往往是文章的一段
•通常由内容和标题组成，没有标题的内容不推荐使用 section
使用频率低，强调分段分块。

HTML5 新增结构元素

nav
nav 标签，从语义化上看为导航，其用法如下：

•通常作为页面导航的链接组
•侧边栏导航
使用频率高。

HTML5 新增结构元素

aside
aside 标签，从语义化上看为在旁边、侧边，其用法如下：

•在 article 标签中使用时，作为主要内容的附属信息部分，如有关的参考资料、名词解释等。
•在 article 标签外使用时，作为页面或者站点全局的附属信息部分，如侧边栏、博客的友情链接部分、广告区域等。

HTML5 新增结构元素

time
time 标签，从语义化上看为时间，其用法如下：

•代表 24 小时中的某个时刻或某个日期
•表示时刻时允许带时间差
•可定义很多格式的日期和时间
使用频率低。

HTML5 新增结构元素

12下一页

Related labels：
HTML5教程 HTML5中国 HTML5 新增结构元素 html5cn html5资料 html5文章 html5内容
source：php.cn
Previous article：一组免费的响应式 HTML5 & CSS3 网站模板 Next article：HTML5新增的结构元素
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Regular expression filter for MERN stack search boxes and checkboxes I'm trying to understand how the MERN stack works together by learning by doing, and I'm f...
From 2024-04-06 14:53:12
0
1
425
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
Prestashop installation issue: Unable to install custom module I am new to Prestashop module development. I'm trying to build Amy's first prestashop modu...
From 2024-04-03 19:24:44
0
1
402
PHP Tutorial: How to upload text and images to Linkedin using PHP? I try to upload text, images and links using LinkedinsRestAPI (https://learn.microsoft.com...
From 2024-04-03 18:42:29
0
1
420
Unable to receive information from my mySQL database despite having seen tutorials doing the exact same thing So I'm trying to make a program that reads and writes to a MySQL database, which led me to...
From 2024-04-03 14:46:04
0
1
298
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！