前端

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页，简单的来说就是与用户进行交互的界面就是前端。

前端的技术有很多，比如HTML、CSS、JavaScript、JQuery等等，但是如果作为一个后端开发工程师，那么前端只需要学习HTML、CSS、JavaScript这三个技术即可，这三个是前端开发中最基本也是最必须的三个技能。

前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位和装饰，再通过JavaScript实现相应的效果和交互。总的来说HTML是网页的骨架，CSS是网页的样式，JavaScript是网页的动态效果。

HTTP协议

简介

如果我们写了一个TCP服务端的代码，直接让服务端去给浏览器发送数据，浏览器是无法识别服务端发送过来的数据的，并且不同服务端数据的组织策略都是不一样的，比如python和java的数据类型书写是不一样的，所以这个时候就需要浏览器去做一个统一的处理，这个处理方案就是统一规定一个标准，即HTTP协议，它规定了服务端与浏览器之间的数据交互格式及其他事项。

HTTP协议全称超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。

四大特性

  1. 基于请求响应

    服务端永远不会主动给客户端发消息，必须是客户端先请求服务端被动响应。

  2. 基于TCP/IP作用于应用层之上的协议

  3. 无状态

    服务端不保存客户端状态，每次请求都像是第一次请求。

  4. 短连接

    不保持客户端与服务端之间的链接导通，请求一次响应一次，之后断开连接。

数据格式

请求格式：客户端给服务端发送消息应该遵循的数据格式

  1. 请求首行：主要是请求的方法和协议版本
  2. 请求头：一大堆k:v键值对
  3. 换行(不能省略)
  4. 请求体：携带敏感数据，如密码、身份证号等

响应格式：服务端给客户端发送消息应该遵循的数据格式

  1. 响应首行：响应状态码与协议版本
  2. 响应头：一大堆k:v键值对
  3. 换行(不能省略)
  4. 响应体：给浏览器展示给用户看的页面数据

响应状态码

响应状态码由3位数字组成，不同数字代表不同的意思。

1开头的数字(1XX)：服务端成功接收到了你的数据正在处理，你可以等待或者继续发送

100 Continue  描述：服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。

2开头的数字(2XX)：表示请求成功，服务端给出了响应

200 OK  描述：请求成功

3开头的数字(3XX)：表示重定向(想访问A页面但是自动跳转到了B页面)

301 Moved Permanently  描述：所请求的页面已经转移至新的url。

4开头的数字(4XX)：客户端错误

404 Not Found  描述：服务器无法找到被请求的页面。

5开头的数字(5XX)：服务端错误

502 Bad Gateway  描述：请求未完成。服务器从上游服务器收到一个无效的响应。

状态码也可以自己定义，可以给前端人员做提示用。

HTML简介

HTML的全称为超文本标记语言，它包括一系列标签，通过添加或更改标签可以对网页内容进行修改，所有的网页都是由HTML组成，是网页的骨架。

存放HTML代码的文件后缀名一般都是.html，像我们对网页右键—》另存为，保存的格式都是.html的后缀。

HTML文件结构

<html>

    <head>

        <!--给浏览器看的数据-->

    </head>

    <body>

        <!--给用户看的数据-->

    </body>

</html>

HTML标签的分类

1.双标签：有头有尾，内容写在中间

<html>内容</html>

<head>内容</head>

<h1>内容</h1>

2.单标签：自闭合标签

<img />

<br />

HTML注释语法

单行注释

<!--单行注释-->

多行注释

<!--

多行注释

多行注释

-->

head内常见标签

一般的网页中head都会有如下标签

<head>

    <meta />

    <title>Title</title>

    <link />

    <style></style>

    <script></script>

</head>
标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息

其中meta标签的功能非常多，比如在使用可以专门编写html文件的工具中，你创建的html中的meta标签大部分都是这样：<meta charset="UTF-8">，这个规定了网页的编码，防止出现乱码的情况。

body内基本标签

body是html的身体，是主体部分，网页内容的展示都写在这个body标签中。

body内基本标签

标签 意义
<h1></h1> 一级标题
<h2></h2> 二级标题
<h3></h3> 三级标题
h4~h6 四级~六级标题
<i></i> 斜体
<b></b> 加粗
<s></s> 删除线
<u></u> 下划线
<p></p> 文本段落
<hr /> 水平分割线
<br /> 换行符

