前端学习园地
关注
分享
扫一扫
文章平均质量分 81
网页三剑客、前端框架
酒城译痴无心剑
国家三级笔译。一手代码一手诗，酸甜苦辣寸心知。杏坛泊梦千秋事，万古云山日迟迟。讲授高等数学、Java高级程序设计、动态网站设计与开发（JSP、Servlet）、企业信息系统设计与开发（Spring Boot）、智能移动终端应用开发（Android）、Python Web开发（Django）、大数据离线分析（Hadoop、Hive、Spark）、计算机专业英语等课程，教学深入浅出，语言生动、经验丰富，深受学生好评。指导学生参加移动应用开发省赛和国赛，多次获奖，被授予优秀指导教师称号。热爱翻译，曾翻译西奥尼·帕帕斯数学科普读物《天天数学》与两千余首诗词，已形成独特的译诗风格。
展开
-
4.1.3 网站通信技术
通过这些演示，我们可以更深入地理解网站通信技术的工作机制，以及如何在实际的Web应用中应用这些技术。原创 2024-10-23 20:59:52 · 1002 阅读 · 0 评论 -
4.1.2 网页设计技术
通过今天的讲解，我们不仅回顾了网页设计技术的发展历程，还了解了现代网页设计中不可或缺的工具和框架。希望这些知识能够帮助大家更好地理解和掌握网页设计的艺术。原创 2024-10-23 20:14:18 · 874 阅读 · 0 评论 -
2.2.1 绘制Canvas路径 - 绘制线条
通过实例，我们可以看到Canvas API的强大和灵活。无论是简单的线条还是复杂的图形，Canvas都能轻松应对。希望今天的分享能够帮助大家更好地理解和使用Canvas。原创 2024-10-13 12:23:27 · 410 阅读 · 0 评论 -
2.1 HTML5 - Canvas标签
今天我们要一起探索HTML5中一个非常有趣且强大的特性——Canvas。我们将通过几个实例来了解如何使用Canvas标签，获取其上下文，绘制基本图形，以及实现渐变效果。原创 2024-10-12 22:37:25 · 1329 阅读 · 0 评论 -
jQuery 用户登录页面非空校验与登录测试
今天我们将一起学习如何使用jQuery来为用户登录页面进行非空校验和登录测试。通过这个实战项目，你将学会如何通过jQuery处理表单提交事件，进行输入验证，并根据验证结果进行相应的页面跳转。原创 2024-10-10 22:55:37 · 1088 阅读 · 0 评论 -
Bootstrap 5 练习 - 显示工具提示
工具提示是一个非常实用的用户界面元素，它可以为用户提供额外的信息，而不会干扰到页面的主要内容。在本教程中，我们将创建一个带有工具提示的按钮，并确保当用户将鼠标悬停在按钮上时，工具提示能够正确显示。原创 2024-10-10 16:11:20 · 1179 阅读 · 0 评论 -
初试React前端框架
通过今天的实战，我们初步了解了React框架的基本使用方法。从创建项目到编写组件，再到添加样式，每一步都是构建React应用的关键。希望大家能够通过这次实战，对React有更深入的理解。原创 2024-09-28 11:40:51 · 1124 阅读 · 0 评论 -
初试Bootstrap前端框架
通过今天的学习，希望大家能够对Bootstrap有一个基本的了解，并能够运用它来快速开发响应式网页。原创 2024-09-25 11:48:51 · 1365 阅读 · 0 评论 -
初试AngularJS前端框架
AngularJS 是一个由 Google 维护的开源前端 JavaScript 框架，用于构建单页应用（SPA）。它采用双向数据绑定和依赖注入，简化了 DOM 操作和前端逻辑。AngularJS 支持模块化开发，易于测试和维护。它提供了丰富的指令和过滤器，使得开发动态交互式网页变得简单。此外，AngularJS 还拥有一个庞大的社区和生态系统，为用户提供了丰富的资源和工具。原创 2024-09-23 12:13:40 · 1508 阅读 · 0 评论 -
HBuilder X里运行JavaScript程序
在HBuilder X通过设置node路径执行JavaScript程序原创 2024-04-28 19:02:12 · 1753 阅读 · 3 评论 -
数据结构学习笔记：实现链表
数据结构学习笔记：实现链表1、结点结构结点结构是由数据域和指针域组成，数据域是存放数据的，而指针域存放下一结点的地址。2、链表结构通过数据域访问到我们要的数据，而通过指针域访问到当前结点以后的结点，那么将这些结点串起来，就是一个链表。3、案例演示——JavaScript实现链表（1）创建WebStorm项目，添加LinkedList.html与LinkedList....原创 2019-10-22 10:23:36 · 518 阅读 · 0 评论 -
JavaScript综合项目：博客前端
JavaScript综合项目：博客前端项目1 博客前端：理解JavaScript库一、项目介绍二、理解JavaScript库三、创建基础库原创 2019-12-10 22:29:02 · 1154 阅读 · 0 评论 -
JavaScript学习笔记：AJAX基础
JavaScript学习笔记：AJAX基础一、准备工作1、Python案例：查询城市天气并绘制最高气温与最低气温折线图2、使用JSON Viewer直观查看JSON数据3、Java Web学习笔记13：AJAX基础任务1、下载HBuilder X，创建HBuilder项目任务2、输入城市名称，返回城市代码的页面。网络接口：http://toy1.weather.com.cn...原创 2019-12-10 09:03:02 · 699 阅读 · 0 评论 -
JavaScript学习笔记：迷宫游戏
JavaScript学习笔记：迷宫游戏一、游戏运行效果二、实现步骤1、在HBuilder里创建项目MazeGame，添加maze.html2、在脚本里设置顶边与底边的迷宫数组<script type="text/javascript"> var maze = new Array(); var sides = new Array("Border-Top", "B...原创 2019-12-09 18:29:47 · 2386 阅读 · 1 评论 -
JavaScript学习笔记：创建、添加与删除节点
JavaScript学习笔记：创建与添加节点一、DOM对象节点类型二、创建节点1、创建元素节点createElement(element)用于创建元素节点比如：var anode = document.createElement('a');创建一个标签名为a的超链接元素节点。2、创建文本节点createTextNode(string)用于创建文本节点比如：var tnode = ...原创 2019-12-05 18:48:02 · 940 阅读 · 0 评论 -
JavaScript学习笔记：动态添加与删除表格行
JavaScript学习笔记：动态添加与删除表格一、添加表格行与单元格Javascript可以控制table，动态的插入行和单元格。rows保存着<tbody>元素中行的HTMLCollection。语法：tableObject.insertRow(index)该方法创建一个新的TableRow对象，表示一个新的<tr>标记，用于在表格中的指定位置插入一个新行，并返...原创 2019-12-04 17:15:41 · 1045 阅读 · 0 评论 -
JavaScript学习笔记：创建自定义对象
JavaScript学习笔记：创建自定义对象一、利用构造函数模式创建自定义对象使用构造函数可以创建特定类型的对象，类似于Array、Date等原生JavaScript对象。<script> // 构造函数模式创建自定义对象 function Person(name, age) { this.name = name; this.age = age; this.say...原创 2019-12-04 15:32:40 · 603 阅读 · 0 评论 -
JavaScript学习笔记：数组
JavaScript学习笔记：数组数组是一组数据构成的集合，通过下标或索引访问里面的元素。1、创建数组（1）创建空数组，逐个赋值<script type="text/javascript"> // 创建数组 var scores = new Array(); // 逐个赋值 scores[0] = 89; scores[1] = 90; scores[2] = 67...原创 2019-12-03 15:07:48 · 631 阅读 · 1 评论 -
在Chrome78浏览器上如何实现自动播放音视频
在Chrome78浏览器上如何实现自动播放音视频问题：video与audio标签里设置了autoplay="autoplay"，在Chrome78浏览器上无法实现自动播放。1、查看Chrome浏览器版本2、该版本Chrome浏览器移除了autoplay-policy的标记3、设置Chrome的环境变量4、在命令行带参数启动Chrome浏览器chrome ...原创 2019-11-26 10:24:51 · 6326 阅读 · 2 评论 -
使用JSON Viewer直观查看JSON数据
目录一、使用JSON Viewer直观查看JSON数据1、下载JSON Viewer2、启动JSON Viewer2、在Text选项卡下的文本框里输入JSON文本3、单击Viewer选项卡，可直观地查看JSON数据结构4、在Text选项卡下的文本框里输入JSON数组文本5、单击Viewer选项卡，就可直观地查看JSON数组的数据结构6、在Text选项卡下的文本框里输...原创 2019-11-26 08:55:47 · 3630 阅读 · 0 评论 -
jQuery学习笔记01：初试jQuery
jQuery学习笔记01：初试jQuery一、下载jQueryjQuery官网：https://jquery.com二、案例演示——Welcome to jQuery World1、在WebStorm里创建项目jQueryDemo2、创建js目录，将jquery-3.4.1.js放入该目录3、创建demo01.html<!DOCTYPE ...原创 2019-11-14 11:21:52 · 542 阅读 · 0 评论 -
ES6学习笔记04：Set与Map
ES6学习笔记04：Set与MapJS原有两种数据结构：Array与Object，ES6新增两种数据结构：Set与Map一、Set数据结构Set类似于数组，但是成员值不允许重复，因此主要用于数据去重。Set本身是一个构造函数，用来生成Set数据结构，其实例是一个类数组的对象。Set提供的方法：add(value)、delete(value)、has(value)、clear()...原创 2019-09-05 07:01:23 · 537 阅读 · 0 评论 -
JavaScript学习笔记：语句
JavaScript学习笔记：语句JavaScript程序由语句组成，语句遵守特定的语法规则。例如：var语句、if语句、while语句、with语句、switch语句等。1、块语句块语句常用于组合0~多个语句，块语句用一对花括号定义。语法：{ 语句1; 语句2; …… 语句n;}注意： 用var定义的变量没有块级作用域，...原创 2019-08-20 15:56:12 · 379 阅读 · 0 评论 -
JavaScript学习笔记：类型检测
JavaScript学习笔记：类型检测1、利用typeof检测数据类型注意：type of null，返回的不是"null"，而是"object"。typeof [1, 2, 3]，返回的不是"array"，而是"object"。2、利用obj instanceof Object判断obj是不是Object的实例注意：instanceof 只能用来判断两...原创 2019-08-18 16:28:01 · 347 阅读 · 0 评论 -
JavaScript学习笔记：对象
JavaScript学习笔记：对象1、声明对象（1）字面量对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS - 字面量对象</title></head><body>...原创 2019-08-15 09:07:04 · 388 阅读 · 0 评论 -
JS案例：使用对象、对象数组、正则表达式
JS案例：使用对象、对象数组、正则表达式1、使用对象声明对象变量，其实就是将一个json对象赋给一个变量，可以看到json对象就由一些键值对构成。运行效果：如果将{id: 3, name: "mike", sex: "male"}保存在文本文件里，那么如何读取出来呢？function readFile(filename) { var fso ...原创 2018-02-24 11:58:21 · 444 阅读 · 0 评论 -
HTML学习笔记：设置超链接文本修饰
设置超链接文本修饰1、演示效果2、编写代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超链接文本修饰</title> <style type="text/css"> ...原创 2018-02-24 07:50:51 · 1155 阅读 · 0 评论 -
HTML学习笔记：设置文本字体
目录一、设置字体名1、演示效果2、编写源码二、设置字号1、使用单位设置字号（1）常用单位（2）案例演示（3）编写代码2、使用关键字设置字号（1）绝对关键字（2）相对关键字一、设置字体名1、演示效果2、编写源码<!DOCTYPE html><html lang="en"><head> &...原创 2018-02-24 07:43:03 · 1077 阅读 · 0 评论 -
Specificity考量
Specificity考量1、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多样式规则作用于同一元素</title> <style type="text/cs原创 2018-02-24 07:39:36 · 392 阅读 · 0 评论 -
首*伪类选择器
一、首子伪类选择器（first-child selector）1、效果2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首子伪类选择器</title> <style t原创 2018-02-24 07:26:17 · 427 阅读 · 0 评论 -
hover伪类示例
hover伪类示例1、效果鼠标悬停在某一记录行，背景色和字体颜色发生变化。2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hover伪类示例</title> <sty原创 2018-02-24 07:23:23 · 552 阅读 · 0 评论 -
超链接的伪类选择器
超链接的伪类选择器1、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超链接伪类选择器</title> <style type="text/css"&原创 2018-02-24 07:20:15 · 2793 阅读 · 2 评论 -
利用CSS实现悬停下拉菜单
利用CSS实现悬停下拉菜单1、效果鼠标移到【搜索引擎】，自动弹出其下拉菜单，在下拉菜单里移动，光条随之移动。2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>悬停下拉菜单演示</title>原创 2018-02-24 07:17:32 · 5209 阅读 · 1 评论 -
rem使用示例
rem使用示例em是相对于上一层父容器来进行计算，但是rem永远都是相对于顶层容器来计算计算。1、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>rem演示</title> &原创 2018-02-24 07:13:16 · 733 阅读 · 0 评论 -
px~em~pt转换表
px~em~pt转换表em的计算是相对的。1、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>em演示</title> <style type="text/cs原创 2018-02-24 07:11:04 · 398 阅读 · 0 评论 -
HTML学习笔记：实现条纹边框
实现条纹边框1、效果演示2、编写代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条纹边框</title> <style type="text/css"> #...原创 2018-02-24 07:09:37 · 586 阅读 · 0 评论 -
左竖条8种实现方式
左竖条8种实现方式1、效果图2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左边竖条</title> <style type="text/css"原创 2018-02-24 07:05:37 · 399 阅读 · 0 评论 -
伪元素before、after示例
伪元素before、after示例1、运行效果2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪元素示例</title> <style type="text原创 2018-02-24 07:02:07 · 392 阅读 · 0 评论 -
贵美网首页：深入理解Web开发中的div+css布局
关于Web开发中的div+css布局原创 2018-02-24 07:00:02 · 1896 阅读 · 1 评论 -
HTML学习笔记：iframe框架演示
iframe框架演示1、效果演示2、编写代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>iframe框架演示</title></head><body><div...原创 2018-02-23 23:29:54 · 2495 阅读 · 0 评论