1.背景
1.CS架构和BS结构
CS模式:C/S就是Client/Server的缩写,是客户端和服务器架构;早期的软件系统多数是C/S结构的设计标准;
BS模式:B/S模式就是Browser/Server的缩写,是浏览器和服务器结构;B/S是随着Internet技术的兴起,对C/S结构的变化或者改进的结构;版智商B/S还是属于C/S结构范围,也就是B/S包含在C/S中,是特殊的C/S架构;浏览器就是B/S结构最主要的客户端,网站也是B/S结构的软件;
2.W3C标准
World Wide Web Consortium,简称“W3C”,中文翻译为万维网联盟,又称W3C理事会;1994年10月在马恒理工学院计算机科学实验室成立,建立者是万维网的发明者蒂姆·伯纳斯·李;万维网联盟是Web技术领域最具权威和影响力的国际中立性技术标准机构,创建和发展了W3C标准,致力于维护和发展web规范。W3C标准是网页开发的核心标准;那么什么是W3C标准呢?
W3C标准不是某一个标准,而是一系列标准的集合;网页主要由三部分组成:
- 结构(Structure)
- 表现(Presentation)
- 行为(Behavior)
对应的W3C标准也分成了三个方面,结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准语言主要包括对象模型(如W3C DOM),ECMS Script等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制定的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。
前端基础总共分为三部分:html、css和js;
1.HTTP协议
1.1HTTP协议简介
HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于万维网(WWW:World Wide Web)服务器和本地浏览器之间传输超文本的传送协议;HTTP是一个属于应用层的面向对象的协议,由于其简洁、快速的方式,是用于分布式超媒体信息系统;它于1990年提出,经过几年的使用与发展,得到不断的完善和扩展。HTTP协议工作与客户端-服务端架构为上;浏览器作为HTTP客户端通过HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求;Web服务器根据接收到的请求后,向客户端发送响应信息;
import socket
sock = socket.socket()
sock.bind(('127.0.0.1', 8800))
sock.listen(5)
while 1:
print('server is working...')
conn, addr = sock.accept()
recv_data = conn.recv(1024)
conn.send(b'HTTP/1.1 200 OK\r\nname:sxm\r\nwelcome to web world!')
conn.close()
sock.close()
1.2http协议特性
1.基于TCP/IP协议
http协议是基于TCP/IP协议之上的应用层协议;
2.基于请求-响应模式
HTTP协议规定,请求从客户端发出,最后服务器响应该请求并返回。换句话说,肯定是先从客户端开始建立通信的,服务端在没有接收请求之前不会发送响应;
3.无状态保存
HTTP是一种不保存状态,即无状态(stateless)协议。HTTP协议自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个级别,协议对于发送过的请求或响应都不做持久化处理;
使用HTTP协议,每当有新的请求发送时,就会有对应的新响应产生。协议本身并不保留之前一切的请求或响应报文的信息;这是为了更快的处理大量事务,确保协议的可伸缩性,而特意把HTTP协议设计成如此简单的;
可是,随着Web的不断发展,因无状态而导致业务处理变得棘手的情况增多了;比如:用户登录到一家购物网站,即使他跳转到该站的其他网页后,也需要能保持登录状态;针对这个实例,网站为了能够掌握是谁发出的请求,HTTP1.1虽然是无状态协议,但为了实现期望的保持状态功能,于是引入了Cookie技术;有了Cookie再用HTTP协议通信,就可以管理状态了;
4.无连接
无连接的含义是限制每条连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接;餐用这种方式可以节省传输时间;
1.3http请求协议和响应协议
http协议包含由浏览器发送数据到服务器需要遵循的请求协议与服务器发送数据到浏览器需要遵循的请求协议。用于HTTP协议交互的信被称为HTTP报文;请求端(客户端)的HTTP报文做请求报文,响应端(服务器端)的做响应报文;HTTP报文本身是由多行数据构成的字文本;
1.请求协议
问:get与post的区别?
- Get提交的数据会放在URL之后,以?分隔URL和传输数据,参数之间以&相连,如EditBook?name=test1&id=123456;POST方法是把提交的数据放在HTTP包的请求体中;
- GET提交的数据大小有限制(因为浏览器对URL长度有限制),而POST方法提交的数据没有限制
2.响应协议
响应状态码:状态码的职责是当客户端向服务端发送请求时,返回的请求结果;借助状态码,用户可以知道服务区是正常处理了请求还是出现了异常;状态码如200 OK,以3位数字和原因组成;数字中的一位指定了响应类别;响应类别主要有如下五种:
2.HTML
了解了web相关基本概念以后,我们开始正式接触网页开发,网页开发的基础是HTML;
2.1HTML概述
- HTML,即超文本标记语言(HyperText Markup Language),由SGML(标准通用标记语言)发展而来,也叫web页面;扩展名是.html或是.htm
- HTML是一种用来制作网页的标准标记语言;超文本,指的是超出普通文本范畴的文档,可以包含文本、图片、视频、音频、连接等元素
- HTML不是一种编程语言,而是一种写给网页浏览器,具有描述性的标记语言;
自1990年以来,HTML就一直被用作WWW(World Wide Web的缩写,也可简称WEb,中文叫做万维网)的信息表示语言,使用HTML语言描述的文件,需要通过网页浏览器显示出效果;用户在访问网页时,是把服务器的HTML文档下载到本地客户端设备中,然后通过本地客户设备的浏览器将文档按顺序解释渲染成对应的网页效果;
网页本身是一种文本文件,通过在文本文件中添加各种各样的标记标签,可以告诉浏览器如何显示标记中代表的内容;如:HTML中有的标签可以告诉浏览器要把字体放大,就像word一样,也有的标签可以告诉浏览器显示制定的图片,还有的标签可以告诉浏览器把内容居中或者倾斜等;
每一个HTML标签代表的意义不一样;同样,他们在浏览器中表现出来的外观也是不一样的;
2.2HTML结构和标签格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
- <!DOCTYPE html>告诉浏览器使用什么样的html或者xhtml来解析html文档
- <html></html>是文档的开始标记和结束标记;此元素告诉浏览器其自身是一个html文档,在它们之间的是头部<head>和主体<body>
- 元素出现在文档的开头部分;与之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义
- <title></title>定义网页标题,在浏览器标题栏显示
- <body></body>之间的文本是可见的网页主体内容
- <meta charset="UTF-8">声明编码方式用utf8
- <head></head>中可以添加<link rel="icon" href="https://www.baidu.com/1.png">设置网页的图标icon
2.3标签的语法
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
- html标签是由尖括号包围的特定关键词
- 标签分为闭合和自闭合两种标签
- html不区分大小写
- 标签可以有若干个属性,也可以不带属性
- 标签可以嵌套,但是不可以交叉嵌套
在很早以前HTML4的时候,HTML的标签是大写的,但是在后面的发展中,人们发现HTML仍然存在很多不足,标签不区分大小写和标签可以胡乱嵌套都在其中,于是1998年语法更为完善的XML(The Extensible Markup Language 可扩展标记语言)称为推荐标准,意在替代HTML;和HTML一样,XML同样来源于SGML,但同时已有成千上万的站点,因此直接使用XML作为网页开发技术根本就不可能;因此,后面W3C就在HTML4.0的基础上,参照XML的语法规则对HTML进行扩展,形成了XHTML(The Extensib HyperText Markup Language 可扩展超文本标记语言)的1.0版本;
XHTML是实现HTML到XML的过渡;
2.4基本标签
1.标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
2.段落标签
<p>大家好,我是段落1。</p>
<p>大家好,我是段落2。</p>
<p>大家好,我是段落3。</p>
3.换行标签:break的缩写
<p>大家好,我是段落标签p。我按了enter一下
换行了</p>
<p>大家好,我是段落标签p。我按了enter一下<br/> 换行了</p>
4.文本格式化标签
HTML提供了一系列的用于格式化文本的标签,可以让我们输出不同外观的元素,比如粗体和斜体字;如果在网页中,需要让某些文本内容展示的效果丰富点,可以使用以下的标签来进行格式化;
<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />
5.特殊符号
® ©
标签大致可以分为两类:
块级标签(block):独占一行;可以设置长宽;
内联标签(inline):按文本内容占行;不可以设置长宽;
6.div和span标签
<div>只是一个块级元素,并无实际的意义;主要通过css样式为其赋予不同的表现
<span>表现了内联行(行内元素),并无实际意义,主要通过css样式为其赋予不同的表现
块级元素与行内元素的区别:所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行;如果单独在网页中插入这两个元素,不会对页面产生任何的影响;这两个元素是专门为定义css样式而产生的;
html渲染源码时,会将源码中的enter换行和空格渲染为空格的效果
2.5超链接标签
1.超链接基本使用
超链接的属性:
属性 | 值 | 描述 |
---|---|---|
href | 网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如:F:\html\index.html ] | 规定链接的跳转目标 |
title | 百度 | 链接的提示信息 |
target | _blank [ 在新建窗口中打开网页 ] _self [ 默认值,覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] | 与前面四项固定值不同,framename是泛指,并不是这个值,这点将在后面框架部分内容中详细介绍,这里可以暂时先略过 |
- href是超链接最重要的属性,规定了用户点击链接以后的跳转目标,这个目标可以是网络连接,也可以是本地链接
- 网络链接指的是依靠网络来进行关联的地址,一般在地址前面是http://或者https://这样开头的,如果没有网络,则用户点击了超链接也无法访问对应的目标
- 本地连接指的是本地计算机的地址,一般在地址前面是以file:///开头或者以C:/、D:/、E:/开头的,不需要经过网络
- 如果href的值留空,则默认是跳转到当前页面,也就是刷新当前页面;href的值为#时,则点击不跳转
2.锚点应用
锚点(anchor)是超链接的一种应用,也叫命名锚记,锚点可以像一个定位器一样,可以实现页面内的连接跳转,运用相当普遍;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点的使用</title>
<style>
div{
height:800px;
background-color: #0a83a0;
}
</style>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1">
<p>第一章内容</p>
</div>
<div id="i2">
<p>第二章内容</p>
</div>
<div id="i3">
<p> 第三章内容</p>
</div>
</body>
</html>
向服务器发送请求的方式:
- 浏览器地址栏:GET
- 超链接请求:默认为GET请求
- form表单
- Ajax
2.6img标签
在HTML中,图像由标签定义的,它可以用来加载图片到html网页中显示;网页开发过程中,有三种图片格式被广泛应用到web里,分别是jpg、png、gif;
img的属性:
属性 | 描述 |
src | 指定图像的url地址,是英文source的缩写,表示引入资源; src的值可以是本地计算机存储的图片地址,也可以是网络上外部图片网站的图片地址; 如果src的值不正确,那么浏览器就无法找到正确的图片,而是显示一张裂图; |
alt | 指定图像无法显示时的替换文本;当图像显示错误时,在图像位置上显示alt的值;alt属性一般作为SEO优化的手段之一,所以,使用了img标签就需要加上alt属性; |
width | 指定引入图片的显示宽度 |
height | 指定引入图片的显示高度 |
border | 指定引入图片的边框宽度,默认为0 |
title | 悬浮图片上的提示文字 |
2.7列表标签
- ul:无序列表:是unorder list的缩写
- ol:有序列表:是order list的缩写
- df:定义列表:是define list的缩写:自定义列表不仅仅是一列项目,而是项目及其注释的组合
属性 | 值 | 说明 | |
ul的属性 | type | circle:空心圆 | 指无序列表的行开头图标样式 |
square:正方形 | |||
ol的属性 | start | start=“100” | 指的是有序列表的第一行的序号,默认为1 |
<ul type="circle">
<li>item</li>
<li>item2</li>
<li>item3</li>
</ul>
<ol start="100">
<li>item</li>
<li>item2</li>
<li>item3</li>
</ol>
<dl>
<dt>item</dt>
<dd>item2</dd>
<dt>item</dt>
<dd>item2</dd>
</dl>
2.8表格标签
- tr:table row:表示一行的开始与结束
- th:table header:表头
- td:table :表示一个单元格的开始与结束
属性 | 值 | 说明 | |
table属性 | width | px、 % | 规定表格的宽度 |
height | px、 % | 规定表格的高度 | |
align | left、center、right | 规定表格相对周围元素的对齐方式 | |
bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 规定表格的背景颜色 | |
background | url | 规定表格的背景图片 | |
border | px | 规定表格边框的宽度,默认为0 | |
cellpadding | px、 % | 规定单元格边框与其内容之间的空白 | |
cellspacing | px、 % | 规定单元格之间的空隙 | |
td属性 | height | px、 % | 规定单元格的高度 |
width | px、 % | 规定单元格的宽度 | |
align | left、center、right | 规定单元格内容的对齐方式 | |
valign | top、middle、bottom | 规定单元格内容的垂直对齐方式 | |
bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 规定单元格的背景颜色 | |
background | url | 规定单元格的背景图片 | |
rowspan | number | 规定单元格合并的行数 | |
colspan | number | 规定单元格合并的列数 |
<table border="1px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>昵称</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td colspan="2" align="center">sxm</td>
<!-- <td>sxm</td>-->
<td rowspan="3">12</td>
</tr>
<tr>
<td>2</td>
<td>sxm1</td>
<td>sxm12</td>
<!-- <td>123</td>-->
</tr>
<tr>
<td>2</td>
<td>sxm1</td>
<td>sxm15</td>
<!-- <td>123</td>-->
</tr>
</table>
2.9表单标签
表单主要是用来手机客户端提供的相关信息,提供了用户数据录入的方式,有多选,单选,单选文本,下拉列表等输入框便于网站管理员收集用户的数据,是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁;
一个表单元素有三个基本组成部分:
- 表单标签:包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息;
- 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件;
- 表单按钮:包括提交按钮,复位按钮和一般按钮,用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作;
submit按钮的事件:当点击submit时,浏览器会将当前form表单的所有有效表单域组成键值对按from表单的method属性提交到action属性对应的服务器;
在HTML中创建表单用form标签;每个表单都可以包含一个到多个表单域或按钮;from标签属性:
属性 | 值 | 说明 |
action | 访问服务器地址 | 服务器端表单处理程序的URL地址 |
method | post,get[默认值] | 表单数据的提交方法 |
target | 参考超链接的target属性 | 表单数据提交时URL的打开方式 |
enctype | application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] | 表单提交数据时的编码方式 |
<form action="https://www.baidu.com" method="POST">
<!-- 表单域:-->
<!-- 1.input系列-->
<p>姓名:<input type="text" name="user" placeholder="用户名"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>爱好:
篮球<input type="checkbox" name="hobby" value="basketball" checked="checked">
足球<input type="checkbox" name="hobby" value="football" checked>
羽毛球<input type="checkbox" name="hobby" value="badminton">
</p>
<p>性别:
男<input type="radio" name="gender" value="1">
女<input type="radio" name="gender" value="2">
保密<input type="radio" name="gender" value="3">
</p>
<p>生日:
<input type="date" name="birthday">
</p>
<!-- 2.select标签-->
<p>籍贯:
<select name="province" id="">
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="beijing" selected>北京市</option>
</select>
</p>
<p>多选:
<select name="pro" id="" multiple size="1">
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="beijing" selected>北京市</option>
</select>
</p>
<!-- 3.textarea标签-->
<p>简介:
<textarea name="introduce" id="" cols="30" rows="10" placeholder="简介"></textarea>
</p>
<!-- 按钮类-->
<input type="button" value="按钮">
<input type="reset" value="reset">
<input type="submit" value="登录">
</form>
- 在前端html语言中,标签属性中键值相同的属性类似于checked="checked"也叫布尔属性,可以简写为checked
- name属性为键
- value属性为值