一、用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. Python学习：函数式编程（lambda, map() ,reduce() ,filter()）

    1. lambda: Python 支持用lambda对简单的功能定义“行内函数” 2.map() : 3.reduce() : 4.filter() : map() ,reduce() , filt ...

  2. 在Vue组件中获取全局的点击事件

    // 定义全局点击函数 Vue.prototype.globalClick = function (callback) { document.getElementById('main').onclic ...

  3. 踩坑rosbag --clock

    将rosbag的数据feed给lego-loam,输出地图.另外写了一个滤波节点,订阅地图,进行滤波操作,再发布出来. 由于输入给lego-loam的数据来自于rosbag,所以需要rosbag提供时 ...

  4. C# 6.0：Expression – Bodied Methods

    Expression-bodied 方法是C# 6.0 中另一个能简化代码的特性.我们已经对lambda表达式将funciton和delegation关联起来的这种用法很熟悉了.Expression- ...

  5. iptables和netfilter

    1.iptables和netfilter说明 [1]netfilter/iptables组成Linux平台下的包过滤防火墙,iptables是用户空间的管理工具,netfilter是内核空间的包处理框 ...

  6. Java代码片段——向文件末尾添加内容

    BufferedWriter out = null; try { out = new BufferedWriter(new FileWriter(”filename”, true)); out.wri ...

  7. java——什么是浅表副本

    ArrayList.clone(),hashtable.clone()方法返回此ArrayList的浅表副本(不复制这些元素本身),那么什么是浅表副本? 一个集合的浅度拷贝意味着只拷贝集合中的元素,不 ...

  8. 命令纠正工具 thefuck 的简单使用

    在unix系列的系统中,总会出现 命令拼写或者执行错误的情况, 比如 把 python 写成了pythou, cd 到一个不存在的目录,执行任务的权限 不够的问题, 这是心里 总是 在 fuck,但是 ...

  9. Python基础之字符串拼接简单介绍

    字符串拼接: %s表示可以传任意类型的值,%d表示只能传数字 test = "my name is %s,age %d" %("xyp",19) print(t ...

  10. 70.纯 CSS 创作一只徘徊的果冻怪兽

    原文地址:https://segmentfault.com/a/1190000015484852 感想:monster中边框角.上下动画.旋转动画.左右动画,眼睛中transform:scaleY(n ...