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

一. 对网页设计的基本了解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/3068.html">定制网站建设步骤</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/23550.html">源码定制什么网站好用</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/3842.html">「网络技术」公网访问的Linux CentOS本地Web站点搭建指南</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/39028.html">网页设计与制作教程(第2版) (豆瓣)</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/36055.html">企业网站建设公司怎么找？看看网站建设方案怎么写</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/28606.html">高中信息技术教资面试试讲真题之《网站的基本概念》教案设计</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/4263.html">包含网站建设优化兴田德润的词条</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/10160.html">摇一摇抽奖的小程序（摇一摇抽奖）</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/34316.html">徐州网站定制开发价格</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/35766.html">中国电建市政建设集团山东公司</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/30026.html">滨州市市区2017年度建筑工程造价指标发布</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/40170.html">大数据时代，网站制作应做些什么</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/17478.html">网站建设及推广助力企业营销！网站建设及推广喜获佳绩好high哟</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/25897.html">火热的工地 发展的脉动——山东省重大项目建设一线见闻</a></div> </div> <div class="hot-item"> <span class="hot-num">◆</span> <div class="hot-title"><a href="/anyouwz/40843.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>