一、前后端简单区别
1.1、什么是前端?
任何直接跟用户直接打交道的操作界面都可以称之为前端,它是一个广泛的定义!
1.2、什么是后端?
后端类似于幕后操作者,不直接出面跟用户打交道!
二、前端历程
2.1、语法:
HTML
前端的骨架内容,没有任何样式!
CSS
为骨架赋予血肉,添加各种样式,令应用变得丰满起来!就好像给人化妆!
JavaScript
控制网页的动态效果,就好比如跳舞等动作能够更新吸引别人的注意力!
2.2、框架
如:bootstrap、JQuery、Vue等。它们封装了很多底层操作,我们不再需要自己编写上述的HTML、CSS等代码,只需要按照框架的固定语法调用即可!
三、HTML基础
3.1、HTML是什么?
HTML,hypertext MarkUp language,它是一种创建网页的标记语言,也称为超文本标记语言,它可以用来规定服务端和浏览器之间的数据交互的格式!
3.2、HTTP四大特性
3.2.1、基于请求响应
客户端发起请求,服务端响应请求的内容!本质上也是基于C/S架构的一种应用手段!
3.2.2、基于TCP/IP作用于应用层的协议
很容易理解,基于TCP/IP是因为它基于请求响应,那么客户端就必须拥有IP+port来标识身份!
3.2.3、无状态
不保存用户的信息,不管你来访问多少次,我都当你是第一次来!任你虐我千百遍,我待你依旧如初恋???也正是因为HTTP是无状态的,所以后续出现了一些专门用户记录用户状态的技术,如cookie、session、token...,可以大大缓解服务器并发压力!
3.2.4、无/短链接
请求来一次响应一次,之后两者就没有任何关系了!跟上面的无状态也是相呼应!与之相反的是长链接:双方建立链接之后默认不断开,这叫websocket,后面学到再介绍!
3.2.5、C/S交互
请求数据格式
GET / HTTP/1.1
Host: blog.sanxi.info
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
DNT: 1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cookie: scroll-cookie=0|/; Hm_lvt_cd22b9a461e8cc9641fd7650492a4bc9=1611198970,1611391935,1611413614
大致格式如下:
请求首行
用来标识当前HTTP协议版本、当前请求方式!
请求方式
get请求,朝服务端索要数据,如输入网址获取对应的内容!
post请求,朝服务端提交数据,比如登录注册!
请求头
如上所示,一大堆K/V键值对!
\r\n
就是空一行啦
请求体
并不是所有的请求方式都有,get就没有!
响应数据格式
HTTP/1.1 200 OK
Server: nginx
Date: Mon, 25 Jan 2021 14:21:10 GMT
Content-Type: text/html;charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Access-Control-Allow-Headers: Content-Type,ADMIN-Authorization,API-Authorization
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 3600
Content-Language: zh-CN
Content-Encoding: gzip
响应首行,标识HTTP协议版本,响应状态码
响应状态码
即用一串简单的数字来表示一些复杂的状态或者描述信息
1开头:服务端已成功接收到你的数据正在处理,你可以继续提交额外的数据!
2开头:服务端成功响应了你想要的数据,比如最常见的200表示OK!
3开头:重定向,如当你访问一个需要登录才能看到的,在登录后自动跳转到登录页面!比如我博客网站强制重定向HTTPS!
4开头:请求错误,最常见是:404 not found;403请求不合法或不符合条件,代表被拒绝。
5开头:服务端内部错误,最常见是:500,内部错误!
响应头
\r\n
响应体
URL
统一资源定位符,即网址全称
四、HTML语法基础
HTML,超文本标记语言!如果你想要让浏览器能够渲染出你写的页面,你就必须遵循HTML语法,我们浏览器看到的页面,内部其实都是HTML代码,网站内部也都是HTML代码!HTML就是书写网页的一套标准,它不是一门编程语言!但是呢,学任何一门语言之前先学会注释,注释是代码之母!
4.1、注释
<!--单行注释-->
由于HTML代码非常杂乱无章,所以我们习惯性用注释来划定区域方便后续的查找与阅读!
4.2、HTML文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
4.2.1、声明HTML
声明此HTML文档为HTML5文档!
<!DOCTYPE html>
4.2.2、文档开始结束
文档开始和结束的标记,它是HTML页面的最根本的元素,它里面是文档的头部head和文档主体body!
<html></html>
4.2.3、文档开头
定义HTML文档开头内容,包含了文档的元数据meta,它们里面包含的内容不直接在浏览器展示给用户!
<head></head>
4.2.4、网页标题
定义了网页的标题,它是在浏览器标签页显示!
<title>网页标题</title>
4.2.5、网页主体
body之间的内容是用户可直接看到的网页主体内容
<body>网页主体内容</body>
4.3、标签分类
4.3.1、双标签
HTML标签是由尖括号包围的关键字,如上面的,它们通常是成双成对出现的,结束标签会有斜线/!
4.3.2、单标签
也称自闭和标签,如等
4.3.3、head内常用标签
在书写HTML代码时,只需要写标签名,然后按下tab键就能自动补全
标签 | 用途 |
---|---|
<title></title> | 定义网页标题 |
<style></style> | 定义内部即CSS样式 |
<script></script> | 定义JavaScript代码或引入JS文件 |
<link/> | 引入外部样式文件或网站图标 |
<meta/> | 定义网页元数据信息 |
4.3.4、body内常用标签
基本标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<b>加粗</b>
<!-- br换行 -->
<br>
<!-- hr水平线 -->
<hr>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落标签</p>
特殊符号
空格
> 大于号
< 小于号
& &符号
¥ 人民币符¥
© 版权标签
® 商标
块级标签与行内标签
块级标签
它独占一行,主要通CSS样式赋予不同的效果!块级标签可以修改长宽,但行内标签不可以,写了也没用!块级标签有:body、from、select、textarea、h1-h6、html、table、button、hr、p、ol、ul、dl、cnter、div等!
常用的有:
- h1-h6 ,标题标签。
- p,段落标签。
- div,定义块级元素。
块级标签内可嵌套任意的块级标签和行内标签,只有一个例外:p标签!P标签虽然是块级标签,但是只能嵌套行内标签,不能嵌套块级标签,套了浏览器也会自动解开,因为浏览器是直接面向用户,按照我们编程的套路,就算有报错也不能让用户看到233,所以前端很少会看到有报错。。。
总结:
行内标签
行内标签大小是随着内容变化而变化的,它不能嵌套块级标签,可以嵌套行内标签,但是没意义。行内标签有:heda、meat、title、lable、span、br、a、style、em、b、i、strong等!最常用的是span!
总结
div和span这两个标签是在构造页面初期经常使用的!页面布局一般先用div和span占位之后再调整样式,就好像程序架构设计一样!尤其是div使用非常频繁,div可以把它看成是一块区域,也意味着用div提前规定所有的区域,之后往该区域填写内容即可,而普通的文本可先用span标签或者p标签!
图片标签img
<img
src="https://blog.sanxi.info/upload/2021/01/0-_7_-c98f8c96538e473bbdc517247ec8a8bd.png"
alt="回龙山云海"
title="云海"
height="50px"
width="50px"
>
-
src,图片的路径,可以是本地也可以是网络;如果写的是URI,会自动朝该URI发起网络请求加载图片!
-
alt,用来标识图片加载失败后的描述
-
title,当鼠标悬浮到图片上显示的描述信息
-
height,图片高的像素,只修改height时,width参数自动等比例缩放;修改了两个却不考虑比例问题,那么图片就会失真!
-
width,宽,同上。
a标签
即超链接标签,可以链接多种类型文件、地址等,最常用于点击后跳转到指定的链接地址!当a标签未被点击,则是蓝色,点击过是紫色,浏览器记忆的原因
<a href="https://blog.sanxi.info/" target="_blank" >溪明轩</a>
href
指定目标地址,该地址可以是以下类型:
- 绝对URL:指向另外一个站点(完整的URL地址),如我上面所写!
- 相对URL:如href="Untitled-1.css",即打开本地的该文件!
- 锚点:跳转至页面中的锚点,如href="#d1",里面指定要跳转的标签的id值或者继承的class
target
- _blank,浏览器新标签页打开目标地址
- _self,当前标签页打开目标地址
标签两个重要属性
ID值
类似于标签的身份证号,在同一个HTML上ID值不能重复!
class
类似于面向对象里面类的继承,一个标签可以继承多个class值!
列表标签
无序列表(常用)
<ul>
<li>sanxi</li>
<li>chrystal</li>
<li>others</li>
</ul>
有序列表
<ol>
<li>sanxi</li>
<li>chrystal</li>
<li>others</li>
</ol>
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
表格标签
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>sanxi</td>
<td>playing</td>
</tr>
<tr>
<td>2</td>
<td>chrystal</td>
<td>reading</td>
</tr>
</tbody>
</table>
表格属性
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.(最好通过css来设置长宽)
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列(即合并单元格)
4.4、表单标签
HTML之form表单是HTML中一块非常重要的内容,它往往和CSS、JavaScript等相结合;它最主要的功能是能够获取前端用户的数据,基于网络发送给后端服务器,比如说各大网站的登录注册页面!
<!-- 在该表单内填入的数据都会被提交到action指定的地址 -->
<form action=""></form>
form属性
注意事项
所有获取用户输入的标签都应该有name属性,类似于字典的key,用户输入的数据就类似于字典的value;所有标签也都应该有name属性,用来提交数据!
属性 | 作用 |
---|---|
accept-charset | 设置在被提交表单中使用的字符集(默认为HTML页面字符集) |
action | 定义表单提交到哪里(URL,即提交地址) |
autocomplete | 定义浏览器应该自动完成表单(默认是开启的) |
enctype | 规定被提交数据的编码(默认:url-encoded) |
method | 规定在提交表单时所用的HTTP方法(默认:GET,此为明文,必须改为post密文)。 |
name | 规定识别表单的名称(对于 DOM 使用:document.forms.name)。 |
novalidate | 规定浏览器不验证表单。 |
target | 规定 action 属性中地址的目标(默认:_self)。 |
action
控制数据提交的后端路径,即要提交到哪里去!有三种方式:
-
不写,留空则默认往当前页面所在的URL提交数据
-
URL,写全URL地址则提交到指定的URL地址!
-
只写路径后缀action='/index/',则自动识别出当前服务端IP和port拼接到前面
input标签
input人称HTML变形金刚,通过type属性变形多种功能,加了value就成默认值了!
type属性 | 表现形式 | 代码演示 |
---|---|---|
text | 普通文本 | <input type="text" id="d1"> |
password | 密码输入框(密文) | <input type="password" id="d2"> |
date | 日期选择框 | <input type="date"> |
submit | 提交按钮,触发提交form表单提交数据的动作 | <input type="submit" value="注册"> |
button | 普通按钮,可自定义各种功能 | <input type="button" value="i'm button"> |
reset | 重置form内容 | <input type="reset" value="reset"> |
radio | 单选框,默认可加checked | <input type="radio" name="gender" checked>male |
checkbox | 多选,要默认也可加checked | <input type="checkbox">reading |
file | 文件选择框 | <input type="file"> |
hidden | 隐藏输入框 | <input type="hidden"> |
input属性
- disable:关闭
- readonly:只读框
- value:
- type="button", "reset", "submit"时,为按钮上显示的文本内容。
- type="text","password","hidden"时,为输入框的初始值。
- type="checkbox", "radio", "file",为输入相关联的值。
- checked:用于radio和CheckBox默认选中项
- name:表单提交时的“键”,注意和id的区别
- placeholder:默认提示字符
select标签
select为下拉框,默认单选,multiple参数变多选,默认选中selected!
<p>ex-gf:
<select name="ex-grilfriend" >
<option value="2">chrystal</option>
<option value="1" selected>kristal</option>
<option value="3">teac</option>
</select>
</p>
select属性
- multiple:设置后多选,否则默认单选。
- selected:默认选中该项
- value:定义提交时的选项值
label标签
label专为input标签定义标记!label本身不会显示任何特效,它的for值必须与要添加标记的id值一样!
<label for="passwd"> 密码</label>
<input type="password" id="passwd" name="password">
textarea多行文本
<p>个性签名
<textarea name="signature" id="signature" cols="30" rows="10"></textarea>
</p>
textarea属性
- name:名称
- rows:最多显示行数,多余则滚动调显示。
- cols:单行最大显示列数(字符数)
- disabled:禁用