一、用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中防止字符串转义

    有学生问了个问题,试了好多办法都不行,搜也搜不到,只能自己尝试了,顺利解决. 问题描述: 如果一个字符串包含转义字符,如“adfdfasd\tfdsadf\t”,正常print会将\t看作转义字符ta ...

  2. 创建maven工程的时候卡死的解决办法

    在idea的maven,runner,properties里面添加 archetypeCatalog=internal

  3. bitmap--Bitmap详解与Bitmap的内存优化

    一.Bitmap: Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文件信息,进行图像剪切.旋转.缩放等操作,并可以指定格式保存图像文件. 常用方法: public voi ...

  4. webview之如何设计一个优雅健壮的Android WebView？（上）(转)

    转接:https://iluhcm.com/2017/12/10/design-an-elegant-and-powerful-android-webview-part-one/ 前言 Android ...

  5. windows 下借助7zip实现命令行解压缩

    windows 下借助7zip实现命令行解压缩 64位电脑下载 https://www.7-zip.org/a/7z1805-x64.exe 安装 安装目录下所有文件如下: 在命令行下只需要用到 7z ...

  6. PXC5.7(Percona XtraDB Cluster)+HAproxy+Keepalived 集群部署

    Percona-XtraDB-Cluster+Haproxy 搭建集群环境 环境准备及服务器信息: 配置防火墙 firewall-cmd --add-port=3306/tcp --permanent ...

  7. html/css/js----js中遇到的一些问题

    学习前端的时候有时也会遇到一些弄不明白的问题,学习js会有更多的方法不清楚它的用法,我谨以在学习中遇到的一些问题记录下来,以便日复习! 一."window.opener.location.r ...

  8. sas 9.4 sid 64bit 到期时间210804 带有EM

    PROC SETINIT RELEASE='9.4';SITEINFO NAME='NATIONAL PINGTUNG UNI OF SCIENCE&TECH'SITE=12001462 OS ...

  9. celery定时任务

    from celery import Celery from datetime import timedelta app = Celery('gx', broker='redis://localhos ...

  10. photo型的object转byte[]

    IEnumerable en = (IEnumerable) myObject; byte[] myBytes = en.OfType<byte>().ToArray(); TypeCon ...