(课件网) 第7课 网页的数据组织 年 级：八年级 学 科：中学信息科技（浙教版） 浏览熟悉的网站，观察网页中常见的数据类型。 思考：网页中的数据是如何组织的？ 实践：利用“开发人员工具”查看网页代码。 一、HTML语言 HTML(HyperText Markup Language)即超文本标记语言，用来组织网页的结构和内容。 观察：用“审查元素”功能，对比观察左右窗口中，网页显示内容和对应的HTML代码，归纳其结构特点。 审查元素 例如： …… 大部份标签成对出现 由“<”和“>”符号包围的字符串组成 开放标签 闭合标签 HTML用标签来规定元素的属性及其在文件中的位置。 我们的发现： 正文 HTML文档开始 HTML文档结束 身体 头 额头 二、HTML文档的基本结构 思考：能否利用“开发人员工具”编辑调试代码？ 尝试修改中间的内容，观察变化，刷新网页后看再观察？ 二、HTML文档的基本结构 HTML文档 ( 记事本、 VS code等 ) 浏览器 解释执行 二、HTML文档的基本结构 任务1：根据小组“人工智能”网站的制作方案，编写网站首页的代码，修改“网页的标题”与“正文内容”, 并调试查看网页效果。 用记事本编写的HTML语言在进行调试查看时，需将保存文件扩展名从“.txt”更改为为“.html”的文件，选择保存类型为“所有文件” 。 三、更多HTML标签 任务2：结合课本P37页中的“阅读材料”，自主探索了解更多HTML标签的使用，记录自己测试成功的标签。 三、更多HTML标签 探索的标签 作用描述 具体应用

标签

标签 标签 …… 任务2：结合课本P37页中的“阅读材料”与课本P35页中的“教你一招”，自主探索了解更多HTML标签的使用，记录自己测试成功的标签。 例如：

这是标题 1

这是标题 2

这是标题 3

这是标题 4

这是标题 5

这是标题 6

三、更多HTML标签 探索的标签 作用描述 具体应用

标签 HTML 正文不同字号是通过

-

标签定义的。

标签 可创建一个段落，浏览器会自动地在段落的前后添加空行。

这是一个段落。

这是一个段落。

这是一个段落。

三、更多HTML标签 探索的标签 作用描述 具体应用

标签

标签 可创建一个段落，浏览器会自动地在段落的前后添加空行。 标签 图片标签，用于添加图片,标签没有结束标签。 常见格式： 探索的标签 作用描述 具体应用 标签 标签 图片标签，用于添加图片,标签没有结束标签。 三、更多HTML标签 居中对齐：

网页背景色： 为了使网页便于用户浏览，可使用HTML标签设置版面与格式。 字体格式： 文字 教你一招 三、更多HTML标签 思考:这些页面间如何产生关联，实现跳转？ 一个网站包含了1个主页面 ，多个分页面。 四、超链接 超链接：超文本链接 (Hypertext Link)，可以实现从一个页面跳转到另一个页面，实现文档互联、网站互联。 四、超链接 标签 用于插入超链接。 常见格式：链接元素 可以是文本、图像等 外部网址,内部网页等 四、超链接 标签 用于插入超链接。 拓展思考:如何为图像设置超链接？ 常见格式： 例如： 任务3 ... ...