前端简介、HTTP、 HTML

前端简介

前端与后端

1.前端：与用户直接打交道的操作界面都称之为是前端
2.后端：不直接与用户打交道，是内部真正执行核心业务逻辑的代码程序(相当于幕后工作者)

前端的核心基础

学习前端，首先就要学习HTML、CSS、JS。学习HTML相当于搭建网页的骨架；学习CSS相当于编辑网页的样式，学习JS相当于让网页的动态变化

HTTP超文本传输协议

超文本传输协议导论

1.手写一个服务端程序

import socket

server =  socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
sock,addr =  server.accept()
data = sock.recv(1024)
print(data)
sock.send(b'hello baby')

2.使浏览器充当客户端

http://127.0.0.1:8080/ (通过浏览器来充当各个服务端的客户端)

3.浏览器端无法直接展示服务服务端的响应数据

显示：该网页无法正常运作127.0.0.1 发送的响应无效

4.网络传输协议

由于浏览器需要兼容很多服务端软件，为了实现无障碍沟通交流，有了网络传输协议：HTTP协议、FTP协议、HTTPS协议

5.解决

浏览器发送的请求数据格式没有问题，因为别人早就封装好了，问题出在我们自己写的服务端响应数据格式：sock.send(b'hello baby')

import socket

server =  socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
sock,addr =  server.accept()
data = sock.recv(1024)
print(data)
sock.send(b'HTTP/1.1 200 OK\r\n\r\nhello baby')
# sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
# sock.send(b'hello big baby')

HTTP超文本传输协议

四大特性

1.基于请求响应(基于http的服务端不会主动发请求)
2.基于TCP/IP之上，作用于应用层的协议(OSI七层协议：应用层、表示层、会话层、传输层、网络层、数据链路层、物理连接层)
3.无状态(不记录客户端的状态)
4.无/短连接(请求响应之后就断开连接)

数据格式

请求数据格式

1.请求首行(请求方式(有很多种) 协议名称及版本)
2.请求头(很多k：v键值对)
3.换行
4.请求体(携带一些敏感的数据，不是所有的请求都有请求体)

# 1.请求首行
GET / HTTP/1.1\r\n
# 2.请求头
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
sec-ch-ua: "Chromium";v="104", " Not A;Brand";v="99", "Google Chrome";v="104"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "Windows"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
# 3.换行
\r\n

响应数据格式

1.响应首行(响应状态码)
2.响应头(很多k：v键值对)
3.换行
4.响应体(一般情况下就是浏览器展示给用户看的数据)

响应状态码

响应状态码就是利用数字表示一些复杂的情况说明(类似于暗号)

1xx:服务端已经接收到你的请求正在处理，你可以继续提交或者等待
2xx:常见的是200 OK :服务端给出了相应响应
3xx:重定向
4xx:常见的403:表示请求不符合条件；404请求资源不存在
5xx:服务端内部错误
    
ps:我们在公司中还会自己定义更多的状态码，一般情况下从10000开始

HTML超文本标记语言

HTML简介

HTML是所有浏览器展示页面必备的，浏览器展示的界面我们称之为HTML页面。

存储HTML语言的文件后缀一般是.html。

HTML没有任何的逻辑，所见及所得

HTML注释语法

<!--注释内容-->

HTML文件结构

<!DOCTYPE html>
<html>   
	<head></head>
	<body></body>
</html>

1.<html></html>  所有的代码都必须写在html标签的内部
2.<head></head>  head内的数据一般都不是诶用户看的
3.<body></body>  body内的数据就是浏览器展示给用户看的

HTML标签的分类

单标签与双标签

1.单标签(自闭和标签)  eg:<img/>
2.双标签  eg:<a></a>

块儿级标签与行内标签

1.块儿级标签：一个标签独占一行 eg:h1~h6 p hr br
2.行内标签:内部文本多大，自身就占多大 eg:u i s b

标签两大重要属性

下面两个属性都是用来快速定位主要操作的标签
1.id属性(一对一管理)
	类似于身份证号，在同一个html页面上，id值不可以重复
2.class属性(批量管理)
	类似于分组，多个标签可以拥有相同的class值

head内常见的标签

1.title

title控制标签页小标题

<title>第一个HTML</title>

2.style

内部支持编写CSS(操作body里面的样式的)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个HTML</title>
    <style>
        body{
            color:greenyellow;
        }
    </style>
</head>
<body>
    越努力越幸运
</body>
</html>

3.link

引入外部的CSS文件

<link rel="stylesheet" href="mycss.css">

4.script

内部支持编写JS代码，还可以通过src属性引入外部JS文件

<script>
	confirm('加油，你是最棒的')
</script>

5.meta

通过内部属性的不同有很多功能

<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介"

<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>

<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>

body内基本标签

注意：很多样式，都可能有多种标签实现

1.h1-h6

标题标签(headline)

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.p

段落标签(paragraph)

    <p>越努力越幸运</p>
    <p>坚持</p>

3.hr、br

hr是水平分割线(horizontal rules)，br是换行符(line break)

<hr>
<br>

4.u、i、s、b

u是下划线(underline)，i是斜体(italic)，s是删除线(strikethough)，b是加粗(bold)

<u>下划线</u>
<i>斜体</i>
<s>删除线</s>
<b>加粗</b>

body内基本符号

body内布局标签

div标签用来定义一个块级元素，并无实际的意义，主要通过CSS样式为其赋予不同的表现。
span标签用来定义行内元素，并无实际的意义，主要通过CSS样式为其赋予不同的表现。

