1.2编写网页内容的结构（课件）-高二《网页设计与制作》同步教学（劳动版）

制作网页内容 第一阶段 能够分析网页布局图，运用网页结构标签完成D清单页面结构代码。 能够根据移动设备与传统电脑桌面的区别，在D清单网页输入正确的移动设备结构标签。 任务目标 任务2 编写网页内容的结构 本次任务要求使用VSCode开发工具，完成D清单网页HTML结构标签和移动设备设置代码的编写。 任务描述 图1-2-1 编写完成的D清单网页HTML结构标签截图和效果图 任务2 编写网页内容的结构 要完成D清单网页HTML结构和移动端设备设置代码的编写，需要： 学习网页的结构，认识HTML5的结构标签； 简要分析D清单移动端效果图的页面结构，完成其结构标签代码的编写； 学习移动设备与传统桌面电脑的区别，认识移动设备的HTML结构标签，设置D清单的移动设备结构标签。 任务分析 任务2 编写网页内容的结构 知识与技能准备 在HTML5文档中，必须包含<html></html>标记，并且放在HTML5文档中的开始和结束位置。其基本结构如下： 注意：HTML标记不区分大小写。 1、HTML5文件的基本结构 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html > <head> <meta charset="utf-8"> <title> HTML5基本结构</title> </head> <!--这是一个空白页面，在浏览器中不会展现任何内容--> <body> </body> </html> 知识与技能准备 一个基本的HTML5网页由以下几部分构成。 （1）<!DOCTYPE html>声明。 （2）<html></html>标记。 （3）<head></head>标记。 （4）<body></body>标记。 （5）<!-->标记。 1、HTML5文件的基本结构 知识与技能准备 HTML5文件基本结构标签的层级关系如图2-2所示。 1、HTML5文件的基本结构 图1-2-2 HTML5文件基本结构标签的层级关系 HTML文档 开始标签<html> 头标签<head> 标题标签<title> 身体标签<body> 其他标签 样式代码 打开Visual Studio Code，输入如下标签： 课堂练习1-2-1 录入一个完整的网页结构标签 1 2 3 4 5 6 7 8 9 10 11 <!doctype html> <html> <head> <meta charset=" UTF-8"> <title>HTML5基本结构</title> </head> <!--这是注释--> <body> <p>这是一个完整的网页结构标签</p> </body> </html> 知识与技能准备 HTML文档结构定义不清晰，HTML5中为了解决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。图1-2-2就是HTML5新标签带来的新布局： HTML5 新增结构标签分为主体结构标签和非主体结构标签。 2、HTML5新增的结构标签 图1-2-2网页布局 知识与技能准备 2.1 HTML5 新增主体结构标签（元素） （1）article元素 article 代表文档，页面或程序中相对独立、完整的部分，通常用article 包裹。例如文章一样，里头依然可以包括header 、section 等元素。 （2）section元素 区块元素，用于页面内容的独立分块，往往是文章的一段。通常由内容和标题组成，没有标题的内容不推荐使用section。 （3）nav元素 导航区块元素，作为导航连接组使用。通常用于导航栏、侧边导航栏等，使用频率高。 （4）aside元素 表示当前或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等。 （5）time 元素 定义日期或时间，代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。 知识与技能准备 2.2 HTML5 新增非主体结构标签（元素） （1）header元素 定义文档的页眉，具有引导和导航作用的结构元素。header标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括其它标签，比如表格、列表、表单、nav标签等，使用频率极高。 （2）footer 元素 文档的脚注，一般是一个页面的尾部信息。通常内容为联系信息、相关阅读、版权信息等，使用频率高。 （3）hgroup 元素 hgroup 元素是将标题及其子标题进行分组的元素（标题比较多的场合下使用）。hgroup元素通常会将 h1~h6元素进行分组，使用频率高。 （4）address 元素 用来呈现用户的联系方式，通常内容为作者、网站链接、电子邮