HTML5快速入门-概览

一、认识互联网

（一）、本地开发 & 服务器共享

本地开发（开发阶段）

-使用编辑器写代码

-浏览器访问（只能在本地访问）:localhost:3000

-服务通常使用的本地端口：8080、3000、3001…(仅供测试调试)

上线→服务器共享

-把写好的 代码部署公网服务器上（阿里云、腾讯云）

-访问域名（如：www.baidu.com）→实际访问服务器ip+应用服务

-通过网络可以实现网站、服务共享

总结

本地开发是自测，服务器部署是共享。

（二）、HTTP协议

前后端通信的“语言协议”，基于请求/响应模型。

完整通信流程

1. 浏览器发出request
2. 服务器收到请求，执行代码，返回response
3. 浏览器拿到响应结果，渲染页面以及处理数据

常见请求结构

请求request;

GET /user?id=1 HTTP/1.1
Host: www.example.com
Content-Type: application/json

相应 response：

HTTP/1.1 200 OK
Content-Type: application/json

{
  "id": 1,
  "name": "张三"
}

常见请求方法

方法	用途
GET	获取资源
POST	提交数据
PUT	更新资源
DELETE	删除资源

（三）、前后端请求交互流程

用浏览器访问标准

用户点击按钮
↓
前端（JS）发出请求 fetch(‘/api/user’)
↓
后端接收到请求（Controller）
↓
调用服务层 -> 数据库查数据
↓
封装成 JSON 数据
↓
后端返回 Response
↓
前端拿到数据，更新页面内容

二、HTML5基础语法

（一）文档基本结构

预览：

  
  
  
  


  
你好，HTML5！

标签	作用
	声明 HTML5 文档类型
	页面根元素
	页头信息（编码、标题、引用资源）
	声明字符集为 UTF-8（支持中文）