前言
出于对网站的一些突然的兴趣，我开始了解网页是如何被设计出来的。
作者水平有限，如有问题，欢迎指出。
文章目录
- 前言
- 一. 对网页设计的基本了解
- 二. 第一个网页
- 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是增加了标记的普通文本了”？）
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/6095/" title="android开发，使用kotlin学习WorkManager" 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/6095/" title="android开发，使用kotlin学习WorkManager">android开发，使用kotlin学习WorkManager</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/1292/" title="手写迷你Spring框架" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/f8a8cc65fd924b4cb65b3fa5859f6661.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/1292/" title="手写迷你Spring框架">手写迷你Spring框架</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/41763/" title="【Python从入门到进阶】39、使用Selenium自动验证滑块登录" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/b1fb2671b6d94ff89750d112b89f95ec.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/41763/" title="【Python从入门到进阶】39、使用Selenium自动验证滑块登录">【Python从入门到进阶】39、使用Selenium自动验证滑块登录</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/49165/" title="myql 项目数据库和表的设计" data-bg="https://img.maxssl.com/uploads/?url=https://img.maxssl.com/uploads/?url=https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/49165/" title="myql 项目数据库和表的设计">myql 项目数据库和表的设计</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/46870/" title="【未完待续】综述：用于视频分割（Video Segmentation）的深度学习" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/cc42835ce265419f971f58f18e0c3c57.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/46870/" title="【未完待续】综述：用于视频分割（Video Segmentation）的深度学习">【未完待续】综述：用于视频分割（Video Segmentation）的深度学习</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/36593/" title="探索C语言中Math.h的常见方法及用法" 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/36593/" title="探索C语言中Math.h的常见方法及用法">探索C语言中Math.h的常见方法及用法</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/50938/" title="Hive的小文件问题" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/de19f959c9c04b4cb89205ebca6dd95d.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/50938/" title="Hive的小文件问题">Hive的小文件问题</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/13822/" title="C++ 互斥锁原理以及实际使用介绍" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/230398efdc7142f99d95d7b3b8e14605.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/13822/" title="C++ 互斥锁原理以及实际使用介绍">C++ 互斥锁原理以及实际使用介绍</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/57457/" title="Mac Navicat破解" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/9c815e68c79047efac17b61618130632.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/57457/" title="Mac Navicat破解">Mac Navicat破解</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/42083/" title="关于我的家乡html网页设计完整版,10个以家乡为主题的网页设计与实现" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/92969ebc7b0046e495955668823bb5a9.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/42083/" title="关于我的家乡html网页设计完整版,10个以家乡为主题的网页设计与实现">关于我的家乡html网页设计完整版,10个以家乡为主题的网页设计与实现</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/4228/" title="html笔记2" data-bg="https://img.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/3021509/202211/3021509-20221102190643974-1419700135.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/4228/" title="html笔记2">html笔记2</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/56591/" title="如何使用Python实现单例模式" 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/56591/" title="如何使用Python实现单例模式">如何使用Python实现单例模式</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/19448/" title="问题解决丨对不起，小米路由器出现网络连接问题无法打开网页" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/d07a06d5a4a74dc2aec28ca52ddd5112.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/19448/" title="问题解决丨对不起，小米路由器出现网络连接问题无法打开网页">问题解决丨对不起，小米路由器出现网络连接问题无法打开网页</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/44363/" title="富时中国a50指数期货论文" 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/44363/" title="富时中国a50指数期货论文">富时中国a50指数期货论文</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":"db07b5f832","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> |