网站基础知识介绍

亦凉 2022-09-15 06:02 287阅读 0赞

### 网站基础知识介绍 ###

网站(Website)是指在因特网上根据一定的规则，使用HTML（标准通用标记语言）等工具制作的用于展示特定内容相关网页的集合。

浏览网站涉及一些非常基本的概念，包括浏览器与服务器、WWW与万维网，还有IP地址与域名等。

【Internet与www的关系

Internet（因特网）是一个网络，它是把分布于世界各地不同结构的计算机网络用各种传输介质相互连接起来的网络。Internet提供的主要服务有万维网(WWW)、文件传输(FTP)、电子邮件(E-mail)、远程登录(Telnet)等。WWW常被当做因特网的同义词，不过它只是因特网的一项服务。

WWW是建立在客户机/服务器模型上的。WWW是以超文本标注语言HTML与超文本传输协议HTTP为基础的。WWW服务器采用超文本链接来链接信息页，这些信息页可以放置在同一主机上，也可放置在不同地理位置的主机上。  链路由统一资源定位符（URL）维持，WWW客户端(即WWW浏览器)负责信息显示与服务器发送请求。】

浏览网站是从远程计算机中获取内容。提供内容信息的计算机就称为服务器，访问者使用浏览网页的软件被称为浏览器。

WWW、万维网和Web是同义词，是一个大型的相互链接的文件所组成的集合体，包括了整个网络世界。

IP地址和域名

服务器在网络中的地址，是通过IP地址来实现的。为了实现IP地址的易理解、易识别，又引入了域名的概念。IP地址是识别互联网上计算机和网络设备的标识。

域名是IP地址的一种符号化表示，域名通过域名解析系统(Domain Name System，DNS)保证每台主机的域名与IP地址一一对应。

互联网的工作机制

（1）浏览器中输入将要访问页面的URL地址。由DNS进行域名地址解析，找到服务器IP地址，向该地址所指向的Web服务器发出请求。

（2）Web服务器根据浏览器送来的请求，把URL地址转换成页面所在服务器上的文件全名，查找相应的文件。

（3）如果URL指向静态HTML文档，Web服务器使用HTTP协议把该文档直接送给浏览器。如果HTML文档中嵌入了ASP、PHP或JSP程序，则由Web服务器运行这些程序，把结果送到浏览器。如果Web服务器运行的程序包含对数据库的访问，则服务器将查询指令发送给数据库服务器，对数据库执行查询操作。

（4）查询结果由数据库返回Web服务器，再Web服务器将结果数据嵌入页面，并以HTML格式发送给浏览器。

（5）浏览器解释HTML文档，在客户端屏幕上展示结果。

WWW上的地址通过URL来指明，HTTP协议是用于浏览网站的基本约束或规则。

URL是Uniform Resource Location的缩写，含义是统一资源定位符（器），用来指明文件在互联网中的位置。基本格式如下：

schema://host\[:port\#\]/path/.../\[;url-params\]\[?query-string\]\[\#anchor\]

一个完整的URL包括以下几部分：

协议模式部分(schema)：指定底层使用的协议，在Internet中可使用多种协议，如FTP、HTTP、HTTPS。

域名部分(host)：服务器的域名或者IP地址

端口号(port)：跟在域名后的端口，域名和端口之间使用 冒号 作为分隔符，一般端口号默认是80，使用默认端口号时可以省略不写。

虚拟目录部分(path)：从域名第一个"/"开始到最后一个"/"为止，指访问资源的路径

文件名部分(url-params)：指具体访问的是哪个文件资源，如果没有，则使用默认文件名，如 index.vue、index.html、index.asp。

参数部分(query-string)：发送给http服务器的数据，允许有多个参数，使用&链接多个参数。

锚部分(anchor)：锚用来定位页面展示的开始位置，是非必须的。

HTTP（HyperText Transfer Protocol：超文本传输协议）是一种用于分布式、协作式和超媒体信息系统的应用层协议。 简单来说就是一种发布和接收 HTML 页面的方法，被用于在 Web 浏览器和网站服务器之间传递信息。

HTTPS（Hypertext Transfer Protocol Secure：超文本传输安全协议）是一种透过计算机网络进行安全通信的传输协议。HTTPS 经由 HTTP 进行通信，但利用 SSL/TLS 来加密数据包。HTTPS 开发的主要目的，是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。

网站（Web Site或Site）

