河南中医药大学：《Web前端开发技术与实践》课程教学课件讲稿（2015）第04章 HTML5结构与属性

Web前端开发技术与实践 第4章:TM5结构与属性 阮晓龙 13938213680/ rxl@hactcmeducn http://web.51xueweb.cr 问南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9

Web前端开发技术与实践 第4章：HTML5结构与属性 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9 1

2 本章主要内容 口结构之美:从HTM到HTM5 口HTM5基础 口HTM5结构元素 口超链接 ⊙米 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容  结构之美：从HTML4到HTML5  HTML5基础  HTML5结构元素  超链接 2

3 1.结构之美:从HTML4到HTML5 1.1使用表格布局 口传统表格布局方式实际上是利用班M中的表格元素< table具有 的无边框特性,当表格元素在显示时,使单元格的边框和间距 设置为0,然后将网页中的各个元素按版式划分放入表格的各单 元格中,从而实现复杂的排版组合。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.结构之美：从HTML4到HTML5  传统表格布局方式实际上是利用HTML中的表格元素具有 的无边框特性，当表格元素在显示时，使单元格的边框和间距 设置为0，然后将网页中的各个元素按版式划分放入表格的各单 元格中，从而实现复杂的排版组合。 3 1.1使用表格布局

4 1.结构之美:从HTML4到HTML5 1.1使用表格布局 口使用表格布局 table tr td table tr td table tr td Sub table tr td Sub table tr td table tr td 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.结构之美：从HTML4到HTML5  使用表格布局 4 1.1使用表格布局

1.结构之美:从HTML4到HTML5 12使用区块布局 口在 XHTML1.0之后,W3C开始大力推行Web标准,开发工程师基本 上都是用了 DIV+CSSI的布局方式,叫做区块布局。 口但是,搜索引擎去抓取页面的内容时,它只能猜测某个DIV内的 内容是文章内容容器,或是导航模块的容器,或是作者介绍的 容器等等,整个HM文档结构定义不清晰,仅仅是在展示和页 面解析性能上得到了提升。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.结构之美：从HTML4到HTML5  在XHTML1.0之后，W3C开始大力推行Web标准，开发工程师基本 上都是用了DIV+CSS的布局方式，叫做区块布局。  但是，搜索引擎去抓取页面的内容时，它只能猜测某个DIV内的 内容是文章内容容器，或是导航模块的容器，或是作者介绍的 容器等等，整个HTML文档结构定义不清晰，仅仅是在展示和页 面解析性能上得到了提升。 5 1.2使用区块布局

1.结构之美:从HTML4到HTML5 12使用区块布局 口使用区块布局 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.结构之美：从HTML4到HTML5  使用区块布局 6 1.2使用区块布局

1.结构之美:从HTML4到HTML51HmM结构元素布局 口HTM5新增了许多的结构元素,通过HTM5的结构元素,可以直 接定乂元素容器的内容,页面结构可以调整的非常清晰。 使用HTM5布局结构 carticles 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.结构之美：从HTML 4到HTML5  HTML5新增了许多的结构元素，通过HTML5的结构元素，可以直 接定义元素容器的内容，页面结构可以调整的非常清晰。  使用HTML5布局结构 7 1.3HTML5结构元素布局

8 1.结构之美:从HTML4到HTML5 14语义Web 口加样式的技术既简明又强大,还非常灵活,但是却不 够透明。也就是说,在查看別人的源代码时,必须费点功夫才 能知道哪个表示什么。 口HTM5为此引用了一组构造页面的新元素,实现对页面区块内容 的定义。这些元素可以为它们标注的内容赋予额外的含义 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.结构之美：从HTML4到HTML5  元素是Web前端开发中最常用的元素，利用元素，可 以把整个HTML文档分隔为页眉、侧边面板、导航条等等。  这种加样式的技术既简明又强大，还非常灵活，但是却不 够透明。也就是说，在查看别人的源代码时，必须费点功夫才 能知道哪个表示什么。  HTML5为此引用了一组构造页面的新元素，实现对页面区块内容 的定义。这些元素可以为它们标注的内容赋予额外的含义。 8 1.4语义Web

9 1.结构之美:从HTML4到HTML5 14语义Web 口使用语义元素有多种原因: 容易修改和维护 无障碍性 ■搜索引擎优化 ■未来的功能 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.结构之美：从HTML4到HTML5  使用语义元素有多种原因：  容易修改和维护  无障碍性  搜索引擎优化  未来的功能 9 1.4语义Web

10 2HTML5基础 2.1HTML5语法 口内容类型 HTML5的文件扩展名与内容类型保持不变。扩展名仍然是.html 或.htm,内容类型仍然为text/html。 口版本兼容性 HTML5语法是为了保证与之前的HTM语法达到最大程度兼容而设计 的。简单说明如下 口可以省略标记元素 口具有布尔值的属性 口省略引号 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 2.HTML5基础  内容类型  HTML5的文件扩展名与内容类型保持不变。扩展名仍然是.html 或.htm，内容类型仍然为text/html。  版本兼容性  HTML5语法是为了保证与之前的HTML语法达到最大程度兼容而设计 的。简单说明如下：  可以省略标记元素  具有布尔值的属性  省略引号 10 2.1 HTML5语法