前端 | 易学教程

月薪20k的web前端开发程序员，他们都会的这6招

阅读更多关于月薪20k的web前端开发程序员，他们都会的这6招

web前端工程师是近几年的新兴职业，也是目前火爆而且高薪的职业。不同的公司也有不同的叫法，比如：网页界面开发，网站设计等，要学好web前端开发，需要掌握什么方法与技巧？一、div和table 这个是最简单的，也是最基础的。要熟练掌握div、form table、ul li 、p、span、font这些标签，这些都是最常用的，特别是div和table，div用于布局、table也可以用于布局，但是不灵活，基本 table是用来和数据打交道。二、CSS 这里说的css不包括css3，一般我们看到web前端开发工程师的要求里面，有一个会使用css+html 或者 css+div 来进行界面布局，所以css是用于辅助html来布局和展示的，我们称之为“css样式”。为什么会说css+div呢? 因为我上面说了div就是 html主要用于布局的东西，所以div就是核心掌握的东西！那么css肯定必须要配合div来使用才好。css要熟练掌握float、 position、width、height，以及对于的最大最小、会使用百分百、overflow、margin、padding等等。三、JS 可能前两个大家觉得还过的去，看到js就蛋疼了。其实，js入门很简单的，不需要会很多东西的，只要会根据某个id、或者name拿到网页dom或者样式、或者值，然后会给某个id或者name的元素标签赋值

前端学习（317）：居中方法五flex

阅读更多关于前端学习（317）：居中方法五flex

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){display: flex;justify-content: center;align-items: center;} div:nth-child(1) div{ } </style> </head> <body> <div> <div>1</div> </div> </body> </html> 运行结果来源： CSDN 作者：你知道歌谣吗？链接： https://blog.csdn.net/weixin_43392489/article/details

JSONP Hijackin攻击详解

阅读更多关于 JSONP Hijackin攻击详解

JSONP Hijackin的中文意思是JSON劫持，而能产生JSON数据劫持的原因在于前端被跨站攻击了。跨站=跨域，跨域从字面上理解的话，就是指超出了范围、领域。继续追问一下，那超出了什么范围？原来指的范围有多大？理解跨站攻击的基础在于理解这个域有多大。为了更准确的理解JSON Hijackin攻击，建议读者可以先了解一下如下几个背景知识：域概念（下文会介绍） JSON （搜索引擎查一下）接口回调（建议看我之前的文章： https://www.cnblogs.com/mysticbinary/p/11869181.html ）域概念解释在计算机领域里很多地方都会用到这个域，而不同地方所包含的含义却是不相同的，比如说写代码定义的变量有作用域，在局域网建设中有网络域，Internet有一项核心服务是域名解析系统（DNS）。本文所讨论的域就是指DNS的域名。 DNS的工作原理：在全球各地有众多服务器（分布式），在这些服务器里面都同步的保存着域名和IP的一一映射，这样人们就可以不用记住枯燥的IP地址，只记住有意思的单词域名就行了。域介绍：域通过一个点 . 来来分开一个域。域名不区分大小写，有唯一性，跟身份证号一样，是独一无二点。域分类：域名又分顶级域名和其它域名，顶级域名就是如下这些，被预先定义好的，可以理解为世界上有一个组织专门在管理

前端学习（318）：居中方法六

阅读更多关于前端学习（318）：居中方法六

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){vertical-align: middle;display: table-cell;text-align: center;} div:nth-child(1) div{display: inline-block; } </style> </head> <body> <div> <div>1</div> </div> </body> </html> 运行结果来源： CSDN 作者：你知道歌谣吗？链接： https://blog.csdn.net/weixin

web前端入门到实战：CSS中的cursor属性

阅读更多关于 web前端入门到实战：CSS中的cursor属性

css中的cursor这个属性是用来设置光标形状的。这个属性定义了鼠标指针放在一个元素边界范围内时所用的光标的形状。默认值： auto 继承性： yes 出现版本： css2 JavaScript语法： object.style.cursor = ‘pointer‘ 可以设置的值： | 值 | 描述 | | url | 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。浏览器支持情况： IE、FireFox、Chrome、Safari、Opera 所有主流浏览器都支持cursor属性。注释：Opera 9.3 和 Safari 3 不支持 url 值。注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。来源： 51CTO 作者：前端向南链接： https://blog.51cto.com/14592820/2464784

MVC模式详解 + 容易犯的理解误区

阅读更多关于 MVC模式详解 + 容易犯的理解误区

