(课件网) 第7课 网页结构设计 第2课时 （赣科技版）七年级 上 01 学习目标 内容总览 02 新知导入 03 探究新知 04 课堂练习 05 课堂总结 课后作业 06 教学目标 掌握 HTML 基本操作和标签使用方法，培养对网页制作的兴趣和主动探索精神，增强对信息层次结构的理解。 01 02 03 04 计算思维 信息社会责任 数字化学习与创新 信息意识 学会通过 HTML 标签和属性组织网页内容，培养结构化信息处理技能和逻辑思维能力，提升解决问题的能力。 掌握如何在网页中添加图像与链接，提升网页的美感和功能性，激发创新设计思维，增强网页设计能力。 理解 HTML 规范的重要性，编写符合标准的网页，提高网页的可访问性和用户体验，树立良好的数字伦理观念。 新知导入 新知讲解 想一想 HTML的基本操作 1、HTML的基本操作 HTML标签的种类多种多样，帮助网页实现各种效果。下面我们来学习一些基础标签。 新知讲解 想一想 HTML的基本操作 2、HTML标题 HTML标题是通过

--

标签来定义的。标题无处不在，它的应用范围十分广泛：网站结构、写作文等。 新知讲解 想一想 HTML的基本操作 2、HTML标题 这里有六个标题元素标签--

、

、

、

、

。 新知讲解 想一想 HTML的基本操作 2、HTML标题 每个元素代表文档中不同级别的内容：

表示主标题，

表示二级子标题，

表示三级子标题，

、

、

字体的大小依次递减。 新知讲解 想一想 扩展阅读 HTML 中的空格与小写标签 在代码中可能包含了很多的空格，但实际上无论你用了多少空格（包括空格字符，包括换行），当渲染这些代码的时候，HTML解释器会将连续出现的空格字符减少为一个单独的空格符。 新知讲解 议一议 1、在HTML中使用H标题和设置字体大小有什么区别？ （1）语义不同：使用H标题标签告诉浏览器内容的重要性和层级，而设置字体大小只是改变文字的视觉效果。 （2）结构化信息：H标题标签帮助创建网页的层次结构，而设置字体大小只是改变内容的外观。 （3）默认样式：H标题标签有默认的样式以突出显示标题，而设置字体大小需要手动使用CSS调整。 （4）可访问性：H标题标签被屏幕阅读器识别以帮助导航，而设置字体大小不会影响页面结构的理解。 新知讲解 做一做 1、结合所学知识，对下面文字添加标签，使其在Web 浏览器中显示成结构层级。 新知讲解 做一做 1、结合所学知识，对下面文字添加标签，使其在Web 浏览器中显示成结构层级。

社会主义核心价值观

富强 民主 文明 和谐

自由 平等 公正 法治

爱国 敬业 诚信 友善

新知讲解 想一想 HTML的基本操作 3、HTML图像 HTML图像是通过标签来定义的。使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。 新知讲解 想一想 HTML的基本操作 3、HTML图像 需要注意的是img元素是自关闭元素，不需要结束标记，也就是说，此标签不需要，属性width =206，height=36代表此张图片宽206，长36。 新知讲解 想一想 HTML的基本操作 4、HTML链接 HTML链接是通过标签来定义的。a标签，也叫anchor(锚点)元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。 新知讲解 想一想 HTML的基本操作 4、HTML链接 在 href = “”中添加网址，点击文字实现跳转，如下图所示，点击文字后将跳转到中华人民共和国教育部政府门户网站。 新知讲解 想一想 HTML的基本操作 5、其他标签 下面介绍一些实用标签，同学们可以自行操作查看效果。 标签名称 标 ... ...