这是听了林海峰老师的视频总结,来与大家一起学习分享~
一、首先聊一聊浏览器窗口输入网址回车发生了几件事吧
"""
1、浏览器朝服务端发送请求
2、服务端接受请求(比如:请求百度首页)
3、服务端返回相应的响应(返回一个百度首页)
4、浏览器接收响应,根据特定的规则渲染页面展示给用户看
"""
浏览器可以充当很多服务端的客户端,如百度,腾旭视频,优酷等等....
那么如何做到浏览器能够跟多个不同的客户端之间进行数据交互呢?
1、浏览器很厉害,能够自动识别不同服务端做不同处理(但现在显然不行)
2、制定一个统一的标准,如果你想要让你写的服务端能够跟客户端之间做正常的数据交互,那么你必须要遵守一些规则-----HTTP协议
二、简谈HTTP协议
HTTP协议即超文本传输协议,用来规定服务端和浏览器之间的数据交互的格式
该协议你可以不遵循,但是你写的服务端就不能被浏览器正常访问,你就只能自己跟自己玩,或者你就自己写客户端,用户想要使用,就下载你专门的app即可
# HTTP协议四大特性
'''
1、基于请求响应
2、基于TCP/IP作用于应用层之上的协议
3、无状态
不保存用户的信息(由于HTTP协议是无状态的,所以后续出现了一些专门用来记录用户状态的技术如:
cookie、session、token....)
4、无/短链接
请求来一次,我响应一次,之后两个就没有任何链接关系了
长链接:双方建立连接之后默认不断开,websocket
'''
请求数据格式:
请求首行(标识HTTP协议版本,当前请求方式)
请求头(一大堆k,v键值对)
\r\n------》这里千万不能省略
请求体(并不是所有的请求方式,get请求方式没有,post请求方式有,请求体存放的是post请求提交的敏感数据)
响应数据格式
响应首行(标识HTTP协议版本,响应状态码)
响应头(一大堆k,v键值对)
\r\n------》这里千万不能省略
响应体(返回给浏览器展示给用户看的数据)
响应状态码
用一串简单的数字来表示一些复杂的状态或描述信息 如404:请求资源不存在
1xx:服务端已经成功接收到了你的数据正在处理,你可以继续提交额外的数据
2xx:服务端成功响应了你想要的数据(如200 OK请求成功)
3xx:重定向(当你在访问一个需要登录之后才能看到的页面时,你会发现自动跳转到登录页面)
4xx:请求错误(如403:当前请求不合法或者不符合访问资源的条件;404;请求资源不存在)
5xx:服务器内存错误
请求方式
1、get请求:
朝服务端要数据
ps:输入网址获取对应的内容
2、post请求:
朝服务端提交数据
ps:用户登录 输入用户名和密码之后,提交到服务端后端做身份校验
url:统一资源定位符(用大白话来说就是 网址)
三、HTML简介
HTML是一种超文本语言
如果你想要让浏览器能够渲染出你写的页面,你就必须遵循HTML语法
我们浏览器看到的页面,内部其实就是HTML代码(所有的网站都是HTML代码)
HTML就是书写网页的一套标准
# HTML注释语句:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
多行注释4
-->
# 由于HTML代码非常的杂乱无章并且很多,所有我们习惯性的用注释来划定区域方便后续查找
<!--导航开始-->
导航条所有的html代码
<!--导航结束-->
<!--左侧菜单栏开始-->
左侧菜单栏所有的html代码
<!--左侧菜单栏结束-->
HTML文档结构
<html>
<head></head>
head内的标签不是给用户看的,而是定义一些配置主要给浏览器看的
<body></body>
body内标签写什么,浏览器就渲染什么,用户就能看到什么
</html>
四、head内常用标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用来展示网页标题</title>
<!--在书写html代码的时候,只需要写标签名 然后tab键自动补全 -->
<!--head内常用标签讲解-->
<!-- 内部书写css代码-->
<style>
h1{
color: #1cb7fd;
}
</style>
<!-- 内部书写js代码-->
<script>
alert(123)
</script>
<!-- 也可以用来引入外部js文件-->
<script src="myjs.js"></script>
<!-- 引入外部css文件-->
<link rel="stylesheet" href="mycss.css">
<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址,注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。-->
<!-- 当你在百度浏览器搜索的时候,只要输入keywords后面指定的关键子那么该网页就有可能被百度搜索出来展示给用户-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<!-- 网页的描述性信息-->
<meta name="description" content="老男孩教育Python学院">
</head>
<body>
<h1>hello word</h1>
</body>
</html>
五、body内常用标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--基本标签-->
<!--h1:标题标签 1~6级-->
我是普通文本没有标签
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落标签</p>
<p>段落标签</p>
<br>换行
<hr>水平分割线
<!--基本标签-->
<!--标签的分类2-->
1、块儿级标签:独占一行
如:h1~h6、p标签
2、行内标签:自身文本多大就占多大
如:i、u、b、s标签
块儿级标签可以修改长度,行内标签不可以,修改了也不会改变
块儿级标签内部可以嵌套任意的块儿级标签和行内标签(特例:p标签虽然是块儿级标签,但它只能嵌套行内标签,不能嵌套块儿级标签)
注意:如果你p标签嵌套了块儿级标签,问题也不大,并不会报错,因为浏览器会自动帮你解开,浏览器是直接面向用户的,不会轻易报错,哪怕有报错,用户也基本感受不出来
行内标签只能嵌套行内标签,不能嵌套块儿级标签
<!--标签的分类2-->
<!--特殊符号-->
空格符
>大于号
<小于号
&&符号
¥符号
©©符号
®®符号
<p>哈哈哈哈 达不到我吧</p>
2>1
8<10
LN&DAD
电脑¥8000
版权©
商标®
<!--特殊符号-->
<!--常用标签-->
标签具有的两个重要属性:
1、id值:类似于标签的身份证号,在同一个html页面上id值不能重复
2、class值:该值有点类似于面向对象类的继承,一个标签可以继承多个class值
标签既可以有默认的属性外也可以有自定义的属性(不会报错,之后写项目的时候会用)
<p id="d4" class="c1" username="jason" password="123"></p>
<div>div:块儿级标签</div>
<span>span:行内标签</span>
<div>
上述的两个标签是在构造页面初期最常使用的,页面的布局一般先用div和span占位之后再调整样式,尤其是div使用的非常频繁
div你可以把它看成是一块区域,也就意味着用div来提前规定所有的区域,之后往该区域内部填写内容即可,而普通文本先用span标签
</div>
<!--图片标签-->
<img src="D:\pachong_tupian\妖精的尾巴.jpg" alt="这是妖精的尾巴" title="yjdwb" height="800px" width="800px">
src:
1、图片的路径,可以是本地的图片地址也可以是网上的
2、url 自动朝该url发送get请求获取数据
alt:
当图片加载不出来时,给图片的描述信息
title:
当鼠标悬浮到图片上之后,自动展示的提示信息
height:
图像高度
width:
图像宽度
高度与宽度当你只修改一个的时候,另外一个参数等比例缩放
如果你修改了两个参数没有考虑等比例问题,图片就会失真
<!--图片标签-->
<!--链接标签-->
<a href="baidu.com" target="_blank">点我去百度</a>
href:
1、放的是url,用户点击就会跳转到url页面
当a标签指定网址从来没有被点击过,那么a标签的字体颜色是蓝色
2、放其它标签的id值(不是a标签的其它标签的id值也可以),点击即可跳转到对应的标签位置
target:
默认a标签是在当前页面完成跳转,默认为_self
你也可以修改为新建页面跳转 _blank
a标签的锚点功能:
点击一个文本标题,页面自动跳转到标题对应的内容区域
<!--a标签的锚点功能-->
<a href="" id="d1">顶部</a>
<h1 id="d11">hello~</h1>
<div style="height: 500px;background: #2b99ff"></div>
<a href="" id="d2">中部</a>
<div style="height: 500px;background: #7a77c8"></div>
<a href="#d1">回到顶部</a>
<a href="#d11">回到h1标签处</a>
<a href="#d2">回到中部</a>
<!--a标签的锚点功能-->
<!--链接标签-->
<!--链表标签-->
1、有序列表
2、无序列表(用的比较多)
3、标题列表
<!--无序列表-->
<!--type属性:
disc(实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)-->
<ul type="circle">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
虽然ul标签很丑,但是在页面布局的时候,只要是排版一致的几行数据基本上用的都是ul标签
<!--无序列表-->
<!--有序列表-->
<!--type属性:
1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马-->
<!--ol>li*3 然后按tab键变成如下形式-->
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<!--ol>li{$}*3 然后按tab键变成如下形式-->
<ol type="A" start="5">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!--有序列表-->
<!--标题列表-->
<dl>
<dt>标题一</dt>
<dd>内容一</dd>
<dt>标题二</dt>
<dd>内容二</dd>
</dl>
<!--标题列表-->
<!--链表标签-->
<!--常用标签-->
</body>
</html>