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

Web前端开发 第4章:TM5结构与属性 耿方方 13937198682/ gff@hactcm educn http:/web.book.51xueweb.cn 河南中医药大学管理信息工程学科 河南中医药大学网络中心 2021.4

Web前端开发 第4章：HTML5结构与属性 耿方方 13937198682/ gff@hactcm.edu.cn http://web.book.51xueweb.cn 河南中医药大学管理信息工程学科 河南中医药大学网络中心 2021.4 1

2 本章主要内容 口结构之美:从HTM4到HTM5 口HTM5基础 口HTM5结构元素 口超链接 ⊙米

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

3 1结构之美:从HTML4到HTML5 11使用表格布局 口传统表格布局方式实际上是利用HM中的表格元素< table具有 的无边框特性,当表格元素在显示时,使单元格的边框和间距 设置为0,然后将网页中的各个元素按版式划分放入表格的各单 元格中,从而实现复杂的排版组合。 table

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

1结构之美:从HTML4到HTML5 11使用表格布局 口使用表格布局 table tr td table tr td table tr td Sub table tr td Sub table tr td table tr td

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

蓝回理胆计技术文档艺术设计像计机技术下载个人5 位置:首页 官方微博腾讯/新浪 最新更新与本站编辑对话更多更新 招聘國网站动态作品集->往届比 压缩≠失真 Going. io 作品集交互设计平面设计CG摄影 智能图片压缩优化 周大福“敬自然”设计大赛开启 国际体验设计大会7月将在京举行 中国国防科技信息中心标志征集 全网本站搜索了推荐文档站内搜索区ML 小米有品有鱼邀请码 AWMEB0D9 百度云端绽放 SiteApp移动转站大赛热门搜索:Web标准学习书籍计算机图书设计比赛网页制作手绘 第八届江苏省园艺博览会会徽征集 步步高vvo场景桌面设计大赛征集 创维小子形象全球征集大赛 金相玉珠宝Ⅵ设计全球公开征集 翻圆区元生持 2014第五届中国数据库技术大会dtcc互联网设计开发资源下载web前端开发工程师招聘2014阿里云开发者大会 盟黑AWDC2014阿里云开发者大会 时间:2014年10月16至17日地点:杭州云栖小镇 POLLEN b如 它! 度 ARTISAP

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 5

蓝回理围说计动态技术文档艺术设计影摄像计机技术资源下载个人专栏CG给两专题 6 方微博田/ 招聘同站动态作品集一>往届比 压缩≠失真 Going.io 作品集交互设计平面设计CG图影 留能图片压缩优化 大福“敬 设计大赛开后 国际体验设计大会7月将在京举 国国防科技信息中心标志征集 全网本站搜常」推荐交档站内 有品有鱼邀清码 AWMEBOD9 度云诺放 SiteApp移动转站大赛 搜索:Web标准学习书籍计算机图书设计比赛网页制作手绘 八届江苏 步高vo场量面设计大赛征集 ont 设计 云亿元生面材持 2014第五届中国数据库技术大会dtcc互联问设计开发资源下载web前端开发工程师招聘2014同里云开发者大会 云想照AWDC20阿里云开发者大会 间:2014年10月16至17日 P。LLE

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 6

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

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

8 1结构之美:从HTML4到HTML5 1.2使用区块布局 口使用区块布局

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

di 酷回理计动技文档艺术设计像计即机技术源下载个人专栏CG 9 BlueloDa 招明一同站动态f 压缩≠失真 能图片压缩优化 热门搜素 准习书籍计算机书设计比 设计 腾云亿元生态持 2014第五届中国数据库技术大会dtcc互联网设计开发资源下载web前端开发工程师招聘2014阿里云开发者大会 云即照点AWDC20阿里云开发者大会 时间:201410月16到7日地点:殖州 POLLE

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 9 div

10 1结构之美:从HTML4到HTML513M5结构元素布局 口HTM5新增了许多的结构元素,通过HM5的结构元素,可以直 接定乂元素容器的内容,页面结构可以调整的非常清晰。 口使用HM5布局结构 carticles

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