前端学习(一)

前端学习(一)

前端简介

​ 现在我们打开一款软件,所呈现的页面就是前端；比方说打开淘宝，我们用户所有能看见的、点击、交互的页面，都是前端；再比方说我们打开一款游戏，玩家所能看见的角色页面、数据页面，也都是前端页面；由此我们可以推出比较绝对的一句话······

​ <在一款软件中用户所见页面，皆为前端>

​ 前端对于我们刚学完部分后端的程序员来说，是一门全新的知识；我们需要学习新的编程代码，前端代码相较于后端代码来说，前端的代码更加直接，更加具备可观性，而逻辑性较为薄弱；使用前端代码编写前端需要遵循协议，让我们先来了解一下HTTP协议，后面我们会继续了解CSS、JavaScript(前端三剑客)

HTTP简介

​ 全称Hyper Text Transfer Protocol ,超文本传输协议

​ 他是OSI七层协议中的应用层协议，基于B/S架构进行通讯的，服务端我们暂时使用以后端代码来顶替，客户端主要是以浏览器

​ HTTP通常是运行于TCP之上，所以我们编写的服务端只要遵循HTTP协议，就可以被浏览器正常访问；不满足类似HTTP协议只是不能被浏览器访问和正常显示，但是不影响服务端代码的运行。

HTTP协议

四大特性

1. 基于请求、响应

2. 基于TCP/UDP协议之上

3. 无状态 不保存用户的信息

4. 无/短链接：请求一次回应一次,之后断开连接

   长链接:双方建立链接后默认不断开,websocket(类似好友关系)

数据格式

请求格式：客户端给服务端发送消息
  	1.请求首行(请求方法 协议版本)
    2.请求头(一大堆k:v键值对)
    3.(换行不能省略)
    4.请求体(携带敏感数据，不一定有)

响应格式:服务端给客户端发送消息应该遵循的数据格式
    1.响应首行(响应状态码 协议版本)
    2.响应头(一大堆k:v键值对)
    3.(换行不能省略)
    4.响应体(给浏览器展示给用户看的页面内容)

响应状态码

http响应状态码也属于http协议的一部分，主要作用是来描述和表示响应的结果

首字母用来表示响应的类型

分类	分类描述
1**	信息响应，服务器收到请求，需要请求者继续执行操作。
2**	成功响应，操作被成功接收并处理。
3**	重定向，需要进一步的操作以完成请求。
4**	客户端响应，请求包含语法错误或无法完成请求。
5**	服务器响应，服务器在处理请求的过程中发生了错误。

然后在工作中，我们还是会自定义状态码，因为默认的响应状态码不够使用

而自定义状态码一般都是从10000开始

HTML简介

​ HTML的全称为Hyper Text Markup Language，超文本标记语言

主要作用是使用一系列的标签将分散的互联网资源整合成一个整体

1. 存放HTML代码的文件后缀名为.html

2. HTML没有固定的逻辑，固定搭配获得固定的结果

3. 文档结构：

   给浏览器看的数据 给用户看的数据

4. HTML标签的分类

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

   、
   2.自闭合标签:单标签
   一般有特殊功能

5. HTML注释语法

   <!--单行注释-->
     <!--
     多行注释
     -->
   '''html由于标签非常的多 所以可以通过注释区分页面区域'''
   在pycharm中的html文件内
   注释的快捷键也是ctrl+?
   

6. 打开html标签

   1. 查找并右键选择打开方式
   2. pycharm快捷方式，html文件内右上角浏览器logo

7. html标签其实没有缩进的概念

   但是根据美观要求和习惯，我们还是保持默认的缩进习惯

8. 编写标签只需要写表名称加tab键即可

head内常见标签

以下表格列出了 HTML head 元素：

标签	描述
head	定义了文档的信息
title	定义了文档的标题
base	定义了页面链接标签的默认链接地址
link	定义了一个文档和外部资源之间的关系
meta	定义了HTML文档中的元数据
script	定义了客户端的脚本文件
style	定义了HTML文档的样式文件

body内基本标签

• 标题：总共有6个等级，定义方法如下

  <h数字><h数字/> 数字内填1_6来表示16级标题

定义一级标题

定义二级标题

定义三级标题

定义四级标题

定义五级标题

定义六级标题

• 字体：

斜体

加粗
下划线
删除线

	<i>斜体</i>
  <b>加粗</b>
  <u>下划线</u>
  <s>删除线</s>

• 文本段落

文本1

文本2

<p>文本1</p><p>文本2</p>

---

<hr> 水平分割线

br	换行符

body内特殊符号

显示结果	描述	实体名称	实体编号
	空格
<	小于号	&lt	<
>	大于号	&gt	>
&	和号	&amp	&
"	引号	&quot	"
'	撇号	' (IE不支持)	'
￠	分	&cent	¢
￡	镑	&pound	£
￥	日元	&yen	¥
€	欧元	&euro	€
§	小节	&sect	§
©	版权	&copy	©
®	注册商标	&reg	®
™	商标	&trade	™
×	乘号	&times	×
÷	除号	&divide	÷

实体名称后默认带上分号

body内常见标签

标签的类别

• 块级标签

  h1~h6 p div

  默认独占浏览器一行

• 行内标签

  s i u b span

  自身内部文本占多大就占多大

标签的嵌套

​ 标签之间支持嵌套，最好是布局类相关标签参与，块级标签可嵌套任意标签，不属于块级标签不建议嵌套块儿级标签，行内标签只能嵌套行内标签

常见标签

布局标签：div span

图片标签：

src：图片的路径、title：鼠标悬浮图片的提示信息、alt：当图片无法展示提示的消息、height和width：自定义图片的高度和宽度(高度和宽度调整一个，另外一个会自动适应，单位是px像素)

链接标签：

超链接文本内容

<a href="url">超链接文本内容</a>

在HTML中target（目标）的四个参数的用法：
1、target="_self"表示：将链接的画面内容，显示在目前的视窗中。(内定值) 。 即：同窗口打开。
2、target="_parent"表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开。
3、target="_top"表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。
4、target="_blank"表示：将链接的画面内容，在新的浏览视窗中打开。即：打开新窗口。

当网页没有框架时，target="_self"和target="_parent"以及target="

标签的两大重要参数

1. id

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

2. class

   类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)

无序列表标签

<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>

对于列表标签，我们最主要使用的就是这个无序标签，难看是因为html本身就只是最初步的前端设计，美化需要后续的css和JavaScript

表格标签

<table >
    <thead>
        <tr>  <!--tr表示一行-->
            <th>编号</th>  <!--th加粗文本-->
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>  <!--表头字段-->
    <tbody>
        <tr>
            <td>1</td>  <!--td普通文本-->
            <td>eason</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>

编号	姓名	年龄
1	eason	18
2	tony	28
3	kevin	38

今日小结

前端还是挺有意思的