首页 > 其他分享 >前端

前端

时间:2022-08-22 20:38:03浏览次数:48  
标签:浏览器 请求 标签 前端 响应 HTML

目录

前端

一、简介

1.前端

​ 与用户直接打交道的操作界面都可以称之为前端

2.后端

​ 不直接与用户打交道的内部真正执行核心业务逻辑的代码程序(幕后工作者)

3.前端的学习

​ 真正的前端工程师也需要学习很长时间,我们作为后端工程师,对前端目前也只做最核心的了解

4.前端的核心基础

​ HTML:网页的骨架

​ CSS:网页的样式

​ JS:网页的动态

二、超文本传输协议

1.手写一个服务端程序

2.使用浏览器充当客户端

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

4.由于浏览器需要兼容很多服务端软件,为了实现无障碍沟通交流,有了一些协议

​ HTTP协议,FTP协议,HTTPS协议

5.浏览器发送的请求数据格式肯定没问题,因为别人早就封装好了,问题出在我们自己写的服务端响应数据格式

import socket

server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)

while True:
    sock,addr = server.accept()
    while True:
        sock.send(b'hello')
        date = server.recv(1024)
        print(date)

三、HTTP超文本传输协议

1.四大特性

1.基于请求响应
2.基于TCP/IP之上作用于应用层的协议
3.无状态
4.无/短连接

2.数据格式

请求数据格式
    1.请求首行(请求方式:有很多 协议名称及版本)
    2.请求头(一大堆K:V键值对)
    3.换行
    4.请求体(携带一些敏感的数据,不是所有请求都有请求体)

响应数据格式
    1.响应首行(响应状态码)
    2.响应头(一大堆K:V键值对)
    3.换行
    4.响应体(一般情况下就是浏览器要展示给用户看的数据)

3.响应状态码

利用数字来表示一些复杂的情况说明(类似于暗号)

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

四、HTML

1.简介

超文本标记语言是所有浏览器展示的页面必备的

浏览器展示的页面我们也称之为HTML页面,存储HTML语音的文件后缀名一般是 .html

HTML没有任何逻辑,所见即所得

2.语法

HTML代码不讲究缩进

1.html注释语法
	<!--注释内容-->
2.HTML文件格式
<html> 所有的代码都必须写在html标签内部
	<head>
    	一般不是给用户看的
	</head>
	<body>
        浏览器展示给用户看的内容
	</body>
</html>
3.HTML标签分类
	单标签(自闭合标签)
		<img/>
	双标签
		<a></a>
		<p></p>
		<li></li>

3.head内常见标签

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

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

4.body内基本标签

注意:有很多样式,可能存在多种标签可以实现

标签 作用
h1~h6 一到六级标题标签
p 段落标签
hr 水平分割线
br 换行符
u 下划线
i 斜体
s 删除线
b 加粗

5.块级标签与行内标签

5.1.块级标签 h1~h6/p/hr/br

​ 一个标签独占一行

5.2.行内标签 u/i/s/b

​ 内部文件多大自身就占多大

6.body内基本符号

&nbsp; 	空格
&gt; 	大于号
&lt; 	小于号
&amp; 	&
&yen;	¥
&reg;	注册
&copy;	版权

7.body内布局标签

a标签
	链接标签:href
        可以填网址,点击自动跳转
        href还可以填写其他标签的id值
	实现锚点功能:target
    	可以控制是否新建页面跳转
        _self
        _blank
    
img标签
	图片标签
        src 	填写图片地址(网络地址、本地地址)
        title 	鼠标悬浮在图片上会有提示信息
        alt 	图片加载失败提示的信息
        height 	调整图片高度
        weight 	调整图片宽度
        高度和宽度,只调整一个是等比例缩放

8.标签两大重要属性

用来快速定位需要操作的标签

id 属性(一对一管理)
	类似于身份证号码,在同一个HTML页面上,id值不能重复
class 属性(批量管理)
	类似于分组,多个标签可以拥有相同的class值

9.列表标签

1.无序列表
	<u1>
		<li>pyhton</li>
		<li>golang</li>
         <li>linux</li>
	</u1>
	页面上有规则的排列的横向或竖向的多个元素几乎使用的都是无序列表
