《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所示。 < div id=“ header”> < div class=“ article”> < div class=“ section”> 图6-2区块进行页面布局 1.3HTML5结构 HTML5新增了许多的结构元素,如图6-2所示的页面,通过HTM 5的结构元素,页面结构可以调整的非常清晰。如图6-3所示。 < headers <article> <astae> 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)< article>元素是HTML5的新元素。 (2)除了内容部分,< article>元素通常有它自己的标题,使用 < header>元素。 (3)< article>元素支持HML5的全局属性和事件。 案例: 示例6-1:一篇新闻内容 <!doctype html> <html> <meta charset="utf-8> tte>一篇新闻</ title:> h1>中俄签署采购24架苏35和4艘拉达级潜艇合同</h1> <p>发表时间:2013-03-2509:3900来源:人民网(北京)<|> <p>据央视《今日关注》栏目报道,中俄已签署苏35战机和拉达级潜艇 军售项目框架协议。</> <p>央视《今日关注》的报道称,习近平访问俄罗斯之前,中国与俄罗斯 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 用的且大量存在于互联网，不存在废弃的情况。 二、主体结构元素 在 HTML 5 种，为了使文档的结构更加清晰明确，追加了几个与 页眉、页脚、内容区块等文档结构相关联的结构元素。 2.1 article 元素介绍： article 元素代表文档、页面或应用程序中独立的、完整的、可 以独自被外部引用的内容。 主要用途： 论坛帖子、报纸文章、博客条目、用户评论 元素说明： （1）<article> 元素是 HTML 5 的新元素。 （2）除了内容部分，<article>元素通常有它自己的标题，使用 <header>元素。 （3）<article>元素支持 HTML 5 的全局属性和事件。 案例： 示例 6-1：一篇新闻内容 <!doctype html> <html> <head> <meta charset="utf-8"> <title>一篇新闻</title> </head> <body> <article> <header> <h1>中俄签署采购 24 架苏 35 和 4 艘拉达级潜艇合同</h1> <p>发表时间：2013-03-25 09:39:00 来源:人民网(北京)</p> </header> <p>据央视《今日关注》栏目报道，中俄已签署苏-35 战机和拉达级潜艇 军售项目框架协议。</p> <p>央视《今日关注》的报道称，习近平访问俄罗斯之前，中国与俄罗斯
两国刚刚签署了两份重大军售…> <footer> <p><sma>本新闻著作权归人民网所有。<smal!<p> </footer </article> </body> </html> 示例6-2:更多内容元素的新闻内容 <!doctype html> <html> <meta charset="utf-8 tte>一篇完整内容的新闻</itle </head> <article> <header> ≮h1>中俄签署釆购24架苏35和4艘拉达级潜艇合同<h1> <p>发表时间:2013-03-2509:3900来源:人民网(北京)<> </header <p>据央视《今日关注》栏目报道,中俄已签署苏-35战机和拉达级潜艇 军售项目框架协议。</> <p>央视《今日关注》的报道称,习近平访问俄罗斯之前,中国与俄罗斯 两国刚刚签署了两份重大军售…<p> <section> <h2>新闻评论内容:</2> <article> <header> <h3>加强国家科技实力吧<h3> <h4>发表人:张三<h4> <time pubdate datetime="2013-03-25T09: 45: 23">a* 时间:2013-032509:45:23<ime> <p>加强国家科技实力,不断提高我国国防能力。<> </article> <header> <h3>这得花费多少外汇储备啊</h3> <h4>发表人:李四<h4> time pubdate datetime="2013-03-25T09: 40: 45">a* 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xueweb cn
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 两国刚刚签署了两份重大军售...</p> <footer> <p><small>本新闻著作权归人民网所有。</small></p> </footer> </article> </body> </html> 示例 6-2：更多内容元素的新闻内容 <!doctype html> <html> <head> <meta charset="utf-8"> <title>一篇完整内容的新闻</title> </head> <body> <article> <header> <h1>中俄签署采购 24 架苏 35 和 4 艘拉达级潜艇合同</h1> <p>发表时间：2013-03-25 09:39:00 来源:人民网(北京)</p> </header> <p>据央视《今日关注》栏目报道，中俄已签署苏-35 战机和拉达级潜艇 军售项目框架协议。</p> <p>央视《今日关注》的报道称，习近平访问俄罗斯之前，中国与俄罗斯 两国刚刚签署了两份重大军售...</p> <section> <h2>新闻评论内容：</h2> <article> <header> <h3>加强国家科技实力吧</h3> <h4>发表人：张三</h4> <p> <time pubdate datetime="2013-03-25T09:45:23">发表 时间：2013-03-25 09:45:23</time> </p> </header> <p>加强国家科技实力，不断提高我国国防能力。</p> </article> <article> <header> <h3>这得花费多少外汇储备啊</h3> <h4>发表人：李四</h4> <p> <time pubdate datetime="2013-03-25T09:40:45">发表
时间:2013-03-2509:40:45</tme> </header> <p>这得多少钱啊?贵不贵啊?<> </article> </section> <footer> <p><sma>本新闻著作权归人民网所有。<smal!<p> </footer </article> </body> </html> 2.2 section 元素介绍 section元素用于对网站或应用程序中页面上的内容进行分块。 个 section元素通常有内容及其标题组成 主要用途 内容分块、文章分段 元素说明 (1)< section>元素是HTML5的新元素。 (2)< section>元素不是一个普通的的容器元素,当一个容器需 要直接被定义样式或通过脚本定义行为时,推荐使用<div>元素,而 不使用< section>。 (3)< section》在没有标题的情况下建议不要使用,也就是说建 议在使用< section>时应该包含标题内容,例如<h1>、<h2>等。 (4)< section>元素的作用是对页面上的内容进行分块,或者说 是对文章进行分段。 案例: 示例6-3:关于课程介绍 <!doctype htmI> <meta charset="utf-8> tte>课程介绍</itle> 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ os. 51xueweb cn
5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 时间：2013-03-25 09:40:45</time> </p> </header> <p>这得多少钱啊？贵不贵啊？</p> </article> </section> <footer> <p><small>本新闻著作权归人民网所有。</small></p> </footer> </article> </body> </html> 2.2 section 元素介绍： section 元素用于对网站或应用程序中页面上的内容进行分块。 一个 section 元素通常有内容及其标题组成。 主要用途： 内容分块、文章分段 元素说明： （1）<section>元素是 HTML 5 的新元素。 （2）<section>元素不是一个普通的的容器元素，当一个容器需 要直接被定义样式或通过脚本定义行为时，推荐使用<div>元素，而 不使用<section>。 （3）<section>在没有标题的情况下建议不要使用，也就是说建 议在使用<section>时应该包含标题内容，例如<h1>、<h2>等。 （4）<section>元素的作用是对页面上的内容进行分块，或者说 是对文章进行分段。 案例： 示例 6-3：关于课程介绍 <!doctype html> <html> <head> <meta charset="utf-8"> <title>课程介绍</title>