第2章 —— HTML 5 的结构

在HTML 5对HTML 4所做的各方面修改中,一个比较重大的修改就是为了使文档结构更加的清晰明确,容易阅读,增加了很多新的结构元素。

(1) 新增的主题结构元素

1. article元素

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一片论坛体诶、一段用户评论或一个独立的插件。

除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里)。

 <article>
        <header>
            <h1>苹果</h1>
            <p>发表日期:<time>2016-10-29</time></p>
        </header>
        <p><b>苹果</b>,植物类水果</p>
        <footer>
            <p><small>著作权归罗浩然公司所有。</small></p>
        </footer>
    </article>

2. section元素

section元素用来对网站或应用程序中页面上的内容进行分块,一个section元素通常有内容和标题组成。但section并非是一个普通的容器元素。当一个容器需要直接定义样式或通过脚本定义行为是,推荐使用div。

我们也可以这样理解:section元素中的内容可以单独存储到数据库中或输出到word文档中。

通常不推荐为那些没有标题的内容使用section元素。

我们来看看section和article的区别和联系:

<article>

        <h1>苹果</h1>

        <section>
            <h2>红富士</h2>
            <p>红富士是容普通富士..</p>
        </section>
        <section>
            <h2>国光</h2>
            <p>国光苹果,又名小国光...</p>
        </section>
    </article>

该文章每一个部分都有一个独立的标题,因此使用了两个section元素。

在HTML 5中,article元素可以看做成特殊的section元素,它比section元素更加强调独立性。section强调分段或者分块。具体来说,如果一段内容比较完整、独立的时候,使用article。而将一块内容分为几块的时候,用section元素进行分段。

3. nav元素

nav元素是一个可以用来作为页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。

4. aside元素

aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。

① 包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的参考资料、名词解释等。

② 在article之外使用,作为页面或站点全局的附属信息部分。

(2) 新增的非主体结构元素

1. header元素

header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容。

需要强调的一点是,一个页面不限制只有一个header元素。你可以为每一个内容区域加上一个header。

在HTML5中,一个header元素通常至少要包含一个heading(h1~h6),也可以包括hgroup元素,还可以包含nav。

2. footer元素

footer元素可以作为其上层父级内容区域或一个根区块的脚注。footer通常包括相关区块的脚注信息,如作者、相关订阅链接以及版权信息等。

3. address元素

address元素用来在文档中呈现联系信息。address应该不只是用来呈现电子邮箱或真实地址,还可以用来展示跟文档相关的联系人的所有联系信息。

4. main元素

main元素表示展示网页中的主要内容。

每个网页内部只能放置一个main元素。不能将main元素放在任何article、aside、footer、header或者nav元素内部。

时间: 2024-10-13 13:59:19

第2章 —— HTML 5 的结构的相关文章

Java-第三章-使用if选择结构实现,如果年龄够7岁或5岁并且是男,可以搬桌子

import java.util.*; public class lianxi72 { public static void main(String[] args) { // TODO Auto-generated method stub Scanner inport = new Scanner(System.in); System.out.println("请输入年龄:"); int age =inport.nextInt(); System.out.println("请输

第三章 Matlab的选择结构

第三章 Matlab的选择结构 3.1 程序编写的一般步骤 3.2 关系运算符 1) 0表示假,非0表示真: 2) ~=:不等于: 3) sin(pi) ~= 0:为1,比较a.b两个数是否相等方法:abs(a - b)<1.0e-14 3.3 逻辑运算 1) 先与&后或| 3.4 逻辑函数与短路运算 1) 短路运算:&&.||:非短路运算:&.| 2) ischar(x).isempty(x).isinf(x).isnan(x):是否不是数.isnumeric(x)

第四章 Matlab的循环结构

第四章 Matlab的循环结构 4.1 while循环 while expression code_block end 4.2 while循环举例 1) mean(a):均值,其中,a = [1 2 3 4 5 6 7 8 9] 2) std(a):标准差 4.3 for循环 1) 形式 for index=expr code_block end index是循环指数,它读取数组expr的列数,expr有多少列,循环就执行多少次,expr最常见的就是冒号表达式. 如:for ii=1:2:10 

