你有试过自己写一个网页吗？听上去难，其实操作起来很简单，不夸张地说——有手就行。来试试看吧。
一. 对网页设计的基本了解
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>
<div class="imoney logbot">
</div>
<fieldset class="ainfo">
<legend align="center">点击这里复制本文地址</legend>
<div class="social-share" data-disabled="diandian"></div> <input type="text" value="http://www.gslnedu.com/post/3507.html" id="aurl">
<i class="fa fa-thumb-tack"></i>以上内容由<a href="http://www.gslnedu.com/" class="mlight">朽木教程网</a>整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！ </fieldset>
<link rel="stylesheet" href="http://www.gslnedu.com/zb_users/theme/CmsDown/css/share.min.css">
<script src="http://www.gslnedu.com/zb_users/theme/CmsDown/script/jquery.share.min.js"></script>
<div class="tags"><a href="http://www.gslnedu.com/tags-228.html" target="_blank">html网页制作</a></div>
<div class="nextlog">
<div class="prev"><span>上一篇：</span><a href="http://www.gslnedu.com/post/3506.html">Python用20行代码就能实现漂亮的网页界面?你确定不来看看</a></div> <div class="next"><span>下一篇：</span><a href="http://www.gslnedu.com/post/3508.html">【网站建设自己制作网站流程】自己制作网页难吗?制作网页的步骤</a></div> </div>
<div class="link-box">
<h3>相关文章</h3>
<ul class="rexlist">
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4424.html" title="Vue中路由router的基本使用">Vue中路由router的基本使用</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4423.html" title="如何教你用30分钟开发一款抓取网站图片资源的浏览器插件">如何教你用30分钟开发一款抓取网站图片资源的浏览器插件</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4422.html" title="vue3基础教程(3)——引入ui框架iview(viewui)">vue3基础教程(3)——引入ui框架iview(viewui)</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4421.html" title="图片异步延迟加载，提升网页打开速度">图片异步延迟加载，提升网页打开速度</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4420.html" title="看到这张思维导图，我承认我酸了">看到这张思维导图，我承认我酸了</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4419.html" title="Web Essentials之HTML和CSS操作技巧">Web Essentials之HTML和CSS操作技巧</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4418.html" title="Excel中插入的图片在不同电脑上消失的问题及解决方法">Excel中插入的图片在不同电脑上消失的问题及解决方法</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4417.html" title="BarTender问题解决打印跳转">BarTender问题解决打印跳转</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4416.html" title="软网推荐:网上秀图神器PicGo">软网推荐:网上秀图神器PicGo</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4415.html" title="css点击图片跳转页面，css点击图片旋转">css点击图片跳转页面，css点击图片旋转</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footerbar">
<div class="wrap">
<img src="http://www.gslnedu.com/zb_users/theme/CmsDown/images/qrcode.png" class="ft-qrcode" alt="qrcode"> <p class="ftp"><a href="http://www.gslnedu.com/">朽木教程网</a> ©<script>document.write(new Date().getFullYear());</script> All Rights Reserved. <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024111239号-8
</a><br /><span class="fta"></span></p>
</div>
</div>
<link rel="stylesheet" href="http://www.gslnedu.com/zb_users/theme/CmsDown/css/lightgallery.min.css">
<script src="http://www.gslnedu.com/zb_users/theme/CmsDown/script/lightgallery-all.min.js"></script>
<script>
$(function(){
$(".logcon img:not([src*='.php'])").each(function(){
var path = $(this).attr("src"), width = $(this).width();
if(width >= 200 && !$(this).parent("a").length){
$(this).wrap('<a href="'+path+'" class="lightgallery"></a>');
}
});
setTimeout(function () {
$(".logcon").lightGallery({
thumbnail: false,
selector: '.lightgallery'
});
}, 800);
});
</script>
<div class="backtop"><span class="fa fa-angle-up"></span></div>
</body>
</html><!--64.24 ms , 11 queries , 2955kb memory , 0 error--> |
