web前端开发

个人认为： 前端发展最终的导向是前端工程化，智能化，模块化，组件化，层次化。 一个项目的开发在未来人工智能+物联网的时代，必定走向以下的五化 原因: Web前端页面的开发必然与DOM进行交互操作，前端框架的一次次更新，是从满足目前的业务需求到提升效率的阶段，慢慢走向改善性能的阶段（开发和部署环境优化，代码优化，网站性能优化，数据优化，页面优化等等）。 1.前端工程化。 前端工程化指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效协同，质量开发。 具体是： a.Node服务，提供数据代理，路由，服务器渲染。 b.Web应用开发，专注于web交互体验。 c.前端运维：构建，测试，部署，监控。 2.前端模块化(页面模块化开发+基础模块化)。 （1）基础模块化： A. CommonJS———— 同步加载、服务器端的模块化规范，采用案列： Node.js 实现原理： 一个单独的文件就是一个模块 ； 加载模块采用同步方式，加载完成后才能执行后面的操作 ； 加载模块使用 require 方法，该方法读取一个文件并执行，最后返回内部的 exports 对象； 特点： 比较适合运用于 服务器的编程 ，加载模块文件通常都存在本地磁盘，加载过程无延迟，无需异步加载 B. AMD———— 异步加载，采用案例： require.js 实现原理： 异步模块定义 ， 通过一个函数封装所有所需要

Web 页面制作基础 Web 的相关概念 WWW Website URL Web Standard Web Browser Web Server HTML 基础 标记语言 从 HTML 到 XHTML HTML 的基本结构 HTML 的相关基本定义 HTML 常用开发工具 HTML 的通用属性 HTML 的全局标准属性 HTML 的全局事件属性 HTML 主体元素 HTML 无语义元素 HTML 标题元素 HTML 段落元素 HTML 注释元素 HTML 格式化元素 HTML 图片元素 HTML 超链接元素 HTML 列表元素 HTML 表格元素 HTML 表单元素 HTML 框架元素 HTML 的预留字符 CSS 基础 什么是 CSS CSS 的历史 CSS 样式的基本使用 CSS 的两个特性 CSS 的基本语法 CSS 的选择器 元素选择器 通配符选择器 属性选择器 派生选择器/上下文选择器 id 选择器 类选择器 伪类选择器 伪元素选择器 CSS 的属性 CSS 背景属性 CSS 字体属性 CSS 文本属性 CSS 尺寸属性 CSS 列表属性 CSS 表格属性 CSS 内容元素 CSS 盒模型 CSS 内边距属性 CSS 值复制 CSS 外边距属性 CSS 边框属性 CSS 轮廓属性 布局属性 CSS 浮动属性 CSS 定位属性 JavaScript 程序设计

下面这种写法只作用于这1个标签： 下面这种也是比较老的写法： 下面是常用的方式：把一个css样式放入到一个文件中，然后引用： 第三方引用的css一般是压缩过的，这样静态资源加载速度会比较快。 如果css中的值不固定，或者有空格，那么就不能通过css来定位元素。 引用的js也是压缩的。 一个非常底层的框架： 渲染效果非常快： 中国人开发的： 来源： https://www.cnblogs.com/lp475177107/p/11727863.html

自然是有很大意义的。下面我可能说的比较多……方便题主能够更全面的了解为什么说是有有意义的。另外，本文是以Java的角度谈前后端分离。放心，大家一定会有种是我了，没错，的感觉。 一、先来明晰下概念 　　前后端分离是通过Ngnix+Tomcat的方式（也可以中间加一个Node.js）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，iOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。 　　它的核心思想是 前端HTML页面通过Ajax调用后端的Restful API接口并使用json数据进行交互。这点题主也有提到。 二、其次，让我们了解下，没有前后端分离的时代（各种耦合） 　　过去，Java Web项目大多数都是Java程序员又当爹又当妈，又搞前端，又搞后端。 　　感觉就是，怀疑猿生…… 　　那时的JavaWeb项目都是使用了若干后台框架，Spring MVC/Struts + Spring + Spring JDBC/Hibernate/Mybatis 等等。 　　大多数项目在Java后端都是分了三层，控制层，业务层，持久层。控制层负责接收参数，调用相关业务层，封装数据，以及路由&渲染到JSP页面。然后JSP页面上使用各种标签或者手写Java表达式将后台的数据展现出来

HTML是HyperText Markup Language的缩写，中文翻译为超文本标识语言。使用HTML元素编写的文档称为HTML文档，目前最新版本是5.0 。 HTML5的开发是由三个重要组织负责的，具体如下 ： 　　 WHATWG :由Apple,Mozilla,Google,Opera等浏览器厂商组成，成立于2004年。WHATWG开发HTML和Web应用的API，同时为各浏览器厂商以及其他有意向的组织提供开放式合作。 　　 W3C :W3C管辖的HTML工作组，目前负责发布HTML5规范。 　　 IETF (因特网工程任务组):该任务组下辖HTTP等负责Internet协议的团队。HTML5定义的一种新API(WebSocket API)依赖于新的WebSocket协议，IETF工作组负责开发该协议。 HTMl的优势 ： (1)跨浏览器的兼容性 (2)增强交互功能 (3)更好的存储技术; HTML5中提供了本地存储功能。其中将比较老的技术cookie和客户端数据库融合。但是它比cookie更好用，因为支持多个存储，HTML5存储技术拥有更好的安全和性能，即使浏览器关闭也可以保存并且所有主流浏览器都支持。 (4)用户优先; (5)更简单的代码; 以浏览器原生能力替代复杂的JavaScript代码; 新的简化的DOCTYPE; 新的简化的字符集声明;

