三十五、前端基础

前端相关

一前端简介
二超文本传输协议(HTTP)
- 2.1 浏览器和服务端通信
- 2.2 HTTP协议
三超文本标记语言(HTML)
- 3.1 HTML简介
四标签

一前端简介

前端核心基础

HTML：超文本标记语言，是网页的骨架

CSS：网页的样式

JS(javascript)：网页的动态

二超文本传输协议(HTTP)

2.1 浏览器和服务端通信

手写一个服务端程序
使用浏览器充当客户端

问题：浏览器无法直接展示服务端的响应数据

2.2 HTTP协议

1、四大特性

基于请求相应
位于TCP/IP之上作用于应用层的协议
无状态
无/短连接

2、数据格式

请求数据格式：

请求首行(请求方式协议名称和版本号)
请求头(一大堆K，V键值对)
换行
请求体(携带一些敏感信息并不是所有的请求都有请求体)

响应数据格式：

响应首行(响应状态码)
响应头(一大堆K，V键值对)
换行
响应体(浏览器要展示给用户看的数据)

3、响应状态码

用数字表示不同的含义

分类	描述
1xx	信息，服务器收到请求，需要请求者继续执行操作
2xx	成功，操作成功被接受或者处理
3xx	重定向，需要进一步的操作完成请求
4xx	客户端错误，请求包含语法错误或无法完成请求
5xx	服务器错误，服务器在处理请求的过程中发生了错误

还可以自定义更多的状态码

import socket

server = socket.socket()

server.bind(('127.0.0.1', 8080))

server.listen(5)

