《Web前端开发》课程理论教学部分 第六讲:HTML5的结构与属性 学时计划:2学时理论,2学时实验 (实验二:创建第一个网站) 教学大纲: 1、结构之美:从HTML4到HTML5 2、主体结构元素 3、非主体结构元素 4、HTML5常用元素 5、超链接 6、讨论与思考 为了提高文档结构的清晰度,使其文档更加容易阅读,HTML5 新增了许多文档结构元素。 本讲详细介绍新增加的文档结构元素,并介绍这些元素的定义 使用方法和使用示例。 结构之美:从班4到HML5 1.1表格布局 在HTML4中,当需要总体规划设计一个页面时,通常使用表格 进行布局。使用表格进行页面布局,主要是通过对单元格的拆分和合 并以及表格嵌套,实现页面规划和布局。 使用表格进行布局典型结构如图6-1所示。 table tr td table tr td table tr td Sub table tr td Sub table tr td table tr td 图6-1tabe进行页面布局 5lxueweb.cn
1 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 《Web 前端开发》课程理论教学部分 第六讲：HTML 5 的结构与属性 学时计划：2 学时 理论，2 学时 实验 （实验二：创建第一个网站） 教学大纲： 1、结构之美：从 HTML 4 到 HTML 5 2、主体结构元素 3、非主体结构元素 4、HTML 5 常用元素 5、超链接 6、讨论与思考 为了提高文档结构的清晰度，使其文档更加容易阅读，HTML 5 新增了许多文档结构元素。 本讲详细介绍新增加的文档结构元素，并介绍这些元素的定义、 使用方法和使用示例。 一、结构之美：从 HTML 4 到 HTML 5 1.1 表格布局 在 HTML 4 中，当需要总体规划设计一个页面时，通常使用表格 进行布局。使用表格进行页面布局，主要是通过对单元格的拆分和合 并以及表格嵌套，实现页面规划和布局。 使用表格进行布局典型结构如图 6-1 所示。 图 6-1 table 进行页面布局
1.2DIV+CSS页面布局 在ⅫHTML1.0之后,W3C开始大力推行Web标准,开发工程师基 本上都是用了DIV+CSS的布局方式,也叫做区块布局。但是,搜索引 擎去抓取页面的内容的时候,它只能猜测某个DIV内的内容是文章内 容容器,或者是导航模块的容器,或者是作者介绍的容器等等,整个 HTML文档结构定义的非常不清晰,仅仅是在展示和页面解析性能上 的到了提升。 使用区块进行布局典型结构如图6-2所示。 图6-2区块进行页面布局 1.3HTML5结构 HTML5新增了许多的结构元素,如图6-2所示的页面,通过HTM 5的结构元素,页面结构可以调整的非常清晰。如图6-3所示。 footer> 图6-3HTML5结构元素进行页面布局 通过上述的对比,通过HTML5结构元素,页面的结构就非常清 晰且容易理解。需要说明的是,现在上述的三种页面布局方式都是可 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 1.2 DIV+CSS 页面布局 在 XHTML 1.0 之后，W3C 开始大力推行 Web 标准，开发工程师基 本上都是用了 DIV+CSS 的布局方式，也叫做区块布局。但是，搜索引 擎去抓取页面的内容的时候，它只能猜测某个 DIV 内的内容是文章内 容容器，或者是导航模块的容器，或者是作者介绍的容器等等，整个 HTML 文档结构定义的非常不清晰，仅仅是在展示和页面解析性能上 的到了提升。 使用区块进行布局典型结构如图 6-2 所示。 1.3 HTML 5 结构 HTML 5 新增了许多的结构元素，如图 6-2 所示的页面，通过 HTML 5 的结构元素，页面结构可以调整的非常清晰。如图 6-3 所示。 通过上述的对比，通过 HTML 5 结构元素，页面的结构就非常清 晰且容易理解。需要说明的是，现在上述的三种页面布局方式都是可 图 6-2 区块进行页面布局 图 6-3 HTML 5 结构元素进行页面布局
用的且大量存在于互联网,不存在废弃的情况。 主体结构元素 在HTML5种,为了使文档的结构更加清晰明确,追加了几个与 页眉、页脚、内容区块等文档结构相关联的结构元素。 2. 1 article 元素介绍: article元素代表文档、页面或应用程序中独立的、完整的、可 以独自被外部引用的内容。 主要用途: 论坛帖子、报纸文章、博客条目、用户评论 元素说明: (1)元素是HTML5的新元素。 (2)除了内容部分,元素通常有它自己的标题,使用 元素。 (3)元素支持HML5的全局属性和事件。 案例: 示例6-1:一篇新闻内容 tte>一篇新闻 h1>中俄签署采购24架苏35和4艘拉达级潜艇合同 发表时间:2013-03-2509:3900来源:人民网(北京) 据央视《今日关注》栏目报道,中俄已签署苏35战机和拉达级潜艇 军售项目框架协议。 央视《今日关注》的报道称,习近平访问俄罗斯之前,中国与俄罗斯 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 用的且大量存在于互联网，不存在废弃的情况。 二、主体结构元素 在 HTML 5 种，为了使文档的结构更加清晰明确，追加了几个与 页眉、页脚、内容区块等文档结构相关联的结构元素。 2.1 article 元素介绍： article 元素代表文档、页面或应用程序中独立的、完整的、可 以独自被外部引用的内容。 主要用途： 论坛帖子、报纸文章、博客条目、用户评论 元素说明： （1） 元素是 HTML 5 的新元素。 （2）除了内容部分，元素通常有它自己的标题，使用 元素。 （3）元素支持 HTML 5 的全局属性和事件。 案例： 示例 6-1：一篇新闻内容 一篇新闻 中俄签署采购 24 架苏 35 和 4 艘拉达级潜艇合同 发表时间：2013-03-25 09:39:00 来源:人民网(北京) 据央视《今日关注》栏目报道，中俄已签署苏-35 战机和拉达级潜艇 军售项目框架协议。 央视《今日关注》的报道称，习近平访问俄罗斯之前，中国与俄罗斯
两国刚刚签署了两份重大军售…> 本新闻著作权归人民网所有。 示例6-2:更多内容元素的新闻内容 一篇完整内容的新闻 ≮h1>中俄签署釆购24架苏35和4艘拉达级潜艇合同 发表时间:2013-03-2509:3900来源:人民网(北京)<> 据央视《今日关注》栏目报道,中俄已签署苏-35战机和拉达级潜艇 军售项目框架协议。 央视《今日关注》的报道称,习近平访问俄罗斯之前,中国与俄罗斯 两国刚刚签署了两份重大军售… 新闻评论内容: 加强国家科技实力吧 发表人:张三 a* 时间:2013-032509:45:23 加强国家科技实力,不断提高我国国防能力。<> 这得花费多少外汇储备啊 发表人:李四 time pubdate datetime="2013-03-25T09: 40: 45">a* 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xueweb cn
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 两国刚刚签署了两份重大军售... 本新闻著作权归人民网所有。 示例 6-2：更多内容元素的新闻内容 一篇完整内容的新闻 中俄签署采购 24 架苏 35 和 4 艘拉达级潜艇合同 发表时间：2013-03-25 09:39:00 来源:人民网(北京) 据央视《今日关注》栏目报道，中俄已签署苏-35 战机和拉达级潜艇 军售项目框架协议。 央视《今日关注》的报道称，习近平访问俄罗斯之前，中国与俄罗斯 两国刚刚签署了两份重大军售... 新闻评论内容： 加强国家科技实力吧 发表人：张三 发表 时间：2013-03-25 09:45:23 加强国家科技实力，不断提高我国国防能力。 这得花费多少外汇储备啊 发表人：李四 发表
时间:2013-03-2509:40:45 这得多少钱啊?贵不贵啊?<> 本新闻著作权归人民网所有。 2.2 section 元素介绍 section元素用于对网站或应用程序中页面上的内容进行分块。 个 section元素通常有内容及其标题组成 主要用途 内容分块、文章分段 元素说明 (1)元素是HTML5的新元素。 (2)元素不是一个普通的的容器元素,当一个容器需 要直接被定义样式或通过脚本定义行为时,推荐使用元素,而 不使用。 (3)时应该包含标题内容,例如、等。 (4)元素的作用是对页面上的内容进行分块,或者说 是对文章进行分段。 案例: 示例6-3:关于课程介绍 tte>课程介绍 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ os. 51xueweb cn
5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 时间：2013-03-25 09:40:45 这得多少钱啊？贵不贵啊？ 本新闻著作权归人民网所有。 2.2 section 元素介绍： section 元素用于对网站或应用程序中页面上的内容进行分块。 一个 section 元素通常有内容及其标题组成。 主要用途： 内容分块、文章分段 元素说明： （1）元素是 HTML 5 的新元素。 （2）元素不是一个普通的的容器元素，当一个容器需 要直接被定义样式或通过脚本定义行为时，推荐使用元素，而 不使用。 （3）在没有标题的情况下建议不要使用，也就是说建 议在使用时应该包含标题内容，例如、等。 （4）元素的作用是对页面上的内容进行分块，或者说 是对文章进行分段。 案例： 示例 6-3：关于课程介绍 课程介绍
h1>课程介绍 h3>操作系统 N5。p>操作系统是高等教育自学考试计算机专业的一门必修的专业基 础课程。 编译原理 编译原理是计算机专业的一门重要专业课,旨在介绍编译程序构 造的一般原理和基本方法。内容包括语言和文法…管理、代码优化和目标代码 生成。 article> 2.3 nav 元素介绍: nav元素是一个可以用作页面导航的链接组,其中的导航元素链 接到其他页面或当前页面的其他部分。 主要用途: 传统导航条、侧边导航条、页内导航、翻页操作 元素说明: (1)元素是HTML5的新元素,它支持HTML5的全局属 性和事件属性。 (2)不需要将所有的链接都放到元素中,只需要把主要的、 基本的链接组放到nav元素。 (3)尽量不要使用元素代替。 案例 示例6-4:网站导航链接 6《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
6 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 课程介绍 操作系统 操作系统是高等教育自学考试计算机专业的一门必修的专业基 础课程。 编译原理 编译原理是计算机专业的一门重要专业课，旨在介绍编译程序构 造的一般原理和基本方法。内容包括语言和文法...管理、代码优化和目标代码 生成。 2.3 nav 元素介绍： nav 元素是一个可以用作页面导航的链接组，其中的导航元素链 接到其他页面或当前页面的其他部分。 主要用途： 传统导航条、侧边导航条、页内导航、翻页操作 元素说明： （1）元素是 HTML 5 的新元素，它支持 HTML 5 的全局属 性和事件属性。 （2）不需要将所有的链接都放到元素中，只需要把主要的、 基本的链接组放到 nav 元素。 （3）尽量不要使用元素代替。 案例： 示例 6-4：网站导航链接
tte>nav元素 课程资源发布 |>首页 li>Web前端开发 Linux操作系统 li> My SQL数据库管理 计算机网络 2. 4 aside 元素介绍 aside元素用来表示当前页面或文章的附属信息部分。它可以包 含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及 其他类似的有别于主要内容的部分。 在使用上, aside有两种主要的使用方法 (1)被包含在 article元素中作为主要内容的附属信息部分, 其中的内容可以是与当前文章有关的参考资料、名词解释等。 (2)在 article元素之外使用,作为页面或者站点全局的附属 信息部分。其中的内容可以是侧边栏、友情链接、相关内容、广告等 主要用途 引用、侧边栏、广告、次级导航条、备注 元素说明 (1)元素是HTML5的新元素,且支持HTML5的全局 属性和事件属性。 案例 示例6-5:文章附属信息 7《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ os. 51xueweb cn
7 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn nav 元素 课程资源发布 首页 Web 前端开发 Linux 操作系统 MySQL 数据库管理 计算机网络 2.4 aside 元素介绍： aside 元素用来表示当前页面或文章的附属信息部分。它可以包 含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及 其他类似的有别于主要内容的部分。 在使用上，aside 有两种主要的使用方法： （1）被包含在 article 元素中作为主要内容的附属信息部分， 其中的内容可以是与当前文章有关的参考资料、名词解释等。 （2）在 article 元素之外使用，作为页面或者站点全局的附属 信息部分。其中的内容可以是侧边栏、友情链接、相关内容、广告等。 主要用途： 引用、侧边栏、广告、次级导航条、备注 元素说明： （1）元素是 HTML 5 的新元素，且支持 HTML 5 的全局 属性和事件属性。 案例： 示例 6-5：文章附属信息
Doctype html> tte>文章附属信息 aside元素 h1>关于原型设计的一些事 文章来源:ht:/www.ikent.me/blog/4477~ 关于什么是原型 p>为了讨论方便,有必要先做一个简单的定义。 p>这里的原型指的是对最终产品各页面上内容的简单呈现,通常不会设置 颜色和字体,也不含图片。这里的原型,也通常被称作线框图、示意图、蓝图。 关于原型的精细程度 p>业界普遍的认知是,原型做相对中保真即可。中保真的原则是,对照原 型,团队的设计师和工程师能够明白我们要做的是一件什么事情及这件事“p> 参考资料 p>基于Aure的PRD写作思考 基于 axure的PRD协作 示例6-6:页面附属信息 tte>asde作为侧边栏我省教育投入10年涨5倍,夯实基础广育人才 发布时间:2012-10-1611:24:28 作者:赵媛高冬丽 来源:河南日报 8《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
8 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 文章附属信息 aside 元素 关于原型设计的一些事 文章来源：http://www.ikent.me/blog/4477 关于什么是原型 为了讨论方便，有必要先做一个简单的定义。 这里的原型指的是对最终产品各页面上内容的简单呈现，通常不会设置 颜色和字体，也不含图片。这里的原型，也通常被称作线框图、示意图、蓝图。 关于原型的精细程度 业界普遍的认知是，原型做相对中保真即可。中保真的原则是，对照原 型，团队的设计师和工程师能够明白我们要做的是一件什么事情及这件事 参考资料 基于 Axure 的 PRD 写作思考 基于 axure 的 PRD 协作 示例 6-6：页面附属信息 aside 作为侧边栏 我省教育投入 10 年涨 5 倍，夯实基础广育人才 发布时间：2012-10-16 11:24:28 作者：赵媛 高冬丽 来源：河南日报
p>十年前,如果一个娃娃呱呱坠地,此时已经上了小学。<> p>教育关系到每一个孩子的前途命运,寄托着亿万家庭对生活的期许,承 载着民族的未来。 p>十年来,我省教育取得了跨越式发展。义务教育实现了真正意义的免费 教育,“农村娃”和城里孩子一样走进公办学校享受“同城待遇”。职业教…p> h1>今日推荐 <>幼儿园教职工配备有了国家标准 <>中小学、幼儿园开评正高级教师 我省财政优先保证教育投入 <>我省200名中小学幼儿园教师接. 2.5 time 元素介绍: time元素代表24小时中的每个时刻或者某个日期,它表示时间 时允许带时差。 time元素是一个微格式。微格式是利用HTML的 class属性来对 网页添加附加信息的方法。微格式一直存在,只不过在使用上出现了 些问题,因此HTML5才增加了time元素来明确的对时间进行机器 编码,进而增加信息的可读性。 主要用途: 对时间进行格式定义。 元素说明: (1)元素是HTML5的新元素,且支持HTM5的全局属 性和时间属性。 (2)元素定义公历的时间(24小时制)或日期,时间和 时区偏移是可选的。 (3)目前该元素支持的浏览器不是很多,需要慎重使用 (4)元素的开始标记和结束标记之间的内容将显示在页 9《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
9 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 十年前，如果一个娃娃呱呱坠地，此时已经上了小学。 教育关系到每一个孩子的前途命运，寄托着亿万家庭对生活的期许，承 载着民族的未来。 十年来，我省教育取得了跨越式发展。义务教育实现了真正意义的免费 教育，“农村娃”和城里孩子一样走进公办学校享受“同城待遇”。职业教... 今日推荐 幼儿园教职工配备有了国家标准 中小学、幼儿园开评正高级教师 我省财政优先保证教育投入 我省 200 名中小学幼儿园教师接... 2.5 time 元素介绍： time 元素代表 24 小时中的每个时刻或者某个日期，它表示时间 时允许带时差。 time 元素是一个微格式。微格式是利用 HTML 的 class 属性来对 网页添加附加信息的方法。微格式一直存在，只不过在使用上出现了 一些问题，因此 HTML 5 才增加了 time 元素来明确的对时间进行机器 编码，进而增加信息的可读性。 主要用途： 对时间进行格式定义。 元素说明： （1）元素是 HTML 5 的新元素，且支持 HTML 5 的全局属 性和时间属性。 （2）元素定义公历的时间（24 小时制）或日期，时间和 时区偏移是可选的。 （3）目前该元素支持的浏览器不是很多，需要慎重使用。 （4）元素的开始标记和结束标记之间的内容将显示在页
面中, datetime属性的值是为了让机器进行识别的。 (5) datetime属性的值可以是日期,也可以是日期加时间。日 期和时间之间使用“T”连接。在时间后增加“Z”表示为UTC标准时 间。可以在时间后使用加减的方式进行时差的调整。 案例: 示例6-7:对于时间的多种定义 ttf>使用tme对日期时间进行定义今天是2013年3月26日。 p>小米盒子在今天中午又一 轮新的抢购。如果现在美国,应该是该起床的时间了。现在已经是美国时间的凌晨六点半了。我希望能够在下一个情人节,和 你一起看电影。 10《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
10 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 面中，datetime 属性的值是为了让机器进行识别的。 （5）datetime 属性的值可以是日期，也可以是日期加时间。日 期和时间之间使用“T”连接。在时间后增加“Z”表示为 UTC 标准时 间。可以在时间后使用加减的方式进行时差的调整。 案例： 示例 6-7：对于时间的多种定义 使用 time 对日期时间进行定义 今天是2013 年 3 月 26 日。 小米盒子在今天中午又一 轮新的抢购。 如 果 现 在 美 国 ， 应 该 是 该 起 床 的 时 间 了 。 现 在 已 经 是 美国时间的凌晨六点半了。 我希望能够在下一个情人节，和 你一起看电影。 2.6 pubdate 属性 元素介绍： pubdate 是一个属性而非元素。pubdate 属性是一个可选的、 boolean 值的属性，它可以用在 article 元素中的 time 元素上，表 示该时间为文章发布的时间，或者表示为页面更新、发布的时间。 主要用途： 表示文章、页面发布的时间。 案例： 示例 6-8：文章发布时间