学习Node.js时候的建议 前端和后端的知识体系不同！不要使用前端的思维方式去学习后端开发！ 学习Node.js阶段，把自己当作后端开发人员！ 课堂上对重点的知识做笔记，利用一切时间练习课堂代码；晚上抽半个小时梳理总结今天所学知识点；整理今天的笔记！ 每天吃饭睡觉走大街上，都要在脑海中闪现今天学习的知识点【×××知识点是什么，怎么用】 什么是前端和后端 前端主要工作：写页面（HTML）、美化页面（CSS）、调用后台提供的API接口去请求或提交数据（JS）；Ajax （XHR、Jquery .ajax .get $.post），Jquery更多的是进行DOM方面的操作！H5C3，高级、Angular（单页面应用程序） 前端主要在浏览器端进行开发；前端主要和页面打交道，用户看到的基本上就是我们前端写出来的（前端就是颜值） 后端主要工作：主要进行业务逻辑的操作、比如数据的增删改查、操作数据库、对外暴露API接口（后台是骨骼、灵魂） 前后端协作流程：前端写页面，前端调用后台的接口；后台接受前端发过来的请求，然后进行相关的业务处理，把处理的结果返回给前端（提供API接口） Javascript 的起源 诞生：JS的诞生和一个公司有关，有一个网景公司；当时网速只有20~30KB（电话线），当时，就是为了进行客户端验证，为了减少不必要的网络请求，提高网络效率，网景公司决定研究一门语言

1 . 减少 HTTP 的请求次数和传输报文的大小 -CSS SPRITE（雪碧图、图片精灵）技术 - 使用字体图标（ICON FONT）或者 SVG 等矢量图； 可以减少 HTTP 请求次数或者减少请求内容的大小 ，使图片渲染的更快：因为他们是基于代码渲染的，而对于位图（png/jpg/gif）是需要先把图片编码再渲染 ，可以避免图片失真变形 ； 可以使用 webp 格式图片，这种格式要小一些（但要保证服务器端支持这种格式的请求处理） - 图片懒加载（延迟加载）技术 ； 第一次加载页面的时候不去请求真实的图片，将默认背景图替代真实图片进行加载，以提高第一次渲染页面的速度； 当页面加载完，把出现在用户视野区域中的图片做真实加载，没有出现在用户页面时的资源先不加载（可以节约流量，也能减少对服务器的请求压力）； 数据我们也尽可能分批加载（不要一次请求过多的数据，例如分页技术） - 音视频文件取消预加载（preload='none'），这样可以增加第一次渲染页面的速度，当需要播放的时候再加载 - 客户端和服务器端的数据传输尽可能基于 JSON 格式完成，XML 格式比 JSON 格式要大一些（还可以基于二进制编码或者文件流格式，这种格式比文件传输好很多） - 把页面中的 CSS/JS/图片等文件进行合并压缩：争取 CSS 和 JS 都只导入一个：基于 webpack 可以压缩

目录 jQuery jQuery介绍 jQuery的优势 jQuery内容： jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器： 基本筛选器： 属性选择器： 表单筛选器： 筛选器方法 操作标签 样式操作 位置操作 尺寸： 文本操作 属性操作 文档处理 事件 常用事件 事件绑定 移除事件 阻止后续事件执行 阻止事件冒泡 页面载入 与window.onload的区别 事件委托 动画效果 补充 each .data() 插件(了解即可) jQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持

目录 一、介绍 使用bootstrap的两种方式 二、使用 1. 全局 CSS 样式 2. 组件 一、介绍 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 下载地址： Bootstrap中文网 使用bootstrap的两种方式 下载后直接引用bootstrap的css和js文件 直接引用bootstrap的css和js文件： <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script> 二、使用 1. 全局 CSS 样式 设置全局 CSS 样式； 基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。 BootStrap全局 CSS 样式文档地址 ： https://v3.bootcss.com/css/ 具体使用方法请参考文档 2. 组件 包含无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。 BootStrap全局 CSS

Web前端性能优化，应该怎么做？ 0.5922019.08.09 19:17:36字数 890阅读 427 想要成为一名合格的Web前端工程师，Web前端性能优化是一个必须要掌握的知识，那么应该怎么进行Web前端性能优化呢？ 1、CSS精灵 CSS Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。 2、代码压缩 （1）将table改为div布局 尽量将table标签布局HTML重构div布局，可以节约至少40%的代码量。由于div代码少于table布局的HTML网页，所以搜索引擎索引权重也优于table布局的HTML网页。 （2）缩减精简div、span、ul、li等系列标签 布局DIV+CSS网页时候，有时候可以节约一些DIV布局代码，减少代码量。 （3）删除多余空格 删除多余空格换行，可以有效地压缩HTML代码占用字节，一般在开发完成后可以对HTML中代码进行删除换行和空格内容。 （4）表格类型布局时候适当使用table替代div布局 如果是本身是表格数据列表排版，我们最好选择table