while True:
    sock, addr = server.accept()
    data = sock.recv(1024)
    sock.send(b"HTTP/1.1 200 ok\r\n\r\n")
    sock.send(b"Hello world
")
    sock.close()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

三超文本标记语言(HTML)

3.1 HTML简介

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

注释语法：

HTML文件结构：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

body>
html>
1
2
3
4
5
6
7
8
9
10

HTML标签的分类：

单标签(自闭和标签)
双标签

四标签

4.1 head内常见标签

标签名	描述
title	控制标签页小标题
style	内部支持编写css
link	引入外部css代码
script	内部支持编写JS代码还可以通过src属性引入外部JS文件
meta	通过内部属性的不同可以有很多功能

4.2 body内的基本标签

标签名	描述
h1~h6	标题标签
p	段落标签
hr	水平分割线
br	换行符
u	下划线
i	斜体
s	删除线
b	加粗

4.3 块级标签和行内标签

块级标签：h1~h6、p、hr、br 一个标签占用一行

行内标签：u、i、b、s 内部多大就占用多大

4.4 body内基本符号

符号	含义
	空格
>	大于
<	小于
&	&
©	版权
®	注册
¥	￥

4.5 body内布局标签

div：块级标签

span：行内标签

注意：

块级标签是可以通过css调整为不占一行
标签之间很多时候可以嵌套

块级标签可以嵌套任意类型的标签，p标签虽然是块级标签但是不能嵌套块级标签

行内标签只能嵌套行内标签

4.6 body内常见标签

a标签：链接标签

<a href="">a>
1

href参数可以写网址，点击自动跳转，还可以填写其他标签的id值，实现锚点功能。

target参数是控制是否打开新的页面，默认参数是_self，如果要打开新的页面就是_blank

img标签：图片标签

<img src="" alt="">
1

src参数：填写图片地址

title参数：鼠标悬停在图片上有提示信息

alt参数：图片加载失败的提示信息

height参数：调整图片高度

width参数：调整图片宽度

4.7 标签两大属性

id：一对一管理，同一个html页面上id不能重复
class：类似于分组，多个标签可以拥有相同的class值

4.8 列表标签

无序列表：

<ul>
    <li>111li>
    <li>222li>
    <li>333li>
ul>
1
2
3
4
5

有序列表：

<ol type="" start="">
    <li>1li>
    <li>2li>
    <li>3li>
ol>
1
2
3
4
5

标题列表：

<dl>
    <dt>标题一dt>
    <dd>内容1dd>
    <dt>标题二dt>
    <dd>内容2dd>
dl>
1
2
3
4
5
6

4.9 表格标签

<table>
    <thead>
    <tr>
        <th>idth>
        <th>usernameth>
        <th>passwordth>
    tr>
    thead>
    <tbody>
    <tr>
        <td>1td>
        <td>jaspertd>
        <td>123td>
    tr>
    <tr>
        <td>2td>
        <td>lilitd>
        <td>321td>
    tr>
    tbody>
table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4.10 表单标签

能够获取用户输入的数据发送给后端服务器。

form表单：

<form action="">form>
1

action参数：用于控制数据的提交地址，不写默认朝当前页面地址提交。

method参数：请求方式(get/post)

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

type属性	表现形式
text	单行输入文本
password	密文输入
date	日期输入框
radio	单选框
checkbox	多选框
submit	提交框
reset	重置框
button	按钮
hidden	隐藏框
file	文本选择框
email	邮箱输入

<form action="" method="">
    <p>username:<input type="text">p>
    <p>password:<input type="password">p>
    <p>date:<input type="date">p>
    <p>email:<input type="email">p>
    <p>gender:
        <input type="radio" name="1">男
        <input type="radio" name="1">女
        <input type="radio" name="1">其他
    p>
    <p>hobby:
        <input type="checkbox">sing
        <input type="checkbox">rap
        <input type="checkbox">jump
    p>
    <p>file:<input type="file">p>
    <p>files:<input type="file" multiple>p>
    <p>提交:<input type="submit">p>
    <p>重置:<input type="reset">p>
    <p>按钮:<input type="button">p>
form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

select标签：

   <p>地址：
        <select name="" id="">
            <option value="">上海option>
            <option value="">北京option>
            <option value="">深圳option>
        select>
    p>
    <p>多选：
        <select name="" id="" multiple>
            <option value="">1option>
            <option value="">2option>
            <option value="">3option>
            <option value="">4option>
            <option value="">5option>
        select>
    p>
    <p>info:
        <textarea name="" id="" cols="30" rows="10">textarea>
    p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4.11 表单标签知识补充

1、from表单在朝后端发送数据的时候，标签中必须要有name属性，否则不会发送该标签的值。

2、获取用户输入的input标签理论上需要一个label配合使用

<body>
    <label for="1">username:label>
    <p><input type="text" id="1" name="username">p>
    <label for="2">password:label>
    <p><input type="password" id="2" name="password">p>
    <label for="3">date:label>
    <p><input type="date" id="3" name="date">p>
body>
1
2
3
4
5
6
7
8

3、获取用户输入的input框也可以添加占位符(placeholder)

<body>
    <label for="1">username:label>
    <p><input type="text" id="1" name="username" placeholder="输入用户名、手机号">p>
    <label for="2">password:label>
    <p><input type="password" id="2" name="password" placeholder="输入密码">p>
    <label for="3">date:label>
    <p><input type="date" id="3" name="date">p>
body>
1
2
3
4
5
6
7
8

4、获取用户输入的标签是选择的标签，需要手动添加value属性，包括radio、checkbox、select

<p>性别:
        <input type="radio" id="4" name="gender" value="male">男
        <input type="radio" id="4_1" name="gender" value="female">女
        <input type="radio" id="4_2" name="gender" value="other">其他
    p>
    <p>爱好:
        <input type="checkbox" id="5" name="hobby" value="sing">唱歌
        <input type="checkbox" id="5_1" name="hobby" value="dump">跳舞
        <input type="checkbox" id="5_2" name="hobby" value="read book">读书
    p>
    <select name="address" id="6">
        <option value="sh">上海option>
        <option value="bj">北京option>
        <option value="sz">深圳option>
    select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5、针对radio、checkbox、option标签可以默认选中

<input type="radio" id="4" name="gender" value="male" checked="checked">男

 <input type="checkbox" id="5" name="hobby" value="sing" checked="checked">唱歌

 <option value="sh" selected="selected">上海option>
1
2
3
4
5

可以简写成checked和selected

相关阅读:
数据库设计规范
LVS+Keepalived群集
机器人强化学习——第一人称 VS 第三人称
硬核！一个基于SpringBoot+Vue前后端分离低代码项目
Redis 持久化
python爬虫(3)
云的灵魂是人工智能
学习网络编程No.8【应用层协议之HTTP】
基于开放共享的自主研发—MaxCompute 持续增强生态与开放性建设
华为云云耀云服务器L实例评测 | 华为云云耀云服务器L实例使用教学

原文地址：https://blog.csdn.net/weixin_68531269/article/details/126471514