HTTP协议 前端 HTML
day 38
前端简介
什么是前端?
前端,也称为“客户端开发”,简单来说,你可以在应用程序或网站的屏幕上看到的所有内容都属于前端。
什么是后端?
后端,也称为“服务器端开发”,也就是在系统“后面”所发生的事情。同样,在后端服务器和浏览器或应用程序之间存储网站、应用数据和中间媒介的服务器都属于后端。简单来说,在应用程序或网站的屏幕上看不到的所有东西都是前端的后端。
学前端我们学什么?
前端三剑客>>>: HTML CSS JavaScript(简称JS)
一句话概括:HTML 是骨骼, CSS是皮肤, JS只是夹在中间的神经组织!
细说的话:
HTML是由多种骨头(标签)组成的骨架
CSS是皮肤,让骨架变得好看
JS是用来控制单个动作(抬手、张嘴、转头,踢腿)
HTTP协议
http协议也被称之为超文本传输协议,所有的www都必须遵守这个协议。设计http的初衷是为了提供一种发布和接收html页面的方法,http协议在网络OSI模型中属于应用层协议,它是基于TCP协议的应用层传输协议。
http协议是用于从服务器传输超文本到本地浏览器的传输协议。它可以使浏览器更加高效,网络传输更少。它不仅保证计算机正确快速地传输超文本文档,还确定传输文档中的哪一部分,以及哪部分内容首先显示(如文本先于图形)等。
http协议是一种无状态协议,本身不会对发过的请求、相应的通信状态持久化处理。这样做是为了保持http协议的简单性,从而能够处理大量的请求,提供效率。
可以充当客户端的有哪些?
1.自己写的python代码(TCP客户端)
2.别人写的浏览器
'''cs架构与bs架构:bs本质也是cs'''
四大特性
1.基于请求、响应
服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应
2.基于TCP/IP作用于应用层之上的协议
应用层协议:HTTP HTTPS FTP ...
3.无状态
服务端不保存客户端状态
4.短连接
不保持客户端与服务端之间的链接导通
补充:websocket(长连接) 主要用于加好友聊天等业务
数据格式
请求格式:客户端给服务端发送消息应该遵循的数据格式
1.请求首行(请求方法 协议版本)
2.请求头(一大堆k:v键值对)
3.(换行不能省略)
4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有
响应格式:服务端给客户端发送消息应该遵循的数据格式
1.响应首行(响应状态码 协议版本)
2.响应头(一大堆k:v键值对)
3.(换行不能省略)
4.响应体(给浏览器展示给用户看的页面内容)
响应状态码
用数字来表示一串中文意思(简化理解)
1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
2XX:200 OK 表示请求成功 服务端给出了响应
3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX:403请求不合法(权限不够) 404请求资源不存在
5XX:都是服务端错误 与客户端无关(代码bug、机房炸了...)
在工作中还会自定义状态码(因为默认的不够)
自定义状态码一般都是从10000开始
# 以后我们进公司写后端也需要给前端提供一个手册
eg:聚合数据
一次完整的http请求的过程
1.对http://www.baidu.com这个网址进行DNS域名解析,得到对应的IP地址
2.根据这个IP,找到对应的服务器,发起TCP的三次握手
3.建立TCP连接后发起HTTP请求
4.服务器响应HTTP请求,浏览器得到html代码
5.浏览器解析html代码,并请求html代码中的资源(如js、css图片等)(先得到html代码,才能去找这些资源)
6.浏览器对页面进行渲染呈现给用户
什么是HTML?
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。
HTML是什么样的?
简单地来说,HTML的语法就是给文本加上表明文本含义的标签(Tag),让用户(人或程序)能对文本得到更好的理解。
下面是一个最简单的HTML文档:
HTML操作指南
1.存放HTML代码的文件后缀名一般都是.html
2.HTML:超文本标记语言
它没有任何的逻辑 固定搭配 """所见即所得"""
3.HTML文档结构
<html>
<head>给浏览器看的数据</head>
<body>给用户看的数据</body>
</html>
4.HTML标签的分类
1.双标签:有头有尾 内容写在中间
<h1></h1> <html></html>
2.自闭合标签:单标签
<img/> 一般有特殊功能
5.HTML注释语法
<!--单行注释-->
<!--
多行注释
-->
'''html由于标签非常的多 所以可以通过注释区分页面区域'''
6.如何打开html标签
1.查找并右键选择打开方式
7.pycharm快捷方式(重要)
html文件内容区右上方浏览器图标
8.html标签其实没有缩进的概念
之所以缩进是因为我们习惯了 更加美观
9.在pycharm中的html文件内
编写标签只需要写表名名称即可 按tab键自动补全
10.在pycharm中的html文件内
注释的快捷键也是ctrl+?
头部内容 head内常见标签
<head></head>:这2个标记符分别表示头部信息的开始和结尾。
头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。
头部中最常用的标记符是标题标记符和meta标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,网页标题可被浏览器用做书签和收藏清单。
以下表格列出了 HTML head 元素:
标签
|
描述
|
|
---|---|---|
<head>
|
定义了文档的信息
|
|
<title>
|
定义了文档的标题
|
控制网页小标题
|
<base>
|
定义了页面链接标签的默认链接地址
|
|
<link>
|
定义了一个文档和外部资源之间的关系
|
引入外部css文件
|
<meta>
|
定义了HTML文档中的元数据
|
其中keywords:搜索引擎查询关键词
description:用于展示页面搜索结果的文本描述
|
<script>
|
定义了客户端的脚本文件
|
内部支持编写js代码 也可以src属性引入外部js文件
|
<style>
|
定义了HTML文档的样式文件
|
内部支持编写css代码
|
正常的业务逻辑:
HTML CSS JS 都会分不同的文件储存 用于解耦合
主体内容 body内特殊符号
<body><body/>;,网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
基本标签:
1.标题:总共有6个等级,定义方法如下
<h1><h1/>定义一级标题
<h2><h2/>定义二级标题
<h3><h3/>定义三级标题
<h4><h4/>定义四级标题
<h5><h5/>定义五级标题
<h6><h6/>定义六级标题
2.文本
<p><p/>定义文本
3.换行符
<br/>换行符
4.水平分割线
<hr>水平分割线
body内特殊符号:
显示结果
|
描述
|
实体名称
|
实体编号
|
---|---|---|---|
空格
|
|
||
<
|
小于号
|
<
|
<
|
>
|
大于号
|
>
|
>
|
&
|
和号
|
&
|
&
|
"
|
引号
|
"
|
"
|
'
|
撇号
|
' (IE不支持)
|
'
|
¢
|
分
|
¢
|
¢
|
£
|
镑
|
£
|
£
|
¥
|
日元
|
¥
|
¥
|
€
|
欧元
|
€
|
€
|
§
|
小节
|
§
|
§
|
©
|
版权
|
©
|
©
|
®
|
注册商标
|
®
|
®
|
™
|
商标
|
™
|
™
|
×
|
乘号
|
×
|
×
|
÷
|
除号
|
÷
|
÷
|
"""
标签的类别
块儿级标签:h1~h6 p div
默认独占浏览器一行内
行内标签:s i u b span
自身内部文本多大就占多大
标签之间支持嵌套(最好是布局类相关标签参与)
块儿级标签可以嵌套任意标签
不属于布局标签的块儿级标签不建议嵌套块儿级标签
行内标签只能嵌套行内标签
"""
1.布局标签
div
span
# 页面的编写首先就是先用布局标签占位 之后填充内容即可
2.图片标签
img
src 图片路径
title 鼠标悬浮自动展示提示信息
alt 当图片无法正常展示自动提示的信息
height 自定义图片高度
width 自定义图片宽度
# height和width调整一个另外一个自适应调节 单位是px(像素)
3.链接标签
a
href 点击跳转到位置
可以写网址
<a href='网址'></a>
也可以写标签id值
<a href='页面上某个标签id值'></a>
target 控制是否当前页跳转
默认_self当前页
设置_blank新建页
1.id
类似于身份证号 同一个html页面上标签的id值不允许重复
用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
2.class
类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)
无序列表(列表标签中使用最多的一种,非常重要):unordered list
#1、作用:
制作导航条、商品列表、新闻列表等
#2、组合使用ul>li*n(n为需要的数量)
<ul>
<li>秒杀</li>
<li>优惠券</li>
<li>PLUS会员</li>
<li>闪购</li>
<li>拍卖</li>
<li>京东服饰</li>
<li>京东超市</li>
<li>生鲜</li>
<li>全球购</li>
<li>京东金融</li>
</ul>
#3、ul标签的属性type(这属于列表的样式,所以了解即可)
type:列表标识的类型
disc:实心圆(默认值)
circle:空心圆
square:实心矩形
none:不显示标识
可以通过css直接去掉小圆点
<style type="text/css">
ul {
list-style: none;
}
</style>
#4、注意
ul与li是组合标签应该一起出现,并且ul的子标签只应该是li,而li的子标签则可以是任意其他标签
table 表格标签
语义:标记一段数据为表格
#1、作用
表格标签是一种数据的展现形式,当数据量非常大的时候,使用表格的形式来展示被认为是最清晰的
#2、格式
<table>
<tr>
<td></td>
</tr>
</table>
tr代表表格的一行数据
td表一行中的一个普通单元格th表示表头单元格
#3、注意点:
表格标签有一个边框属性,这个属性决定了边框的宽度。默认情况下这个属性的值为0,所以看不到边框