ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端基础知识-01

2022-04-23 01:01:42  阅读:127  来源: 互联网

标签:01 浏览器 标签 前端 基础知识 HTML 服务端 客户端


概要

  • 前端简介

  • HTTP简介

  • HTTP协议

  • HTML简介

  • 补充知识

  • head内常见标签

  • body内基本标签

  • body内特殊符号

  • body内常见标签

  • 标签的两大重要参数

  • 列表标签

  • 表格标签

内容

1、前端简介

前端 和 数据库 学习的时候跟python写代码没有太大关联
前端的学习没有太多的逻辑思维 主要是以记忆为主
数据库的学习有点难度 但是主要还是以记忆为主 大量练习肯定能掌握

注意:前端数据库没有学好 完全是因为自己不够努力 只要肯去记忆 肯去练习 小白都可以学会

# 1.什么是前端 什么是后端?
前端:任何与用户直接打交道的界面都可以称之为前端 
     eg:淘宝页面 游戏页面 操作页面等直接与用户打         交道的都可以称之为前端
后端:不直接与用户打交道的、而是用于执行真正业务逻      辑的代码我们称之为后端

# 2.前端的学习路径
需要声明:
    真正的前端工程师需要培训六个月左右 我们作为python全栈工程师只需要掌握前端做核心的知识点即可 做到能看得懂前端代码并且在将来我们有能力去钻研前端即可 所以我们作为python全栈工程师学习前端的时间一般不会超过七天(作为后端程序员即可)
# 知识脉络:
主要先学前端三剑客:HTML、CSS、JavaScript 然后再学jQuery(框架)、Bootstrap(框架)
前端三剑客比喻说明:
    HTML:搭建起网页的骨架
        类似于蜡笔小新不穿衣服 赤裸裸的(难看)
    CSS给网页增加一些样式(style)
        类似于蜡笔小新穿上衣服 化好妆(好看)
    JavaScript:给网页添加一些动态效果
        类似于蜡笔小新扭起来 跳起来 动起来(生动可爱)

2、HTTP简介

# 可以充当客户端的有哪些?
1.自己编写的python代码(TCP客户端)
2.别人写的浏览器

我们先写一个TCP服务端代码
import socket
server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)

while True:
    sock,addr = server.accept()
    data = sock.recv(1024)
    print(data.decode('utf8'))
    sock.send(b'hello baby')  # 普通字符串编码的结果
 
客户端:使用浏览器充当客户端
这里写完服务端后 我们就不再使用我们自己写的客户端 而是利用别人写好的浏览器充当客户端 因为我们已在服务端知道了ip地址和端口port了 只要我们在浏览器输入IP地址+端口数字PORT即可拿我本地的浏览器去访问服务端 然后先执行服务端 然后再切换浏览器运行 我们可以得到我们的服务端在pycharm中可以拿到数据 但是在浏览器中我们无法在前端浏览器上正常访问 响应无效

所以遇到个问题:我们自己写的TCP服务端与浏览器之间虽然通信了 但是浏览器不识别服务端数据 那为什么不会识别呢?
    因为一个TCP服务端我们可以写普通字符串、或json字符串、或报头形式的,所以可能多个服务端他们内部的形式可能各不相同的发给浏览器 造成一个浏览器无法跟多个形式的服务端交流 
    解决办法:浏览器统一规定一个格式 规定一个标准 
    这个标准的名字:HTTP协议 规定了浏览器与服务端数据交互的一些格式 以及它的一些策略(其他事项)
     
    如果服务端遵守HTTP协议 那么就可以正常访问浏览器并展示内容 如果不遵守HTTP,浏览器就不会正常浏览并展示 但是不影响服务端
    如果这个应用特别的火 那么完全可以让用户下载专属的客户端(APP)

3、HTTP协议(纯理论 类似于条款 需要记忆)

# 1.四大特性
1.基于请求、响应
服务端永远不会给客户端发消息 必须是客户端先请求服务端被动响应
2.基于ICP/IP作用应用之上的协议(基于应用层)
应用层协议:HTTP协议、HTTPS协议、FTP协议 自定义协议
3.没有状态
服务端不保存客户端状态(不会记住客户端状态)
纵使见她千百遍 我都当它如初见
4.短连接(临时绑定的通道 仅仅是为了数据交互 交互后立即断开)
不会长时间保持客户与服务端之间的连接通道 交互完后立即断开
补充:还有一种叫websocket 长连接 比如qq、微信加好友后直接往通道内产生数据 永远不会断开通道

# 2.数据格式
请求格式:客户端给服务端发送消息应该遵循的数据格式
请求首行(当前的请求方法 遵循的协议版本)
请求头(一大堆K:V键值对数据 类似于报头)
\r\n 换行 必须要带 不能省略
请求体(携带敏感数据 身份证号、密码等)

响应格式:服务端给客户端发送消息应该遵循的数据格式
响应首行(响应状态码 协议版本)
响应头(一大堆K:V键值对数据 类似于报头)
\r\n 换行 必须要带 不能省略
响应体(给浏览器展示给用户看的页面内容)

