第8课网页的数据呈现-教学课件 2025—2026学年浙教版（2023）初中信息技术八年级上册

2025-07-27

| 24页

| 173人阅读

| 2人下载

普通

内容正文：

第8课网页的数据呈现年级：八年级学科：初中信息科技（浙教版） <html> <head> <title>人工智能</title> </head> <body> <h1>走进人工智能</h1> </body> </html> 回顾 HTML语言用来组织网页的结构和内容。 2 优秀的网页数据呈现效果有什么作用？分析文字和图片等数据，大小更合适、位置更合理、颜色更统一、协调分析优秀的网页数据呈现效果有什么作用？网页更美观更便于阅读有整体风格特色只有结构和内容的网页设置了效果的网页实验一尝试删除、恢复link标签行，观察实验结果。 link代码行实现了整个网页效果的设置 <link rel="stylesheet" href="exstyle.css"> 链接类型链接文件路径及文件名新知1：层叠样式表新知1：层叠样式表定义网页中数据的外观和表现形式，实现网页效果的设置。层叠样式表 CSS cascading style sheets 新知2：样式表的基本结构选择符样式属性1:属性值1; 样式属性2…… a { color:green;font-size:20px;} 样式声明 { } 尝试体验请你自己尝试添加样式，观察网页的效果变化，进一步掌握样式表的基本结构。添加CSS的三种方式 <link rel="stylesheet" href="exstyle.css"> 1.外部样式表 2.内部样式表 3.内联样式表添加CSS的三种方式 2.内部样式表 <h1 style="color:red;text-align:center"> 走进人工智能 </h1> 样式属性1:属性值1; 样式属性2:属性值2 添加CSS的三种方式 3.内联样式表内联样式表实验二有三个用不同CSS方式添加了样式的网站，请尝试修改三个网站中所有网页的某一个样式体验三种不同添加CSS的方式的便捷度，并填写表格。内部样式表外部样式表知识链接：<div>标签选择符 {样式属性1:属性值1; 样式属性2……} 类名 <div class="title"> <h1>走进人工智能</h1> </div> 知识链接：<div>标签类名实现网页数据样式的精准控制知识链接：<div>标签实验二有三个用不同CSS方式添加了样式的网站，请尝试修改三个网站中所有网页的某一个样式体验三种不同添加CSS的方式的便捷度，并填写表格。添加css方式网页代码复杂程度网页样式修改难度网页内容与样式的分离程度内联样式表内部样式表外部样式表实验二有三个用不同CSS方式添加了样式的网站，请尝试修改三个网站中所有网页的某一个样式体验三种不同添加CSS的方式的便捷度，并填写表格。添加css方式网页代码复杂程度网页样式修改难度网页内容与样式的分离程度内联样式表内部样式表外部样式表内部样式表实现了网页内容与样式的基本分离外部样式表实现了网页内容与样式的完全分离解耦 ★★★ ★★★ ☆ ★★ ★★ ★★ ☆ ☆ ★★★ 小结 1.层叠样式表CSS 2.样式表的作用 3.样式表的基本结构 4.CSS降低网页代码耦合度带来的便捷作业用css来美化自己主题网站的网页，你可以从改变文字的字体和颜色开始，然后尝试添加平铺背景图等样式效果。 $$

第8课 网页的数据呈现-教学课件 2025—2026学年浙教版（2023）初中信息技术八年级上册

内容正文：

资源预览图

第8课网页的数据呈现-教学课件 2025—2026学年浙教版（2023）初中信息技术八年级上册