一、用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字符串截取、查找、分割

    Python 截取字符串使用 变量[头下标:尾下标],就可以截取相应的字符串,其中下标是从0开始算起,可以是正数或负数,下标可以为空表示取到头或尾. # 例1:字符串截取 str = '1234567 ...

  2. 【配置阿里云 I】申请配置阿里云服务器，并部署IIS和开发环境，项目上线经验

    https://blog.csdn.net/vapaad1/article/details/78769520 最近一年在实验室做web后端开发,涉及到一些和服务器搭建及部署上线项目的相关经验,写个帖子 ...

  3. ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

    问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...

  4. 工控随笔_16_西门子_S7-200.Smart软件安装兼容性说明和错误代码：error code hr=0x80070430

    现在西门子的软件是更新换代太快了,前几年还是Step 7 Micro/Win,后来又出了S7-200 Smart PLC,理所当然的编程调试软件也水涨船高,出了新的Step 7  Micro/Win ...

  5. win10 vs2015源码编译tesseract4.0

    1.安装软件 cmake  下载地址 cppan   下载地址 安装完毕后,需要将cmake.exe和cppan.exe加入环境变量PATH中 cmake简介 CMake全称为“cross platf ...

  6. python中Multiprocessing

    import multiprocessing as mp #该函数不能有返回值,如果需要则应该将值放在queue中 def job(a,b): print('aaaa') if __name__ == ...

  7. 你真的理解了for循环吗？反正我是没有

    for循环的执行步骤 咱们先来看一个有意思的关于for循环的程序 public class TestFor { public static void main(String[] args) { int ...

  8. 开源邮件系统Zimbra Collaboration – Open Source Edition

    https://www.zimbra.com/downloads/zimbra-collaboration-open-source/ Zimbra Collaboration – Open Sourc ...

  9. idea 优先引用项目代码，而非jar包

    1.现有项目,和jar包源码在同一层目录 2.idea直接打开ccccc,右键a,b两个文件中的pom.xml加入maven project,如下: 执行1,2 步骤,在b中引入a,刚引入a在最下方, ...

  10. spring boot websocket stomp 实现广播通信和一对一通信聊天

    一.前言 玩.net的时候,在asp.net下有一个叫 SignalR 的框架,可以在ASP .NET的Web项目中实现实时通信.刚接触java寻找相关替代品,发现 java 体系中有一套基于stom ...