web网页开发

romanlan

墨衍会员 · AI 创作全网分发码龄8年

关注

原创最新推荐文章于 2025-09-12 23:11:54 发布 2.3w 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

这里主要总结，web网页的开发，即我们经常所看见的淘宝，新闻等网页。我们将一个所见的网页中每次刷新不变的部分，称为静态。这些静态由HTML和CSS组成，他们形成了网页的样式。HTML是一种标记语言，用来结构化我们的网页内容和赋予内容含义（形成树形结构），例如定义段落、标题、和数据表,或在页面中嵌入图片和视频。CSS 是一种样式规则语言，例如设置背景颜色和字体，内容的排版，然后我们将这些样式应用于我们的HTML。

可参考教程:MDN

一个简单的HTML文件人下所示：

<!DOCTYPE html>
<html>
	<head>
	/*head主要有HTML的标题，指定你的文档中字符的编码，作者和描述，在HTML中应用CSS和JavaScript等	*/
		<meta charset="UTF-8">
		<title></title><!--标题-->
		<link rel="stylesheet" type="text/css" href="css/css.css"/><!--引用外部css-->
		<style type="text/css">/*使用内部CSS*/
			.hello{
//    设置class=hello的样式
				color: red;
			}
		</style>
	</head>
	<body>
	//body是HTML的主要内容，描述了页面的结构。
		<h1>hello</h1>
		<div class="hello">	
		</div>
	</body>
	<script src="js/main.js" type="text/javascript" charset="utf-8"></script><!--引用外部js-->
	<script type="text/javascript">/*使用内部js*/
		var hello=document.querySelector(".hello");<!—采用DOM的API,引用html中的元素-->
		var newhello=document.createElement("button");<!--新建html中的元素-->
		newhello.textContent="botton";//设置这个元素的属性以及内容
		hello.appendChild(newhello);<!--在元素后面新插入元素-->
		newhello.onclick()=function (){
			/*onclick 为鼠标点击事件
			 鼠标点击时，触发事件，运行后面的函数function*/
		}
		function hanshu (){
//			单独的函数
		}
	</script>
</html>

如果说HTML和css帮助我们完成了页面上的样式的设计，那么JavaScript就帮助我们完成与用户之间的交互，如用户点击，滑动，输入等。Js(JavaScript的简称)是一种编程语言，允许你创建动态更新的内容，控制多媒体，图像动画，和一些其他的东西。JS通过对HTML上元素的引用对网页上产生的事件（浏览器中发生的动作，例如点击按钮，加载页面或播放视频）进行响应。

大多数现代的web站点是动态的—它们在服务端使用各种类型的数据库来存储数据(服务器), 之后通过运行服务器（server-side）代码来重新获取需要的数据，把其数据插入到静态页面的模板中，并且生成出HTML渲染到用户浏览上。为此使用HTTP/HTTPS协议在 Web 上进行数据交换，并在数据传输的过程中需经过DNS和TCP/IP 协议。它是client-server协议。客户端和服务端通过交换各自的消息（与数据流正好相反）进行交互。由像浏览器这样的客户端发出的消息叫做 requests，被服务端回应的消息叫做
responses。它是应用层的协议，通过TCP（HTTP），或者是TLS（加密的TCP ,HTTPS）连接来发送。

举个例子：
当你在浏览器里输入一个网址时（在我们的例子里就是走向商店的路上时）：

浏览器在域名系统服务器（DNS）上找出存放网页的服务器的实际地址（IP地址）（找出商店的位置）。
浏览器发送 HTTP 请求信息（数据的传输遵守TCP/IP 协议）到服务器来请拷贝一份网页到客户端（你走到商店并下订单）。
服务器同意客户端的请求后，会返回一个“200 OK”信息，同意传输，然后开始将网页的文件以数据包的形式传输到浏览器。
浏览器将数据包聚集成完整的网页然后将网页呈现给你。

这样一个简单的网页就完成了，但是在实际过程中，仍会许多问题。比如：HTTP是无状态的：在同一个连接中，两个执行成功的请求之间是没有关系的。这就带来了一个问题，用户没有办法在同一个网站中进行连续的交互，比如在一个电商网站里，用户把某个商品加入到购物车，切换一个页面后再次添加了商品，这两次添加商品的请求之间没有关联，浏览器无法知道用户最终选择了哪些商品。再比如：如果传输的数据较多，较大，那么每次交互时，均重新请求时，用户需等待较长时间，体验不好。为解决这些问题，开发人员们设计了AJAX,缓存，web worker，CORS等技术。

Asynchronous JavaScript and XML（Ajax）：异步，指无需重新加载整个页面的情况下，只更新部分页面的技术。主要是通过XMLHttpRequest （）（通常缩写为XHR）或 Fetch（）来请求。为了进一步提高速度，有些网站还会在首次请求时将资产和数据存储在用户的计算机上，这意味着在后续访问中，他们将使用本地版本，而不是在首次加载页面时下载新副本。内容仅在更新后从服务器重新加载。XHR允许你使用它的 onload 事件处理器来处理这个事件 — 当onload 事件触发时（当响应已经返回时）这个事件会被运行。

AJAX代码：

var request = new XMLHttpRequest();
request.open('GET, url);
request.responseType = 'text';//XHR默认返回文本，可修改格式
request.onload = function() { 
var.textContent = request.response;//返回 };
request.send();

与XHR不同，fetch()返回一个解析HTTP响应的promise，它将解析从服务器发回的响应。我们使用then()来运行一些后续代码，这是我们在其内部定义的函数。这相当于XHR版本中的onload事件处理程序。
Fetch代码：

fetch(url).then(function(response) {
response.text().then(function(text)
 {//text() 也返回了一个 promise 
var.textContent = text;
}
}

对于前面所说的，将资产和数据存储在用户的计算机上，主要才采取cookie，sessionStorage和 localStorage。这些参数均可在浏览器的开发者模式中application中查看。Cookie可以采用http头部扩展的方式，把Cookies添加到头部中，创建一个会话让每次请求都能共享相同的上下文信息，达成相同的状态。注意，HTTP本质是无状态的，使用Cookies可以创建有状态的会话。sessionStorage，只要浏览器开着，数据就会一直保存 (关闭浏览器时数据会丢失)。localStorage，一直保存数据，甚至到浏览器关闭又开启后也是这样。每个域都有一个单独的数据存储区，无法交错使用。Session，由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户.典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。这个Session是保存在服务端的，有一个唯一标识。Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；
Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。

如果你的网站需跨域，去获取资源，则需要使用CORS（Cross-Origin Resource Sharing）技术。这是HTML5定义的如何跨域访问资源的方法。Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（如sina.com）发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。
假设本域是my.com，外域是sina.com，只要响应头Access-Control-Allow-Origin为http://my.com，或者是*，本次请求就可以成功。
可见，跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin，决定权始终在对方手中。