网站是由多个网页组成的，但网站不是网页的简单罗列组合，而是由超链接方式组成的具有统一风格的有机整体。

网页是网站中的一个页面，是由 HTML 命令、CSS 样式、JavaScript 代码和字符组合构成的，可以包含文本、图像、超链接、表格、表单、动画、声音和视频等。也叫为Web 页，是一个 HTML 文件（HTML 文件的扩展名 .htm 或 .html ）。

主页（Homepage）也称首页或开始网页，是在浏览器打开某个网站后用户首先看到的网页，它承载着网站中所有指向二级网页或其他网站的链接信息。

网页（HTML文件）的运行需要浏览器的支持，有时还需要 Web服务器环境。

浏览器是一种软件，其主要功能是显示网页服务器或者文件系统的 HTML 文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互。目前，主流浏览器包括Chrome、Edge、FireFox、Opera、Safari 等。

浏览器由 shell 和内核构成

shell 是指浏览器的外壳（用户接口），它为用户提供了界面操作，如菜单、地址栏、工具栏、选项参数设置等功能

内核（浏览器引擎），是基于标记语言显示内容的程序或模块，包括：

渲染引擎（Rendering Engine）负责取得网页的内容、解析处理，以及呈现

JS（JavaScript）引擎 负责解析和执行 JavaScript 代码

Web（World Wide Web，全球广域网），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统，是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

目前的Web标准主要由3大部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。真正符合Web标准的网页设计是指能够灵活使用Web标准对Web内容进行结构、表现与行为的分离。

结构：对网页信息内容进行整理和分类，用于结构化设计的 Web 标准技术包括：HTML、XML和XHTML。

表现：对被结构化的信息进行显示控制，用于Web设计的标准技术是CSS (Cascading Style Sheets，层叠样式表)，CSS是标准的布局语言，用来排版和显示HTML元素。HTML+CSS的布局，使内容表现与结构相分离，使网页可维护性更好。目前最新的版本是CSS3。CSS3非常灵活，既可以嵌入在HTML5文档中，也可以是一个单独的外部文件，如果是独立文件，则必须以.css为后缀名。

行为：对文档内部模型进行定义，用于动态交互式内容的控制。标准技术包括：DOM（文档对象模型）和脚本程序JavaScript。对于JavaScript为了统一规范，Ecma国际组织创建了ECMA-262标准（ECMAScript）。

【两点说明：

1、HTML、CSS、JavaScript大小写的要求：

HTML 大小写不敏感，不区分大小写，也就是说大小写都不影响。但根据W3C的规范写法，一般使用小写。

CSS大小写不敏感，也不区分大小写。但根据W3C的规范写法，一般使用小写。

JavaScript 对大小写非常敏感，一定要区分大小写。

2、CSS和JavaScript代码写在HTML页面中的位置：

CSS建议放在head里面，JS代码最好放在body的最下面。

<!DOCTYPE html>

<html>

<head>

<title>css和js的存放位置</title>

<style>

/\* css代码直接写在<style>标签中 \*/

</style>

</head>

<body>

//js代码直接写在<script>标签中

</script>

</body>

</html>

】

网页编辑工具

记事本

WINDOWS中的notepad，一款纯文本编辑器。

Hbuilder

是国内DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。

Adobe Dreamweaver

Dreamweaver（简称DW）是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

HTML(Hypertext Markup Language) 的标记符（tag、标签）

标记符基础

标记符不区分大小写，<html>、<Html>和<HTML>一样，但建议用小写。一般成对出现，包括开始标记符和结束标记符，例如<a></a>。结束标记符多一个斜杠“/”（不是反斜杠“\\”！）。

某些标记符只要求单一标记符号，例如<br>。

属性是用来描述对象特征的特性。与标记有关的特性称为属性，每个属性总是对应一个属性值，将其称为“属性/值”对。

HTML属性放在开始标记符，属性之间用空格分开，属性值用引号。

【<a href="url" target=" target属性值" >链接标题</a>

href属性：链接标题所指向的目标文件的URL地址。

target属性：用于打开链接的目标窗口，默认方式是原窗口。

