前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

2025年03月28日

怎样用记事本写一个简单的网页?有手就行

你有试过自己写一个网页吗？听上去难，其实操作起来很简单，不夸张地说——有手就行。来试试看吧。

一. 对网页设计的基本了解

1. 网站

1）一个网站由若干个网页构成，这些网页是用超级链接有逻辑地联系起来的。
2）网站由网址来识别和存取。
3）网页需要上传到网络空间中，才能供浏览者访问网站中的内容。
即，一个网站需要有域名（网址）、网页、网络空间三部分。

2. 网页编辑工具

1）语言

我们可以使用HTML来编写网页，HTML文件就是增加了标记的普通文本文件。
可以简单地使用记事本来编写一个网页，只需将文件后缀名改为html，然后用浏览器打开。
现在编写网页的语言其实由三部分构成：HTML,CSS,JavaScript。


1）HTML：早期编写网站的语言。
2）CSS：负责网站内容的表现形式。是在HTML原来的功能中分离出来的，这种分离可以使维护站点外观更容易，也让文档代码更简练，网页加载快。
3）JavaScript：负责动态部分。 使网页更加生动活泼，增加和用户的互动。

2）软件
前面已经讲到，可以简单地使用记事本来编辑网页。
这里在提出两款编辑软件：EditPlus，Dreamweaver。它们的能力是递增的。

EditPlus:

EditPlus相比记事本的优点是，可以带有html语言的语法高亮，而且可以在这个编辑页面中直接预览网页（点击左上角部分的小地球图标）。

二. 第一个网页

前面已经提到，html语言文件就是增加了标记的普通文本。
那么首先，我们就要了解标记的作用：
一些简单的标记，可以让文本在网页中以另一种形式呈现出来。

1. 实操——用记事本写个朴素的网页

简单起见，接下来就使用记事本来编写我们的网页。

首先，新建一个文本文件（txt），给它起个随便的名字。

然后用记事本打开它，输入以上内容，记得保存。

重命名文件，将文件后缀名改为html。

（
的意思是换行）
接着选择打开方式为某个浏览器（系统默认的浏览器就可以），就可以显示出我们刚刚编写的网页了。
是不是感觉朴素地有点过头了？没关系，第一次嘛。

2. 代码讲解


  	
  			

  		  

  		  

									这是我们的第一个网页。

这里我们用到了三个基本的标签：、和
。
其中标志着我们html文件的开始，则表示正文内容的开始。而和分别代表着对应部分的结束。和之间的一行文本，则是我们要展现的内容。而
则是换行，我们经常用这个标签来调整网页的上下距离。

3. 更丰富一点

增加一些其它的标签，让我们的网页更加生动一点。



第一个网页


这是我们的第一个网页！


可以简单留作一个纪念。


但我们的征途，是星辰大海！

标签

功能

标识文件的语言标准，这里指的是html5

