前端HTML基础和head部分

一、SOCKET服务器与浏览器交互

CS模式 --> BS模式

CS模式逐渐向BS模式转移，底层都是socket客户端

浏览器给服务器发送请求 --> 服务器收到请求 --> 服务器给浏览器回复响应

由于浏览器版本众多，而且网络的类型众多，socket服务器和浏览器之间收发信息，必须格式要统一，遵循HTTP协议

socket服务器与浏览器交互

'''
socket与浏览器交互
'''
import socket


sk = socket.socket()
sk.bind(('127.0.0.1',8080))
sk.listen()

while 1:
    conn,add = sk.accept()
    data = conn.recv(9000)
    print(data)
    # HTTP协议的格式给浏览器回复消息
    conn.send(b'HTTP/1.1 200 OK
content-type:text/html;charset=utf-8

')
    with open('s1.txt','rb') as f:
        msg = f.read()
    conn.send(msg)
    conn.close()

二、web的原理

① 浏览器地址输入URL

② 浏览器往服务器发消息

③ 服务器接收消息

④ 服务器回复消息（从文件中读取数据）

⑤ 浏览器收到消息（按照一个约定好的规则展示出来）

三、HTML

超文本标记语言，本质上是浏览器可识别的规则，不同的浏览器都是同一个规则

HTML是一种标记语言，不是编程语言

浏览器的极速模式：使用chrome内核

浏览器的兼容模式：使用IE内核

四、HTML文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
</head>
<body>
</body>
</html>

<!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<body>、</body>之间的文本是可见的网页主体内容。

<!DOCTYPE> 标签
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

html中把连续的空格和换行都解析成一个空格，没有缩进的概念，所有的操作都根据标签

五、HTML的标签格式

属性：

id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）

HTML标签是由尖括号包围的关键字，如<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
标签里面可以有若干属性，也可以不带属性。

六、注释

<!--注释-->

七、head内部标签

head标签内的内容是用于浏览器识别的

<head>
    <title>网页标题</title>
    <style>定义内部样式表</style>
    <script>定义JS代码或者引入外部JS文件</script>
    <link rel="stylesheet" href="">引入外部样式表文件
</head>

title　　定义网页标题

style　　定义内部样式表

script　定义JS代码或引入外部JS文件

link　　引入外部样式表文件

meta标签

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--3表后跳转到www.google.com.hk，refresh是刷新-->
<meta http-equiv="refresh" content="3;URL=https://www.google.com.hk">

<!--指定文档的编码类型-->
<meta http-equiv="content-type" charset="UTF-8">

<!--IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

keywords 　　关键字，用于搜索引擎搜索，爬虫，SEO

description 　　描述信息，搜索引擎展示网页的时候展示出来

<meta name="description" content="全球领先的综合性网上购物中心。超过100万种商品在线热销"/>
<meta name="keywords" content="网上购物，网上商城，网上买书，购物中心，在线购物"/>