前端

前端即网站前台部分，运行在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. 罗振宇2022"时间的朋友"跨年演讲

    罗振宇2022"时间的朋友"跨年演讲 行就行,不行我再想想办法. 原来,还能这么干! 堆资源不是解决问题的唯一道路,还是那句话:"处于困境中的人往往只关注自己的问题.而解 ...

  2. IMWebConf 2017 官网彩蛋解谜

    前言 IMWebConf 2017 ←这是官网 然后看到了这个: 所以就试了下,作为一个前端菜鸟,发现通关还挺简单的,不过每个方面的知识都涉及到一点,所以在这里总结一下. 下面进入正题. 第 0 关 ...

  3. html5文件上传断点续传

    最近公司要做一个html5上传的jquery插件,要在下先实现功能,要求显示上传进度,文件信息,断点续传等等.我一看,艾玛!Σ(ﾟдﾟlll),没做过啊.没办法,(# ﾟДﾟ),只能去查资料了.作为一 ...

  4. 记离线缓存(manifest)一大坑，断定其只适用于静态网站或离线应用

    今天看了离线缓存(manifest)方面的资料,兴冲冲地就想给自己的网站用上.待我把代码都写好部署上服务器,并测试过OK的时候,在SegmentFault刷了一把manifest方面的问答,才发现这个 ...

  5. gulp详细基础教程

    一.gulp简介 1.gulp是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成: ...

  6. dva+react+antd+webpack 项目开发配置

    如何搭建一个dva项目如何搭建一个dva项目 后期项目会在github上进行书写,同时也会在segmentfault上进行同步-3Q拜读-

  7. 原生ES6写的Web游戏：ES6-Mario，小美女，小帅哥快来玩啊~~

    ? ES6-Mario 这是一个用原生ES6语法和HTML5新特性写成的Web 游戏. 通过这个项目,你可以在实践中对ES6的主要内容.HTML Canvas 相关API以及Webpack的基础配置有 ...

  8. 详解防抖函数（debounce）和节流函数（throttle）

    本文转自:https://www.jianshu.com/p/f9f6b637fd6c 闭包的典型应用就是函数防抖和节流,本文详细介绍函数防抖和节流的应用场景和实现. 函数防抖(debounce) 函 ...

  9. 阿里云-部署-服务-Docker

    目录 ♫ MusicPlayer Naiveboom - 比较安全 个人阿里云部署的小服务,欢迎使用,服务器资源有限,如果遇到卡顿还请谅解~ 索引: 在线音乐播放器 阅后即焚 ♫ MusicPlaye ...

  10. linux find命令 -mtime参数 根据修改时间查找文件

    命令:find 搜索路径 -mtime n 主要说明n的含义: 例: n=5 "5"指的是前 5~6 天那一天修改的文件 n=-5 "-5"指的是 5 天内修改 ...