‘壹’ 20个真实的web开发项目集合，一起来看看!(一)
项目一：PC端网站布局
所含知识点：HTML基础，CSS基础，CSS核心属性，CSS样式层叠，继承，盒模型，容器，溢出及元素类型，浏览器兼容与宽高自适度，定位，锚点与透明，图片整合，表格，CSS属性与滤镜。
项目二：HTML5+CSS3基础项目
所含知识点：HTML5新增的元素与属性，表单域增强元素，CSS3选择器，文字字体相关样式，CSS3位移与变形处理，CSS3 2D转换与过度动画，CSS3 3D转换与关键帧动画，弹性盒模型，媒体查询，响应式设计。
项目三：WebApp页面布局项目
所含知识点：移动端页面设计规范，移动端切图，文字流式/控件弹性/图片等比例/特殊设计的100%布局，等比缩放布局，viewport/meta，rem/vw的使用，flexbox详解，移动web特别样式处理(reset, 1px border, 高清图片)。
项目四：原生Java交互功能开发项目
所含知识点：基本语法，循环语句，函数与数组，String与Date，BOM与DOM，事件，拖拽效果，cookie存储，正则表达式，Ajax，面向对象基础，运动与游戏开发。
项目五：面向对象进阶与ES5/ES6应用项目
所含知识点：Promise/A+，设计模式(观察者模式等)，原型链，构造函数，执行上下文栈与执行上下文，变量对象与活动对象，作用域链，闭包，this，ES5，ES6。
以上就是环球青藤小编关于20个真实的web开发项目集合的相关内容分享，希望对各位小伙伴们有所帮助，想要了解更多相关知识，请关注本平台哦!
‘贰’ 开发一个web 项目的大概流程
1.
首先了解项目需求，形成项目需求文档
2.
根据web项目未来的运行方式和场景选择web运行服务器，数据库以及开发语言，还有支持的浏览器最低版本
3.
小型的web项目最好边开发边和用户交流，以尽可能满足用户需求
4.
大型的web项目最好能将需求让用户确认，便于未来需求修改时评估修改成本或以合适理由拒绝修改
5.
小型组网测试。小范围内测试web项目的功能和交互方式。
6.
压力测试。如果web项目的使用人数将来会非常大，可能要找工具对该项目进行压力测试。
7.
试运行。试运行也可和前期测试相结合。
8.
正式上线。
9.
后期维护。
‘叁’ 一个完整的web项目开发流程
1 需求确定
通过各种方法确定系统的功能与性能。
功能：注册、登录、查询、搜索。。。
性能：可同时支持N个并发访问，并且响应时间不低于M毫秒。。。
方法：
会议
询问
头脑风暴
原型-界面原型、业务原型。。。
本阶段是项目开发的最重要的阶段。
在WEB项目中，通常界面设计会在本阶段进行。
2 分析与设计
1 架构分析与设计
逻辑结构：
3层架构、多层架构。。。
MVC。。。
Model1或Model2
。。。
物理架构：
web服务器的分布
数据库服务器的分布
。。。
技术解决方法的确定：
Java/.net
Open Source/商业
。。。
2 业务逻辑分析
根据需求分析业务逻辑：
有哪些人使用本系统
他们会使用本系统做什么
通常他们使用本系统的步骤是怎么样的
会有哪些明显的类来支撑本系统的运行
会有哪些不同的提示会反馈给用户
。。。
本阶段与需求的确定密切相关，通常在确定需求的时候就会进行相关的分析。
3 业务逻辑设计
根据需求的分析来确定具体的类
确定类的属性
确定类的接口（方法）
确定类之间的关系
确定用户操作流程在设计上的反映
进行数据库的设计
注意：不同的项目步骤可能不尽相同
4 界面设计
设计系统的界面风格：
颜色、style
设计系统的具体“模拟”界面：
能够从头到尾
方便进行需求的确定
方便JSP程序员进行开发
。。。
3 开发环境搭建
开发工具的确定：
eclipse、Myeclipse。。。
配置管理工具的确定
测试工具的确定
文件服务器/配置服务器等的确定
。。。
4 开发-测试-开发-测试
按照设计进行开发
迅速开发原型
进行迭代开发
提早进行测试：
单元测试
黑盒测试
白盒测试
性能测试
易用性测试
。。。
5 编写文档
‘肆’ 如何把web项目放到网上
1.开发Web项目
创建WEB项目
开发完毕
本地部署
局域网通过IP访问WEB项目
Localhost访问WEB项目
2.网站所属要的条件
域名
服务器、虚拟主机
网站程序
3.域名
域名 ：
域名（Domain Name），是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置，地理上的域名，指代有行政自主权的一个地方区域）。域名是一个IP地址上有“面具” 。一个域名的目的是便于记忆和沟通的一组服务器的地址（网站，电子邮件，FTP等）。
域名解析：
域名解析是把域名指向网站空间IP，让人们通过注册的域名可以方便地访问到网站一种服务。IP地址是网络上标识站点的数字地址，为了方便记忆，采用域名来代替IP地址标识站点地址。域名解析就是域名到IP地址的转换过程。域名的解析工作由DNS服务器完成。
域名注册：
域名注册
域名注册是Internet中用于解决地址对应问题的一种方法。域名注册遵循先申请先注册原则，管理机构对申请人提出的域名是否违反了第三方的权利不进行任何实质审查。每个域名都是独一无二的，不可重复的。
4.虚拟主机
配置虚拟主机
项目部署到虚拟主机
5.把Web项目放到网上
服务器上配置虚拟主机
绑定域名
域名解析
部署项目
网站建设相关知识
服务器=pc
‘伍’ WEB项目是什么
是指后台采用Java语言SSH架构，前端采用Jquery脚本以及CssBluetrip框架，数据库使用PostgreSQL。
采用JavaSSH架构开发的系统，具有卓越的易用性、兼容性及安全性上，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。
在全球云计算和移动互联网的产业环境下，Java更具备了显着优势和广阔前景。
(5)web首饰项目扩展阅读
Web设计技术主要包括：HTML语言、Java Applets和脚本程序。
1）HTML语言。HTML是Hypertext Markup Language（超文本标记语言）的缩写，它是构成Web页面的主要工具。
2)Java Applets，即Java小应用程序。使用Java语言创建小应用程序，浏览器可以将Java Applets从服务器下载到浏览器，在浏览器所在的机器上运行。Java Applets可提供动画、音频和音乐等多媒体服务。
3)脚本程序。他是嵌入在HTML文档中的程序。使用脚本程序可以创建动态页面，大大提高交互性。用于编写脚本程序的语言主要有JavaScript和VBScript。JavaScript由Netscape公司开发，具有易于使用、变量类型灵活和无须编译等特点。
VBScript由Microsoft公司开发，与JavaScript一样，可用于设计交互的Web页面。
‘陆’ web的项目有哪些
有：Java Web(Java EE)、ASP.Net、PHP项目
‘柒’ 前端开发珠宝行业经验
前端简介
Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。
早期的前端其实就是Table布局，后来发展到所谓的Div + CSS网站重构，再到现在的让人眼花缭乱的各种各样的新技术，Web前端技术发展是非常快速的，因此选择了前端这个行业就意味着不停的学习吧。让我们先看看张克军绘制的前端知识体系结构：
前端开发的核心是HTML + CSS + JavaScript。本质上它们构成一个MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。
HTML
1. 标签的分类
1. 标签表示一个元素
2. 按性质划分: Block-Level和Inline-Level
3. 按语义划分:
Headings : h1, h2, h3, h4, h5, h6
Paragraphs : p
Text Formatting : em, strong, sub, del, ins, small
Lists : ul, li, ol, dl, dt, dd
Tables : table, thead, tbody, tr, th, td
Forms and Input : form, input, select, textarea
Others : div, span, a, img, <!---->
HTML5 : header, footer, article, section
2. XHTML
XHTML 于2000年的1月26日成为 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。XHTML 将逐渐取代 HTML。XHTML是通过把 HTML 和 XML 各自的长处加以结合形成的。XHTML 语法规则如下：
属性名和标签名称必须小写
属性值必须加引号
属性不能简写
用 Id 属性代替 name 属性
XHTML 元素必须被正确地嵌套
XHTML 元素必须被关闭
3. 标签的语义化
为表达语义而标记文档，而不是为了样式，结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义，即使是在老的浏览器，或是在被用户关闭了 CSS 的现代浏览器中。同时结构良好的HTML代码也有助于搜索引擎索引你的网站。
不要使用table布局，table是用来表格显示的。
不要到处滥用div标签，div是用来分块用的。
不要使用样式标签，如font, center, big, small, b, i，样式可以用CSS来控制，b和i可以用strong和em来代替。
不要使用换行标签<br />和空格来控制样式，请用CSS。
尽量不要使用内联CSS
CSS
1. CSS基础知识
层叠和继承
优先级
盒模型
定位
浮动
2. CSS进阶
CSS Sprite
浏览器兼容性
IE HasLayout和Block Format Content
CSS Frameworks
CSS3
CSS性能优化
LESS and SASS
CSS Sprite
CSS Sprite主要用于前端性能优化的一种技术，原理是通过将多张背景图片合成在一张图片上从而减少HTTP请求，加快载入速度。
浏览器兼容性
绝大部分情况下我们需要考虑浏览器的兼容性，目前正在使用的浏览器版本非常多，IE6, IE7, IE8, IE9, IE10, Chrome, Firefox, Safari。
IE HasLayout和Block Format Content
IE HasLayout是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。目前只有IE6和IE7有这个概率。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。这个其实和浏览器的兼容性有关，因为绝大部分的兼容性问题都是它们引起的。参考： CSS BFC和IE Haslayout介绍
CSS Framework
CSS框架是一系列CSS文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率。目前常见框架有：
960 Grid System
Blueprint CSS
Bluetrip
Minimum Page
还是一个比较出名和特殊的框架是Twitter的 Bootstrap 。Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。它是基于Less开发的。不支持IE6，在IE7和IE8里效果也不咋地。
CSS3
虽然CSS3还没有正式成为标准，但是包括IE9+, chrome, Firefox等现代浏览器都支持CSS3。CSS提供了好多以前需要用JavaScript和切图才能搞定的功能，目前主要功能有：
圆角
多背景
@font-face
动画与渐变
渐变色
Box阴影
RGBa-加入透明色
文字阴影
CSS性能优化
CSS 代码是控制页面显示样式与效果的最直接“工具”，但是在性能调优时他们通常被 Web 开发工程师所忽略，而事实上不规范的 CSS 会对页面渲染的效率有严重影响，尤其是对于结构复杂的 Web 2.0 页面，这种影响更是不可磨灭。所以，写出规范的、高性能的 CSS 代码会极大的提高应用程序的效率。参考 CSS性能优化探讨
LESS和SASS
LESS 和 SASS 都是 CSS 预处理器，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。
SASS 基于Ruby开发。 LESS 既可以在客户端运行，也可以借助Node.js或者Rhino在服务端运行。
‘捌’ web项目和Java项目的区别
Web项目是网页的编码，像jsp,servlet,struts这类的。
但是java项目的话，是AWT,SWING这类的编码。
最主要的区别是Web项目中的JAVA文件是tomcat来触发的，但是java项目里的是Main()来开始的。还有一点是Web项目需要服务器。
‘玖’ 什么是web项目
呵呵
web项目说白了就是做网站,网站属于web工程开发,
这儿指的一般是考虑服务器端编程的网站开发,比较正式的.真正的网站实现需要硬件和软件的支持,硬件比如服务器架构,软件比如操作系统及服务软件,web项目要做的是网站的核心部分--网页及数据库设计,这是一个网站的灵魂.
‘拾’ 20个真实的web开发项目集合，一起来看看!(二)
项目六：Java工具库自主研发项目
所含知识点：DOM库，事件库，AJAX库，原型和继承库，MVVM核心库，基于SPA的路由库。
项目七：jQuery经典交互特效开发
所含知识点：时间轴特效，tab页面切换效果，网页定位导航特效，滑动门特效，焦点图轮播特效，导航条菜单效果，瀑布流特效，弹出层效果，倒计时效果，抽奖效果。
项目八：PHP+MySQL后端基础项目
所含知识点：PHP，MySQL，HTTP(s)协议详解，Ajax进阶、跨域与Defered，Apache与Nginx 环境搭建与配置，接口的定义，Mock数据，Restful，前后端联调，前端安全(XSS,CSRF,JSON注入)。
项目九：前端工程化与模块化应用项目
所含知识点：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模块化。
项目十：PC端全栈开发项目
所含知识点：大首页、列表页与详情页展示与交互特效、搜索、登录与注册、购物车、jQueryUI 与 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平台系统前端。
以上就是环球青藤小编关于20个真实的web开发项目集合的相关内容分享，希望对各位小伙伴们有所帮助，想要了解更多相关知识，请关注本平台哦!