第3课制作网页(视频)-小学生学JS编程-教学资料-长沙网学教育科技有限公司官网

视频课程

制作一个网页

JS是网页编程语言，所以学习JS之前需要先掌握一些网页知识。

网页文件是一种文本文件，扩展名为： .html，可以使用记事本来创建。

如何创建一个网页文件？

打开Windows的记事本，输入内容，然后保存，修改保存类型为”所有文件“，输入文件名时末尾加上扩展名.html。

鼠标双击打开网页文件，默认启动浏览器打开。

用记事本怎么打开网页文件？

1、将文件拖放到记事本窗口内。

2、也可以点击记事本窗口的“文件菜单”->打开，在弹出对话中将“文件类型”改成“所有文件”。

刷新网页：在浏览器中按 F5键可以刷新网页。

网页文档的结构

一个网页文档需要用HTML标记来定义内容。

什么是HTML？

超文本标记语言（Hypertext Markup Language）的简写。最简单的HTML文档结构如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
</head>
<body> 网页内容... </body>
</html>

第一句<!DOCTYPE html>，是声明这是一个标准的HTML5文档。
HTML文档从 <html> 开始到 </html> 结束
分为头部 <head> </head> 和主体 <body> </body> 两个部分
网页上要显示的内容都写在 <body> 到 </body>之间
其中<meta charset="gbk">是设置网页字符集，如果网页上要出现多国文字，可将字符集设置为UTF-8，注意：文件的存储格式要与字符集一致。

定义标题和段落

段落标记<p> </p>

段落之间保持段间距，段落内的多行文字保持行间距离。

换行标记<br/>

网页上的文字是遇到边界自动换行，但也可以使用换行标记主动换行。

<br/>

是个单标记，所以末尾加"/"字符。文档中每写一个<br/>标记代表网页上换一行。

标题字标记<h1> ~ <h6>

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

一号标题字最大，六号标题字最小

在网页上显示图片

网页上可以使用的图片文件类型主要有四种种：jpg（或jpeg）、gif、png，.webp。

图片的尺寸

查看图片文件尺寸：右击图片文件->属性->详细信息。

图片由像素构成，像素就是一个点，每个可以有不同的颜色。

图片标记<img/>

<img src="图片文件名" width="宽度" height="高度"/>
例如：
<img src="123.jpg" width="200" height="150"/>

注意：要把图片文件和网页文件放在同一个文件夹中

如果不设置宽高，则是显示为图片的默认大小
如果只设置宽度，则高度会等比例调整
如果只设置高度，则宽度会等比例调整
同时设置宽度和高度，则可能比例失调

总结

1、网页文件的扩展名为：.html

2、网页文件用记事本打开看到的是代码，用浏览器打开看到的才是网页。

3、网页上的内容用HTML标记来定义，HTML标记都是用<>括起来的

4、HTML标记有很多，有双标记，例如：<p></p>、<h1></h1>，也有单标记，例如：<img/> <br/>，

5、每个HTML标记上可以添加一些属性，属性可以被赋予一个值，例如：

<img src="123.jpg" width="200" height="150"/>

img是一个HTML标记，后面的src、width、height是这个标记的属性，""中是值。

课后练习

1、独自完成课堂案例。

2、在网上找一篇短文，制作成网页，定义标题和段落，配图。

小学生学JS编程

第3课 制作网页(视频)