1.2网页中的信息编码 教学课件 2023—2024学年电子工业社版（2022）初中信息技术第二册

1.2 网页中的信息编码 电子工业版七年级下册 新知导入 教学目标 1、了解浏览器的作用和网页的组成； 2、了解网页源代码的概念； 3、掌握如何在浏览器中查看网页源代码； 4、了解网页信息的编码和解码； 5、了解HTML文件结构与标签的功能； 6、掌握HTML在线编辑器制作网页。 1.2.1 查看网页源代码 新知讲解 浏览器的作用： （1）最基础的就是用来浏览网页； （2）打开网页看新闻、看视频、玩网页游戏、看书、网购； （3）还可以添加扩展程序、插件等； （4）可以用来下载需要的文件、软件； （5）内容操作，比如打印、查找。 新知讲解 浏览器中网页的组成： （1）网页标题； （2）网页文本； （3）网页图片； （4）网页多媒体； （5）网页状态栏。 新知讲解 网页源代码是使用HTML语言编写的文件，也称为HTML文件，实际上是纯文本文件。 新知讲解 在网页空白处右击，在弹出的快捷菜单里选择查看网页源代码，也可以按快捷键Ctrl+U。 新知讲解 观看视频如何在浏览器中查看源代码。 新知讲解 网页源代码 网页标题 文档标题 网页文本 嵌入图片 练一练 浏览器查看网页的源代码，并说明源代码中标签“<>”的作用。 “<>” 就是HTML语言的标签，用来对网页上的标题、图片、声音等元素进行标识。 1.2.2 认识网页源代码 新知讲解 HTML在线编辑器是可以即时编译HTML代码的软件，访问地址（ https://c.runoob.com/front-end/61/ ）。 点击HTML模板 勾选自动执行 新知讲解 网页源代码 网页执行结果 新知讲解 网页信息的编码和解码。 修改HTML页面正文的标题 修改浏览器标题 新知讲解 网页信息的编码和解码。 HTML信息的编码 HTML信息的解码 新知讲解 网页信息的编码和解码总结： （1）网页的全部内容需在<html>··· </html>标签中。 （2）浏览器标题栏中的网页标题等信息主要放在<head>··· </ head>标签中。 （3）网页展示的内容需要嵌套在<body>··· </body>标签中。 新知讲解 HTML文件结构图。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <h1>我的HTML页面</h1> <p>我的第一个段落。</p> </body> </html> 定义HTML文件 提供网页标题、标注及编码信息的内容，在网页中不显示 定义网页标题 网页中显示的内容，即在这个区域写入的任何内容，都会显示在网页中 网页采用utf-8字符编码格式 新知讲解 HTML标签是HTML语言中最基本的单位，都是成对出现，标签对的第一个是开始标签，第二个是结束标签。 HTML开始标签 HTML结束标签 新知讲解 常用的HTML标签。 标签 显示效果 <hn>··· </hn> 定义标题的字体大小，其中的n是标题大小的级别，取值范围为1—6，h1最大，h6最小。 <title>···</title> 为文档定义一个标题。 <b>··· </b> 文字以粗体形式显示。 <i>··· </i> 文字以斜体形式显示。 <s>··· </s> 文字以加删除线的形式显示。 新知讲解 常用的HTML标签。 标签 显示效果 <u>··· </u> 文字以加下划线的形式显示 <p>···</p> 划分段落 <img> 插入图像 <a>··· </a> 定义超链接 <audio> 插入音频 <video> 插入视频 新知讲解 网页字符编码格式。 编码格式类型 编码格式特点 UTF-8编码 又称为万国码，可以通过屏蔽位和移位操作快速读写，是网页应用中优先采用的编码格式，适用于各种语言。 GB2312编码 是第一个汉字编码国家标准，适用于简体汉语。 练一练 利用HTML模板功能制作一个网页，感受网页信息的编码和解码过程。（编辑器地址：https://c.runoob.com/front-end/61/） 练一练 将“科技创新 自主可控”网页源代码中所用到标签填入下表，并简述这些标签的功能。 标签 功能 练一练 将“科技创新 自主可控”网页源代码中所用到标签填入下表，并简述这些标签的功能。 标签 功能 <html>··· </html> 定义HTML文件，网页的全部内容需在此标签中。 <head>··· </ head> 主要放浏览器标题栏中的网页标题等信息。 <body>··· </body> 网页展示的内容需要嵌套在此标签中。 <title>···</title> 为欢迎页、第一页、第二页、第三页、第四页文档设置