day45

2021-08-02 21:35:08 阅读：119 来源： 互联网

前端

什么是前端

    只要是跟用户打交道的界面都称为前端
    
什么是后端？
    Python代码，Java，Go,PHP, nodejs， => （一堆后端代码）

为什么学前端


    全栈开发
    全栈：python, 前端， mysql， linux， docker
    
    前端我们需要学到什么程度呢？
        我们可以看懂别人写的一些简单页面，简单代码，并且，能够调试一下或者书写一些基本的简单页面，在学一些配套后端代码的前端代码

前端需要学的内容

1. HTML： 就是网页的骨架， 没有任何的样式
2. CSS：给网页添加样式
3. JavaScript：就是让网页动起来

前端的框架：bootstrap，jquery，Vue,react.js angular.js

软件的开发架构

c/s  客户端和服务端
b/s  浏览器和服务端

在浏览器中输入网址，发生了那些事？

1. 浏览器向服务端发起请求
2. 服务端接收请求（eg: baidu.com）
3. 服务端处理结果返回结果
4. 返回给浏览器，浏览器按照特定的规则渲染数据到页面中，展示给用户

浏览器是不是可以作为很多服务端的客户端？
    eg: 京东，淘宝，百度
        
        
浏览器如何识别不同的服务端？
1. 一定是返回的数据格式遵循浏览器规则
    规则

HTTP协议

超文本传输协议， 规定浏览器跟服务端数据交互的格式

# 四大特性
    1. 基于请求响应
    2. 在TCP/IP协议之上的应用层协议
    3. 无状态
        就是指不能保存用户信息
         为了保存用户信息，又诞生了新技术来保存用户信息
            eg：cookie, session, token ...
    4. 短链接
        
        长链接
            场景：即时通讯
        
# 请求数据格式
     1.请求首行 （请求方式，协议版本）
     2. 请求头 （一对k：v键值对）
     3. \r\n
     4. 请求体
            # 注意：get请求是没有请求体的
            # 只有post请求才有请求体
# 响应数据格式
     1.响应首行 （协议版本）
     2. 响应头 （一对k：v键值对）
     3. \r\n
     4. 响应体
            
 # 响应状态码
     就是用一个数字代表具体含义
     
    1xx  ： 请求成功，但是还可以继续提交数据
    2xx  ： 请求成功 200
    3xx  :  重定向 301， 302 
    4xx  ： 404 资源不存在，403 权限不够
    5xx  ： 500 服务器内部错误  
# 请求方式：
    1. get
        给服务端要数据的
    2.post
        给服务端提交数据的

HTML简介（建议你使用Chrome浏览器）

# 如果你想让浏览器渲染你的图片，链... 你就必须遵循HTML语法

<h1>hello big baby~</h1>
<a href='http://www.baidu.com'>click me</a>
<img src='https://img1.baidu.com/it/u=1538728258,361656027&fm=26&fmt=auto&gp=0.jpg' />

HTML代码的书写位置

1. 在pycharm中新建html文件
2.

打开HTML文件的两种方式

1. 直接找到html文件，双击打开即可
2. 在pycahrm中，右键浏览器图标（前提是你必须安装了对应的浏览器）

HTML的文档结构

<head>
    <meta charset="UTF-8">
    <title>我是dsb</title>
</head>
<body>
</body>

head标签内常用标签

   head内的标签不是给用户看的，给浏览器看的
    body内的标签，是给用户看的，你在body中写什么就显示什么
    
    <meta charset="UTF-8">
    <title>我是dsb</title>
<!--    <style>-->
<!--        /*写css样式*/-->
<!--        h1 {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->

<!--    引入外部css样式-->
    <link rel="stylesheet" href="mycss.css">
<!--    <script>-->
<!--        // js代码-->
<!--        alert(111)-->
<!--    </script>-->

    <script src="myjs.js"></script>
    
    
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">

HTML的标签分类

1.  <title>我是dsb</title>
2. <h1>hello big baby~</h1>
3. <a href='http://www.baidu.com'>click me</a>
4. <img src='https://img1.baidu.com/it/u=1538728258,361656027&fm=26&fmt=auto&gp=0.jpg' />

1）双标签
2）单标签

html注释

<!--这是单行注释  快捷键： ctrl + ? -->

<!--
这是单行注释  快捷键： ctrl + ?
这是单行注释  快捷键： ctrl + ?
这是单行注释  快捷键： ctrl + ?
这是单行注释  快捷键： ctrl + ?
这是单行注释  快捷键： ctrl + ?
这是单行注释  快捷键： ctrl + ?
 -->
    
<!--这是顶部代码开始-->

<!--这是顶部代码结束-->

<!--这是侧边栏代码-->

<!--这是侧边栏代码-->

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>


# div span
# 这两个元素是专门为定义CSS样式而生的。

标签的分类2

1. 块儿级元素
    独自占一行的标签，我们成为块儿级元素
    eg: p, h1~h6,div
2. 行内元素
    自身文本有多大，就占多大
    eg: i, u, s, b ,span

标签的嵌套

# 关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

# p标签不能包含块级标签，p标签也不能包含p标签

img标签

<img src="123.png" alt="">

1. src
    1)外链地址
    2)本地地址
2. alt
    当图片加载失败的时候，写一些描述性信息
3.title
    当鼠标悬浮显示的提示信息
    # 注意：所有标签都有该属性
4. 设置图片大小
    width:200
    height:200
        # 注意：两个值最好写一个，默认是等比例缩放或者放大

a标签

<a href="http://www.baidu.com" title="这是a标签" target="_blank">点我</a>


1. title
    当鼠标悬浮显示的提示信息
2. target
    _self : 默认当前标签页
    _blank : 另开一个新的标签页

标签：浏览器,请求,标签,快捷键,HTML,day45,服务端
来源： https://www.cnblogs.com/Gnomeshghy/p/15091795.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9