前言
explore what is the root of web. web的本质是什么？
当互联网发展的不是很火热的时候，大家普遍使用的是C/S架构.例如我们下载的QQ、网易云乐音。
优势：可定制空间大，用户体验较好
劣势：需要额外下载客户端到你的设备（安全性）、客户端开发成功高、一旦添加新的新功能就需要客户端升级。（使用EF就是这种体验不断的更新客户端APP）
当浏览器发展比较成熟、普遍后出现了B/S架构。B指定是browser
优势：不需要开发客户端、用户设备只需要1个浏览器就ok
劣势：无法扩展更多的新功能
html是什么？
在B/S架构，server服务端和browser之间使用超文本传输（HTTP）协议进行交互。
HTTP协议规定了：
Browser应该怎么请求Server
Server应该使用什么数据格式到Browser
Browser应该怎么渲染.html文件
传输过程
经过TCP三次握手建立1个TCP连接，开始http
browser向server发起 post/get/put...请求
服务端响应浏览器的请求，发送html格式的网页代码给浏览器；
客户端的浏览器接受到html网页代码后，渲染出效果给用户看。
browser端和server端通过socket，循环这个请求和响应的过程，以此建立服务端于用户之间的交互；
browser和server之间的http传输结束，经过四次挥手结束下面TCP连接。
超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则。
ps:所以HTML不是编程语言，只是按照规定的格式描述你想要描述的内容，只有数据，没有算法逻辑。
当browser接收服务端发送来的html之后，
会按照从左到右 从上到下的 顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（这就是browser兼容性问题），网页文件以.html 或 .htm结尾。
所以我们学习的前端内容：都是围绕着使用 html/CSS/js写一个漂亮的网页，当用户的浏览器 请求时我们时，响应这个漂亮的页面给用户的浏览器，再由浏览器渲染出效果呈现给用户；
package main
import (
"fmt"
"io/ioutil"
"net/http"
)
func homepage(response http.ResponseWriter, request *http.Request) {
data,err:=ioutil.ReadFile("./templates/homepage.html")
if err != nil {
fmt.Printf("Do not find such file:%s","./templates/homepage.html")
return
}
number,err:=response.Write(data)
if err != nil {
fmt.Println(err)
}
fmt.Println("发送数据",number)
}
func main() {
http.HandleFunc("/",homepage)
//启动服务
err:=http.ListenAndServe("127.0.0.1:8888",nil)
if err != nil {
fmt.Printf("请检查address是否合法？：",err)
return
}
}
html结构
<!DOCTYPE html> <html lang="en"> <head> <!--字符编码 --> <meta charset="UTF-8"> <!-- 标题--> <title>Title</title> </head> <body> </body> </html>
- <!DOCTYPE html> 声明该html页面，使用的编写规范；
- <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
- <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
- <title></title>定义网页标题，在浏览器标题栏显示。
- <body></body>之间的文本是可见的网页主体内容
html标签的格式
标签的语法：
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
html的基本标签
HTML标签根据其在浏览器中显示的特征分为：
块级标签：独占一行
内联标签：根据内容大小而定
div标签：没有任何标记效果，是一张白纸。
<!DOCTYPE>标签
<!DOCTYPE> 此标签可告知浏览器 该HTML文档使用哪种 HTML 或 XHTML 规范。
作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：
- BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
- CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat
<head>标签
用于描述和网页相关的源数据信息
<meta>标签
META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。
<head> <!--字符编码--> <meta charset="UTF-8"> <!--浏览器标签页显示的标题--> <title>IT运维平台</title> <!--刷新当前网页， 2秒钟之后跳转到https://www.cnblogs.com/sss4/p/6863361.html --> <!--<meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/sss4/p/6863361.html"> --> <!--兼容IE浏览器--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!--在移动端打开以屏幕大小打开 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1"> <!--搜素引擎SEO关键词优化 --> <meta name="keywords" content="python,golang,html,css,javescript,上门,服务"> <!--在搜素引擎排名之后的描述信息 --> <meta name="description" content="我来自........我擅长。。。。。。。"> </head>