1.3添加段落和文字（课件）-高二《网页设计与制作》同步教学（劳动版）

制作网页内容 第一阶段 能够表述常见HTML格式化文本标签的含义。 能够在网页中按内容语义正确应用HTML文本标签。 能够在分析D清单网页效果图基础上，使用HTML添加网页中的段落和文字内容。 任务目标 任务3 添加段落和文字 本次任务要求根据D清单网页内容，使用HTML格式化标签，在任务2基础上添加文字和段落内容。完成后的效果图如图1-3所示。 任务描述 图1-3 添加文字和段落内后的网页效果图 任务3 添加段落和文字 要完成D清单网页文本和段落内容的编写，需要： 学习标题、段落和其它常见文本标签的使用； 分析D清单页面中的文本和段落内容，正确使用格式化标签完成D清单网页内容制作。 任务分析 图1-3-1 D清单网页部分标题与段落分析图 任务3 添加段落和文字 知识与技能准备 HTML文档中包含有各种级别的标题，各种级别的标题由<h1>到<h6>标签来定义，<h1>到<h6>标题标签中的字母h是英文headline（标题行）的简称。 其语法形式如下： 1、标题标签<h1>~<h6> 1级标题：<h1></h1> 2级标题：<h2></h2> …… 6级标题：<h6></h6> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-3-1 显示6级标题的效果 1 2 3 4 5 6 <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> 显示效果如下： 课堂练习1-3-1 显示6级标题的效果 图1-3-2 标题标签的使用 知识与技能准备 段落标签为<p></p>，在<p>开始标签和</p>结束标签之间的内容形成一个段落。段落标签中的p是英文单词paragraph（段落）的首字母，用来定义网页中的一段文本，文本在一个段落中会自动换行。其语法形式如下： 2、段落标签<p> <p>段落文字</p> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-3-2 使用标题和段落的网页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <h1>W3C的介绍</h1> <p>W3C 指万维网联盟，它是建立于 1994 年的组织，其宗旨是通过促进通用协议的发展并确保其通用型，以激发 web 世界的全部潜能。 </p> <p>W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA的ECMAScript标准。 </p> <p>为了简化网站代码，降低网站建设的成本，保证网站在长期互联网环境中能有效，加强网站的兼容性，能适应不同的网络设备和网络终端。我们在建设网站时应该要保证代码符合W3C规范。 </p> 显示效果如下： 课堂练习1-3-2 使用标题和段落的网页 图1-3-3 使用了标题和段落的网页 知识与技能准备 在HTML中，换行需要使用<br/>标签来完成。换行标签<br/>是一个单标签，它没有结束标答，是英文单词break的缩写，作用是将文字在一个段内强制换行。使用换行标签时，在需要换行的位置添加<br/>标签即可。其语法形式如下： 3、换行标签<br/> 换行标签<br/> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-3-3 使用换行标签编写网页 1 2 3 4 5 6 <p> 我轻轻的来<br/> 正如我静静的走<br/> 挥一挥衣袖<br/> 不带走一片云彩 </p> 显示效果如下： 课堂练习1-3-3 使用换行标签编写网页 图1-3-4 使用换行标签的网页 知识与技能准备 div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 div元素是通用的，内部可以包含其他各种元素包括其他div元素；并且可以通过CSS设置样式来完成复杂的页面布局。其语法形式如下： 注释：HTML中的元素可分为两种类型：块级元素和行级元素。块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如前面所讲过的p，h1，div等标签元素。行内元素：元素在一行内水平排列，高度由元素的内容决定，height（高度）属性不起作用，如后面要讲