1.块儿级标签是可以通过CSS调整为不独占一行
2.标签之间有很多时候可以嵌套
	2.1 块级标签可以嵌套任何类型的标签，但p标签虽然是块儿级标签，但是不能嵌套
    	eg:
		<p>p
    	<div>div</div>
    	</p>
	2.2 行内标签只能嵌套行内标签

body内常见标签

body内常见的标签有a标签、img标签

a标签

a标签是链接标签，里面的href可以填写网址，点击自动跳转

<a href="https://www.baidu.com/">点我去百度官网</a>

href还可以填写其他标签的id值，实现锚点功能(类似于博客目录导航)

<h1 id="d1">python基础</h1>
<div style="height: 1000px;background-color: red"></div>
<h1 id="d2">网络并发</h1>
<div style="height: 1000px;background-color: greenyellow"></div>
<h1 id="d3">MySQL</h1>
<div style="height: 1000px;background-color: deeppink"></div>
<a href="#d1">python基础</a>
<a href="#d2">网络并发</a>
<a href="#d3">MySQL</a>

target 可以控制是否新建页面跳转(_blank:跳转到新页面，_self:在原来页面跳转)

<a href="https://www.baidu.com/" target="_blank">点我去百度官网</a>
<a href="https://www.baidu.com/" target="_self">点我去百度官网</a>

img标签

img标签是图片标签

1.src:填写图片地址(网络地址、本地地址)
2.title：鼠标悬浮在图片上就会有提示的信息
3.alt：图片加载失败提示的信息
4.height:调整图片的高度
5.width：调整图片的宽度
ps:调整高度和宽度，调整一个就行了，调整一个，另外一个等比例缩放

<img src="https://img1.baidu.com/it/u=3258299227,599613386&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=376" alt="图片加载失败" title="李钟硕" height ="200px">

列表标签

列表标签有无序列表、有序列表、标题列表

无序列表

type类型有:disc (实心圆点，默认)、circle(空心圆圈)、square(实心方块)、none(无样式)

<ul>
  <li>python</li>
  <li>golang</li>
  <li>linux</li>
</ul>

有序列表

type类型有：1(数字列表)、A、a、I(罗马数字)、i(小写罗马数字)，start:起始

<ol type="1" start="1">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

标题列表

<dl>
  <dt>标题1</dt>
  	<dd>内容1</dd>
  <dt>标题2</dt>
  	<dd>内容2</dd>
  <dt>标题3</dt>
  	<dd>内容3</dd>
</dl>

表格标签

border: 表格边框，cellpadding: 内边距，cellspacing: 外边距，width: 像素百分比.（最好通过css来设置长宽），rowspan: 单元格竖跨多少行，colspan: 单元格横跨多少列（即合并单元格）

<table border="5">
  <thead>
    <tr>
      <th>序号</th>
      <th>用户名</th>
      <th>密码</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>nana</td>
      <td>123</td>
    </tr>
    <tr>
      <td>2</td>
      <td>aa</td>
      <td>123</td>
    </tr>
  </tbody>
</table>

表单标签

能够获取用户输入(输入、选择、上传)的数据，并发送给后端的服务器

<form action="" method=""></form>
1.action属性：用于控制数据的提交地址，不写的话就是朝当前页面所在的地址提交
2.method属性：用于控制请求的方式(get\post)

input

input 元素会根据不同的 type 属性，变化为多种形态。

<form action="" method="post">
  <p>username:<input type="text"></p>
  <p>password:<input type="password"></p>
  <p>birthday<input type="date"></p>
  <p>email<input type="email" ></p>
  <p>gender:
    <input type="radio" name = 'gender'>男
    <input type="radio" name="gender">女
    <input type="radio" name="gender">其他
  </p>
  <p>hobby:
    <input type="checkbox" name="hobby">篮球
    <input type="checkbox" name="hobby">足球
    <input type="checkbox" name="hobby">双色球
  </p>
  <p>file:
    <input type="file">
  </p>
  <p>files:
    <input type="file" multiple>
  </p>
    <p>
    <input type="submit" value="用户注册">
    <input type="reset" value="重置内容">
    <input type="button" value="普通按钮">
  </p>
</form>

select标签

创建下拉列表(单选、多选)

<form action="" method="post">
  <p>province:
    <select name="" id="">
      <option value="">上海</option>
      <option value="">北京</option>
      <option value="">四川</option>
    </select>
  </p>
  <p>hobby:
    <select name="" id="" multiple>
      <option value="">读书</option>
      <option value="">看报</option>
      <option value="">玩</option>
    </select>
  </p>
</form>

textarea

标签定义多行的文本输入控件

  <p>info:
    <textarea name="" id="" cols="30" rows="10"></textarea>
  </p>

posted @ 2022-08-22 20:48 DRAMA-娜娜阅读(103) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

前端简介、HTTP、 HTML

前端简介

前端与后端

前端的核心基础

HTTP超文本传输协议

超文本传输协议导论

1.手写一个服务端程序

2.使浏览器充当客户端

3.浏览器端无法直接展示服务服务端的响应数据

4.网络传输协议

5.解决

HTTP超文本传输协议

四大特性

数据格式

请求数据格式

响应数据格式

响应状态码

HTML超文本标记语言

HTML简介

HTML注释语法

HTML文件结构

HTML标签的分类

单标签与双标签

块儿级标签与行内标签

标签两大重要属性

head内常见的标签

1.title

2.style

3.link

4.script

5.meta

body内基本标签

1.h1-h6

2.p

3.hr、br

4.u、i、s、b

body内基本符号

body内布局标签

body内常见标签

a标签

img标签

列表标签

无序列表

有序列表

标题列表

表格标签

表单标签

input

select标签

textarea

公告