前端 01——前端前期介绍

最新推荐文章于 2024-01-13 14:44:02 发布

一个卖女孩的小火柴

最新推荐文章于 2024-01-13 14:44:02 发布

阅读量156

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/LittleDotDot/article/details/119329921

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

前端

什么是前端

"""
	只要是跟用户打交道的界面都称为前端
	
什么是后端？
	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 : 另开一个新的标签页

一个卖女孩的小火柴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 01——前端前期介绍

前端什么是前端""" 只要是跟用户打交道的界面都称为前端什么是后端？ Python代码，Java，Go,PHP, nodejs， => （一堆后端代码）脉冲云 """为什么学前端""" 我们是全栈开发全栈：python, 前端， mysql， linux， docker 前端我们需要学到什么程度呢？我们可以看懂别人写的一些简单页面，简单代码，并且，能够调试一下或者书写一些基本的简单页面，在学一些配套后端代码的前端代码"""前端需要学的内容"""
复制链接

扫一扫