1.结构之美:从HTML4到HTML5 12使用区块布局 口使用区块布局 < div id=“ header”> < div id=“nav”> < div class=“ article”> < diy id=“ sidebar”> < div class=“ section”> < div id=“ footer”> 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.结构之美：从HTML4到HTML5 使用区块布局 6 1.2使用区块布局
1.结构之美:从HTML4到HTML51HmM结构元素布局 口HTM5新增了许多的结构元素,通过HTM5的结构元素,可以直 接定乂元素容器的内容,页面结构可以调整的非常清晰。 使用HTM5布局结构 <header> <nav> carticles <aside> <section> <footer> 河南中医学院/阮晓龙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 口<div元素是Web前端开发中最常用的元素,利用<div元素,可 以把整个HTM文档分隔为页眉、侧边面板、导航条等等。 口这种<diⅴ>加样式的技术既简明又强大,还非常灵活,但是却不 够透明。也就是说,在查看別人的源代码时,必须费点功夫才 能知道哪个<div>表示什么。 口HTM5为此引用了一组构造页面的新元素,实现对页面区块内容 的定义。这些元素可以为它们标注的内容赋予额外的含义 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.结构之美：从HTML4到HTML5 <div>元素是Web前端开发中最常用的元素，利用<div>元素，可 以把整个HTML文档分隔为页眉、侧边面板、导航条等等。 这种<div>加样式的技术既简明又强大，还非常灵活，但是却不 够透明。也就是说，在查看别人的源代码时，必须费点功夫才 能知道哪个<div>表示什么。 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语法