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

一. 对网页设计的基本了解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

</p></td><td><p data-track="98">网页的标题，即浏览器中页面的名字</p></td></tr><tr><td><p data-track="99"><h1></p></td><td><p data-track="100">一级标题</p></td></tr><tr><td><p data-track="101"><p></p></td><td><p data-track="102">一个段落的开始</p></td></tr></tbody></table></div></div><p>/div></p><p>p data-track="103">在<body>标记中，还可以控制一些全局的呈现效果：</p><br/><br/><p>/p></p><p>div></p><div><div><table><colgroup><col/><col/></colgroup><tbody><tr><td><p data-track="104"><strong>标识符</strong></p></td><td><p data-track="109">控制内容</p></td></tr><tr><td><p data-track="105">background</p></td><td><p data-track="108">背景图片（需要在html文件相同目录下，加入相应的图片文件）</p></td></tr><tr><td><p data-track="106">text</p></td><td><p data-track="110">文本内容的颜色</p></td></tr><tr><td><p data-track="107">leftmargin</p></td><td><p data-track="111">两边间距大小</p></td></tr></tbody></table></div><p>/div></p></div><p data-track="112">下面是新的网页：</p> </div> <!-- 上一篇 / 下一篇 --> <div class="article-nav"> <div class="nav-item prev"> <span class="nav-label">上一篇</span> <div class="nav-title"><a href="/anyouwz/23758.html">一个简单的标准 HTML 设计参考</a></div> </div> <div class="nav-item next"> <span class="nav-label">下一篇</span> <div class="nav-title"><a href="/anyouwz/23760.html">前端入门——先从制作一个简单的html5网页开始</a></div> </div> </div> </div> <!-- 右侧：侧边栏 --> <div class="sidebar"> <!-- 随机文章 --> <div class="sidebar-widget reveal"> <div class="widget-title"><i class="fas fa-fire"></i> 随机文章</div> <div class="hot-list"> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/11739.html">推荐7个模板代码和其他游戏源码下载的网址</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/7914.html">民生山西资格认证优化升级怎么办？</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/11088.html">岳阳网站建设制作服务公司</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/12194.html">微信分享小程序助力怎么转链接</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/42412.html">wordpress建站难度</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/43371.html">建泰建设有限公司资质信息</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/32864.html">公司网站建设需要多少钱</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/2028.html">在线电子书阅读微信小程序 毕业设计 课程设计（ 使用教程）</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/14044.html">免费主机怎么上传源码？</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/14760.html">全屋定制设计网站有哪些</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/20484.html">手把手教你了解，认识各个国家潮牌的品牌故事</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/11621.html">超市小程序上线宣传视频怎么做</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/1619.html">5合一网站设计多少钱</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/34156.html">「外贸推广」外贸企业利用SEO推广网站有效果吗</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/1809.html">怎么自己搭建网站？你需要注意哪些具体点</a></div> </div> </div> </div> </div> </div> </div> </section>  <!-- ============================================================ 页脚 ============================================================ --> <footer class="footer"> <div class="container footer-inner"> <div class="footer-brand"> <div class="logo"> <a href="/"> <i><img src="/static/img/logo.png"></i> <span>南京安优网络</span> </a> </div> <p>专注企业网站建设 · 小程序开发 <br />助力企业实现数字化转型与增长。</p> </div> <div class="footer-links"> <div> <h4>服务</h4> <a href="/wzjsfw/" title="网站建设服务">网站建设服务</a> <a href="/xcxfw/" title="小程序开发服务">小程序开发服务</a> </div> <div> <h4>案例中心</h4> <a href="/anyoucase/" title="网站建设案例">网站建设案例</a> <a href="/anyouxcx/" title="小程序开发案例">小程序开发案例</a> </div> <div> <h4>解决方案</h4> <a href="/zhizaoyeshuzihuajianshefangan/" title="制造业数字化建设方案">制造业数字化建设方案</a> <a href="/kejiqiyeguanwangjianshefangan/" title="科技企业官网建设方案">科技企业官网建设方案</a> <a href="/xiandaifuwuyeshuzihuafangan/" title="现代服务业数字化方案">现代服务业数字化方案</a> <a href="/jiaoyupeixunshuzihuafangan/" title="教育培训数字化方案">教育培训数字化方案</a> </div> <div> <h4>新闻动态</h4> <a href="/anyounews/" title="公司新闻">公司新闻</a> <a href="/anyouwz/" title="网站文章">网站文章</a> <a href="/aizsk/" title="知识库">知识库</a> </div> </div> <div class="footer-qr"> <div class="qr-title"><i class="fas fa-qrcode"></i> 关注我们</div> <div class="qr-wrapper"> <img src="/static/img/ewm.jpg" alt="南京安优网络微信公众号二维码" /> </div> <div class="qr-label">扫码关注 · 获取方案</div> </div> </div> <div class="footer-bottom"> <div class="container"> <p>© 2026 南京安优网络科技有限公司 · 用技术创造价值  <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备12071769号-4</a> <a href="http://www.anyouy.cn/sitemap.xml">网站地图</a></p> </div> </div> </footer> <!-- ============================================================ 右侧在线客服 ============================================================ --> <div class="online-service"> <div class="service-wrap"> <div class="service-item wechat"> <i class="fab fa-weixin"></i> </div> <div class="popup popup-qr"> <img class="popup-img" src="/static/img/ewm.jpg" alt="微信二维码" /> <div class="popup-label"><i class="fab fa-weixin"></i> 扫码添加微信</div> </div> </div> <div class="service-wrap"> <a href="tel:400-8793-956" class="service-item phone" aria-label="电话咨询"> <i class="fas fa-phone-alt"></i> </a> <div class="popup popup-phone"> <div class="phone-number"> <i class="fas fa-phone-alt"></i> 400-8793-956 </div> <div class="phone-hint">点击直接拨打</div> </div> </div> <div class="service-wrap"> <div class="service-item top" onClick="window.scrollTo({top:0,behavior:'smooth'})"> <i class="fas fa-arrow-up"></i> </div> </div> </div> <script src="/static/js/anyou.js" language="javascript"></script> </body> </html>