第44天:前端及html、Http协议

前端

        前端是所有跟用户直接打交道的都可以称之为是前端,比如:PC页面、手机页面、平板页面、汽车显示屏、大屏幕展示出来的都是前端内容。

        前端的用处:

        学了前端以后我们就可以做全栈工程师(会后端、会前端、会DB、会运维等),能够写一些简单的页面,以及会调试别人写的页面和能够看懂一些别人的页面代码。

        前段的大概内容:

        1. HTML:网页的骨架、只是负责显示一些内容,但是显示出来的内容不好看,没样式
        2. CSS:对网页骨架的美化、让网页变得更加的好看而已
        3. JavaScript:html、css都是不能动的,静态的,js就是让网页能够动起来,变得更加的美观 

        与前端配套的框架:

        bootstrap、jQuery、vue、react、angular.js 

        页面返回时的原理:

        1. 客户端输入网址向服务端发起请求
        2. 服务端收到客户端的请求,处理请求
        3. 服务端要给客户端做出响应
        4. 把服务端返回的内容渲染(显示)到浏览器页面中 

Http协议

        HTTP协议的四大特性:

        1. 基于请求和响应的(有请求,有响应)
        2. 它是基于TCP协议之上的应用层协议
        3. 无状态:这个协议它不能够在浏览器中保存数据,要在cookie、session、token、jwt等保存的
        4. 短链接 

        请求数据:

        请求首行(请求方式、协议和版本号)
        请求头(一大堆的k:v的键值对)
        换行符(\r\n) 

        响应数据:

        响应首行(响应状态码)
        响应头(一大堆的k:v的键值对)
        换行符(\r\n)

         请求方式:

        get:当朝服务端索要数据的时候,一般使用get请求
        post:当朝服务端提交数据的时候,一般采用post请求 

         get和post的区别:

        1. get:
            索要数据的时候使用
            传参方式:在网址栏的问号后面:key=value的键值对方式
            数据传递不安全
            数据传递的时候,携带的数据量是有限制的,大概4KB左右的数据
        2.post:
            提交数据的时候使用
            在请求体里面
            数据传递更加安全
            数据传递没有限制,想传多少传多少 

        响应状态码:  

        1xx: 代表的是请求数据成功,但是这个时候还可以继续往服务端提交数据
        2xx: 200 OK 代表的是请求成功
        3xx:301 302 代表的是重定向
        4xx: 404 Not Found 代表的是资源找不到
        5xx:500 502 服务器内部错误(出现网页打不开的情况)   

html介绍

         在网页中所能够看到的花里胡哨的东西都是HTML标签。

        html文档模板:

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

        如何写前端代码:  

        1.在 pycharm工具中写
        2. 直接在浏览器中写
        3. 直接在txt文本也可以
        4. 在vscode工具中写

        打开一个html文档的方式:

        1. 直接点击pycahrm右上角的浏览器图标
        2. 直接找到文档所在的位置,右键选择使用浏览器打开即可

        head中常用的标签:

        <title>Title</title> 就是浏览器标签页上显示的内容
        <style></style>写css样式的
         <link>
        <script></script>

         body中常用的标签:

                基本标签:

        <b>加粗</b>
        <i>斜体</i>
        <u>下划线</u>
        <s>删除</s>
        <p>段落标签</p>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>
        <br>换行
        <hr>水平线 

        特殊字符:

        空格    &nbsp;
        >    &gt;
        <    &lt;
        &    &amp;
        ¥    &yen;
        版权    &copy;
        注册    &reg; 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/124573.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多输入多输出 | Matlab实现k-means-ELM(k均值聚类结合极限学习机)多输入多输出组合预测

多输入多输出 | Matlab实现k-means-ELM&#xff08;k均值聚类结合极限学习机&#xff09;多输入多输出组合预测 目录 多输入多输出 | Matlab实现k-means-ELM&#xff08;k均值聚类结合极限学习机&#xff09;多输入多输出组合预测预测效果基本描述程序设计参考资料 预测效果 基…

nodejs+python+php+微信小程序-基于安卓android的健身服务应用APP-计算机毕业设计

考虑到实际生活中在健身服务应用方面的需要以及对该系统认真的分析&#xff0c;将系统权限按管理员和用户这两类涉及用户划分。  则对于进一步提高健身服务应用发展&#xff0c;丰富健身服务应用经验能起到不少的促进作用。 健身服务应用APP能够通过互联网得到广泛的、全面的宣…

ES 8.x新特性一览(完整版)

一、看点 在 2022 年 2 月 11 日&#xff0c;Elasticsearch&#xff08;ES&#xff09;正式发布了 8.0 版本&#xff0c;而截止到 2023 年 10 月&#xff0c;历经一年半时间&#xff0c;ES官方已经连续发布了多个版本&#xff0c;最新版本为 8.10.4。这一系列的更新引入了众多引…

小红书app拉新上线了 适合网推社群和校园渠道作业

小红书app签到拉新上线了可以通过“聚量推客”进行申请&#xff0c;下面大概是要求和流程 要求网推社群渠道或者地推校园渠道&#xff0c;其它类型渠道禁止

sql--索引使用 ---覆盖索引

覆盖索引 Select 后接 * 走id索引才是最优&#xff0c;使用二级索引则需要回表&#xff08;性能稍差&#xff09; 前缀索引 Create index 索引名 on 表名( 字段名( n ) ) n数字 n代表提取这个字符串的n个构建索引 &#xff1f;&#xff1f;那么 n 为几性能是最好的呢&…

JoySSL-新兴国产品牌数字证书

