前端

前端

什么是前端

只要是跟用户打交道的界面都可以称之为前端
# eg：电脑界面， 手机界面，平板界面，

什么是后端？
	eg：python， java，php，go,
    不跟用户直接打交道的都可以称为后端

为什么学前端

为了成为全栈工程师
	前端，后端， 数据库，Linux
但是，前端不会学的特别深， 要求看得懂别人写的一些简单页面和自己搭建一些简单的页面就可以了

前端的学习历程

# 前端三剑客
1. HTML：网页的骨架，没有任何的样式
2. CSS：美化网页，给网页骨架添加样式的
3. JavaScript：就是让网页动起来， 简称js

软件开发架构

C/S架构
B/S架构

在浏览器地址栏输入网址，回车发生了什么事？

1. 浏览器向服务端发起请求
2. 服务器接收客户端的请求
3. 服务端处理客户端的请求，并且返回给浏览器
4. 浏览器根据特定的规则渲染页面

# 要想让浏览器跟很多个服务端进行交互，那么，就一定要遵循一定规则

HTTP协议

"""
	超文本传输协议，用来规定服务端和客户端之间的数据传输格式
"""

# 四大特征：
	1、基于请求响应
    2、基于TCP/IP协议之上的应用层协议
    3、无状态
    	# 不能保存用户的信息
        保存用户信息的一些技术：cookie， session，token。。。。
    4、 短连接/无连接
    		长连接
# 请求数据格式
	 请求首行 （请求方式，路径，版本号）
      请求头  （一大堆kv键值对）
      \r\n
      请求体 （get请求没有请求体，post请求有请求体）
       	# get请求参数传递格式：
        	?k=v&k1=v1&k2=v2...
  # 响应数据格式
	 响应首行 （响应方式）
      响应头  （一大堆kv键值对）
      \r\n
      响应体
        
  # 响应状态码
	其实就是用一些数字来表示一些复杂的信息
     1xx: 数据提交成功，正在处理，你还可以进行提交
     2xx：200 OK 请求成功
     3xx：重定向
     4xx：404 请求资源不存在， 403:请求的资源没有权限
     5xx：500：服务器内部错误
        
        
# 请求方式：
	1. get请求
    	跟服务要数据的
        eg：baidu.com
    2. post请求
    	提交数据， 比如登录，用户名和密码

HTML简介

<h1>hello baby</h1>
<a href='http://www.baidu.com'>click me</a>
<img class="index-logo-src" src="//www.baidu.com/img/flexible/logo/pc/result.png" alt="到百度首页" title="到百度首页">

标签的分类：
	1. 双标签
    2.单标签

HTML的书写位置

1. 在pycharm中新建html文件
2. 新建文本文档，然后修改后缀名为.html

HTML的文档结构

<!DOCTYPE html> # 告诉浏览器这个文件是html文件<html lang="en"> # language，english<head>  # head标签中的代码不是用来给用户看的    <meta charset="UTF-8">    <title>Title</title></head><body> # body中的内容写什么就显示什么</body></html>

head中常用标签

# 打开html文件的方式：	1. 在pycharm中点击右上角的浏览器图标    2. 双击html文件    # <script>	<title>我的第一个html文件</title>	<script>        // js代码        // alert(123)    </script>	<link rel="stylesheet" href="mycss.css">-->    <script src="myjs.js"></script>

body内常用标签

<b>加粗</b>    <i>斜体</i>    <u>下划线</u>    <s>删除</s>    <p>段落标签</p>    <h1>标题1</h1>    <h2>标题2</h2>    <h3>标题3</h3>    <h4>标题4</h4>    <h5>标题5</h5>    <h6>标题6</h6>    <!--换行-->    <br>    <!--水平线-->    <hr>

标签的分类

1. 块儿级元素	 # 独自占一行     <h1>~<h6>        <p></p>        <div></div>2. 行内元素	 # 自身文本有多大就占多大    <b>加粗</b>    <i>斜体</i>    <u>下划线</u>    <s>删除</s>    <span> </span>

标签的嵌套

# 块儿级元素可以嵌套所有的行内元素，	p标签虽然是块儿级元素，但是不能嵌套块儿级元素    # 行内元素只能嵌套行内元素，不能嵌套块儿级元素

img标签

<img src="123.png" alt="这是小姐姐丢失了" title="很好看哦" width="423px" height="500px">src:    1. 外链地址    2. 本地地址title：	鼠标悬浮时候的提示，    他是所有标签都有的width：	图片的宽度，和高度等比例缩放， 宽高只需要写一个alt：	当图片加载失败的时候，显示的信息

a标签

<a href="http://www.baidu.com" target="_blank" title="点我跳转">点我跳转</a>target:    # 新开一个标签打开页面    _blank表示在新标签页中打开目标网页	_self表示在当前标签页中打开目标网页 href:    跳转的链接

列表标签

<ul type="square">  <li>第一项</li>  <li>第二项</li>  <li>第二项</li>  <li>第二项</li>  <li>第二项</li>  <li>第二项</li>  <li>第二项</li>  <li>第二项</li></ul>

表格

<table border="2px">    <thead>    <tr>        <th>ID</th>        <th>name</th>        <th>age</th>        <th>gender</th>        <th>hobbies</th>    </tr>    </thead>    <tbody>    <tr>        <td>1</td>        <td>张</td>        <td>18</td>        <td>男</td>        <td>睡觉</td>    </tr>        <tr>        <td>2</td>        <td>孟</td>        <td colspan="2">30</td>        <td>男</td>        <td>吃奥利给</td>    </tr>        <tr>        <td>3</td>        <td>华</td>        <td>19</td>        <td>女</td>        <td>消消乐</td>    </tr>    </tbody></table>

from

<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">    <p>        <label for="d2">            用户名：<input type="text" disabled id="d1" value="username" placeholder="手机号/邮箱" class="c1 c2 c3" name="username" >        </label>    </p>    <p>        密码： <input type="password" class="c1" value="password" id="d2" name="password">    </p>    <p>        <input type="date" name="date">    </p>    <p>        <input type="radio"  name="gender" value="1">男        <input type="radio" name="gender" value="2" checked="checked">女        <input type="radio" name="gender" value="3">其他    </p>    <p>        <input type="checkbox" name="hobby" value="1">搞钱        <input type="checkbox" name="hobby" checked value="2"> 洗脚        <input type="checkbox" name="hobby" checked value="3">撩妹        <input type="checkbox" name="hobby" value="4">按摩    </p>    <p>        <select name="city" id="">            <option value="1">上海</option>            <option value="2">北京</option>            <option value="3" selected>河南</option>        </select>    </p>    <p>        <input type="file" name="myfile">    </p>    <p>        <textarea name="text" id="" cols="30" rows="10">textarea</textarea>    </p>    <p>        <input type="hidden" value="123" name="hidden">    </p>    <p>        <input type="submit" value="登录">        <input type="button" value="登录">        <button>登录</button>         <input type="reset">    </p></form>
posted @ 2021-09-06 20:00  迪迦张  阅读(49)  评论(0)  编辑  收藏  举报