前端

前端即网站前台部分，运行在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. 每天坚持一个CSS——社会人

    每天一个CSS-社会人 实现效果 想法 之前看到一篇博客,使用python绘制出了小猪佩奇,所以自己想试一试,采用纯html + CSS绘制出低配版的小猪佩奇. 实现思路 使用上一篇,圆与边框实现.最 ...

  2. 微信端页面使用-webkit-box和绝对定位时，元素上移的问题

    -webkit-box 的用法 通常,在移动端要实现水平方向平分宽度的布局,会使用 -webkit-box 来布局.它的使用方法是: <div class='parent'> <di ...

  3. Mac 安装WordPress

    Mac 安装WordPress 一.环境要求 PHP 5.2.4或更新版本 MySQL 5.0或更新版本 WebServer(可以选择Apache.nginx等支持PHP的,这里我选择Apache) ...

  4. A Beginner’s Introduction to CSS Animation中文版

    现在越来越多的网站正在使用动画,无论是以GIF,SVG,WebGL,背景视频等形式. 当正确使用时,网络上的动画带来生机和交互性,为用户增添了额外的反馈和体验. 在本教程中,我将向您介绍CSS动画; ...

  5. 让子弹飞，零成本让你的网站更快一点，boxopened http/3 (QUIC) 协议实战

    最近HTTP-over-QUIC 协议被正式命名为 HTTP/3,协议带来的最大改变是协议底层将采用UDP协议,而不再是TCP协议,这样的好处吗,就是更低时延,更好的拥塞控制,更精确的RTT时间,更高 ...

  6. java中接口到底是干什么的，怎么用，深入剖析

    6.总结性深一层次综合剖析接口概念[新手可忽略不影响继续学习] 通过以上的学习, 我们知道,所有定义在接口中的常量都默认为public.static和final.所有定义在接口中的方法默认为publi ...

  7. oracle 多列求和

    第一种: select sum(decode(count1,null,0,count1) +decode(count2,null,0,count2) +decode(count3,null,0,cou ...

  8. CentOS7 Network Setting

    #display devices[root@localhost ~]# nmcli d #set ipv4 address[root@localhost ~]# nmcli c modify eth0 ...

  9. 使用mockjs模拟后端返回的json数据；

    前后端分离开发中最重要的一部就是前后端联调,很多时候后端进度是跟不上前端的,所以需要前端模拟一些数据进行调试,这样前端的进度就可以加快了.后端的小哥哥别打我: 使用mockjs可以很方便的模拟出想要的 ...

  10. WIN DLL劫持提权

    WIN DLL劫持提权 原理: Windows程序启动的时候需要DLL.如果这些DLL 不存在,则可以通过在应用程序要查找的位置放置恶意DLL来提权.通常,Windows应用程序有其预定义好的搜索DL ...