前言

出于对网站的一些突然的兴趣，我开始了解网页是如何被设计出来的。
作者水平有限，如有问题，欢迎指出。

文章目录

  • 前言
  • 一. 对网页设计的基本了解
    • 1. 网站
    • 2. 网页编辑工具
      • 1）语言
      • 2）软件
  • 二. 第一个网页
    • 1. 实操——用记事本写个朴素的网页
    • 2. 代码讲解
    • 3. 更丰富一点
  • 总结

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

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><body>这是我们第一个网页的内容哈。</body></html>

这里我们用到了两个基本的标签：和。
其中标志着我们html文件的开始，则表示正文内容的开始。而和分别代表着对应部分的结束。和之间的一行文本，则是我们要展现的内容。
（是不是有点明白为什么”html是增加了标记的普通文本了”？）

3. 更丰富一点

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

<!doctype html><html><title>第一个网页</title><body background = "宇宙.jpeg"text = "#00ff33"leftmargin = "300"><h1>这是我们的第一个网页！</h1><p>可以简单留作一个纪念。</p><p>但我们的征途，是星辰大海！</p></body></html>
标签功能
标识文件的语言标准，这里指的是html5
</td><td>网页的标题，即浏览器中页面的名字</td></tr><tr><td><h1></td><td>一级标题</td></tr><tr><td></td><td>一个段落的开始</td></tr></tbody></table><p><code>注意：标签的括号和字母之间是没有空格的，我这里是因为不加空格显示不出来。</code></p><blockquote><p>在<code></code>标记中，还可以控制一些全局的呈现效果：</p></blockquote><table><thead><tr><th>标识符</th><th>控制内容</th></tr></thead><tbody><tr><td>background</td><td>背景图片（需要在html文件相同目录下，加入相应的图片文件）</td></tr><tr><td>text</td><td>文本内容的颜色</td></tr><tr><td>leftmargin</td><td>两边间距大小</td></tr></tbody></table><p><strong><mark>下面是新的网页：</mark></strong></p><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/2f640a5b604e4a83a89d5be9f044b530.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/2f640a5b604e4a83a89d5be9f044b530.png" /></p><hr><h1>总结</h1><p>我们的第一个网页讲到这里就讲完啦。<br /> 那博主在这里求个<mark>三连</mark>不过分吧？</p></article></div><div class="related-posts"><h2 class="related-posts-title"><i class="fab fa-hive me-1"></i>相关文章</h2><div class="row g-2 g-md-3 row-cols-2 row-cols-md-3 row-cols-lg-4"><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/22121/" title="LSTD: A Low-Shot Transfer Detector for Object Detection论文阅读笔记" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/e443d747ef5d0191237c8e2f5e140034.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/22121/" title="LSTD: A Low-Shot Transfer Detector for Object Detection论文阅读笔记">LSTD: A Low-Shot Transfer Detector for Object Detection论文阅读笔记</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/27133/" title="操作系统中文件系统的实现和分配方式探析（上）" data-bg="https://img.maxssl.com/uploads/?url=https://img2023.cnblogs.com/blog/1423484/202309/1423484-20230901230027557-1132675744.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/27133/" title="操作系统中文件系统的实现和分配方式探析（上）">操作系统中文件系统的实现和分配方式探析（上）</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/46192/" title="51-JS鼠标,键盘,表单,粘贴板,窗口事件，遍历节点树，DOM操作：创建/添加，删除，替换" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/46192/" title="51-JS鼠标,键盘,表单,粘贴板,窗口事件，遍历节点树，DOM操作：创建/添加，删除，替换">51-JS鼠标,键盘,表单,粘贴板,窗口事件，遍历节点树，DOM操作：创建/添加，删除，替换</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/35624/" title="HTML中使用JavaScript实现一个简单的鼠标悬停特效。" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/35624/" title="HTML中使用JavaScript实现一个简单的鼠标悬停特效。">HTML中使用JavaScript实现一个简单的鼠标悬停特效。</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/16690/" title="ET框架6.0分析三、网络通信" data-bg="https://img.maxssl.com/uploads/?url=https://img2023.cnblogs.com/blog/2905902/202304/2905902-20230404202603094-642298186.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/16690/" title="ET框架6.0分析三、网络通信">ET框架6.0分析三、网络通信</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/45493/" title="使用elasticsearchdump迁移elasticsearch数据实战" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/45493/" title="使用elasticsearchdump迁移elasticsearch数据实战">使用elasticsearchdump迁移elasticsearch数据实战</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/25989/" title="区块链的基本介绍" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/bd27e6fc44f34b409ba1831958c05913.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/25989/" title="区块链的基本介绍">区块链的基本介绍</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/56145/" title="python xml 解析" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/56145/" title="python xml 解析">python xml 解析</a></h2></div></article></div></div></div></div><div class="sidebar-wrapper col-md-12 col-lg-3 h-100" data-sticky><div class="sidebar"><div id="recent-posts-4" class="widget widget_recent_entries"><h5 class="widget-title">最新关注</h5><ul><li> <a href="https://www.maxssl.com/article/57859/">【MySQL】InnoDB存储引擎</a></li><li> <a href="https://www.maxssl.com/article/57858/">DB-GPT：强强联合Langchain-Vicuna的应用实战开源项目，彻底改变与数据库的交互方式</a></li><li> <a href="https://www.maxssl.com/article/57857/">TigerBeetle：世界上最快的会计数据库</a></li><li> <a href="https://www.maxssl.com/article/57856/">【SQL server】玩转SQL server数据库：第三章 关系数据库标准语言SQL（二）数据查询</a></li><li> <a href="https://www.maxssl.com/article/57855/">马斯克400条聊天记录被法院公开，原来推特收购是在短信上谈崩的</a></li><li> <a href="https://www.maxssl.com/article/57854/">戏精摩根大通：从唱空比特币到牵手贝莱德</a></li></ul></div><div id="ri_sidebar_posts_widget-2" class="widget sidebar-posts-list"><h5 class="widget-title">热文推荐</h5><div class="row g-3 row-cols-1"><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/30477/" title="【数据结构初阶】八、非线性表里的二叉树（二叉树的实现 — C语言链式结构）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/44b20824cb9349a681801dfdee758d92.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/30477/" title="【数据结构初阶】八、非线性表里的二叉树（二叉树的实现 — C语言链式结构）">【数据结构初阶】八、非线性表里的二叉树（二叉树的实现 — C语言链式结构）</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/28367/" title="Kindelia-Chain+HVM：点对点函数式计算网络" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/28367/" title="Kindelia-Chain+HVM：点对点函数式计算网络">Kindelia-Chain+HVM：点对点函数式计算网络</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/6230/" title="人工智能时代八大类算法你了解吗？（包邮送书6本）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/ea36a2bba01f4fad930b5fc5375c40ad.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/6230/" title="人工智能时代八大类算法你了解吗？（包邮送书6本）">人工智能时代八大类算法你了解吗？（包邮送书6本）</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/22357/" title="三层架构综合实验（2.7）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/b3cb3fca06734e65b5b2383aa5805f33.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/22357/" title="三层架构综合实验（2.7）">三层架构综合实验（2.7）</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/31123/" title="安装库时报错：RuntimeError: The detected CUDA version (11.7) mismatches the version that was used to…" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/a60be90b583642958c5bcf09822c102f.jpeg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/31123/" title="安装库时报错：RuntimeError: The detected CUDA version (11.7) mismatches the version that was used to…">安装库时报错：RuntimeError: The detected CUDA version (11.7) mismatches the version that was used to…</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/16876/" title="android MVC，MVP架构" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/adae44d85ae240c7aaf495ea97ea9e81.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/16876/" title="android MVC，MVP架构">android MVC，MVP架构</a></h2></div></div></article></div></div></div></div></div></div></div></main><footer class="site-footer py-md-4 py-2 mt-2 mt-md-4"><div class="container"><div class="text-center small w-100"><div>Copyright © <script>today=new Date();document.write(today.getFullYear());</script> maxssl.com 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">浙ICP备2022011180号</a></div><div class=""><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7656930379472324" crossorigin="anonymous"></script></div></div></div></footer><div class="rollbar"><ul class="actions"><li><a target="" href="https://www.maxssl.com/" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i><span></span></a></li><li><a target="" href="http://wpa.qq.com/msgrd?v=3&uin=6666666&site=qq&menu=yes" rel="nofollow noopener noreferrer"><i class="fab fa-qq"></i><span></span></a></li></ul></div><div class="back-top"><i class="fas fa-caret-up"></i></div><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"><i class="fas fa-times"></i></div><div class="logo-wrapper"> <a class="logo text" href="https://www.maxssl.com/">MaxSSL</a></div><div class="mobile-menu d-block d-lg-none"></div></div> <script></script><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://www.maxssl.com/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script src='//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-js'></script> <script src='//cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min.js' id='highlight-js'></script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/vendor.min.js' id='vendor-js'></script> <script id='main-js-extra'>var zb={"home_url":"https:\/\/www.maxssl.com","ajax_url":"https:\/\/www.maxssl.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.maxssl.com\/wp-content\/themes\/ripro-v5","singular_id":"779","post_content_nav":"0","site_notify_auto":"0","current_user_id":"0","ajax_nonce":"a9bbacfe7e","gettext":{"__copypwd":"\u5bc6\u7801\u5df2\u590d\u5236\u526a\u8d34\u677f","__copybtn":"\u590d\u5236","__copy_succes":"\u590d\u5236\u6210\u529f","__comment_be":"\u63d0\u4ea4\u4e2d...","__comment_succes":"\u8bc4\u8bba\u6210\u529f","__comment_succes_n":"\u8bc4\u8bba\u6210\u529f\uff0c\u5373\u5c06\u5237\u65b0\u9875\u9762","__buy_be_n":"\u8bf7\u6c42\u652f\u4ed8\u4e2d\u00b7\u00b7\u00b7","__buy_no_n":"\u652f\u4ed8\u5df2\u53d6\u6d88","__is_delete_n":"\u786e\u5b9a\u5220\u9664\u6b64\u8bb0\u5f55\uff1f"}};</script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/main.min.js' id='main-js'></script> </body></html>