Web开发初学者必知:网页是由什么构成的
本文最后更新于 197 天前,其中的信息可能已经有所发展或是发生改变。

序言

因为最近的实际需要,由此写作本篇博文。

注:本篇博文为小白科普向,仅简单科普如何搭建一个基本网站及Web基本构成,没有过多技术含量。

Web基本结构

Web是WWW (World Wide Web) 的简称,是由遍布在互联网中的Web服务器和安装了Web浏览器的计算机组成的一个巨大的信息系统。Web的应用架构是由英国人Tim Berners-Lee在1989年提出的,基本原理是:请求(客户端)与响应 (服务器端)原理。

HTML

HTML是一种超文本标记语言(Hyper Text Markup Language),用于描述页面的结构。HTML由一系列元素和标签组成,元素告诉浏览器如何显示内容,标签标记了“标题”,“段落”,“表”等内容。

例如,下面是一个简单的HTML文档:

<!DOCTYPE html>
<html>
<head>
  <title>网页title</title>
</head>
<body>
  <h1>h1标题</h1>
  <p>这是一个段落。</p>
</body>
</html>
  • <!DOCTYPE html> 声明了文档类型为 HTML5;
  • <html> 和 </html> 包裹了整个文档;
  • <head> 和 </head> 包含了文档的元数据,如标题、字符集等;
  • <title> 和 </title> 定义了文档的标题;
  • <body> 和 </body> 包含了文档的主要内容;
  • <h1> 和 </h1> 定义了一个一级标题;
  • <p> 和 </p> 定义了一个段落。

CSS

CSS是一种层叠样式表(Cascading Style Sheets),用于控制页面中元素的样式,如颜色、字体、布局等。CSS可以通过三种方式来引入HTML文档中:

  • 内联样式:直接在HTML元素中使用style属性来定义样式;
  • 内部样式表:在HTML文档中使用<style>标签来定义样式;
  • 外部样式表:在HTML文档中使用<link>标签来引用外部的CSS文件。

例如,下面是一个使用内部样式表来改变标题和段落样式的HTML文档:

<!DOCTYPE html>
<html>
<head>
  <title>网页title</title>
  <style>
    h1 {
      color: red;
      text-align: center;
    }
    p {
      font-family: Arial;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>一个居中的红色的h1标题</h1>
  <p>这是一个20px大小的Arial字体段落。</p>
</body>
</html>

这个文档包含了以下几个部分:

  • <style> 和 </style> 定义了内部样式表;
  • h1 和 p 是选择器,用于指定要应用样式的元素;
  • {} 包含了一组声明,每个声明由属性和值组成,并以分号结束;
  • color 是属性,表示文字颜色;
  • red 是值,表示红色;
  • text-align 是属性,表示文字对齐方式;
  • center 是值,表示居中对齐;
  • font-family 是属性,表示字体系列;
  • Arial 是值,表示Arial字体;
  • font-size 是属性,表示字体大小;
  • 20px 是值,表示20像素。

JavaScript

JavaScript由布兰登·艾克(Brendan Eich)于1995年在网景公司创造,最初命名为LiveScript。后来为了借助Java语言的知名度,改名为JavaScript。但实际上,JavaScript与Java没有直接关系,它们只是共享了一些类似的语法。 1997年,ECMA国际组织制定了ECMAScript标准,以规范JavaScript语言。从此以后,各种浏览器厂商都遵循这个标准来实现自己的JavaScript引擎。目前最新版本是ECMAScript 2020(也称为ES11),它包含了许多新特性和改进。

如果你经常浏览网页或者使用手机应用,那么你可能已经接触过JavaScript了。JavaScript是一种跨平台、面向对象的脚本语言,它能使网页可交互(例如拥有复杂的动画、可点击的按钮、通俗的菜单等)。不仅如此,JavaScript还可以用于开发服务器端、桌面端、移动端等各种应用,它是互联网上最流行和最广泛使用的编程语言之一。

Nginx和Apache

如果你想搭建一个web服务器,你可能会遇到两个常见的选择:Nginx和Apache。这两个软件都是开源、功能强大、被大众所熟知的web服务器软件。

首先,我们要了解一下什么是Web服务器。简单来说,web服务器就是一个运行在“互联网”上的程序,它可以接收客户端(如浏览器)发送过来的请求,并返回相应的内容(如网页、图片、视频等)。Web服务器通常需要配合其他程序或框架来处理复杂的业务逻辑或数据操作,例如PHP、Java、Python等。

当然,web服务器应由服务器作为载体运行。所以我们一般会进行服务器租赁或自行搭建服务器。而关于服务器的介绍,请关注我的下一篇博文。

Nginx和Apache都是优秀的Web服务器软件,但它们有一些不同之处。下面我们从几个方面来比较一下它们:

- 架构模式:Nginx采用异步非阻塞模式,即一个进程可以同时处理多个连接请求;而Apache采用同步阻塞模式,即一个进程只能处理一个连接请求。这意味着在高并发场景下(即同时有很多客户端访问服务器),Nginx能够保持低资源消耗和高性能,而Apache则容易出现进程数飙升和拒绝服务。
- 静态文件处理:静态文件指那些不需要动态生成或修改的内容,如HTML、CSS、JS、图片等。Nginx对静态文件处理非常快速高效,其性能比Apache高出三倍以上;而Apache对静态文件处理相对较慢。
- 模块化设计:Nginx具有高度模块化的设计,编写和添加新功能相对简单;而Apache则比较复杂和臃肿。
- 配置方式:Nginx采用层级化配置方式,并且支持热加载(即不需要重启服务就可以生效);而Apache采用分散式配置方式,并且需要重启服务才能生效。
- 功能丰富度:Apache拥有丰富的功能特性和成熟的技术社区支持;而Nginx相对较少。

总之,在选择Nginx还是Apache时,需要根据自己的实际需求进行权衡。一般来说:

- 如果你需要一个性能强劲、轻量级、易扩展、适合高并发场景的Web服务器,那么选择Nginx可能更合适;
- 如果你需要一个功能全面、稳定可靠、兼容性好、适合复杂业务场景的Web服务器,那么选择Apache可能更合适。

当然,在实际应用中,并不一定要二选一。有时候也可以将两者结合起来使用,以发挥各自优势。例如,在前端使用Nginx作为反向代理或负载均衡器,在后端使用Apache作为应用服务器。

————生成于NewBing

简单的来说,可以基本概况成:apache较为经典,适用于复杂业务场景的web服务器;nginx抗高并发能力强,且可以进行反代,可以用于负载均衡和反代。

未完…

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