article 元素与 section 元素
<article> <header> <h1>主体结构元素</h1> </header> <section> <h2>article 元素</h2> <ul> <li>article 元素代表文档、页面或应用程序中的独立的、完整的、可以独自被外部引用的内容。</li> <li>article 元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。</li> <li>article 元素也可以用来表示插件,它的作用是使插件看起来好像内嵌在页面中一样。</li> </ul> </section> <section> <h2>section 元素</h2> <ul> <li>section 元素用于对网站或应用程序中页面上的内容进行分块。</li> <li>section 元素通常由内容及标题组成。</li> <li>article 元素可以看成是一种特殊的section 元素,它比section 元素更强调独立性,而section 元素强调分段或分块。</li> </ul> <article> <header> <h3>关于section 元素的使用禁忌总结:</h3> </header> <ol> <li>不要将section 元素用作设置样式的页面容器,这是div元素的工作。</li> <li>如果article 元素、aside 元素或nav 元素更符合使用条件,不要使用section 元素元素。</li> <li>不要为没有标题的内容区块使用section 元素。</li> </ol> </article> </section> <footer> <em>除了内容部份,一个article 元素通常有它自己的标题(一般放在 header 元素里面),有时还有自己的脚注。</em> </footer> </article>
nav 元素
nav 元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。只需要将主要的、基本的链接组放进该元素即可。
nav 元素可以用应用的场合包括:传统导航、侧边栏导航、页内导航、翻页操作等。
注意: 在HTML5中不要使用 menu 元素代替 nav 元素。menu 元素是用在一系列发出命令的菜单上的,是一种交互性的元素。
aside 元素
aside 元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。
aside 元素的主要用法:
- 被包含在 article 元素中作为主要内容的附属信息部分,其中的内容可以是与当前文档有关的参考资料、名词解释等。
- 在 article 元素之外使用,作为页面或站全局的附属信息部分。
time 元素
time 元素代表24小时中的某个时刻或某个日期,表示时刻时允许带时差,可以包括如下格式。
<time date="2010-11-13">2010年11月13日</time> <time date="2010-11-13">11月13日</time> <time date="2010-11-13">我的生日</time> <time date="2010-11-13T20:00">我生日的晚上8点</time> <time date="2010-11-13T20:00Z">我生日的晚上8点</time> <time date="2010-11-13T20:00+09:00">我生日的晚上8点的美国时间</time>
说明: 日期与时间之间要用“T”字符隔开;以“Z”结尾的格式表示使用UTC标准时间编码;最后一种格式为添加时差。
time 元素的“pubdate”是一个可选的 boolean 型属性,可以用在article 元素中的 time元素上,表示具体发布日期。
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1717绘制变形图形 坐标变换 绘制图形的时候,我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1143UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1339绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1760选择器概述 选择器是CS ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1451使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1565canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1552CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 获取地理位置信息
2011-11-01 18:12 5450Geolocation API的基本知识 在HTML5中,为 ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4706基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4180基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 2058基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1902applicationCache对象 application ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1611离线Web应用程序介绍 在HTML5中新增了一个API,为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2630本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1649Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1256video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1755音频和视频元素的属性 这两种元素所具有的属性大致相同,介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 976video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4979在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ...
相关推荐
#### HTML5结构元素 ##### Section `<section>` 元素用于表示文档或应用程序中的一个独立部分,通常包含一组相关的子节。它可以代表一个章节、页眉、页脚或文档中的任何其他部分。例如,在博客文章中,每个文章...
以下是对这些新增非主体结构标签的详细解释: 1. **header** 标签: `<header>` 标签用于定义页面或某个内容区域的头部,通常包含站点的标题、logo、导航菜单等元素。它不仅可以用在整个页面的顶部,还可以用在...
本篇文章主要关注HTML5中的非主体结构标签,这些标签主要用于组织和增强页面的辅助内容。 首先,`<header>`标签是页面顶部区域的容器,它用于包含网站的标志、导航菜单、搜索表单等关键信息。`<header>`标签不仅...
13.2 新增的非主体结构元素 251 13.2.1 header元素 251 13.2.2 hgroup元素 252 13.2.3 footer元素 252 13.2.4 address元素 253 13.3 小结 253 13.4 习题 254 第14章 HTML 5中的表单 255 视频讲解...
今天先介绍下 html5 新增的结构元素,有的经常使用到,有的用不上,虽然说它们的出现是更促进页面更有语义,更好的 seo,但其实...HTML5 新增结构元素分为主体结构元素和非主体结构元素 1.主体结构元素包括 article、se
全书共16章:第1章介绍了HTML5文档的基本组成、全局结构、主体,以及新旧元素对比;第2章和第3章讲解了CSS的样式设置、框模型,以及CSS3的核心属性和新规则;第4章重点介绍了JavaScript的核心知识;第5章详细介绍了...
2. **合理性**:HTML5新增的标签,如`<header>`、`<footer>`、`<article>`等,是根据实际网页设计和开发的常见模式提出的。这些标签直接反映了网页内容的结构,使得文档结构更加清晰,便于理解和维护。 3. **易用性...
HTML5 中新增了许多新特性,例如 datetime、file、range、email 等 input 类型。 5. CSS 样式 在 CSS 中,文本修饰的取值 text-decoration:overline 表示上划线。CSS 样式可以用于设置网页的布局、颜色、字体等...
HTML5的结构和语义性块级元素是其对网页设计和开发的重要改进,旨在提高内容的可读性和机器可解析性。在这篇文章中,主要关注了三个新增的语义化块级元素:`aside`、`figure` 和 `dialog`。 首先,`aside` 元素用于...
在课程中,你将了解到HTML5如何组织网页结构,包括头部(head)、主体(body)和元数据(metadata)的使用。 1.1 软件架构分类: 在了解HTML5之前,我们需要知道软件架构的两种主要类型:C/S架构(Client/Server)...
- **版本**:仅在HTML5中新增。 ##### 10. `<aside>` - **功能**:定义页面内容之外的相关信息,如侧边栏。 - **版本**:仅在HTML5中新增。 ##### 11. `<audio>` - **功能**:定义声音内容,用于播放音频文件...
2.HTML5 新增的主体结构元素 3.HTML5 新增的的非主体结构元素 4.HTML5 表单新增元素与属性 5.HTML5 表单新增元素与属性(续) 6.HTML5 改良的 input 元素的种类 7.HTML5 增强的页面元素 8.HTML5 编辑 API 之 Range ...
HTML5新增了许多语义化更强的元素,使网页结构更加清晰明确。下面是一些常用的元素及其用途: - **`<header>`**:定义一个页面或者节(section)的头部。它可以包含导航链接、logo等信息。 - **`<nav>`**:用于...
HTML5不仅保持了HTML4的核心功能,还新增了许多特性来支持多媒体、图形绘制、离线存储等功能,极大地提升了Web应用的表现力和可用性。 #### 二、HTML5的基本结构 HTML5文档的基本结构包含以下几个主要部分: 1. **...
1. 学习如何编写HTML5文档结构,包括DOCTYPE声明、头部元信息、导航、主体内容和页脚。 2. 使用HTML5的新元素来组织内容,如创建文章、侧栏、导航菜单等。 3. 掌握CSS3的选择器,为不同类型的元素设置不同的样式。 4...
此外,HTML5对表单控件进行了改进,新增了日期选择器、颜色选择器等,并支持输入验证,提高了用户体验。 二、HTML5核心技术 1. Canvas:HTML5的Canvas元素提供了一个在网页上绘制图形的API,通过JavaScript可以动态...
1. **基础语法**:熟悉HTML5的基本语法结构,包括文档类型声明、头部信息、主体内容等。 2. **新标签和属性**:重点掌握HTML5中新引入的标签和属性,理解其用途和应用场景。 3. **实践项目**:通过实际动手制作...
首先,HTML5引入了许多新的标签和元素,如、、、、等,这些结构性标签大大提高了代码的语义性,使得网页内容的组织更加清晰,对于搜索引擎优化(SEO)也十分有利。例如,在设计博客时,可以使用定义头部,用于导航,...
1. HTML5新增主体元素结构: - article元素:用于定义页面中独立的、自成一体的内容区域。article元素内的内容应该与页面其他内容相对独立。 - section元素:表示文档中的一个区域,用于将页面内容划分为不同的...
HTML5新增的一些重要标签包括、、、、等,它们帮助定义网页的结构性元素。同时,HTML5强化了对音频和视频的支持,通过`<audio>`和`<video>`标签可以直接在网页中嵌入媒体内容,无需额外插件。 此外,HTML5还引入了...