特殊字符

特殊字符 编写方式
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权符号 &copy;
注册符号 &reg;

布局标签(div、span)

标签的类别

标签有块级标签和行内标签，块级标签的内容会独自占据网页的一行，而行内标签自身文本有大多就占多大。像h1~h6、p、div这些标签都是块级标签，span、u、i这些标签都是行内标签。

div标签和span标签

div标签是块级标签，它都是用来划分网页区域的，比如一个网页的导航栏它就可以用div包裹起来。

span标签是行内标签，一般都是用于块级标签内，比如我要修改p标签的部分内容：

<p>我要<span style="color:red">红色</span></p>

图片标签(img)

如果想要在网页中插入图片，可以使用img标签

使用方法：

<img src="" title="" alt="" width="" height=""/>
  • src：图片路径
  • title：鼠标悬浮自动展示提示信息
  • alt：当图片无法正常展示自动提示的信息
  • width：自定义图片宽度
  • height：自定义图片高度

height和width调整一个另外一个自适应调节，比如一个100*100大小的图片，height=10px ，那么width会自适应调节为10px。

超链接标签(a)

如果想要跳转到其他地方，可以使用a标签。

使用方法：

<a href=''></a>

如果我想要跳转到百度：

<a href='https://www.baidu.com'>百度</a>

如果我想要跳转到页面上的某个标签位置，我可以通过标签的id值跳转：

<a href='#标签id'></a>

a标签还有一个target属性值，控制是否当前页面跳转

<!--当前页面跳转-->

<a href='' target="_self"></a>

<!--新建页面跳转-->

<a href='' target="_blank"></a>

标签的两大重要参数(id与class)

1.id

类似于身份证号，同一个html页面上标签的id值不允许重复，用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)

2.class

可以将多个标签归为一类，分类查找(范围查找一次性多个)

列表标签(ul、li)

无序列表可以使用ul标签，ul和li是一起使用的，ul创建列表，li代表列表中的每一项。

使用方法：

<ul>

    <li>第一项</li>

    <li>第二项</li>

    <li>第三项</li>

</ul>

效果：

表格标签

使用方法：

<table border="">

    <thead>

        <tr>  <!--tr表示一行-->

            <th>编号</th>  <!--th加粗文本-->

            <th>姓名</th>

            <th>年龄</th>

        </tr>

    </thead>  <!--表头字段-->

    <tbody>

        <tr>

            <td>1</td>  <!--td普通文本-->

            <td>jason</td>

            <td>18</td>

        </tr>

        <tr>

            <td>2</td>

            <td>tony</td>

            <td>28</td>

        </tr>

        <tr>

            <td>3</td>

            <td>kevin</td>

            <td>38</td>

        </tr>

    </tbody>  <!--表单数据-->

</table>

效果：

解释：

  • table标签用于创建表格，并定义格式
  • thead标签创建表头，也就是填写数据标题的地方
  • tbody创建表身，也就是填写数据部分的地方
  • tr标签表示一行
  • th标签为加粗文本
  • td标签为普通文本

