初始前端HTML
# -*-coding:utf-8-*-
# Author:Ds
import socket
IP_PORT=('127.0.0.1',9999)
#实例化 socket对象
TCP_SERVER=socket.socket()
# 绑定 端口和IP
TCP_SERVER.bind(IP_PORT)
TCP_SERVER.listen(5)
try:
#等待连接,
conn,addr=TCP_SERVER.accept()
# 获取连接信息
print(conn)
# 接收浏览器通过 http 协议 发送的 request的请求
from_browser_data=conn.recv(1024)
print(f'来自浏览器的数据:{from_browser_data.decode("utf-8")}')
# 通过http协议 ,向浏览器发送 返回数据 response
conn.send(b'HTTP/1.1 200 OK \r\n\r\n')
# 发送数据方式一:
# conn.send('Hello python and browser'.encode('utf-8'))
# 发送数据方式二: 浏览器默认GBK编码
with open('day43.md',encoding='utf-8') as f:
data=f.read().encode('gbk')
conn.send(data)
except Exception as e:
print(e)
finally:
conn.close()
TCP_SERVER.close()
二丶web介绍
web介绍:
web标准：
w3c：万维网联盟组织，用来制定web标准的机构（组织）
web标准：制作网页遵循的规范
web标准规范的分类：结构标准、表现标准、行为标准。
结构：html。表示：css。行为：Javascript。
总结说明：
结构标准：相当于人的骨架。html就是用来制作网页的。
表现标准： 相当于人的衣服。css就是对网页进行美化的。
行为标准： 相当于人的动作。JS就是让网页动起来，具有生命力的
下图很形象:👇
三丶浏览器介绍
浏览器内核
| 浏览器 | 内核 |
|---|---|
| IE | trident |
| chrome | blink |
| 火狐 | gecko |
| Safari | webkit |
PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
总结：渲染引擎是兼容性问题出现的根本原因。
四丶HTML超文本标记语言
什么是HTML?
超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
超文本： 音频，视频，图片称为超文本
标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
作用：HTML是负责描述文档语义的语言。
注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。
五丶HTML的规范
1.HTML是一个弱势语言
2.区分大小写
3.页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
4.HTML的结构：
声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
body部分：我们所写的需要显示出来的代码必须放在此标签內。
编写html的规范
1.所有标记元素都要正确的嵌套，不能交叉嵌套.<h1><font></font></h1>
2.所有的标记都必须小写
3.所有的标记都必须关闭
双边标记:<span></span>
单边标记:<br /> , <hr />
4.所有的属性值必须加引号.<h1 id="head"></h1>
5.所有的属性必须有值.<input type="radio" checked="checked" />
HTML的基本语法特征
1.HTML对换行不敏感，对tab不敏感
2.空白折叠现象
3.标签要严格封闭
六丶html结构
头标签:
开头的这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
Meta标签:
元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
http-equiv属性:
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
name属性:
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
### 我们网页支持移动端，移动设备优先 , H5开发双端app会使用到
<meta name=viewport content="width=device-width, initial-scale=1">
title标签
主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。
七丶HTML标签
块级标签:
块级元素是指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建
块级标签有哪些:
| 标题 | h1 | h2 | h3 | h4 | h5 | h6 |
|---|---|---|---|---|---|---|
| 列表 | ol | ul | li | dl | dt | dd |
| 排版标签 | p | div | hr | center | pre | |
| 表格 | table | |||||
| 表单 | form |
### 特点
1. 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
2. 可以直接控制宽度、高度以及盒子模型的相关css属性
3. 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
4. 在不设置高度的情况下，块级元素的高度是它本身内容的高度
代码如下:👇
内联标签
内联元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建。
内联标签有哪些:
| 粗体 | 斜体 | 上下标 | 划线 | |
|---|---|---|---|---|
| 字体 | b | em | sup | del/s |
| 字体 | strong | i | sub | u |
| 排版 | span | br | ||
| 超链接 | a | |||
| 图片 | img |
### 特点
1.和其他内联元素从左到右在一行显示
2.不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
3.内联元素的宽高是由本身内容的大小决定（文字、图片等）
4.内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
代码如下:👇