前端

前端即网站前台部分，运行在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. 细说Web API中的Blob

    在一般的Web开发中,很少会用到Blob,但Blob可以满足一些场景下的特殊需求.Blob,Binary Large Object的缩写,代表二进制类型的大对象.Blob的概念在一些数据库中有使用到, ...

  2. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  3. 删除html标签或标签属性以及样式

    JavaScript module for stripping HTML tags and/or HTML element attributes from strings. 安装 npm instal ...

  4. Python pip下载慢的解决方法

    国外的源下载速度实在是太慢了 可以使用国内的一些镜像网站安装 使用cmd命令 格式:pip install -i 网站 库 例如: 国内的一些镜像网站 清华大学:https://pypi.tuna.t ...

  5. 从零搭建react开发环境

    早在六年前,前端开发已经实现了模块化.工程化开发,既然是模块化工程化开发那就少不了包管理工具,所以我们的第一步就是先从安装nodejs开始(安装nodejs携带JavaScript的包管理工具npm) ...

  6. python---实现单例模式

    """ 单例模式 单利模式是一种设计模式, 应用该模式的类只会生成一个实例, 可以保证在程序的不同位置 都可以且仅可以取到同一个对象实例. 如果实例不存在, 会创建一个实 ...

  7. 基于LAMP离线部署zabbix3.2.11

    zabbix是个什么东西这里不再赘述,先安装lamp再安装zabbix. 1.   安装依赖插件(把下面PHP那些依赖库全部都装了) #yum install -y gcc gcc-c++ opens ...

  8. 　CPUs Intel 925X/915　Chipset （925X主板芯片组）

    这个是2004年的intel产品的设计(主板,主板芯片组,北桥,南桥),结构也比较清晰,主要想看南桥和北桥的设计． 一些英文解释 ECC是一种能够实现"错误检查和纠正"的技术D92 ...

  9. TCP/IP 协议标准简单描述

    TCP/IP 协议标准简单描述 说明 分为三部分:中文名称.缩写.说明. 应用层 DNS 域名服务 (DNS) 功能: 将域名转化为IP地址 BOOTP 引导程序协议 (BOOTP) 功能: 允许无盘 ...

  10. 2021.08.05 P2168 荷马史诗（哈夫曼树模板）

    2021.08.05 P2168 荷马史诗(哈夫曼树模板) [P2168 NOI2015] 荷马史诗 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.k叉哈夫曼树如果子结 ...