前端开发基础
文章平均质量分 80
Html,JavaScript,CSS基础知识,学习
老码识途呀
专心写文,无问西东
展开
-
全栈工程师必须要掌握的前端Html技能
作为一名全栈工程师,在日常的工作中,可能更侧重于后端开发,如:C#,Java,SQL ,Python等,对前端的知识则不太精通。meta标签用来描述一个html网页文档的属性,关键词等,如 charset=”utf-8”是说明当前使用的是utf-8编码格式,在开发中我们经常看到utf-8或者是gbk 这些都是编码格式,通常使用utf-8。body元素包含文档的所有内容(比如:文本,超链接,图形,表格,列表等等),它会直接的在页面中显示出来,也就是用户可以直观的看到的内容。这些输入框,按钮叫做控件。原创 2023-11-16 21:18:47 · 654 阅读 · 0 评论 -
全栈工程师必须要掌握的前端JavaScript技能
作为一名全栈工程师,在日常的工作中,可能更侧重于后端开发,如:C#,Java,SQL ,Python等,对前端的知识则不太精通。但并非所有的项目都会有专职前端工程师,在一些小型项目或者初创公司中,职能划分并不明确,往往要一个人前后端全都会做, 所以作为一名全栈工程师或者后端工程师,掌握必备的前端知识,也是必不可少的一项技能。上述函数封装以后,就可以方便的调用,以实现特定的功能,那么,如果想要根据不同的输入,实现不同的逻辑,如:某些情况下实现奇数逻辑,另些情况下实现偶数逻辑,要如何做呢?原创 2023-09-26 00:40:12 · 504 阅读 · 0 评论 -
全栈工程师必须要掌握的前端CSS技能
作为一名全栈工程师,在日常的工作中,可能更侧重于后端开发,如:C#,Java,SQL ,Python等,对前端的知识则不太精通。综合示例效果有:文本加粗,颜色,元素内间距,外间距,边框,背景色,位置,flex布局,书写模式等综合应用。文本处理相关属性,主要设置文本相关内容的属性,如:颜色,字体,字号,加粗,斜体等内容。位置相关属性主要设置页面标签元素的左,右,上,下等位置信息,主要通过position进行设置。通过以上三个属性的设置可以方便的讲内容进行布局,如居中,左上,右上,左下,右下等。原创 2023-09-12 21:54:07 · 199 阅读 · 0 评论 -
Html利用Canvas绘制图形
今天接到粉丝私信,询问是否可以通过Canvas绘制一些图形,然后根据粉丝提供的模板图,通过Canvas进行模拟绘制,通过分析发现,图形虽然相对简单,但是如果不借助相应的软件,纯代码绘制还是稍微费些时间。Canvas默认提供了简单图形绘制功能,如直线,矩形,圆弧,贝塞尔曲线等,通过接口可以绘制简单的图形,复杂的图形需要通过简单的图形进行不同组合来实现。注意,Canvas不仅可以绘制图形,也可以添加图像元素。注意:前两句为创建Canvas上下文对象,先获取画布控件,再创建对象,然后就可以利用对象创建图形。原创 2023-07-17 00:00:00 · 866 阅读 · 0 评论 -
Chrome浏览器扩展开发之自动化操作页面
Chrome浏览器支持扩展(Extension)开发,来定制扩展现有的功能,如:自动登录,定时刷新,抢票等功能,本文以一个简单的小例子,简述Google Chrome 扩展开发的基本步骤,仅供学习分享使用。什么是Chrome扩展?Chrome扩展使用HTML、JavaScript、CSS和图片等Web技术开发,用以增强Chrome浏览器功能的一种程序。Chrome扩展并不是插件,扩展无需了解浏览器的源代码,只需要Web相关开发技术即可,而插件是更底层的浏览器功能扩展,需要深入掌握浏览器的源代码。原创 2021-09-16 23:41:09 · 2993 阅读 · 0 评论 -
Html5 Canvas绘图实例
前些年的时候,突然对Canvas感兴趣,利用空闲时间做一些Canvas小例子进行练习,仅供学习分享使用。如有不足之处,还请指正。什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建 Canvas 元素及JavaScript对象向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度,如下所示:<can原创 2021-09-14 22:21:16 · 3910 阅读 · 0 评论 -
利用pdf.js在线展示PDF文档
在Web项目中,经常需要在浏览器端展示PDF文档,本文通过一个简单的小例子,简述pdf.js的简单使用,仅供学习分享使用,如有不足之处,还请指正。pdf.js下载pdf.js是一个通用的、基于web标准的、用于解析和呈现pdf的平台。用户可以通过pdf.js的官方网站,进行下载,如下图所示:关于下载页面说明:目前pdf.js的稳定版本就v2.6.347,Prebuilt是基于较新浏览器,采用了ES6的写法。Prebuilt(for older browsers)基于旧版本浏览器,采用ES5的原创 2021-09-12 13:54:08 · 857 阅读 · 0 评论 -
Html富文本编辑器
本文推荐两款简单的富文本编辑器【KindEditor,NicEdit】用于获得所见即所得的编辑效果,本文仅供学习分享使用,如有不足之处,还请指正。概述这两款编辑器都是采用JavaScript编写,不需要引用dll,可以与主流后端编程语言【Java , .NET,PHP,ASP等】无缝对接,体积小,可以将现有的TextArea变成富文本编辑器。下面来分别介绍下:什么是KindEditor?KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发.原创 2021-09-09 18:50:42 · 8142 阅读 · 0 评论 -
json前端应用
本文主要说明Json的基本概念,和一个在Html中使用Json给元素赋值的小例子,属于基础性信息什么是 JSON ?JSON 指的是 JavaScript 对象表示法(JavaScriptObjectNotation) JSON 是轻量级的文本数据交换格式 JSON 独立于语言* JSON 具有自我描述性,更易理解* JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。相比 XML ...原创 2021-09-08 22:23:28 · 132 阅读 · 0 评论 -
Html5 通用布局方式
概述在Html5之前,统一采用的是Div+css的方式进行布局,但是却和开发人员的命名方式,喜好有关。在新的Html5中,布局却显得更加人性化,更易理解了。如增加了Header,Footer,Section,Aside标签,很容易一眼就知道对应的功能是什么。本文以一个简单的小例子,简述Html5的布局相关知识,仅供学习分享使用,如有不足之处,还请指正。HTML5 语义元素涉及的元素,说明如下:HTML5 提供的新语义元素定义了网页的不同部分:示例效果图布局效果如下:布局源码原创 2021-09-08 22:12:35 · 5221 阅读 · 1 评论 -
jQuery仿QQ音乐播放器
本文通过Html+CSS+jQuery开发仿QQ版的音乐播放器,是前端技术的综合应用,所用素材来源于网络,仅供学习分享使用,如有不足之处,还请指正。涉及知识点在本例中用到的知识点如下,按jQuery和CSS进行区分:jQuery是一个 JavaScript 库, 极大地简化了 JavaScript 编程,常见知识点如下:通过标签获取jQuery对象:var $audio =$("audio"); 通过选择符获取jQuery对象并设置文本内容:$(".music_progrss_time".原创 2021-09-07 20:56:21 · 1124 阅读 · 3 评论 -
jQuery打造简易相册
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录。主要功能点Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化了JavaScript编程 CSS 样式将表现与内容分离效果图话不多说,先上效果图:核心代码Html代码如下:<!DOCTYPE html><html><head> <title>The photo html pag.原创 2021-09-06 23:51:19 · 489 阅读 · 0 评论 -
JavaScript操作表格及CSS样式
概述在前端开发中,表格主要用于存储结构化的数据,CSS主要用于修饰DOM元素,如何通过DOM来操作表格及CSS呢?本文主要通过一些简单的小例子,简述DOM对表格和CSS的常见操作方法,仅供学习分享使用,如有不足之处,还请指正。获取表格及数据假如当前有一个表格,id为tb01,如下所示:<table id="tb01" width="300" border="1" cellspacing="2" cellpadding="2"> <caption>人员表<原创 2021-09-06 23:33:14 · 1771 阅读 · 0 评论 -
JavaScript匿名函数和闭包
概述在JavaScript前端开发中,函数与对其状态即词法环境(lexical environment)的引用共同构成闭包(closure)。也就是说,闭包可以让你从内部函数访问外部函数作用域。在JavaScript,函数在每次创建时生成闭包。匿名函数和闭包可以放在一起学习,可以加深理解。本文主要通过一些简单的小例子,简述匿名函数和闭包的常见用法,仅供学习分享使用,如有不足之处,还请指正。普通函数普通函数由fucntion关键字,函数名,() 和一对{} 组成,如下所示:function原创 2021-08-29 21:53:48 · 361 阅读 · 2 评论 -
JavaScript之DOM基础
概述DOM(Document Object Model)文档对象模型,针对Html和XML的文档的对象API,是一项 W3C (World Wide Web Consortium) 标准。文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问、更新文档的内容、结构和样式。本文主要以一些简单的小例子,简述前端开发中,DOM的常见内容,仅供学习分享使用,如有不足之处,还请指正。获取元素DOM操作必须等待HTML文档加载完毕,才可以访问。html将标签节点,称为元素,如果存在元素,原创 2021-08-28 15:50:26 · 277 阅读 · 0 评论 -
JavaScript之BOM基础
BOM(Browser Object Model)也叫浏览器对象,它提供了很多对象,用于访问浏览器的功能。但是BOM是没有标准的,每一个浏览器厂家会根据自己的需求来扩展BOM对象。本文主要以一些简单的小例子,简述前端开发中BOM的相关基础知识,仅供学习分享使用,如有不足之处,还请指正。概述window对象是最顶层的对象,旗下还有6大属性,也都是对象。document对象下也有5大属性,同样都是对象。window的属性和方法,可以采用:window.属性,或 window.方法()进行调用,或者直接调原创 2021-08-27 21:26:46 · 115 阅读 · 0 评论 -
JavaScript面向对象编程
概述在前端开发中,JavaScript并没有想象中那么简单,不只是简单的UI输入验证,还有面向对象。对于刚刚JavaScript入门的你来说,可能会稍稍惊讶:哇,虽然前端开发好找对象,妹子多,但是JavaScript真的可以向对象编程么!!!是的,你没有看错,本文将通过一些小例子,逐步讲解JavaScript的面向对象编程。仅供学习分享使用,如有不足之处,还请指正。ECMA Script有两种开发模式:函数式(过程化):小的功能,独立。 面向对象(OOP):体现了继承,封装,多态的思想,但是E原创 2021-08-26 21:51:26 · 120 阅读 · 2 评论