1.4 网页与编码 课件 2024—2025学年清华大学版（2024）A版初中信息科技七年级下册

第四节 网页与编码 清华大学信息科技七年级下册 CONTENTS 常见的媒体信息编码 流媒体与流式传输 网页的基本元素 网页的W3C标准 网页制作工具与方法 网页的渲染 常见的媒体信息编码 一 常见的媒体信息编码 信息编码就像是翻译官 所谓信息编码就是将信息转换成一种特定的格式，以便能够在不同的系统或设备之间进行传输、存储和处理，并保障信息的传输效率、数据安全和完整性等方面的要求。 什么是信息编码 常见的媒体信息编码 由于网络交流中的媒体信息有着极为复杂的传输与播放环境，为统一交流双方的网络环境与计算机，互联网编制了一套大家都支持的编码方式或文件格式。 常见的媒体信息编码 什么是“乱码” 乱码是指在本地计算机上打开网页时，使用了互不兼容的文字集造成无法被阅读的一系列字符。UTF-8是互联网中使用最广泛的字符编码。 字符是各种文字和符号的总称，包含各国文字、标点符号、图形符号和数字等。较常见的字符集有ASCII字符集、GB2312字符集、UTF-8字符集与Unicode字符集等。 文本乱码验证实验 体 验 活 动 打开网页，尝试将UTF-8字符编码更改为其他，再观察网页中文字的变化，并将数据记录到表中。 实验内容：验证网页文本出现乱码的原因。 实验准备：学生机、浏览器与网页。 相关对象 相关现象或数据记录 实验结论 被验证网页的网址 浏览器的名称 网页的原字符编码 修改后的字符编码 观察到的现象 流媒体与流式传输 在4G网络技术普及之前，绝大部分公用网络普遍存在网速偏慢的难题，而网络交流中的大容量音视频文件，无论是上传还是下载，都需要等待较长的时间，进而降低了用户体验感。为了保障大容量的多媒体信息高校传输，科学家们提出了流媒体与流式传输的概念。 流媒体是对音视频等网络多媒体进行数据压缩并分段发送的一种流式传输技术，能够边传输边播放，提升了用户的体验，目前该技术已经广泛地应用于各种领域。 流式传输原理 流式传输是帮助流媒体避免“须下载完毕后才可播放”的关键，其原理如图所示。与传统传输方式不同，它会将分割成小块的媒体数据，按照一定的顺序与速率在网络中传输，客户端收到之后则会进行缓冲与播放。缓冲就是不断地接受视频片段并加载媒体数据，而已经播放完毕的视频片段则会被丢弃。 网页制作与渲染 二 网页制作与渲染 网页诞生至今年代久远，作为社交媒体与社交网站发布的重要载体，支持用户在上面发布各种媒体信息并将其转发访问，是网络交流中最常见的一种信息发布方式 网页的基本元素 什么是网页的元素？ 网站与网页的关系，就像是一本书与它的书页那样，网站通常是由许多张内容互相关联的网页构成。网站中的网页可以分为首页与内页。首页又叫主页，主要用来导航与链接到其他内页，一个网站通常只有一张主页。内页负责跳转到网站内部其他页面，可以展现其他的网络信息。 网页的基本元素 表单 导航栏 栏目 超链接 网页版面结构大多为导航栏、栏目与正文三大部分，并由文本、图片、动画、音频、视频、表哥、超链接、表单、框架与内嵌程序等基本元素组成。其中表单用来收集和记录信息，框架的作用是将网页分割成不同区域，内嵌程序则是实现动态效果与交互功能。 网页的W3C标准 表现：CSS(层叠样式表) 用CSS来控制网页的布局、字体、颜色、背景、边框、动画等各种样式，从而让网页更加美观与易读，就像是给汽车绘制漂亮的外观。 结构：HTML（超文本标记语言） 用HTML语言创建网页标题、段落、列表与表格等在内的整体结构，并通过HTML标签来组织呈现网页内容，就像是搭建一辆汽车的架构。 行为：JS（JavaScript脚本语言） 用JS来为网页添加交互功能和动态效果，从而让网页更加酷炫，提升用户体验，就像是给汽车设计更强大的驾驶性能 网页的HTML基本结构 <!DOCTYPE html> 声明位于文档头部，告诉浏览器将要加载的文档类型。 <html> 是 HTML 页面的根元素 <head> 包含了文档的元数据，元数据包括页面标题、角色和字符集定义，还可以添加CSS样式与JavaScript脚本等。 <title> 用于描述网页的标题 <body> 用于描述网页的页面内容 <h1> 用于描述一个一个大标题 <p> 用于描述一个段落 网页制作工具与方法 为了提高网页制作效率，人们开发出各式各样的网页制作工具。 制作简单的网页 体 验 活 动 请新建一个记事本文件，参照书上图1.4.5中所示的样例来编写网页的html代码、并保存为html的网页文件，再用浏览器打开。 体验内容：制作简单的网页。 体验准备：学生机、记事本程序。 网页的渲染 无论采用何种制作工具，编写生成的网页都是一种包含有HTML标签、CSS样式与JavaScript的纯文本文件。而它真实的视觉效果与功能，则必须经过浏览器的渲染，才能正常显示出来。 所谓渲染，就是浏览器自动结合网络终端的屏幕性能，对服务器响应所返回的HTML、CSS和JavaScript等相关资源文件进行解析。一般先解析网页文件中标题、段落和图片等HTML代码，再解析文字和图片呈现样式的CSS样式代码，最后解析负责网页交互性的JavaScript代码，将网页完整的渲染出来 THANKS $$