第16课 探秘网页与代码 课件 2025-2026学年人教版初中信息科技七年级全一册
2026-04-14
|
3份
|
18页
|
239人阅读
|
0人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第16课 探秘网页与代码 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | ZIP |
| 文件大小 | 48.65 MB |
| 发布时间 | 2026-04-14 |
| 更新时间 | 2026-04-14 |
| 作者 | 丫丫课件 |
| 品牌系列 | - |
| 审核时间 | 2026-04-14 |
| 下载链接 | https://m.zxxk.com/soft/57346839.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
01
网页竟然是一串字符
02
小小代码大变模样
03
网页可以藏在哪儿
04
我是小小网页魔法师
01
网页竟然是一串字符
网页不是图画，而是文字咒语
我们看到的炫酷网页，其实像一张被施了魔法的便签，背后藏着一排排叫HTML的文字符号。
什么是HTML？
HTML全称为 HyperText Markup Language，是一种用于创建网页的标准标记语言。
HTML通过使用标签来定义网页的结构和内容，这些标签通常成对出现，包括开始标签和结束标签，中间的内容被包含在标签之间。
超文本标记语言
三分钟带你了解HTML
HTML是浏览器的说明书
浏览器就像一个听话的机器人，按照HTML说明书一步步执行命令。
遇到
机器人就大喊一声大号标题。
遇到
机器人就贴上一张照片。
遇到
机器人就念一段文字。
标签像配对的小括号
HTML标签通常是成对出现的，就像穿袜子一样，缺一不可。
开始标签 (左脚)
+
结束标签 (右脚)
完整标签 (一双)
<head>
</head>
<head> 标题 </head>
<br>
<br>
02
小小代码大变模样
<html>
<body>
<h1>我的第一个网页😜</h1>
<p>我是七年级的学生，这是我写的代码！</p>
</body>
</html>
改一个字，网页就换装
动漫节
科技节
{"Code":"NoSuchKey","RequestId":"3701081526f85869081526-bf6c41b-1vFkQg-GO-cb-tos-1az-front-azc-1","HostId":"kYjcLEdAQFRkgwxatpslcZutWwxkSLVg","Message":"The specified key does not exist.","EC":"0017-00000003","Key":"kimi-ppt/html-gen/static/image-error.png"}
$上个视频里我们说HT mail定义网页的结构和信息。信息可以有很多不同的展现形式，比如标题、图片链接、文本等等。所以这个视频里我们一起了解一些HT mail的常用标签类型。标题标签包括H1、H2、H3、H4、H5、H6。标题文本被起始和闭合标签包围，数字越小表示标题层级越大，或者直观来说数字越小标题的字号越大。但因为h tl只定义信息，不是所有时候都和外观绑定。举个例子，我可以通过CSS，但H一的字号和H2的字号一样大。所以严格来说还是应该从信息逻辑的层面，以层级去区分这些标题标签，而不是字号。文本段落标签是P文本也被起始和闭合标签所包围。不同的P标签之间会默认进行换行表示，不同段落、文章、评论等信息都可以用P标签表示。如果你直接在文本段落标签里换行，网页显示的时候换行并不会起作用，只会多一个空格。如果需要换行，你可以用多个P标签，或者也可以用BR标签在文本段落里强制换行。Br标签就是换行标签，而且它有一个特点是只有起始标签，没有配对的闭合标签。这和大部分HTML标签不一样。我们除了可以给文本段落加换行，还可以格式化内容，比如可以用B标签包围文字内容进行加粗，用I标签包围文字内容变成斜体，用右标签包围文字内容加下划线。但文字并不是信息唯一的格式，要在网页上加图片，我们可以用IMG标签，注意它和BR一样，也是没有闭合标签的。这个标签需要我们指定一个属性是c source，表示图片的路径。它的值可以是一个指向图片的链接，也可以是路径。但总之SRC属性一定要给一个值才能知道图片来自哪里。除了必须有的SRC属性，还有一些其他属性可以指定。比如说with设置图像宽度、height, 设置图像高度等等。A标签用来添加链接，这个也是非常常用的。因为用户可以通过链接在不同网页之间跳来跳去，在起始和B和标签之间放上链接对应的文字，展示给用户的就不再是原始直白的地址了。这个标签有一个我们必须指定的属性，叫做h ref值，就是目标要跳转的URL地址。它有个可填可不填的属性叫做target，用来指定链接页面的打开方式。Targets的值默认为下划线，self表示直接在当前窗口跳转链接。我们也可以指定为下划线，blank表示在新窗口里打开。Div和span标签都是容器，它们本身是不包含任何内容的。也就是说一般我们会让其他元素被这两个标签包围，作为dive元素或span元素的子元素。这样做的作用有很多。比如说我们想给多个元素加上红色背景时，就可以把CSS样式直接运用在某个容器上，而不是一个个元素上。它们之间的区别是deep是块级元素，独占自己的1.1块行，最多放一个deep元素。而spain是内联元素，不会独占1.1块行，可以有多个span元素。接下来还有表示列表的标签，OL定义的是有序列表，OL其实就是audit list的简写，意思是列表里面的每项是有顺序的，可以用数字依次表示。OL只是表示列表，列表里面的每项元素要用类标签this list item的简写。像这样我们就定义出了一个有三项元素的有序列表和有序列表相对的是无序列表，对应的标签是UL，UL是on order list的缩写，无序列表的元素一般不会有数字在前面了，而是点或者小横杠等，表示没有顺序，列表里面的每项元素也是用力标签。像这样我们就定义出了一个有三项元素的无序列表。我们要学习的最后一个网页常见信息结构是表格，它的相关标签比较多，所以我们逐步讲解table是用来定义表格的标签，它里面一般会嵌套一些和表格相关的元素。T head table, head表示表格的头部，比如一般是表格的第一行t body table body表示表格的主体。在t head和t table里面，我们会放上TR table row定义表格行，但光有行还不够，每一行里面会有一个个单元格，所以在TR里面我们会放TD table data表示一项项数据。所以一个完整的表格用HTML表示的话会长成这样。你可以为表格加上一些属性，比如badder默认表格是没有边框的，如果要加边框，可以指定body这个属性的值为某个数字。比如说一，但除了有一些标签独有的属性之外，class这个属性可以被运用在所有元素上，定义元素的类的名称。类可以帮助我们分组。比如说一个网页上可能有多个文本段落，那我们可以通过class等于content和class等于rereview来区分开哪些文本段落是文章，哪些文本段落是用户评论。这些你都学会了吗？没有学会也不要急，下个视频里我们会通过实践练习这些HT mail标签，我们稍后见。
今天带你认识超文本标记语言，也就是HTML1门用来定义网页内容结构的语言。时间回到1989年，蒂姆伯纳斯里在森开发出了世界上第一个网页浏览器，万维网word wide web WWW的起源。但要在浏览器里展示内容，它需要一种发布语言。于是选用了基于标准通用标记语言的语法，通过一对开闭标签给原本无序的文本赋予意义。比如H代表标题，P代表段落，最重要的是A代表锚点用来链接到其他网页。互联网早期发展飞快，HTML也几经演变，最终在2008年标准化为HTML5，也就是我们今天熟悉并喜爱的版本。现代HTML内置了处理器各种媒体类型的标签，比如视频、音频，还有用于动态绘制自定义图形的画布。典型的HTML元素由一对开闭标签组成，中间放内容。这个中间的内容可以是纯文本，也可以是其他HTML元素，称为子元素。开标签还能带一个或多个属性，用键值对的形式自定义元素的外观或行为。想动手做第一个网页，先创建一个叫index点HTML的文件。这个文件是一颗基于文档对象模型DOM的节点层级结构网页。从HTML标签开始，它恰好有两个子元素，head和body。Head里放的是页面上不直接显示的代码内容，比如标题、货源标签，用来给页面提供描述。注意meta元素没有闭合标签，当一个元素完全自包含时，闭合标签通常是可选的。Body承载的是最终用户能看到的界面。我们可以先写一个H一标题，再加上一段文字。要添加图片，用IMG标签，它是自闭合的，给它设置SRC属性，为图片的文件路径，还要提供一个替代描述，方便机器人和屏幕阅读器访问。而让网页真正具备革命性的是它能链接到信息高速公路上的其他页面。用锚点A标签创建链接，把frf属性设为你希望点击后导航到的地址。HTML还提供结构化的标签，比如DIV，常用于把元素分组，方便统一样式，从而表达更复杂的界面元素。比如导航栏，当你对代码满意后，复制这个HTML文件的完整路径，粘贴到任意网页浏览器里打开。恭喜你刚刚搭建了自己的第一个网站，三分钟带你了解HTML。想看更多这样的短视频，记得点赞和关注，感谢观看，我们下次再见。
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。