一、用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. shopex-百度爬虫抓取过于频繁导致php-cgi占用CPU过高的解决办法

    步骤 1.开启slowlog:php-fpm里修改配置 观察slowlog里的超时文件,然后修改相应超时文件 2.1修改完后,仍然无效,查看access.log,发现大量如下的请求 220.181.1 ...

  2. MariaDB——(一)CentOS 6.5 下 MariaDB 10.0.15 YUM 安装

    1.配置yum源: 在MariaDB官网提供了yum源在线生成器,选择合适的系统和版本后,会生成所需的repo文件内容: 在/etc/yum.repos.d/目录下新建一个MariaDB.repo文件 ...

  3. 洛谷P1038 神经网络（bfs，模拟，拓扑）

    题目背景 人工神经网络(Artificial Neural NetworkArtificialNeuralNetwork)是一种新兴的具有自我学习能力的计算系统,在模式识别.函数逼近及贷款风险评估等诸 ...

  4. C#源码发送简单的HTTP请求

    如下代码内容是关于C#发送简单的HTTP请求的代码,应该能对大家有用处. using System;using System.Collections.Generic;using System.Linq ...

  5. 2018秋寒假作业6—PTA编程总结3

    1.实验代码 7-1 抓老鼠啊~亏了还是赚了? (20 分) 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T) ...

  6. Windows下安装Python虚拟环境

    Windows下安装Python虚拟环境 虚拟环境安装 需求概要 "虚拟环境"是从电脑独立开辟出来的环境.就好比我们生活中的橱柜中,会把酱油放在一个瓶子里,把醋放在另外一个瓶子里, ...

  7. css定义好看的垂直滚动条

    滚动条的css样式主要有三部分组成: 1.::-webkit-scrollbar   定义了滚动条整体的样式:    2.::-webkit-scrollbar-thumb  滑块部分:     3. ...

  8. Google瓦片地图URL

    http://mt2.google.cn/vt/lyrs=y&scale=2&hl=zh-CN&gl=cn&x=6891&y=3040&z=13 //含 ...

  9. CNVD-C-2019-48814 漏洞

    CNVD-C-2019-48814 WebLogic wls9-async反序列化远程命令执行漏洞 网上均有详细的说明(https://github.com/jas502n/CNVD-C-2019-4 ...

  10. Specified key was too long; max key length is 767 bytes解决方案

    问题描述: 1.  使用spark sql处理数据逻辑,逻辑处理后使用 df.write.mode(saveMode).jdbc(url, tableName, connectionPropertie ...