第一课用记事本制作一个简单的网页-html+css-教学资料-长沙网学教育科技有限公司官网

1、创建一个网页文件

网页文件是扩展名为htm或html的文本文件
打开记事本，用“另存为”修改文件扩展名，创建一个网页文件。
网页文件中主要是编写HTML代码，什么是HTML？
HTML是Hypertext Markup Language(超文本标记语言)的缩写
HTML标记都必须用“<” 和“>” 括起来

HTML文档的基本格式

<html>
<head>
这里写入网页头部信息
</head>
<body>
这里写入网页主体内容
</body>
</html>

修改网页源代码后，在浏览器中按“F5”键刷新

记事本打开网页文件：将文件拖入记事本窗口即可。

2、在网页中显示一篇文章

复制一篇文章到网页源文件中，在网页上显示时换行和多余的空格都会失效，解决办法是定义文章的段落和标题。

段落标记 <p></p>

<p> 到 </p>之间的文字为一个段落，段落会另起一行，并与前后内容保持段间距离，段落内的文字是自动换行，行间距比段间距小很多。

换行标记 <br/>

在段落中需要主动换行时用<br/>标记，每加一个<br/>换一行，<br/>标记是单标记，单标记都是在标记名后面加反斜杠“/”。

标题标记

一号标题 <h1></h1>
二号标题 <h2></h2>
三号标题 <h3></h3>
四号标题 <h4></h4>
五号标题 <h5></h5>
六号标题 <h6></h6>

标题内的文字会被加粗，不同等级的标题文字大小不同，一号最大，六号最小。

3、空格和特殊字符的表示

在网页源代码中段落的前导空格是无效的
文字之间输入再多的空格也只会显示一个空格
文字之间有换行也会显示一个空格。
要想在网页上显示连续的多个空格只能用HTML的特殊字符表示法。

源代码中用   代表一个空格符，

特殊字符的写法：&开头;结尾，中间写符号的标识

例如：< 代表“<”符号，>代表“>”符号

若想在网页上显示一个HTML标记，只能用特殊字符表示法来表示“<”和“>”

计算机中还有很多键盘无法输入的符号，可以用特殊字符表示法将它显示在网页上，请查看《HTML特殊字符编码对照表》

编写源代码时一定要注意这些符号，；“ ” ‘ ’ 不要输成中文全角符号。

4、在网页上显示图片

要在网页上显示图片，首先必须准备一个图片文件，大部分浏览器只支持JPEG、GIF、PNG三种图片格式。

图片标记<img/>

<img src=“123.jpg”/>

其中img是标记名，src是标记的属性，123.jpg是属性的值，一般用双引号括起来（不是必须）。

以上代码可以将名为123.jpg的图片显示在网页上，但要确保这个图片文件与网页文件存放在同一个文件夹。

设置图片的宽高

<img src=“文件名” width=“宽度” height=“高度”/>

width属性和height属性的值是一个整数，如：width=“300”，设置图片为300个像素宽，如果图片原始宽度大于300则缩小图片，小于300 则放大图片。

width和height只设其一，另一个的值会等比例变化，以保持图片的正常比例。

5、设置网页标题

网页标题标记<title></title>

例如：

<title>我的第一个网页</title>

网页标题主要是显示在浏览器的标题栏以及WINDOWS的任务栏，它不属于网页主体内容，所以应该放在网页头部<head></head>之间。

6、总结

HTML标记有单标记和双标记两种，每个标记中可以添加属性，每个属性有特定的取值。

双标记

<标记名属性1=“值” 属性2=“值”......>
内容……
</标记名>

单标记

<标记名属性1=“值”...... />

HTML标记不区分大小写字母

课后练习

1.请独自完成老师的教学案例，为下次课备用

2.用制作一个网页，效果如下图

html+css

第一课 用记事本制作一个简单的网页