大家好,又见面了,我是你们的朋友全栈君。
web服务的本质
import socket def main(): sock=socket.socket(socket.AF_INET,sock.SOCK_STREAM) sock.blind(('localhost',8081)) sock.listen(5) while True: print(''server is working......'') conn,address=sock.accpt() request=conn.recv(1024) conn.sendall(bytes(''HTTP/1.1 201 ok\r\n<h1>hello welcome to html</h1>'',utf-8)) conn.close() if __name__=='__main__' : main()
View Code
本质:所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端。
浏览器发请求 –> HTTP协议 –> 服务端接收请求 –> 服务端返回响应 –> 服务端把HTML文件内容发给浏览器 –> 浏览器渲染页面
HTTP协议
什么是HTTP协议
HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程。客户端连上web服务器后,
若想获得web服务器中的某个web资源,需遵守一定的通讯格式,HTTP协议用于定义客户端与web服务器通迅的格式。
HTTP协议的版本
HTTP/1.0、HTTP/1.
什么是HTTP请求
客户端连上服务器后,向服务器请求某个web资源,称之为客户端向服务器发送了一个HTTP请求。
HTTP请求包括的内容
一个完整的HTTP请求包括如下内容:一个请求行、若干消息头、以及实体内容
范例:
HTTP请求的细节——请求行
请求行中的GET称之为请求方式,请求方式有:POST、GET、HEAD、OPTIONS、DELETE、TRACE、PUT,常用的有: GET、 POST
用户如果没有设置,默认情况下浏览器向服务器发送的都是get请求,例如在浏览器直接输地址访问,点超链接访问等都是get,用户如想把请求方式改为post,可通过更改表单的提交方式实现。
不管POST或GET,都用于向服务器请求某个WEB资源,这两种方式的区别主要表现在数据传递上:如果请求方式为GET方式,则可以在请求的URL地址后以?的形式带上交给服务器的数据,多个数据之间以&进行分隔,例如:GET /mail/1.html?name=abc&password=xyz HTTP/1.1
GET方式的特点:在URL地址后附带的参数是有限制的,其数据容量通常不能超过1K。
如果请求方式为POST方式,则可以在请求的实体内容中向服务器发送数据,Post方式的特点:传送的数据量无限制。
HTTP请求中的常用消息头
- accept:——浏览器通过这个头告诉服务器,它所支持的数据类型
- Accept-Charset: ——浏览器通过这个头告诉服务器,它支持哪种字符集
- Accept-Encoding:——浏览器通过这个头告诉服务器,支持的压缩格式
- Accept-Language:——浏览器通过这个头告诉服务器,它的语言环境
- Host:——浏览器通过这个头告诉服务器,想访问哪台主机
- If-Modified-Since:—— 浏览器通过这个头告诉服务器,缓存数据的时间
- Referer:——浏览器通过这个头告诉服务器,客户机是哪个页面来的 防盗链
- Connection:——浏览器通过这个头告诉服务器,请求完后是断开链接还是何持链接
例如:
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color:
HTTP响应包括的内容
一个HTTP响应代表服务器向客户端回送的数据,它包括: 一个状态行、若干消息头、以及实体内容 。
范例:
<code class="hljs http has-numbering" style="display: block; padding: 0px; color:
HTTP响应的细节——状态行
状态行格式: HTTP版本号 状态码 原因叙述<CRLF>
1:HTTP/1.1 200 OK
状态码用于表示服务器对请求的处理结果,它是一个三位的十进制数。响应状态码分为5类,如下所示:
HTTP响应中的常用响应头(消息头)
Location: 服务器通过这个头,来告诉浏览器跳到哪里
Server:服务器通过这个头,告诉浏览器服务器的型号
Content-Encoding:服务器通过这个头,告诉浏览器,数据的压缩格式
Content-Length: 服务器通过这个头,告诉浏览器回送数据的长度
Content-Language:服务器通过这个头,告诉浏览器语言环境
Content-Type:服务器通过这个头,告诉浏览器回送数据的类型
Refresh:服务器通过这个头,告诉浏览器定时刷新
Content-Disposition:服务器通过这个头,告诉浏览器以下载方式打数据
Transfer-Encoding:服务器通过这个头,告诉浏览器数据是以分块方式回送的
Expires: -1 控制浏览器不要缓存
Cache-Control: no-cache
Pragma:no-cache
HTML语言初接触
web开发:
CS模式 client server (客户端 服务端) 后台设计
BS模式—- browser server( 浏览器 服务端) 前端设计
什么是HTML语言
1:HTML(HyperTextMark-upLanguage)即超文本标记语言通过标签语言来标记要显示的网页中的各个部分。 2:本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
HTML文件的扩展名(后缀名)
.html 或 .htm
注意!!!
HTML 不是一种编程语言,而是一种标记语言 (markup language);HTML使用标签来描述网页。
标记语言,编程语言以及脚本语言的区别
标记语言
标记语言,是一种将文本(Text)以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息(包括例如文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记(markup)进行标识。
如:HTML、XML
脚本语言
脚本语言是为了缩短传统的编写-编译-链接-运行(edit-compile-link-run)过程而创建的计算机编程语言。它的命名起源于一个脚本“screenplay”,每次运行都会使对话框逐字重复。早期的脚本语言经常被称为批量处理语言或工作控制语言。
一个脚本通常是解释运行而非编译。脚本语言通常都有简单、易学、易用的特性,目的就是希望能让程序员快速完成程序的编写工作。
如:JavaScript、VBScript、PHP
编译型语言
编译型语言:程序在执行之前需要一个专门的编译过程,把程序编译成 为机器语言的文件,运行时不需要重新翻译,直接使用编译的结果就行了。程序执行效率高,依赖编译器,跨平台性差些
如 C、C++
1、标记语言不用于向计算机发出指令,常用于格式化和链接(被读取的,本身没有行为能力(被动)
2、脚本语言介于标记语言和编程语言之间,脚本语言脚本语言不需要编译,可以直接用,由解释器来负责解释。(a.需要解释执行;b.本身具有逻辑性和行为能力;)
3、编译型语言写的程序执行之前,需要一个专门的编译过程,把程序编译成为机器语言的文件,比如exe文件,以后要运行的话就不用重新翻译了,直接使用编译的结果就行了(exe文件),因为翻译只做了一次,运行时不需要翻译,所以编译型语言的程序执行效率高(a.需要编译执行;b.本身具有逻辑性和行为能力)。
图例:
HTML文件的结构
HTML最基本的结构:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> <!--浏览器显示的内容--> </body> </html>
结构详解:
<!DOCTYPE html>叫做文档申明 , 告诉浏览器使用什么样的html或者xhtml来解析html文档;作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档,在它们之间是文档的头部<head>和主体<body>。
<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。
<body></body>之间的文本是可见的网页主体内容
PS:
对于中文网页需要使用 <meta charset=”utf-8″> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset=”gbk”>。
HEAD标签包含内容总结:
<meta name=”keywords” content=”meta总结,html meta,meta属性,meta跳转”>
<meta name=”description” content=”老男孩培训机构是由一个很老的男孩创建的”>
<meta http-equiv=”content-type” charset=”UTF-8″> 相当于<meta charset=”utf-8″>
<link rel=”stylesheet” href=”egon.css”> 链接css页面
<script src=”egon.js”></script> 链接js页面
head标签对中包含了 meta和非meta俩种标签:
meta标签
<meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部,不包含任何内容。
<meta>提供的信息是用户不可见的
meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
(1)name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">
(2)http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号,分别在秒数的前面和网址的后面) <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
非meta标签
<title>oldboy</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> //icon属性给网页标题添加图标 href图标的地址 <link rel="stylesheet" href="css.css"> <script src="hello.js"></script>
<title></title>定义网页标题,在浏览器标题栏显示。
<body></body>之间的文本是可见的网页主体内容
HTML标记语言标签分类
块级标签(block):独占一行 h1-6 p div ul li p,标签不可以嵌套标签(默认占用浏览器的最大宽度,只有块级标签可以设置长度和宽度)
内联标签也叫行内标签(inline):按内容扩展 b em sup sub span a ( 默认文本内容有多长就占用多大的长度,不可以设置长度和宽度) 双标记标签:通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束。结束标签会有斜线。 单标记标签:有一部分标签是单独呈现的,比如:<br/>、<hr/>、<img src="1.jpg" />等,单标记标签也叫自封闭标签
标签嵌套规则
块级可以嵌套块级 ,内联
P标签不可以嵌套块级标签
内联只可以嵌套内联
标签的语法
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名> <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
几个重要的属性:
- id:定义标签的唯一ID,HTML文档树中唯一
- class:为html元素定义一个或多个类名(classname)(CSS样式类名)
- style:规定元素的行内样式(CSS样式)
HTML中的注释
<!--注释内容-->
HTML中常用的标签
head内常用标签
标签 | 意义 |
---|---|
<title></title> | 定义网页标题 |
<style></style> | 定义内部样式表 |
<script></script> | 定义JS代码或引入外部JS文件 |
<link/> | 引入外部样式表文件 |
<meta/> | 定义网页原信息 |
Meta标签介绍
- <meta>元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
- <meta>标签位于文档的头部,不包含任何内容。
- <meta>提供的信息是用户不可见的。
meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址,注意引号--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="Python编程">
body内部常用标签
基本标签:
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--> <hr size='' width='50px/70%' noshade='noshade'>
特殊字符:
内容 | 对应代码 |
---|---|
空格 | |
> | > |
< | < |
& | & |
¥ | ¥ |
版权 | © |
注册 | ® |
div标签和span标签
div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
块级元素与行内元素的区别:
所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
注意:
关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
p标签不能包含块级标签。
图片标签 img
<img src=’图片路径’ title=’当鼠标移到图片上的时候显示的内容’ alt=’发生错误时的提示文字信息’ width=’宽’ height=’高’>
超链接标签 a
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。
什么是URL? URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。 URL举例 http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.html URL地址由4部分组成 第1部分:为协议:http://、ftp://等 第2部分:为站点地址:可以是域名或IP地址 第3部分:为页面在站点中的目录:stu 第4部分:为页面名称,例如 index.html 各部分之间用“/”符号隔开。
URL
href属性指定目标网页地址。该地址可以有几种类型:
- 绝对URL – 指向另一个站点(比如 href=”http://www.jd.com)
- 相对URL – 指当前站点中确切的路径(href=”index.htm”)
- 锚URL – 指向页面中的锚(href=”#top”)
target:
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
常用方式:<a href=”网址” targe=’_blank’>点击链接的内容</a>
锚点方式:
<a href = ‘#a2’>a1跳a2</a>
<div style=’height:6000px;background-color:red’></div>
<a href = ” id = ‘a2’>哈哈哈</a>
列表标签
有序列表
<ol type=a小写字母/A大写字母/1数字,默认值是数字/i小写罗马数字/I 大写罗马数字> <li>军事新闻</li> <li>娱乐新闻</li> <li>财经新闻</li> <li>民生新闻</li> <li>国外新闻</li> </ol>
无序列表
<ul type=square实心方块/circle空心圆/disc实心圆,默认值是disc> <li>军事新闻</li> <li>娱乐新闻</li> <li>财经新闻</li> <li>民生新闻</li> <li>国外新闻</li> </ul>
标题列表
<dl> <dt>标题1<dt> <dd>内容1<dd> <dd>内容2<dd> <dt>标题2<dt> <dd>内容1<dd> <dd>内容2<dd> </dl>
表格标签:
表格的基本结构:
<table> <!--表的开始--> <thead> <!--表头部分--> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <!--表的正文部分--> <tr> <td>1</td> <td>Egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>Yuan</td> <td>日天</td> </tr> </tbody> </table> <!--表的结束-->
表的结构
表格的相关属性
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.(最好通过css来设置长宽)
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
表的相关属性
表单标签 :<form></from>
表单的作用:用于向服务器传输数据,从而实现用户与Web服务器的交互
表单包含的内容:
1:包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等
2:还可以包含textarea、select、fieldset和 label标签
表单的属性:
属性 | 描述 |
---|---|
accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集)。 |
action | 规定向何处提交表单的地址(URL)(提交页面)。 |
autocomplete | 规定浏览器应该自动完成表单(默认:开启)。 |
enctype | 规定被提交数据的编码(默认:url-encoded)。 |
method | 规定在提交表单时所用的 HTTP 方法(默认:GET)。 |
name | 规定识别表单的名称(对于 DOM 使用:document.forms.name)。 |
novalidate | 规定浏览器不验证表单。 |
target | 规定 action 属性中地址的目标(默认:_self)。 |
表单之input系列
<input> 元素会根据不同的 type 属性,变化为多种形态。
type属性值 | 表现形式 | 对应代码 |
---|---|---|
text | 单行输入文本 | <input type=text” /> |
password | 密码输入框 | <input type=”password” /> |
checkbox | 复选框 | <input type=”checkbox” checked=”checked” /> |
radio | 单选框 | <input type=”radio” /> |
submit | 提交按钮 | <input type=”submit” value=”提交” /> |
reset | 重置按钮 | <input type=”reset” value=”重置” /> |
button | 普通按钮 | <input type=”button” value=”普通按钮” /> |
hidden | 隐藏按钮 | <input type=”hidden” value=”隐藏按钮” /> |
file | 文本选择框 | <input type=”file” /> |
属性说明:
- name:表单提交时的“键”,注意和id的区别
- value:表单提交时对应项的值
- type=”button”, “reset”, “submit”时,为按钮上显示的文本年内容
- type=”text”,”password”,”hidden”时,为输入框的初始值
- type=”checkbox”, “radio”, “file”,为输入相关联的值
- checked:radio和checkbox默认被选中的项
- readonly:text和password设置只读
- disabled:所有input均适用
select标签
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </form>
属性说明:
- multiple:布尔属性,设置后为多选,否则默认单选
- disabled:禁用
- selected:默认选中该项
- value:定义提交时的选项值
lable标签
定义:<label> 标签为 input 元素定义标注(标记)。
说明:
- label 元素不会向用户呈现任何特殊效果。
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
text area多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>
属性说明:
- name:名称
- rows:行数
- cols:列数
- disabled:禁用
a标签(超链接)操作
链接到百度 <a href="http://www.baidu.com">点我到百度</a> 默认的链接下面都有下划线 如果要去除的话使用text-decoration属性设置 <head> .href a{ text-decoration: none; } </head> <body> <div class="href" <a href="http://www.baidu.com">点我到百度</a> </div> </body>
超链接
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124513.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...