# 3.相应状态码(数字)(右键+检查查看)
为啥会显示数字呢?
用数字来表示一串中文意思(简化理解) 类似于说了一些暗号来表示相应的中文意思
1XX:服务端成功接收到了你的数据 正在处理 你可以等待或者继续发送 几乎看不到
2XX:200 ok(比较常见) 请求成功 服务端给出了响应
3XX:301 302 表示重定向(原本想访问A页面但是自动跳转到B页面)  eg:淘宝页面跳转到登录页面
4XX:403 请求不合法(权限不够) 404 请求资源不存在
5XX:500 503 都是服务端错误 与用户端无关(代码bug,机房炸了>>>>)

在工作中还会自定义状态码(因为默认的还不够)
自定义状态码一般都是从10000开始

# 以后我们在后端也需要给公司提供一个手册给前端(例举状态码的情况) 比如:聚合数据 API文档给前端

4、HTML简介(超文本标记语言)

# 超文本:就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
# 标记语言:标记(标签)构成的语言
<h1>hello big baby</h1>
<a href="https://www.sogo.com">click me</a>
<img src="111.jpg"/>
# 上述语法就是HTML 用于构建网页的骨架(所有的网页都是由HTML组成)
1.存放HTML代码的文件后缀名一般都是.html
2.HTML:超文本标记语言,它没有任何的逻辑,固定搭配
    
# HTML文档结构
<html>
  	<head>给浏览器看的数据</head>
  	<body>给用户看的数据</body>
</html>

# HTML标签的分类
1.双标签:有头有尾 >>>>内容写在中间
    	<h1></h1>	<html></html>
2.自闭合标签:单标签 >>>>>>一般有特殊功能
 		<img/>
        
# 标签的定义        
1.是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
2.标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
3.标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
4.有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/><hr/><input/><img/>
5.标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

# 标签的属性
1.通常是以键值对形式出现的. 例如 name="nick"
2.属性只能出现在开始标签 或 自闭和标签中.
3.属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="nick"
4.如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

# 标签的两大重要参数
1.id:类似于身份证号 同一个html页面上标签的id值不允许重复。用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
2.class:类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)

# HTML注释语法
<!--单行注释-->
  <!--
  多行注释
  -->
    
# 如何打开HTML标签
1.查找并右键选择打开方式
2.pycharm快捷方式(重要)
  html文件内容区右上方浏览器图标
    
# HTML标签其实没有缩进的概念,之所以缩进是因为我们习惯了,更加美观

# 在pycharm中的HTML文件内,编写标签只需要写表名名称即可,按tab键自动补全

# 在pycharm中的HTML文件内,注释的快捷键也是ctrl+?

5、head内常见标签

# head标签内编写的标签一般都是给浏览器看的
  title标签			控制网页小标题
  style标签			内部支持编写css代码
  link标签			引入外部css文件
  script标签		     内部支持编写js代码 也可以通过src属性引入外部js文件
  meta标签			功能非常多
  								keywords:搜索引擎查询关键字
    							description:用于展示页面搜索结果的文本描述
"""
正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合
"""

6、body内基本标签

"""相同的样式可能存在多种标签 区别在于语义不一样(后面再说)"""
# 1.标题系列
	h1~h6(1到6级标题)
# 2.字体系列
  <i>斜体</i>
  <b>加粗</b>
  <u>下划线</u>
  <s>删除线</s>
# 3.文本段落
	<p></p>
# 4.其他
hr	水平分割线
br	换行符

7、body内特殊符号

&nbsp;		空格
&gt;	    大于号
&lt;		小于号
&amp;		&符号
&yen;		羊角符
&copy;		版权	
&reg;		商标

8、body内常见标签

# 标签的类别:
1.块儿级标签(div):默认独占浏览器一行内
2.行内标签(span):自身内部文本多大就占多大

# 标签之间支持嵌套(最好是布局类相关标签参与)
1.块儿级标签可以嵌套任意标签,不属于布局标签的块儿级标签不建议嵌套块儿级标签
2.行内标签只能嵌套行内标签

# 布局标签
1.div
2.span
ps:页面的编写首先就是先用布局标签占位,之后填充内容即可
    
# 图片标签(img)
1.src			图片路径
2.title		鼠标悬浮自动展示提示信息
3.alt	  	    当图片无法正常展示自动提示的信息
4.height 	    自定义图片高度
5.width       自定义图片宽度 # height和width调整一个另外一个自适应调节,单位是px(像素)

# 链接标签(a)
1.href>>>>>>点击跳转到位置
  可以写网址:<a href='网址'></a>
  也可以写标签id值:<a href='页面上某个标签id值'></a>
2.target>>>>>>>控制是否当前页跳转
   默认_self当前页
   设置_blank新建页

9、表格标签

# 无序列表
<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
# 无序列表是使用频率最高的列表标签,页面上只要是有规则排列的横向或者竖向内容,几乎使用的都是无序列表

10、表格标签

<table >
    <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>

标签:01,浏览器,标签,前端,基础知识,HTML,服务端,客户端
来源: https://www.cnblogs.com/wht488232/p/16181271.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有