<table style="width:368.9pt;"> 
 <tbody> 
  <tr> 
   <td style="border-color:#ffffff;width:120.05pt;"> <p style="margin-left:0;text-align:justify;"><strong>target</strong><strong>属性值</strong></p> </td> 
   <td style="width:248.85pt;"> <p style="margin-left:0;text-align:justify;"><strong>说明</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:120.05pt;"> <p style="margin-left:0;text-align:justify;">parent</p> </td> 
   <td style="width:248.85pt;"> <p style="margin-left:0;text-align:justify;">当前窗口的上级窗口，一般在框架中使用</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:120.05pt;"> <p style="margin-left:0;text-align:justify;">blank</p> </td> 
   <td style="width:248.85pt;"> <p style="margin-left:0;text-align:justify;">在新窗口中打开</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:120.05pt;"> <p style="margin-left:0;text-align:justify;">self</p> </td> 
   <td style="width:248.85pt;"> <p style="margin-left:0;text-align:justify;">在同一窗口中打开，和默认值一致</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;width:120.05pt;"> <p style="margin-left:0;text-align:justify;">top</p> </td> 
   <td style="width:248.85pt;"> <p style="margin-left:0;text-align:justify;">在浏览器的整个窗口中打开，忽略任何框架</p> </td> 
  </tr> 
 </tbody> 
</table>

】

HTML5文件的基本结构

<!DOCTYPE html>

<html>

<head>

</head>

<body>

文件正文......

</body>

</html>

HTML 的注释由开始标记符 构成。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。

显示特殊字符

如果用户需要在网页中显示某些特殊字符，例如：<（小于号）、>（大于号）、”（引号）等，则需使用参考字符来表示，而不能直接输入。

参考字符以“&”号开始，以“;”结束，既可以使用数字代码，也可以使用代码名称。

例如：1<a，在网页中应写为1<a

**Web应用中常常提及的前端，后端和全栈，是什么意思呢？**

Web应用的“前端”其实是指开发的程序能够在浏览器中解析和运行。前端开发的目标之一就是采用相关HTML、CSS，JavaScript等技术让网页足够漂亮，吸引更多人来使用。

Web应用的“后端”是指用运行在后端服务器上的程序，针对前端程序发出的请求，做出回应，如“反馈是否登录成功”，还可以是管理前端用户查询的数据，以及用户自己产生的数据，比如用户名，文章，评论等。采用的技术后端包括脚本语言如php、JSP，数据库，web服务器如Apache、IIS（Internet Information Services， Internet信息服务器），网络编程等。

全栈单纯从程序开发的角度来说，就是开发人员承担包括前端和后端在内的所有功能的开发任务。

Web技术实在太多了，试着给出一个简明的概述

前端：入门简单，先易后难，能看到自己做出来的展示界面，有成就感。

后端：入门难，深入更难，枯燥乏味，没有太大成就感，一堆业务逻辑代码。

前端指的是用户可见的界面，网站前端页面也就是网页的页面开发，比如网页上的特效、布局、图片、视频，音频等内容。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并配合后端做网页的数据显示和交互等可视方面的工作内容。后端是指用户看不见的东西，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多的多，后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。

前端和后端的工作内容比如做一个登陆页面，用户在前端页面上输入了账号密码，然后用鼠标点击了登陆按钮，这时候前端会将账号密码通过请求接口发送给后端做处理，后端收到数据会先检查该账号是否存在，如果不存在，则返回给前端一条类似于这样的信息：“你输入的账号不存在，请重新输入”，用户再次重新输入账号，此时后端查询账户存在，密码也正确，则后端返回登陆成功的信息给前端。现代计算机领域的难题如大规模负载，海量数据处理，实时计算也是后端的，前端集中在表示层。

**网页前后端交互技术**

前端通常会通过后端（后台）提供的接口来获取数据来完成前端页面的渲染。若想实现网页前后端交互，需要学习一些后端技术。

对于一个站点，用户看得到的只是前端网站的一部分，网站的大多数情况是看不到的，这些看不到的就是后端。后端包括程序设计架构、数据库管理、处理相关的业务逻辑等。

web前端开发是在构建用户界面，相比前端开发，后端开发需要花更多的时间来实现算法和解决问题上以及高并发处理，Ddos攻击的防御。web后端开发跟sql数据库打交道比较多，也就是web后端开发就是从数据库或者其他数据源写入、读取、处理数据。还需要了解PHP、web框架、ASP.NET、WVC等，还有缓存技术（cookie、session、localstorage、cashe-controller等）。

网页前后端交互示例 https://www.cnblogs.com/nrm1/p/6146981.html

使用node.js构建一个web服务器 https://blog.csdn.net/cnds123/article/details/120764171