http协议与html的更多相关文章

  1. HTTP协议系列(1)

    一.为什么学习Http协议       首先明白我们为什么学习HTTP协议,也就是说明白HTTP协议的作用.HTTP协议是用于客户端与服务器之间的通讯.明白了HTTP协议的作用也就知道了为什么要学习H ...

  2. 重温Http协议--请求报文和响应报文

    http协议是位于应用层的协议,我们在日常浏览网页比如在导航网站请求百度首页的时候,会先通过http协议把请求做一个类似于编码的工作,发送给百度的服务器,然后在百度服务器响应请求时把相应的内容再通过h ...

  3. 协议森林17 我和你的悄悄话 (SSL/TLS协议)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 转载请先与我联系. TLS名为传输层安全协议(Transport Layer Protocol),这个协议是一套加密的 ...

  4. 协议森林16 小美的桌号（DHCP协议）

    作者:Vamei 出处:http://www.cnblogs.com/vamei 转载请先与我联系. DHCP协议用于动态的配置电脑的网络相关参数,如主机的IP地址,路由器出口地址.DNS域名服务器地 ...

  5. 简约之美Jodd-http--深入源码理解http协议

    Jodd 是一个开源的 Java 工具集, 包含一些实用的工具类和小型框架.简单,却很强大! jodd-http是一个轻巧的HTTP客户端.现在我们以一个简单的示例从源码层看看是如何实现的? Http ...

  6. 【JavaScript】javascript中伪协议(javascript:)使用探讨

    javascript:这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运行. 比如下面这个死链接: <a href="javasc ...

  7. SNMP简单网络管理协议

    声明:以下内容是学习谌玺老师视频整理出来(http://edu.51cto.com/course/course_id-861.html) SNMP(Simple Network Management ...

  8. 海鑫智圣：物联网漫谈之MQTT协议

    什么是MQTT协议 MQTT(消息队列遥测传输协议)是IBM在1999年专门针对物联网等应用场景来制订的轻量级双向消息传输协议,它主要是为了解决物联网上使用到的设备的互相通信的问题,以及这些设备与后端 ...

  9. linux-图形化远程管理协议

    远程管理控制方式: RDP(remote desktop protocol)协议: telnet: SSH(Secure Shell): RFB(Remote FrameBuffer)协议(图形化远程 ...

  10. RTP与RTCP协议介绍（转载）

    RTSP发起/终结流媒体.RTP传输流媒体数据 .RTCP对RTP进行控制,同步.RTP中没有连接的概念,本身并不能为按序传输数据包提供可靠的保证,也不提供流量控制和拥塞控制,这些都由RTCP来负责完 ...

随机推荐

  1. JavaScript中函数节流的理解

    函数节流的原理 函数节流,就是对会频繁触发的函数事件做一些限制,让这些函数可以在每隔一定的时间或者每次满足一定的条件下再触发.一般我们会给他起一个名字throttle.也就是节流的意思.一般这样的函数 ...

  2. 讲清楚之 javascript 参数传值

    讲清楚之 javascript 参数传值 参数传值是指函数调用时,给函数传递配置或运行参数的行为,包括通过call.apply 进行传值. 在实际开发中,我们总结javascript参数传值分为基本数 ...

  3. 搭建 SpringBoot 项目（前端页面 + 数据库 + 实现源码）

    SpringBoot 项目整合源码 SpringBoot 项目整合 一.项目准备 1.1 快速创建 SpringBoot 项目 1.2 项目结构图如下 1.3 数据表结构图如下 1.4 运行结果 二. ...

  4. ThinkCMF[仿骑呗共享单车官网]

    学习Thinkcmf内容管理系统(Thinkphp3.2.3框架)时候,用来练手的,简单的模仿骑呗官网首页,并对后台管理做了点小修改. 安装: 下载地址:https://pan.baidu.com/s ...

  5. MAUI VS Preview 2.1 win 下无法调试ios, 目前无解

    Microsoft Visual Studio Community 2022 (64 位) - Preview 版本 17.2.0 Preview 2.1 报错 严重性 代码 说明 项目 文件 行 禁 ...

  6. Qt QComboBox之setEditable和currentTextChanged及其源码分析

    目录 Qt QComboBox之setEditable和currentTextChanged以及其源码分析 前言 问题的出现 问题分析 currentTextChanged信号触发 源码分析 Qt Q ...

  7. MySQL性能优化的5个维度

    面试官如果问你:你会从哪些维度进行MySQL性能优化?你会怎么回答? 所谓的性能优化,一般针对的是MySQL查询的优化.既然是优化查询,我们自然要先知道查询操作要经过哪些环节,然后思考可以在哪些环节进 ...

  8. linux中查看端口号使用情况

    百度一圈,以下是整理来的操作命令. 1.netstat -anp |grep (端口号) 这个方法可以直观看到对应端口号是否被使用. 2.netstat -nultp 这个方法可以看到该机上所有以用的 ...

  9. redis集群在线迁移第二篇（redis迁移后调整主从关系，停掉14机器上的所有从节点）-实战二

    变更需求为: 1.调整主从关系,所有节点都调整到10.129.51.30机器上 2.停掉10.128.51.14上的所有redis,14机器关机 14机器下线迁移至新机房,这段时间将不能提供服务. 当 ...

  10. css 实现随风摆动

    无标题文档 @-webkit-keyframes open { 0% { -webkit-transform: rotateX(-120deg); } 25% { -webkit-transform: ...