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.用制作一个网页，效果如下图
在线咨询