10_01、前端基础

一、前端概念

1、什么是前端

凡是跟用户打交道的界面都可以称之为前端，不直接与用户打交道的可以称之为后端

前端：pc、手机端、平板

后端：python、java、go、node.js、php

2、前端要学习的内容

前端三剑客：

　　1、HTML：网页的骨架

　　2、css：美化页面

　　3、JavaScript：是网页动起来，有动态的效果

前端框架：

　　bootstrap、jQuery、Vue、react、angular

二、HTTP协议

1、软件开发架构

软件开发架构包括：

　　1.c/s：客户端/服务端

　　2.b/s：浏览器/服务端

b/s架构是特殊的c/s架构，前端的代码可以交给浏览器执行

前端代码的书写环境：文本、pycharm、vscode

2、在浏览器网址栏中输入网址，发生了什么事？

    1. 浏览器发起请求
    2. 服务端接收请求
    3. 服务端处理请求
    4. 服务端返回结果给浏览器

注意：

　　1、浏览器是特殊的c/s架构，可以作为服务端的客户端

　　2、浏览器可以充当很多服务端的客户端

　　3、为了让每一个连接浏览器的服务端能够识别浏览器这个客户端，所有的服务端都必须遵循一个规则—HTTP协议

3、HTTP协议

1.作用域

　　tcp/udp协议  => 传输层
　　IP协议          => 网络层
　　HTTP协议    => 应用层

2.HTTP协议的四大特征

        1. 基于请求响应
        2. 在tcp/udp协议之上的应用层协议
        3. 无状态，不能保存数据（不能保存用户信息）
            怎么解决不能保存用户信息呢？
                cookie, session, token...
        4. 短链接/无连接

3.请求数据

    1. 请求首行（请求方式）
    2. 请求头
    3. \r\n
    4. 请求体

4.响应数据

    1. 响应首行
    2. 响应头
    3. \r\n
    4. 响应体

5.请求方式

    1. get
        当客户端向服务端索要数据的时候，就使用get请求
        参数
         # https://www.baidu.com/s?wd=%E5%9B%BE%E8%A7%A3HTTP&rsv_spt=1
         ?k=v&k1=v1&k2=v2
         '''get请求是没有请求体的'''
         '''get请求不安全'''
         '''get请求携带的参数大小有限制：4KB'''
    2. post
        当客户端向服务端提交数据的时候使用post
        参数
        '''post是有请求体的'''
        '''post请求安全'''
        '''post请求携带的参数大小没有限制'''
        
 # 面试题：get和post区别？

6.相应状态码

    1xx:    请求提交成功，还可以继续提交
    2xx:    200, 请求成功
    3xx:    301, 302都是重定向
    4xx：   404：资源不存在， 403：没有权限
    5xx：   500：服务器内部错误

三、HTML 标签

1、HTML概念

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

2、书写和打开HTML代码文件

方式1：

　　直接新建一个txt文件，只需要把后缀名改为.html即可

　　双击文件名打开

方式2：

　　pycharm中新建html文件

　　在pycharm中右键运行打开，或在右上角点击浏览器图标打开

3、HTML的文档结构



>

>
  这里是文档的头部 ... ...
  ...
>

>
  这里是文档的主体 ... ...
  ...
>

>


# head标签一般写的不是让用户看的 
# body标签一般写想让用户看的到的东西



4、head内的常用标签



<head>
    <meta charset="UTF-8">
    /* */
    <title>百度一下，你就知道title> /* */

    <style>
        h1 {
            color: red;
        }
    style>
    /* */

    <link rel="stylesheet" href="mycss.css">
    /* */

    <script>
        alert(123)
    script>
    /* */

    <script src="myjs.js">script>
    /* */
head>



5、body内的常用标签



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

<p>
    采菊东篱下，悠然见南山
p>

<p>
    采菊东篱下<br>悠然见南山
p>

<br>


<hr>


<div>占布局div>

<span>占文本布局span>

body>



6、标签的分类


1. 单双分类
        单标签
        双标签



2. 性质分类
        块儿级标签：
            内容独自占一行
            div, p, h1~h6都是
        行内标签：
            内容不是独自占一行，自身文本有多大就站多大
            b,i, u, s,  span


7、标签的嵌套


块儿级元素可以嵌套所有的行内元素，行内元素不可以嵌套块儿元素
    注意：p标签不能嵌套块儿级元素



我们在前端中使用亲戚关系表示嵌套关系
  '''
      <div> div是p和span的父亲
        <p> p是span的父亲
            <span>span是p的儿子，是div 的孙子，后代span>
        <p>
        <span>span>
    div>
    <span>是div的弟弟span>
    <div>div>
  '''



8、img标签



<img src="../../img/aaa/123.png" title="好美哦" width="200px"  alt="">

src:
    1. 外链地址
    2. 本地地址
title:
    当鼠标悬浮时候显示的文字信息, title属性是所有标签都有的属性
width：
    设置图片的大小，一般只设置一个款或者一个高，默认是等比例缩放
    
alt：
    当图片加载失败的时候，显示的提示信息



9、a标签



# 超链接
<a href="http://www.baidu.com" title="这是标题" target="_blank">点我a>

href:
    跳转的地址
 target：
    _self 默认，从当前标签跳转
    _blank
    新开一个标签跳转

						  
					  

						
							


						

							
							
			10、前端							
						



						

						
						


						

						
					

					

					
					

						
相关

						

				
						
			            
            
            
                                    
           
  			
						

					

					
				


				

														
					
					

					
									

					
									   
标签