一、用socket实现HTML的原理

import socket

sk = socket.socket()

sk.bind(('127.0.0.1',8080))

sk.listen()

while True:

    conn,addr = sk.accept()

    data = conn.recv(9000)

    print(data)

    # 按照HTTP协议的格式给浏览器回复消息

    conn.send(b'HTTP/1.1 200 OK\r\ncontent-type: text/html; charset=utf-8\r\n\r\n')

    with open('s1.txt','rb') as f:

        msg = f.read()

    conn.send(msg)

    conn.close()

实现结果：

二、HTML

1、CS --> BS架构

2、web的原理

　　1、浏览器地址栏输入URL

　　2、浏览器往服务端发消息

　　3、服务端接收消息

　　4、服务端回消息（从文件中读取数据）

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

3、HTML初始

　　1、就是一些特殊符号，不同的符号有不同的显示效果

　　2、学前端就是学怎么写HTML文件，学后端框架就是学习怎么样返回写好的HTML文件

　　3、HTML是一种标记语言，网页文件的扩展名：.html和htm

　

<!DOCTYPE html>  <!--声明为HTML5文件-->

<html lang="ch-CN">

<head>

    <meta charset="UTF-8">

    <title>骑士计划</title>

</head>

<body>

<b>呵呵</b>

<i>呵呵</i>

<u>呵呵</u>

<s>呵呵</s>

</body>

</html>

　　1、<!DOCTYPE html>声明为HTML5文档。

　　2、<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部              （head）和主体（body）。

　　3、<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包                   含了文档的元（meta）数据

　　4、<title>、</title>定义了网页标题，在浏览器标题栏显示。

　　5、<body>、</body>之间的文本是可见的网页主体内容。

4、HTML规则：https://www.cnblogs.com/liwenzhou/p/7988087.html

　　1、HTML中吧连续的空格和换行都解析成一个空格，不存在缩进的问题

　　2、基本标签

　　3、块级标签和行内标签

　　　　div和span标签的特点：

　　　　　　没有自带的样式，方便后续使用CSS调整样式！

　　　　块级标签：

　　　　　　自己独占一行；

　　　　　　p

　　　　　　h1~h6

　　　　　　hr

　　　　　　div

　　　　行内标签（内联标签）：

　　　　　　默认都在一行显示！

　　　　　　b、i、u、s

　　　　　　span

　　4、标签支持嵌套

　　　　1、块级标签可以包含内联标签

　　　　2、p标签不能包含p标签和div标签

　　5、标签分类

　　　　　　1、展示给用户看的标签

　　　　　　2、获取用户输入的标签

　　　　　　　　　　form标签（表单标签）

　　6、获取用户输入的标签

　　　　　　1、input

　　　　　　　　1、根据type类型划分

　　　　　　　　　　1、text

　　　　　　　　　　2、password

　　　　　　　　　　3、email

　　　　　　　　　　4、date

　　　　　　　　　　5、radio  -->单选

　　　　　　　　　　6、checkbox  --> 多选

　　　　　　　　　　7、button  --> 普通按钮，多用于使用JS代码绑定事件

　　　　　　　　　　8、submit  --> 提交

　　　　　　　　　　9、reset  --> 重置

　　　　　　　　　　10、  --> 上传文件

　　　　　　2、select

　　　　　　　　1、select标签内部包含的是option，需要配置value属性

　　　　　　　　　　　　默认选中：select=“select”

　　　　　　3、textarea

　　　　　　注意事项：

　　　　　　　　1、所有放在form标签中获取用户输入的标签，必须要有name属性

　　　　　　　　2、form标签有action属性和method属性

　　　　　　　　　　　　1、action:控制往哪里提交数据

　　　　　　　　　　　　2、method：控制用什么方式提交

　　　　　　　　　　　　3、上传文件需要额外配置enctype="multipart/form-data"

　　　　　　　　3、form要提交数据必须要有submit按钮