1:MVC模式首先不是框架！！（之前我公司新招聘进来的一个前端，刚毕业不久的，可能在学校学过Spring MVC，争论说MVC就是一个Java框架）。 2:其次，MVC也不是设计模式！！设计模式是使代码能够高复用的，减少重复搬砖工作的编写代码设计经验的总结；是具体到解决业务问题的（如单例模式，策略模式，桥接模式，观察者模式）。在菜鸟教程网也把MVC放在了设计模式左边那一栏；非常容易让匆忙学习了去面试的同学理解错误。 MVC模式其实准确来说是【框架模式】；框架模式在设计模式之上，也有利于提高代码的复用，而且是设计框架的思考和总结，框架模式会包含很多设计模式，例如MVC中就包含观察者模式，策略模式，组合模式，单例模式等等。在不同的代码模块会使用不同的设计模式达到最好的效果。老生常谈，面试常备问题：什么是MVC，分别代表了什么？网上一搜索一大把。 M（models）：数据模型层；主要就是用来处理具体的业务逻辑，要加减乘除，割接拼接字符串，根据标志配状态什么乱七八糟业务处理都在这里；也在这里进行数据库的CURD增删改查操作，Spring 中还有种说法是持久层，其实就是数据持久化，也就是保存数据库；持久层框架就是类似于Mybatis和Hibernate之类那些。 V（view）：视图层；就是用来展示处理后的数据的页面。 C（controller）：控制器层；起到一个中介的作用

萌新常问：Web前端是干什么的？和后端是啥关系？

阅读更多关于萌新常问：Web前端是干什么的？和后端是啥关系？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 最近遇到一些小萌新，他们经常会问到“Web前端是什么？它能做什么？与后端的关系是什么？”。下面，针对这些问题给大家解答一下。 Web前端工程师是干什么的？我们先了解Web前端工程师是干什么的，百度百科的解释： Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。得知这个之后，那么什么是Web前端相信各位也就有个大概了解了，就是浏览器和app界面的开发嘛。 Web是什么呢？Web就是万维网，要彻底的解释这个名词就需要些篇幅了，这里就用一句话总结，就是一种全球都公认的协议，一个信息系统，必须遵守这个协议才能上网。 Web前端其实就是前端，或者前端技术，前端开发，这几个名词其实意思都差不多的。浏览器界面是什么呢，比如你打开百度网站：以上这个界面全是利用Web前端技术做出来的，比如上方这些：这些字根据您的上网常识，应该都知道是可以点击的，点击完会跳到一个新的界面，但是有些字又不能点击，这就是用了前端技术实现的。接着看，这个百度的logo：不难看出

前端零基础入门---步骤一：页面结构层HTML---02-HTML表格

阅读更多关于前端零基础入门---步骤一：页面结构层HTML---02-HTML表格

02-HTML表格第1章基础表格基本语法 <!DOCTYPE html> <html> <head> <title>3</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body> <table border="1"> <tr> <td>上午</td> <td>下午</td> </tr> <tr> <td>语文</td> <td>英语</td> </tr> <tr> <td>数字</td> <td>历史</td> </tr> </table> </body> </html> 第2章表格操作 2-1 表格操作添加行或删除行，只需要对一整行的内容进行添加或删除，即对一个 <tr></tr> 进行删除或添加 <tr></tr> 同理，添加列或删除列，只需要在每一行的相对位置去添加单元格和删除单元格，即对每一个 <tr></tr> 的相同位置添加 <td></td> 或删除 <!DOCTYPE html> <html> <head> <title>3</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body> <table border="1

前端学习（320）：居中方法八

阅读更多关于前端学习（320）：居中方法八

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){text-align: center;} div:nth-child(1) div{display: inline-block;vertical-align: middle; } div:nth-child(1)::after{content: "";display: inline-block;vertical-align: middle;height: 100%;width: 0;} </style> </head> <body> <div> <div>1<

前端小白的成长史

阅读更多关于前端小白的成长史

PS:这是初初初初级前端小菜鸡梦想成为前端大佬的第一步在工作中我们都会遇到很多很多问题，第一个解决方法当然就是百度等搜索软件了，问题总是反复的出现，为了解决效率问题，这时候就需要采取记录的手段了，用记录来提升自己，希望博园的小伙伴一起进步，欢迎爱学习爱分享的小伙伴来关注哦！来源： CSDN 作者： Monster_前端小菜鸡链接： https://blog.csdn.net/weixin_44136421/article/details/103857406

订阅前端