2.有序列表
	<ol type="I" start="10">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
	</ol>
3.标题列表
	<d1>
		<dt>标题一</dt>
           <dd>内容1</dd>
         <dt>标题一</dt>
           <dd>内容1</dd>
           <dd>内容2</dd>
	</d1>

10.表格标签

<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>密码</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>jason</td>
            <td>123</td>
        </tr>
    </tbody>
</table>

11.表单标签

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

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


<form action="" method="post">
    <!--action属性:用于控制数据的提交地址,不写的话就是朝当前页面所在的地址提交-->
    <!--method属性:用于控制请求的方式(get/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">male
        <input type="radio" name="gender">female
        <input type="radio" name="gender">other
    </p>
    <p>hobby:
        <input type="checkbox" name="hobby">basketball
        <input type="checkbox" name="hobby">football
        <input type="checkbox" name="hobby">dance
    </p>
    <p>file:
        <input type="file">
    </p>
    <p>files:
        <input type="file" multiple>
    </p>
    <p>province:
        <select name="" id="">
            <option value="">上海</option>
            <option value="">北京</option>
            <option value="">深圳</option>
        </select>
    </p>
    <p>GF:
        <select name="" id="" multiple>
            <option value="">小敏</option>
            <option value="">小蓝</option>
            <option value="">小红</option>
            <option value="">小黄</option>
        </select>
    </p>
    <p>
        <input type="submit" value="用户注册">
        <input type="reset" value="重置按钮">
        <input type="botton" value="普通按钮">
    </p>
</form>

标签:浏览器,请求,标签,前端,响应,HTML
From: https://www.cnblogs.com/Zhang614/p/16614137.html

相关文章

  • 前端html页面基础,元素,超文本标记语言
    前端什么是前端前端核心超文本传输协议前戏HTTP超文本传输协议什么是超文本传输协议HTTP传输协议四大特性数据格式响应状态码html简介head内常见的标签......
  • 前端1/HTML/head/body
    前端简介HTTP超文本传输协议HTML简介head内常见标签body内常见标签前端简介前端网站前台部分,运行在浏览器,展现用户浏览的,与用户打交到的。后端是不直接与用户打交......
  • 浏览器数据库IndexedDB和前端多线程webWorker在3D场景中的实战应用
    背景1.IndexedDB就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。2.在3D场景中模型数据很大,有可能存在数十万级的数据存储,大量数据存储在内存中会很容易导致内......
  • 今日内容 前端之HTML基础知识
    前端简介1.前端与后端前端与用户直接打交道的操作界面都可以称之为是前端后端(幕后工作者)不直接与用户打交道的内部真正执行核心业务逻辑的代......
  • 前端二次非对称RSA加密密文太长的问题
    文章不易,请关注公众号 毛毛虫的小小蜡笔,多多支持,谢谢。有任何问题都可以留言咨询。 问题两个平台项目中,各自的前后端的密码传输,都用了非对称RSA加密。 流程是这样......
  • 了解前端路由 hash 与 history 差异
    路由跳转有两个模式可以选择一个是hash一个是 history二者有什么区别呢我们来细说首先是路由默认的hash模式hash模式最显著的特点就是会在url链接后面加是一个#随......
  • Linux虚拟机Nginx代理vue前端与SpringBoot后端资源
    1.Nginx安装配置详细参见菜鸟教程:https://www.runoob.com/linux/nginx-install-setup.html2.nginx.conf内容usernginx;worker_processes1;#设置值和CPU核心数......
  • 前端开发环境搭建
    1nvm(nodeversionmanager)的安装和使用(管理node版本)下载地址:https://github.com/coreybutler/nvm-windows/releases 选择想要的版本,点击nvm-setup.zip可直接下载安装:安......
  • 网易前端实习面筋
    网易有道前端实习1、自我介绍2、介绍了下项目外卖+是一个移动端的外卖平台,主要功能有定位,商家详情,购物车,下单,支付等一、采用前后端分离的跨域方案,前端采用flexible.j......
  • 前端小工具----一键生成产品报告
    产品报告具有特定的格式,非常适合机器生成......