前端（HTML）初始的更多相关文章

  1. ArcGIS Pro开发Web3D应用（1）——环境搭建与初始实例

    1.搭建环境 1.1 ArcGIS Web3D软件环境 ArcGIS Pro 2.0(必须) ArcGIS for Enterprise 10.5.1 (从10.5开始称呼为Enterprise)包括 ...

  2. Vue2.0 + Element-UI + WebAPI实践：简易个人记账系统

    最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlser ...

  3. AngularJS中实现无限级联动菜单

    多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的 ...

  4. 解决IE下select option不支持display none样式

    万恶的IE,option竟然不支持display样式,想到的解决思路有二个: 1.ajax联动查询 2.jQuery的remove().after()方法 方法1的不好之处是初始页面,需要显示全部IP ...

  5. 应用Response.Write实现带有进度条的多文件上传

    前几天,写过一篇随笔“使用RESPONSE.WRITE实现在页面的生命周期中前后台的交互”.说是交互,实际上也主要是在ASP.NET的页面周期中 从后台利用RESPONSE.WRITE向前台即时的推送 ...

  6. node命令行工具之实现项目工程自动初始化的标准流程

    一.目的 传统的前端项目初始流程一般是这样: 可以看出,传统的初始化步骤,花费的时间并不少.而且,人工操作的情况下,总有改漏的情况出现.这个缺点有时很致命. 甚至有马大哈,没有更新项目仓库地址,导致提 ...

  7. day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器

    目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...

  8. day83:luffy:添加购物车&导航栏购物车数字显示&购物车页面展示

    目录 1.添加购物车+验证登录状态 2.右上方购物车图标的小红圆圈数字 3.Vuex 4.购物车页面展示-后端接口 5.购物车页面展示-前端 6.解决一个购物车数量显示混乱的bug 1.添加购物车+验 ...

  9. SpringBoot简明教程

    一.SpringBoot简介 1.什么是SpringBoot SpringBoot用来简化spring应用开发,约定大于配置,去繁从简,是J2EE一站式解决方案 2.SpringBoot的优点 快速创 ...

  10. Django forms 关于select和checkbox设置初始选中值及让前端选中指定值

    Django的forms和models一样很牛逼.他有两种功能,一是生成form表单,还有就是form表单的验证. 这里主要说一下生成form表单时经常用到的需要设置 初始值 / 默认值 的情况. 1 ...

随机推荐

  1. .NET微信开发Charles突破微信授权，获取任意微信网页源代码（含Https）

    简介 Charles其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的.该软件是用Java写的,能够在Windows,Mac,Linux上使用.开发iOS都在 ...

  2. html限制文本框只能输入数字和一个小数点

    近期在做一个前台页面,有一个文本框是用来输入充值金额的,就想到了限制用户只能输入纯数字的数据且只能包含一个小数点.下面就是我实现的代码 $(function() { //阻止数字键以外的按键输入 $( ...

  3. PhpStorm 2018 破解方法

    破解方法如下: 1.修改phpstrom的验证服务器地址. 在C:\Windows\System32\drivers\etc目录下打开hosts文件,并在文件最后加入 0.0.0.0 account. ...

  4. 【PLM】【PDM】60页PPT终于说清了PDM和PLM的区别；智造时代，PLM系统10大应用趋势！

    https://blog.csdn.net/np4rhi455vg29y2/article/details/79266738

  5. Centos6.9部署vnc

    Centos部署vnc   [root@etl ~]# vncserver -kill :1 命令: service vncserver restart chkconfig --list vncser ...

  6. three.js中的文字

    1.三维文字 三维字体文字,使用的是FontLoader,字体文件通过来facetype.js生成 addCityText: function () { var self = this; var ci ...

  7. Immutable 学习

    1.什么是Immutable Data? Immutable Data 就是一旦创建,就不能再被更改的数据.对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对 ...

  8. 基于ModBus-TCP/IT 台达PLC 通讯协议解析

    客户端发送:19 B2 00 00 00 06 06 03 00 27 00 02 上面是modbus客户端发出的报文内容,为modbus tcp/ip协议格式,其前面的六个字节为头字节( heade ...

  9. xpath知多少

    XPath 语法 XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取的. XML 实例文档 我们将在下面的例子中使用这个 ...

  10. 游戏AI

    玩游戏太累了,我或许可以写一个机器人帮我玩游戏发QQ发空间啥的