前端
HTTP协议
HTML简介
head内常见标签
body内基本标签
图片标签(img)
超链接标签(a)
标签的两大重要参数(id与class)
列表标签(ul、li)
表格标签

前端

前端即网站前台部分，运行在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之上。

四大特性

基于请求响应

服务端永远不会主动给客户端发消息，必须是客户端先请求服务端被动响应。
基于TCP/IP作用于应用层之上的协议
无状态

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

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

数据格式

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

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

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

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

响应状态码

响应状态码由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 />	换行符

特殊字符

特殊字符	编写方式
空格
>	>
<	<
&	&
¥	¥
版权符号	©
注册符号	®

布局标签(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

前端

HTTP协议

HTML简介

head内常见标签

body内基本标签

body内基本标签

特殊字符

布局标签(div、span)

图片标签(img)

超链接标签(a)

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

列表标签(ul、li)

表格标签

最新文章

热门文章