</span></span></p></td><td><p style="text-align: center;" data-track="98"><span style="color: #4F4F4F; --tt-darkmode-color: #979797;"><span style="background-color: #F7F7F7; --tt-darkmode-bgcolor: #1A1A1A;">网页的标题，即浏览器中页面的名字</span></span></p></td></tr><tr><td><p style="text-align: center;" data-track="99"><span style="color: #4F4F4F; --tt-darkmode-color: #979797;"><h1></span></p></td><td><p style="text-align: center;" data-track="100"><span style="color: #4F4F4F; --tt-darkmode-color: #979797;">一级标题</span></p></td></tr><tr><td><p style="text-align: center;" data-track="101"><span style="color: #4F4F4F; --tt-darkmode-color: #979797;"><span style="background-color: #F7F7F7; --tt-darkmode-bgcolor: #1A1A1A;"><p></span></span></p></td><td><p style="text-align: center;" data-track="102"><span style="color: #4F4F4F; --tt-darkmode-color: #979797;"><span style="background-color: #F7F7F7; --tt-darkmode-bgcolor: #1A1A1A;">一个段落的开始</span></span></p></td></tr></tbody></table></div></div><p data-track="103">在<body>标记中，还可以控制一些全局的呈现效果：<br><br></p><div class="tableWrapper"><div class="syl-table-wrap"><table style="width: 550px;"><colgroup><col style="width: 125px;"><col style="width: 425px;"></colgroup><tbody><tr><td><p style="text-align: center;" data-track="104"><strong><span style="color: #4F4F4F; --tt-darkmode-color: #4F4F4F;"><span style="background-color: #EFF3F5; --tt-darkmode-bgcolor: #BCBFC0;">标识符</span></span></strong></p></td><td><p style="text-align: center;" data-track="109">控制内容</p></td></tr><tr><td><p style="text-align: center;" data-track="105"><span style="color: #4F4F4F; --tt-darkmode-color: #979797;">background</span></p></td><td><p style="text-align: center;" data-track="108"><span style="color: #4F4F4F; --tt-darkmode-color: #979797;">背景图片（需要在html文件相同目录下，加入相应的图片文件）</span></p></td></tr><tr><td><p style="text-align: center;" data-track="106"><span style="color: #4F4F4F; --tt-darkmode-color: #979797;"><span style="background-color: #F7F7F7; --tt-darkmode-bgcolor: #1A1A1A;">text</span></span></p></td><td><p style="text-align: center;" data-track="110"><span style="color: #4F4F4F; --tt-darkmode-color: #979797;"><span style="background-color: #F7F7F7; --tt-darkmode-bgcolor: #1A1A1A;">文本内容的颜色</span></span></p></td></tr><tr><td><p style="text-align: center;" data-track="107"><span style="color: #4F4F4F; --tt-darkmode-color: #979797;">leftmargin</span></p></td><td><p style="text-align: center;" data-track="111"><span style="color: #4F4F4F; --tt-darkmode-color: #979797;">两边间距大小</span></p></td></tr></tbody></table></div></div><p data-track="112">下面是新的网页：</p></div> <p class="post-tags">标签：<a href="http://www.whsf66.com/tags-77.html" target="_blank">html行间距</a> </p> <p class="post-footer"> 作者:whsf66 , 分类:前端教程 , 浏览:2 , 评论:0 </p> </div> <label id="AjaxCommentBegin"></label> <!--评论输出--> <!--评论翻页条输出--> <div class="pagebar commentpagebar"> </div> <label id="AjaxCommentEnd"></label> <!--评论框--> <div class="post" id="divCommentPost"> <p><a name="comment">发表评论:</a><a rel="nofollow" id="cancel-reply" href="#divCommentPost" style="display:none;"><small>取消回复</small></a></p> <form id="frmSumbit" target="_self" method="post" action="http://www.whsf66.com/zb_system/cmd.php?act=cmt&postid=8015&key=6a5b79dc2293f2e2197c3040bb2cbaf0" > <input type="hidden" name="inpId" id="inpId" value="8015" /> <input type="hidden" name="inpRevID" id="inpRevID" value="0" /> <p><label for="inpName"><input type="text" name="inpName" id="inpName" class="text" value="访客" size="28" tabindex="1" /> 名称(*)</label></p> <p><label for="inpEmail"><input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" /> 邮箱</label></p> <p><label for="inpHomePage"><input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="28" tabindex="3" /> 网址</label></p> <p><textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" ></textarea></p> <p><input name="sumbit" type="submit" tabindex="6" value="提交" onclick="return zbp.comment.post()" class="button" /></p> </form> </div> </div> <div id="divSidebar"> <dl class="function" id="divContorPanel"> <dt class="function_t">控制面板</dt><dd class="function_c"> <div><span class="cp-hello">您好，欢迎到访网站！</span><br/><span class="cp-login"><a href="http://www.whsf66.com/zb_system/cmd.php?act=login">登录后台</a></span>  <span class="cp-vrs"><a href="http://www.whsf66.com/zb_system/cmd.php?act=misc&type=vrs">查看权限</a></span></div> </dd> </dl> <dl class="function" id="divCatalog"> <dt class="function_t">网站分类</dt><dd class="function_c"> <ul><li><a title="前端教程" href="http://www.whsf66.com/category-1.html">前端教程</a></li> </ul> </dd> </dl> <dl class="function" id="divComments"> <dt class="function_t">最新留言</dt><dd class="function_c"> <ul></ul> </dd> </dl> </div> <div id="divBottom"> <!--<p id="BlogPowerBy">Powered By <a href="https://www.zblogcn.com/" title="Z-BlogPHP 1.7.3 Build 173295" target="_blank" rel="noopener norefferrer">Z-BlogPHP 1.7.3</a></p>--> <p id="BlogCopyRight"></p> </div><div class="clear"></div> </div><div class="clear"></div> </div><div class="clear"></div> </div> </body> </html><!--118.00 ms , 10 queries , 2753kb memory , 0 error-->