第三章 数据决定程序结构

本章主要讲解一个合适的数据结构对一个程序的重要性.一个好的数据类型能够节省开发时间也能够节省内存的消耗. 文末总结一下四点: 1.使用数组重新编写重复代码.在现在的变成中主要用到的是list.map之类的数据结构来代替数组. 2.封装复杂结构.抽象bean. 3.尽可能使用高级工具.超文本.名字-值对.电子表格.数据库.编程语言等都是特定问题领域中的强大的工具.由于本书出版的年份较早,这里提到的基本都是日常开发需要用到的.比较新的工具redis在现在工程中刚接触到.也是基于键-值对的形式存储数据

Java 第三章 运算符和条件结构 笔记

一.保存真或假,使用boolean变量      有两个值:true 真                  false 假 二.从控制台接受输入信息,通过创建扫描器     Scanner input new Scanner(System.in);     int age input.nextInt();//接收int类型     String name=input.next();//接收Strin类型 三.关系运算符     > < >= <= == != 四.==和=的区别  

第六章 程序设计基础 循环结构

循环结构的程序设计 第一部分:     总结 1.构成循环结构的三种循环语句为: Switch语句.do_switch语句.for语句.一般,用某种循环语句写的程序段,也能用另外两种循环语句实现. 2. switch语句和for语句属于当型循环(先判断,后执行),而do_switch语句则属于直到型循环(先执行,后判断). 3.for语句多用于循环次数明显的问题,而无法确定循环次数的问题采用while语句或do_while语句比较自然. 4.for语句的三个表达式有多种的变化. 5.break使

(数据结构第六章)二叉树的顺序存储结构

二叉树的五条性质: 1.在二叉树的第i层上至多有2^(i-1)个节点(i>=1) 2.深度为k的二叉树至多有2^k-1个节点(k>=1) 3.对任何一个二叉树T,如果其终端节点数为n0,度为2的节点数为n2,则n0=n2+1. 证:总结点数n=n0+n1+n2 设分支总数B,n=B+1 B=n1+n2:两式加减即证出. 补充个定义:节点拥有的子树数称为节点的度. 树的度是树内各节点度的最大值. 4.具有n个节点的完全二叉树的深度为floor(log(2)n)+1 5.如果对一颗有n个节点的完全

第二章:Javascript词法结构

编程语言的词法结构是一套基础性的规则,用来描述你如何编写这门语言.作为语法的基础,它规定了变量名是怎么样的,如何写注释,以及语句之间是如何区分的.本节用很短的篇幅来介绍javascript的词法结构. 1.字符集 javascript程序是用Unicode字符集编写的,Unicode是ASCII和Latin-1的超集,并支持地区上几乎所有的语言.ECMAscript3要求javascript的实现必须支持Unicode2,1及后续版本,ECMAscript5则要求支持Unicode3及后续版本

【带你从零开始,开发一个阅读站】第三章,数据库表结构

整个项目只有四张表 book-书籍主表,记录书籍的详情信息,包括类别,作者描述等 type-类别表,书籍类别管理 menu-目录章节表 properties-配置表 book表是书籍主表 code:用于图书code记录,可认为该字段能确定图书唯一 typeId:关联type表主键id,标识图书类别 title:书名 author:作者 lastMenuId:最新章节目录,关联menu表主键id description:图书描述 originalUrl(废弃不用) imageUri:图片地址,这个

第一章: 新的结构化元素

事实再一次证明了,选一本好的书是多么的重要啊!弃掉一开始的坑,换一本书来继续我们的学习吧. (1) 结构化构建块 div: 这是我们都知道且喜爱的一种一般性容器.它是一种无附加语义含义的流式内容元素. section: 这是文档或应用程序的一般性小节. article: 这是文档或网站的一个独立的小节. 听起来十分的相似对吧?确实.但是我们区分一下: div是没有任何的语义的,比如<div class="nav">和<div class="mick"