随着我国对数据安全重视程度的不断提升&#xff0c;国产SSL证书越来越受到广大政府机关和企业的青睐&#xff0c;成为提升网站数据安全能力的重要技术手段。那么什么是国产SSL证书&#xff1f;国产SSL证书和普通SSL证书又有什么区别呢&#xff1f; 什么是国产SSL证书&#xff…

提高小程序SEO 排名,9招优化技巧!

在当今移动互联网时代&#xff0c;小程序已经成为企业必不可少的一种营销手段&#xff0c;而如何让用户能够更容易地找到自己的小程序&#xff0c;就需要进行SEO优化&#xff0c;提升小程序的排名&#xff0c;本文将 为大家介绍9个小程序SEO优化技巧&#xff0c;帮助您的小程序…

视频增强修复软件Topaz Video AI mac中文版支持功能

Topaz Video AI mac是一款使用人工智能技术对视频进行增强和修复的软件。它可以自动降噪、去除锐化、减少压缩失真、提高清晰度等等。Topaz Video AI可以处理各种类型的视频&#xff0c;包括低分辨率视频、老旧影片、手机录制的视频等等。 使用Topaz Video AI非常简单&#xff…

【文献分享】基于线特征的激光雷达和相机外参自动标定

论文题目&#xff1a;Line-based Automatic Extrinsic Calibration of LiDAR and Camera 中文题目&#xff1a;基于线特征的激光雷达和相机外参自动标定 作者&#xff1a;Xinyu Zhang, Shifan Zhu, Shichun Guo, Jun Li, and Huaping Liu 作者机构&#xff1a;清华大学汽车安…

nodejs+vue学生考勤综合平台的设计与实现-计算机毕业设计

在当今高度发达的信息中&#xff0c;信息管理改革已成为一种更加广泛和全面的趋势。 “学生考勤综合平台”是基于Mysql数据库&#xff0c;在 程序设计的基础上实现的。为确保中国经济的持续发展&#xff0c;信息时代日益更新&#xff0c;蓬勃发展。 因此&#xff0c;国内外技术…

git教程(2)---远程仓库操作

git教程---远程仓库 远程操作创建远程仓库克隆远程仓库HTTPSSSH 向远程仓库推送拉取远程仓库.gitignore文件给git指令起别名IssuesPull Requests 标签管理操作标签推送标签 多人协作场景一场景二 开发模型Git分支设计规范使用Gitee的DevOps平台体验项目开发流程 远程操作 创建…

Go 小知识之 Go 中如何使用 set

Go 的数据结构 Go 内置的数据结构并不多。工作中&#xff0c;我们最常用的两种数据结构分别是 slice 和 map&#xff0c;即切片和映射。 其实&#xff0c;Go 中也有数组&#xff0c;切片的底层就是数组&#xff0c;只不过因为切片的存在&#xff0c;我们平时很少使用它。 除了…

ES6带来那些js新特性?

ECMAScript 6&#xff08;ES6&#xff09;&#xff0c;也称为 ECMAScript 2015&#xff0c;引入了许多重大的改进和新特性&#xff0c;以改善JavaScript语言的功能和可读性。以下是一些ES6中的主要改变和新特性&#xff1a; 1、let 和 const 声明: 引入了 let 和 const 关键字…

在nodejs中使用Mongoose和MongoDB实现curd操作

在nodejs中使用Mongoose和MongoDB实现curd操作 在Node.js中&#xff0c;数据库被用来存储和检索Web应用程序的数据。它们是构建动态和可伸缩应用程序的重要组成部分。Node.js提供了各种模块和包,可以与数据库一起工作,如MySQL、PostgreSQL、MongoDB等。它们允许开发人员使用各…

50元买来的iPhone手机刷机经验

前段时间&#xff0c;家里的iPad被家人误操作&#xff0c;导致iPad变成不可使用状态。自己折腾了半天&#xff0c;没有找到解决办法。没有办法&#xff0c;只好拿到手机维修店去修理,很快就修理好了.其实也很简单--就是对iPad进行了刷机操作。当然我也看到了刷机的方法。今天&a…

k8s修改apiserver证书可用年限

使用 kubeadm 部署的 K8S 集群中&#xff0c;apiserver 证书的默认可用年限只有一年。如果直接用在生产环境&#xff0c;当证书过期后会造成 K8S 集群瘫痪&#xff0c;从而影响现网业务。 1&#xff0c;查看 K8S 集群所有证书存放位置 ls /etc/kubernetes/pki/ apiserver.crt…

完美的代价

题目&#xff1a; * 题目&#xff1a; * 回文串&#xff0c;是一种特殊的字符串&#xff0c;它从左往右和从右往左读是一样的。 * 现在给你一个串&#xff0c;它不一定是回文的&#xff0c;请你计算最少的交换次数使得该串变为完美的回文回文串。 * 例如&#xff1a;mamad * 第…

微软Azure文本转音频,保存成MP3文件【代码python3】

标签&#xff1a; 文本转音频并保存mp3文件&#xff1b; 微软Azure&#xff1b; 微软Azure可以将文本转音频&#xff0c;并保存mp3文件&#xff0c;直接上代码 代码格式&#xff1a;python 3 import os import azure.cognitiveservices.speech as speechsdk# This example re…

叛乱沙漠风暴server安装 ubuntu 22.04

最新版沙暴已经不支持centos了&#xff0c;还是使用ubuntu比较顺利 官方文档&#xff1a; https://sandstorm-support.newworldinteractive.com/hc/en-us/articles/360049211072-Server-Admin-Guide // 安装steamcmd依赖 sudo add-apt-repository multiverse sudo apt inst…