前端初识
Posted tornadoes-destroy-parking-lots
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端初识相关的知识，希望对你有一定的参考价值。
前端
-
什么是前端
任何于用户直接打交道的页面都可以称之为前端，比如电脑界面，手机界面，网页
-
什么是后端
幕后操作者，不直接与用户打交道
学习历程
- html：内容，网页的骨架
- CSS：外观，添加样式
- javascript：动作，网页的动态效果
- bootstrap
- jQuery
- vue
浏览器窗口输入网站回车发生了几件事
1. 浏览器朝服务端发送请求 2. 服务端接收请求 3. 服务端返回响应的响应，返回网站 4. 浏览器接收响应，根据特定的规则渲染页面展示给用户看 浏览器可以充当很多服务端的客户端，浏览器有一个，服务端有很多个，想要一个客户端与多个服务端交互： 1. 浏览器能够自动识别服务端做不同处理 2. 制定一个同一标准，所有服务端都要遵循一些规则：http协议
http协议
超文本传输协议，用来规定服务端与浏览器之间的数据交互格式，这样浏览器就能正常渲染服务端发送的内容
不用http协议也可以，只是就不能用浏览器，需要写一个app
以下的内容要求滚瓜烂熟
http协议四大特性
-
基于请求响应
-
基于TCP / IP作用于应用层之上的协议：协议上面的协议
-
无状态，不保存用户的信息，由于http这个特性，后来出现了一些专门用来技术用户状态的技术：cookie，session，token
-
无链接 / 短链接，请求来一次响应一次，之后没有任何联系
长链接：双方建立链接之后默认不断开：websocket
服务端与浏览器之间的数据交互格式
- 请求数据格式
- 响应数据格式
请求方式
-
get请求：朝服务端要数据
例：输入网址获取对应的内容
-
post请求：朝服务端提交数据
例：用户登陆，输入用户名和密码之后，提交到服务端做身份校验
请求数据格式
请求首行，请求头，/r/n，请求体
1. 请求首行：标识http版本，档期啊请求方式（get/post） 2. 请求头：一堆k:v键值对 3. 回车：/r/n 4. 请求体：get没有请求体，post请求体里面放敏感数据
响应数据格式
响应首行，响应头，/r/n，响应体
1. 响应首行（标识http协议版本，响应状态码） 2. 响应头 3. /r/n 4. 响应体 响应状态码：用一串数字标识一些复杂的状态或描述性信息，如200，500，404 主要有几类： 1xx：服务端已经顺利接收了你的数据，正在处理，可以继续提交额外数据 2xx：服务端成功响应了你的数据，200 request ok 3xx：重定向：当你在访问一个需要登陆之后才能看的页面，页面会重定向到登陆页面 4xx：请求错误：404：请求资源不存在，403：当前请求不合法或不符合访问资源的条件 5xx：服务器内部错误，500：internal server error
url：统一资源定位符，标识资源的位置，也就是网址
让我们在python上写的服务端返回的数据能被浏览器识别：
conn.send(b‘HTTP/11 200 OK ‘) conn.send(b‘hello‘) # 此时，在conn里可以发送html代码或文件，可以被浏览器识别
html
简介
超文本标记语言，不是编程语言。能够让浏览器渲染页面，我们现在看到的所有网站都是html代码
书写html
注释
<!--单行注释--> <!-- 多行注释 多行注释 --> 由于html比较杂乱，所以我们习惯性地用注释来划定区域方便后续的查找 <!--左侧菜单栏开始--> ... <!--左侧菜单栏结束--> <!--顶端导航栏开始--> <!--顶端导航栏结束-->
html文档结构
<html>
<head></head> head标签里的代码页面上显示不出来，是定义一些配置给浏览器看的
<body>
hello：用户能够看到的内容，给浏览器渲染
</body>
</html>
文件的后缀名其实是给用户看的，只不过对应不同的文件后缀名有不同的软件来处理并添加功能
新建html文件，会自动帮你生成一些标签；html没有任何格式，可以全部写在一行里面，只不过我们习惯了缩进来显示代码
两种打开html文件的方式
- 使用浏览器打开
- 在pycharm内部集成了自动调用浏览器的功能，前提是电脑上安装了对应的浏览器
标签
标签的分类
1. 双标签：<h1></h1> 2. 单标签，自闭合标签：<image>
head里的标签
在书写html代码的时候，只需要写标签名，table键能自动补全
title，style，script，meta，link等等
<head>
<title>标签名字</title>
<style>
h1{
color:yellow,
}
写css代码
</style>
<script src=‘myjs.js‘>
写js代码或引入js文件
</script>
<link>
用来引入外部css文件
</link>
<meta>
告诉浏览器干什么活
meta name，meta keyword。。。
</meta>
</head>
body里的标签
基本标签：
- h1~h6 一级标签到六级标签
- b：加粗标签
- i：斜体
- u：下划线
- s：删除线
- p：段落标签，一个p标签就是一行
- br：换行：单标签
- hr：水平分割线：单标签
<body>
<h1>
一级标签
</h1>
<h2>
二级标签
</h2>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>
文本标签，单独占一行
</p>
<br> 换行
<hr> 水平分割线
</body>
标签的分类2
- 块级标签：独占一行
- 块级标签可以修改长宽度
- 可以嵌套任意的块级标签和行内标签
- 特例：p标签是块级标签，但是只能嵌套行内标签，不能嵌套块级标签，如果嵌套了，自动会分隔开
- 行内标签：自身文本多大，就占多大
- 不能修改宽高度，宽高度取决于文本大小
- 可以嵌套行内标签，不能嵌套块级标签，但是一般行内标签不会用来嵌套
前端基本不会报错，只是显示的效果会有错误
特殊符号
- 空格：标签内空格只能有一个，要用多个空格要用
- 1 > 2：大于号，防止与标签混淆，> 写作
>小于号 < 写作< - and 符号 &：
& - ￥ 羊角符号：
¥ - 版权 圆圈c：
© - 商标，圆圈r：
® ®
标签的两个重要书写
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
# 标签既可以有默认的书写也可以有自定义的书写
<p id="d1" class="c1" username="jason" password="123"></p>
常用标签
div 块儿级标签 span 行内标签 上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁 div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域 之后往该区域内部填写内容即可 而普通的文本先用span标签
img标签
# 图片标签 <img src="" > src="url" 1.图片的路径可以是本地的也可以是网上的 2、url 自动朝该url发送get请求获取数据 alt="当图片加载不出来的时候 给图片的描述性信息" title="当鼠标悬浮到图片上之后 自动展示的提示信息" # 若只指定一个宽或者高则等比缩放，若两个都指定且不考虑比例，图片则失真 height="300px" width=""
a标签
# 文本链接(超链接)
<a href=""></a>
‘‘‘
默认字体颜色为蓝色，当用户点击后字体颜色就会变成紫色(浏览器会记忆用户的操作)
‘‘‘
href="url" 用户就会跳到对应的url页面
href="#other_id" 放其他标签的id值就会跳到对应标签位置（锚点链接）
target 默认在当前页面完成跳转 _self
在新窗口打开页面 _blank
# a标签的锚点功能
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>
列表标签
# 无序列表（常用）
<ul type="none">
<li>第一项<li>
<li>第二项<li>
</ul>
type="none"去除列表前的点
适用于多行数据的排版
# 有序列表（了解）
<ol type="1" start="5">
<li>第一项</li>
<li>第二项</li>
</ol>
start="5" 表示列表的序号从5开始
# 标题列表(了解)
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
标签的分类
# 1 块级标签:独占一行
‘‘‘
h1~h6 p div
1) 块级标签可以修改长宽 行内标签不可以 修改了也不会变化
2) 块级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块级标签 但是它只能嵌套行内标签 不能嵌套块级标签
如果强行嵌套，也不会报错，浏览器会自动帮你解开，一般情况下浏览器不会轻易报错
即使报错，用户一般也感觉不出来
‘‘‘
总结:
块级标签可以嵌套任意的块级标签跟行内标签
p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块级标签 可以嵌套行内标签
以上是关于前端初识的主要内容，如果未能解决你的问题，请参考以下文章
初识OpenGL 片段着色器(Fragment Shader)