【web前端基础知识】
关注
分享
扫一扫
web前端知识梳理，适合初学者
月疯
得到你最想要的东西，最保险的办法，那就是你能配得上你最想要的东西。机会是留给有准备的人，运气是留给有天赋的努力者。
展开
-
网络框架axios
官网：http://www.axios-js.com/zh-cn/docs/什么是 axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性从浏览器中创建XMLHttpRequests 从 node.js 创建http请求 支持PromiseAPI 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御XSRF安装使用 npm:$ npm insta...原创 2021-08-20 12:05:32 · 185 阅读 · 0 评论 -
bootStrap库介绍
官网地址：https://www.bootcss.com/这是一个基于jquery的框架。Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。支持的浏览器Bootstrap 支持所有主流浏览器和平台的最新、稳定版本。在 Windows 上，我们支持 Internet Explorer 10-11 / Microsoft Edge 浏览器。对于其它使用了最新版本的 WebKit.原创 2021-08-18 19:48:41 · 1569 阅读 · 0 评论 -
MintUI介绍
官网：http://mint-ui.github.io/#!/zh-cn// 安装# Vue 1.xnpm install mint-ui@1 -S# Vue 2.0npm install mint-ui -S// 引入全部组件import Vue from 'vue';import Mint from 'mint-ui';Vue.use(Mint);// 按需引入部分组件import { Cell, Checklist } from 'mint-ui';Vue.com原创 2021-08-17 10:54:55 · 459 阅读 · 0 评论 -
ElementUI组件库
官网：https://element.eleme.cn/#/zh-CN/component/installationnpm 安装推荐使用 npm 的方式安装，它能更好地和webpack打包工具配合使用。npm i element-ui -SCDN目前可以通过unpkg.com/element-ui获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。<!-- 引入样式 --><link rel="stylesheet" href=...原创 2021-08-17 10:47:22 · 7401 阅读 · 0 评论 -
CSS的样式小计（1）
1、给div添加点击效果：.item { background: #FFF;}.item:active { background: #F0F0F0;}2、鼠标滑过，出现高亮div:hover{ background: chartreuse; }3、设置圆或者圆角1.border-radius可以同时设置1到4个值。简洁法 如果设置1个值，表示4个圆角都使用这个值。 border-radius:40px;原创 2021-07-24 16:20:07 · 236 阅读 · 1 评论 -
web框架集合
web前端的各种框架包：Bootstrap中文网 (bootcss.com)是前端学习的一个好网站！！！！！！！原创 2021-04-25 01:04:37 · 157 阅读 · 0 评论 -
HTML5新特性
什么是H5h5指的是一系列技术做的移动端ppt,它的页面很酷炫，可以提高公司的逼格，亮瞎访问者的双眼，让小白顿生膜拜之感，即使ppt毫无实质，使用大量的插件或库，主要技术有：1.页面素材加载技术，使用使用createJS之中的preloadJS（现成的库）2.音乐加载播放技术，createJS中同样有soundJS可以实现（又是它）3.可以滑动的页面，这不就是ppt吗？用了swiper.js这个Jquery插件（又是库）4.可以随意涂抹修改，使用canvas叠加层，canvas是HTML5标..转载 2021-04-15 14:23:14 · 271 阅读 · 0 评论 -
html的document操作
代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>document测试</title> <!-- DOM操作--- 如何添加、移除、移动、复制、创建和查找节点等 （1）创建新节点 createDocumentFragment()//创建一个DOM片段 createElemen...原创 2021-04-15 14:11:07 · 2680 阅读 · 0 评论 -
css3中的box-sizing属性的使用
box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值：content-box、border-box、inherit。其中inherit表示box-sizing的值应该从父元素继承。content-box和border-box的主要区别就是元素的width和height的值包不包括border、padding这两个属性的值。一、content-box content-box也叫标准盒子模型，是默认值。 它的width组成仅仅只有content区..转载 2021-04-15 13:51:40 · 1465 阅读 · 0 评论 -
html居中方式
代码一：<!DOCTYPE html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *原创 2021-04-15 12:28:33 · 982 阅读 · 0 评论 -
a标签详解与测试
代码部分：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <span>今天学习a标签</span> </br> <a href="#">跳转到顶部</a> </br> <a原创 2021-04-09 21:01:17 · 284 阅读 · 0 评论 -
js调用本地js文件（亲测）
jsty.html:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>调用外部js代码</title> <script type="text/javascript" src="../js/plus.js"> </script> </head> <body> <form> ..原创 2021-04-09 13:24:18 · 3583 阅读 · 0 评论 -
html之table删除和添加数据（获取行号和列号）
代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #t{ width: 800px; height: 80px; } </style> <body> <div id="df原创 2021-04-08 21:51:16 · 1341 阅读 · 0 评论 -
table加载动态数据（亲测）
直接上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表格展示</title> <style type="text/css"> #table{ border-collapse: collapse; 单条显示 margin: 0 auto; text-align: center; } ..原创 2021-04-08 16:59:18 · 1380 阅读 · 0 评论 -
百分比布局测试
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ height 100%; margin: 0; padding: 0; } #header{ width: 100%; height: 15%; b.原创 2021-04-06 19:52:25 · 132 阅读 · 0 评论 -
Hbuilderx编辑器介绍（00）
登录官网：https://www.dcloud.io/点击下载：解压之后，直接打开使用开始编写程序：原创 2020-02-22 17:00:31 · 2608 阅读 · 0 评论 -
web前端基础（15正则表达）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 正则表达式 （描述字符模式的对象）主要用来验证客户端的数据验证--> <!-- 一个正则表达式是由普通字符串（a-z）特殊字符...原创 2020-02-22 16:55:13 · 464 阅读 · 0 评论 -
web前端基础（14html里面的事件）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 在页面载入的时候onLoad()函数最先执行，当用户点击的时候onClick()发生 --> <script type="text/j...原创 2020-02-22 16:53:42 · 226 阅读 · 0 评论 -
web前端基础（13js语法基础）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- js区分大小写 --> <!-- 结尾的分号可有可无 --> <!-- 变量第一个字符必须是字母 （—下划线） （$美元符号）...原创 2020-02-22 16:50:32 · 293 阅读 · 0 评论 -
web前端基础（12js基础介绍）
<!DOCTYPE html><html> <!-- 诞生于1995，开始只是通过表单数据验证 --> <!-- js是操作html和css --> <!-- 面向对象的解释器语言 --> <!-- 目的：验证法网服务器的数据，增加web互动，加强用户体验--> <!-- html实现静态页面，js实现动态...原创 2020-02-22 16:47:15 · 295 阅读 · 0 评论 -
web前端基础（11html5和css）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ border: 2px solid red; width:300px; h...原创 2020-02-22 16:43:39 · 162 阅读 · 0 评论 -
web前端基础（10html5的表单）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="*" method="get"> E-mail:<input t...原创 2020-02-22 16:42:39 · 229 阅读 · 0 评论 -
web前端基础（09html5多媒体）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 定义独立的流内容（图像、图片、图标、代码等） --> <figure> ...原创 2020-02-22 16:41:44 · 211 阅读 · 0 评论 -
web前端基础（08html5新标签）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 定义文章或者网页中的主要内容 --> <article> <!--...原创 2020-02-22 16:40:36 · 249 阅读 · 0 评论 -
web前端基础（07style）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 内嵌样式表 --> <style type="text/css"> </style> <!-- 多个页面之间都...原创 2020-02-22 16:39:43 · 687 阅读 · 0 评论 -
web前端基础（06css）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 标签选择器设置样式 */ p{ color: red; font-size: 3...原创 2020-02-22 16:38:45 · 216 阅读 · 0 评论 -
web前端基础（05htmlimg标签和滚动标签）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <!--学习图片 alt是一个默认字段，src可以使网络地址--> <body> <img src="img/...原创 2020-02-22 16:36:25 · 297 阅读 · 0 评论 -
web前端知识（04html的表单）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <!--学习表单提交 input的type标签可以分为，1\用户名和密码，"text"和"password"2\单选按钮"radio"3\复...原创 2020-02-22 16:34:34 · 292 阅读 · 0 评论 -
web前端基础（03html列表知识）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <!--学习列表--> <body> <p>无序列表</p> <ul type="...原创 2020-02-22 16:33:10 · 210 阅读 · 0 评论 -
web前端基础（02html表格）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <!--学习表格--> <!--caption是标题，<th> 是标头 ，border是边框，bgcolor是背景...原创 2020-02-22 16:32:05 · 354 阅读 · 0 评论 -
web前端基础（01html基本标签）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <!--学习标签--> <!DOCTYPE 设置背景色 bgcolor="brown"> <body backg...原创 2020-02-22 16:29:43 · 209 阅读 · 0 评论 -
apache-commons 常用工具类
引用包说明本文引用的所有包如下<dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId> <version>3.4</version></dependen...转载 2020-01-04 20:48:24 · 962 阅读 · 0 评论 -
jquery请求后台数据（get请求）
直接上代码：<input type="button" id="fileImport" value="读取服务器文件">//点击导入按钮,使files触发点击事件,然后完成读取文件的操作 $(document).ready(function(){ $("#fileImport").click(function(){ $.ge...原创 2019-07-18 12:10:35 · 3305 阅读 · 0 评论 -
javaWeb（入门基础详解）
Servlet1,servlet介绍 servlet是一项动态web资源开发技术. 运行在服务器端. 作用:处理业务逻辑,生成动态的内容,返回给浏览器. 本质就是一个类 servlet的入门 1.编写servlet(类)--- 继承HttpServlet 2.编写关系--- w...原创 2019-06-28 00:56:07 · 150 阅读 · 0 评论 -
html总结
<div> 块，末尾会换行。一个div可以包含标题、段落、链接等。div属于容器<p> 段落，末尾会换行。<a> 链接 <a href="index.html">首页</a><input> 用于输入。根据属性Type的不同,输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等原创 2019-01-10 19:02:29 · 146 阅读 · 0 评论 -
css总结
1.选择器：id具有唯一性,通过#定义 class可重复,通过.定义:focus 选择器用于选取获得焦点的元素。示例如下： class为 start_time的控件的样式及获得焦点后的样式。.start_time { width: 150px; margin-right: 10px; color: #122e29;}/*选中后的样式...转载 2019-01-10 18:58:05 · 146 阅读 · 0 评论 -
多个div在同一行显示
使用float:left，也可以使用display : inline-block，可以使多个div在同一行显示。<div class="search_row"> <div class="form-group" style="float:left" > <%-- 通过左浮动使多个div在一行显示--%> &l转载 2019-01-10 18:56:12 · 36428 阅读 · 1 评论 -
FormData提交数据
在jquery中，使用ajax提交表单数据。FormData可以很方便地获取到表单中的所有数据。注意： ajax中的data参数为FormData类型时，contentType就不要设置成application/json了。如果contentType设置成application/json，需要将FormData转换为json示例如下：<script type="text...转载 2019-01-10 18:39:19 · 997 阅读 · 0 评论 -
AJAX笔记
一、基础概念AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页(局部刷新)XMLHttpRequest 用于在后台与服务器交换数据。二、相关api1.识别浏览器并创建对象:...转载 2019-01-10 18:37:41 · 172 阅读 · 0 评论 -
引入jQuery的src设置
1.引用在线jQuery谷歌、微软、百度都有提供在线的jQuery引用。比如<script src="http://code.jquery.com/jquery-latest.js"></script>2.引用本地的jQuery。先在下载jQuery.js文件或者jQuery.min.js文件(这个是压缩版的)，放在项目中。假如jQuery文件和当前js...转载 2019-01-10 18:35:03 · 3198 阅读 · 0 评论