1. 什么是前端?
任何与用户直接打交道的操作界面都可以称之为前端
比如:电脑界面,手机界面,平板界面
2. 什么是后端?
暂时先理解成 幕后操作者
不直接与用户打交道
3. 什么是HTTP协议
超文本传输协议
规定了浏览器与服务端之间消息传输的数据格式
四大特性:
1.基于请求响应
2.基于TCP/IP之上的作用于应用层的协议
3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见)
4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了)
websocket 相当于是HTTP协议的一个大的补丁 它支持长连接
请求数据格式
请求首行(标识HTTP协议版本,当前请求方式)
请求头(一大堆k,v键值对)
换行
请求体(携带的是一些敏感信息比如 密码,身份证号...)
响应数据格式
响应首行(标识HTTP协议版本,响应状态码)
响应头(一大堆k,v键值对)
响应体(返回给浏览器页面的数据 通常响应体都是html页面)
响应状态码
用一串简单的数字来表示一些复杂的状态或者提示信息
1XX:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据
2XX:服务端成功响应 你想要的数据(请求成功200)
3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302)
4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)
5XX:服务器内部错误(500)
4.HTML介绍
Web服务本质:
import socket
sk = socket.socket()
sk.bind(('127.0.0.1', 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(1024)
conn.send(b'HTTP/1.1 200 OK
')
conn.send(b'<h1>Hello world!</h1>')
conn.close()
浏览器发送请求==> HTTP协议==> 服务端接收请求==> 服务端返回响应==>服务端把HTML文件内容发送给浏览器==> 浏览器渲染页面
5.HTML文档结构
1.最基础的HTML文档
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> 声明为HTML文档 <html lang="zh-CN">,</html> 是文档的开始标记和结束的标记.是HTML页面的根元素,在他们之间是文档的头部(head)和主体(body)
<head>,</head>定义了HTML文档的开头部分.他们之间的内容不会在浏览器的文档窗口显示,包含了文档的元(<meta>数据)
<body>,</body> 之间的文本是可见的网页主体内容.
<title>,<title> 定义了网页标题,在浏览器标题栏显示.
2.几个很重要的属性
ID: 定义标签的唯一id,HTML文档树中唯一
class: 为HTML元素定义一个或者多个类名(css样式类名)
style: 规定元素的行内样式
3.标签的语法:
<标签名 属性1="属性值1" 属性2="属性2" ......>内容部分</标签名>
<属性名 属性1="属性值1" 属性2="属性值2"...../>
6.HTML常用标签
meta标签介绍:
<meta>元素可提供有关页面的元信息,针对搜索引擎和更新频度的描述和关键词
<meta>标签位于文档的头部,不包含任何内容.
<meta>提供的信息用户不可见.
<meta>标签的组成:meta标签共有两个属性,他们分别是http-equiv属性和name属性,不同的属性有不同的参数值,这些不同的参数值就实现了不同的网页功能.
1.hettp-equip属性:相当于http的文件开头作用,它可以向刘浏览器传回一些有用的信息,以帮助正确的显示网页内容,与之对应的属性值为content,content中的内容就是各个参数的变量值.
<!--指定文档的编码类型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.panshao.51km.cn"> <!--告诉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="descripation" content="攀少卡盟">
body类常用标签:块级标签(独占一行)
块级元素的特点:
1.独占一行,默认宽度占100%
2.可以直接自定义宽高
3.块级元素可以设置margin和padding的四个方向
4.块级元素可以包含行内元素和块级元素
5.嵌套(包含下),字块标签宽度在没有定义的情况下和父标签宽度相同
<p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--标题由大变小--> <br> <!--换行--> <hr> <!--水平线-->
行内标签(长度依据)
特点:
1.多个内联标签的内容显示在一行
2.宽度根据内容确定
3.不可以设置宽高
4.行内元素只可以设置margin和padding的左右两个方向,上下不起作用
5.行内元素display默认为inline
6.行内元素一般只包含行内元素和文本,可以嵌套
常见的行内标签有:
1.a: 超链接标签所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片等.
<a href="http://www.paoshao51.com" target="_bank">点我</a>
target: _blank表示在新标签页中打开目标网页, _self:表示当前标签页中打开目标网页
2.<u>下划线</u> 和 .<ins>删除线</ins> 效果相同
3.<s>删除</s> 和 .<del>删除线</del> 效果相同
4.<i>斜体</i> 和 <em>斜体</em> 效果一样em更有语气强调,推荐用em
5.span标签用来定义内联行(行内元素)，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
6.图片标签<img>
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用提个会自动等比缩放)">
特殊字符:
7.列表
无序列表 ul只能容有li, li里面可以有任意标签
<ul type="disc">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ul>
结果:
type属性:
disc(空心圆点,默认值) circle:(空心圆圈) square: (实心方块) none: 无样式
有序列表:
<ol type="1" start="2">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ol>
结果:
type属性:
1 数字列表,默认值 A 大写字母 a 小写字母 I大写罗马 i 小写罗马
标题列表:
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
结果:
内联框架，用于向当前页面中引入一个其他页面
<iframe width="100px" height="100px" src="https://www.jd.com" frameborder="0"></iframe>
音频标签：
<audio src="source/00.精彩先导片：为什么要强调“四大名著”的“思辨读写”？.mp3" controls content="先导片" autoplay loop></audio>
audio标签是用来向页面引入外部的音频文件，音频文件引入时，默认情况下不允许用户自己控制播放停止，也就是在页面上不显示播放器。属性：controls 是否允许用户控制播放，autoplay 音频文件是否自动播放，如果设置了autoplay，则页面在打开时会自动播放，但是目前大部分浏览器不会对音乐自动播放。loop 是否循环播放。
视频标签：
<video src="video/oeasy教你玩转office系列之Power%20Point%20ppt1.mp4" controls autoplay></video>
同音频标签一样。
8.表格
表格是一个二维数据空间,一个表格由若干行组成,一个行由若干单元格组成,单元格里包含文字,列表,图案,表单,数字符号,预置文本和其他的表格内容. 表格最重要的目的是显示表格类数据,表格类数据是指最适合组织为表格格式(j即按行和列组织)的数据.
<body>
<table border="1" cellspacing="5" width="300px">
<caption> 表格题目 </caption>
<thead>
<tr> <!--行-->
<th>序号</th> <!--表格的表头使用th标签进行定义,大多数浏览器会把表头显示为粗体居中的文本-->
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td> <!--数据单元格tabledata的内容-->
<td>egon</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>元昊</td>
<td>日天</td>
</tr>
</tbody>
<thead>标签定义表格的表头,该标签用于组合HTML表格的表头内容
<tr>行标签 table row的缩写
<th>表格的表头的内容使用th标签进行定义,大多数浏览器会把表头显示为粗体居中的文本 table head的缩写
<td>数据单元格(tabledata)的内容
<capting>表格题目</caption>
结果:
9.表单
作用:收集信息
功能:表单用于向服务器传输数据,从而实现用户与web服务器的交互,能够包含input标签,比如文本字段,复选框,单选框和提交按钮等,还可以包含textarea,fieldset和lable标签.
get和post的区别:
get 方法提交,通过地址栏来传递信息,数据会附在网址之后主动提交给服务器,get是从服务器上获取数据,form表单默认提交方式是get,确定安全性差,用户名和密码会附在网址后面
post方法提交:数据不会附在网址之后会将数据打包发给服务器,等服务器读取数据来进行处理,post是向服务器传送数据
input:
用来设置表单中的内容项,比如表单中的文本输入,还可以在表单外使用
元素属性:
1.type指定输入内容的类型,默认为text单行文本框
2.name: 输入内容的识别名称,传递参数时的参数名称,在服务器中对应着value,相当于value的key,用来区分不同的文本框
3.value:表单提交时对应项传的值,type="button","reset","submit"时,为按钮上显示的文本内容,type="text","password","hidden"时,为输入框的默认值意思是不用输入就会显示,type="checkbox","radio", "file",为输入相关联的值.
4.checked="checked",设置默认选中项,针对单选框,多选框有用,
5.selected="selected"设置下拉选中项
6.mutiple="mutiple"设置下拉多选项
<1> 表单类型
type: text 文本输入框
password 密码输入框
radio 单选框 只有将name值设置相同的时候才会出现单选效果,否则会出现多选效果
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.) button和submit的区别？
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
上 传文件注意两点：
请求方式必须是post
enctype="multipart/form-data"
<2> 表单属性
name: 表单提交项的键.
注意和id属性的区别：name属性是和服务器通信时使用的名称；
而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使. 输入框内的信息不能输入时灰色