1. 前言
我是在大三开始学习web前端的，在打好web基础的同时，我们也需要几个项目来来练练手。通过写项目，我们能够好的掌握对web的应用。
以下是我在大学期间所写的项目，希望对大家有所帮助。
2.知识点学习记录
本项目web前端包括哪些技术：
- 1. HTML（超文本标记语言）：用于构建网页结构和内容。
- 2. CSS（层叠样式表）：用于控制网页的样式和布局。
- 3. JavaScript：用于实现网页的交互和动态效果。
- 4. jQuery：是JavaScript的一个库，简化了JavaScript代码的编写，提供了丰富的功能和插件。
- 5. AJAX（异步JavaScript和XML）：用于在网页上实现异步通信，无需刷新整个页面即可更新部分内容。
1.html
HTML结构语言：超文本标记语言。
通过各种标记符号（标签）来代表网页中的内容元素、将网页中的内容结构化。
特点：通过浏览器来解析、文件名为html或htm。
下面是html的大致框架
可以用！直接快捷建立：
<!--html语言中的注释-->
<!doctype html><!--html文档的文档类型声明：这是一个html的文档，版本是5-->
<html><!--html标签：html文档正式开始-->
<head><!--html文档的头部区域开始，主要是用来说明html文档的一些相关属性或者设置-->
<meta charset="utf-8"><!--meta标签：元信息标签，用来给网页添加一些相关信息或设置。charset:字符集。指定此网页的编码为UTF-8-->
<!--常见的编码：国际化——utf-8,中文编码——GBK-->
<title>无标题文档</title><!--title标签：设定此网页的标题-->
</head><!--html文档的头部区域结束-->
<body><!--body标签：表示html文档的主体区域开始，对应浏览器的对应呈现窗口-->
</body><!--body标签：表示html文档的主体区域结束-->
</html><!--html标签：html文档正式结束--> 1. 输入标签 <input/>
name：为文本框命名，用于提交表单，后台接收数据用。
value：为文本输入框设置默认值。
type：通过定义不同的type类型，input的功能有所不同。
- text 单行文本输入框
- password 密码输入框（密码显示为***)
- radio 单选框 （checked属性用于显示选中状态）
- checkbox 复选框（checked属性用于显示选中状态）
- file 上传文件
- button 普通按钮
- reset 重置按钮（点击按钮，会触发form表单的reset事件）
- submit 提交按钮（点击按钮，会吃饭form表单的submit事件）
- email 专门用于输入 e-mail
- url 专门用于输入 url
- number 专门用于number
- range 显示为滑动条，用于输入一定范围内的值
- date 选取日期和时间（还包含：month、week、time、datetime、datetime-local）
- color 选取颜色
button按钮，下拉选择框 <select></select>
<option value="提交值">选项</option>是下拉选择框里面的每一个选项
文本域：<textarea></textarea>
当用户想输入大量文字的时候，使用文本域。cols，多行输入域的列数，rows，多行输入域的行数。
2. 文本标签
- 段落标签：<p></p>，段落标签用来描述一段文字
- 标题标签：<hx></hx>，标题标签用来描述一个标题，标题标签总共有六个级别
- 强调语句标签：<em></em>，用于强调某些文字的重要性
- 更加强调标签：<strong></strong> 和 <em> 标签一样，用于强调文本，但它强调的程度更强一些
- 无语义标签：<span></span>，标签是没有语义的
- 短文本引用标签：<q></q>，简短文字的引用
- 长文本引用标签：<blockquote></blockquote>，定义长的文本引用
- 换行标签：<br/>
3. 多媒体标签
- 链接标签：
<a></a> - 图片标签：
<img/> - 视频标签：
<video></video> - 音频标签：
<audio></audio>
4. 列表标签
- 无序列表标签：ul，li，
<ul></ul>列表定义一个无序列表<li></li>代表无需列表中的每一个元素 - 有序列表：ol,li
- 定义列表：
<dl></dl>，定义列表通常和<dt></dt>和<dd></dd>标签一起使用
5. 表格标签
- 表格标签
<table></table> - 表格的一行
<tr></tr> - 表格的表头
<th></th> - 单元格
<td></td> - 表格合并，同一行内，合并几列colspan=“2”，同一列内，合并几行rowspan=“3”
6. 表单标签
表单标签 <form>
<form></form> 表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件"> - action，浏览者输入的数据被传送到的地方
- method，数据传送的方式
2.CSS
1. CSS样式语言（样式表）：实现表现与结构分离的样式设计语言。
控制网页的视觉表现及简单交互。通过浏览器来解析，文件名为css。
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
CSS的导入方式有两种：一种是链接式；一种是导入式
链接式：
<!--外部样式-->
<link rel="stylesheet" href="css/style.css" />
导入式：
<!--导入式-->
<style>
@import url("css/style.css");
</style>
2.CSS选择器
| 选择器 | 代码 | 示例代码 |
| 通用选择器 | * | *{} |
| 属性选择器 | [<条件>] | [<hred>]{} |
| 并集选择器 | <选择器>,<选择器> | em,strong{} |
| 后代选择器 | <选择器> <选择器> | .asideNav li{} |
| 子代选择器 | <选择器> > <选择器> | ul>li{} |
| 兄弟选择器 | <选择器>+<选择器> | p+a{} |
| 伪选择器 | ::<选择器><选择器> | p::first-line{} |
1、标签选择器：选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
background: blue;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
</body>
</html>
2、类选择器class：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo1{
color: red;
}
.demo2{
color: blue;
}
.demo3{
color:pink;
}
</style>
</head>
<body>
<h1 class = "demo1">类选择器：demo1</h1>
<h1 class="demo2">类选择器：demo2</h1>
<h1 class="demo3">类选择器：demo3</h1>
</body>
</html>
3.id 选择器：全局唯一，格式：#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器：id必须保证全局唯一
#id名称{}
不遵循就近原则，优先级是固定的
id选择器 > 类选择器 > 标签选择器
*/
#demo1{
color: aqua;
}
.demo2{
color: red;
}
#demo2{
color: orange;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1 id="demo1">id选择器：demo1</h1>
<h1 class="demo2" id = "demo2">id选择器：demo2</h1>
<h1 class="demo2">id选择器：demo3</h1>
<h1>id选择器：demo4</h1>
<h1>id选择器：demo5</h1>
</body>
</html>
字体样式
盒子模型
1.外边距：margin
2.边框：border
3.内边距：padding
4.内容：content
定位：
1.相对定位：相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
2.绝对定位：定位：基于xxx定位，上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
3.JavaScript
我们通常说的JavaScript是由三部分组成的：ECMAScript，DOM，BOM
4. jQuery
什么是 jQuery ？
jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
jQuery 库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
网页中添加 jQuery
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：
- 从 jquery.com 下载 jQuery 库
- 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
下载 jQuery
有两个版本的 jQuery 可供下载：
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
-
$(this).hide() - 隐藏当前元素
-
$("p").hide() - 隐藏所有 <p> 元素
-
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
-
$("#test").hide() - 隐藏 id="test" 的元素
5.AJAX
一、什么是Ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。
传输的数据可以是text纯文本，但是更常用的是xml，现在我们最经常使用就是json。
二、同步交互和异步交互
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
实现：
核心对象：XMLHttpRequest，AJAX的所有操作都是通过该对象进行的
实现步骤：
1.创建XMLHttpRequest对象，也就是异步调用对象
var xhr = new XMLHttpRequest();2.设置请求信息
xhr.open(method,url);3.发送请求
xhr.send();//get请求不传body参数
shr.send(body);//post请求传body参数4.接收响应
xhr.onreadystatechange= function(){//该回调函数调用4次
if(xhr.readystate==4&&xhr.status==200){
var text = xhr.responseText;//接收文本格式的响应数据
//var xml =xhr.responseXML;//接收xml格式的响应数据
console.log(text);
}
}3.功能的记录
1.智慧物流
介绍：这是我刚学完后，找的一个练手项目。它是基于实现的智慧物流，分为两个角色：货主和接单车。货主可以发布自己的物流任务同步接单者会收到信息，进行交易物流
技术点：html，css，javascript，jQuery，AJAX
页面展示：
注册页面
登录页面：
主页面：
约车功能：
4.三方库的介绍
1.layui:
layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年秋，它区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是为服务端程序员量身定做，开发者无需涉足各种前端工具的复杂配置，只需面对浏览器本身，使得开发十分便捷。 其连接：https://layui.dev/。
2.echart
eCharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库.支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。 其链接：https://echarts.apache.org/zh/index.html
5.新颖技术的介绍
1.iflycode：iFlyCode简介 iFlyCode 是科大讯飞开发的一款智能编码助手插件，可以在程序员编程过程中沉浸式交互生成代码建议，助力程序员提升编码效率和企业敏捷开发。
.
1052
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
