当前位置首页 > 前端技术 > HTML> 正文

java搭建web平台都有什么框架？

2021-05-30 05:27:41 暂无评论 195 HTML 前端如何架构

web平台也可以理解为B/S(Brouser/Server)技术平台，是一种基于浏览器载体的框架，包含前端、后端和数据库三个大的方向，各个方向的技术都不一样，如果都懂的就是全栈了。现在主流的技术包含JAVA、.NET、SqlServer、Bootstrap等，学会了这些也就知道怎么去开发B/S项目了。Web前端开发技术包括三个要素：HTML、CSS和JavaScript，还有很多高级的前端框架，比如bootstrap、Jquery等，前端开发也是比较的复杂，如果找到规律，开发起来也比较的快。Web后端技术也有很多，比如.Net、JAVA、PHP等，各大语言都有其开发架构，像.NET的MVC架构，JAVA的Java EE，一般web后端技术的知识面是很广的，语言、设计模式、需求分析、性能优化等都要懂。数据库现在有三种主流的关系型数据库：Mysql\SQLserver\Oracle，还有Nosql等结构性数据库：Redis、Mogodb等。

前端页面如何构成与企业前端如何合理架构？

、CSS Reset

浏览器对标签有默认设置，这种设置是全局性的；不同浏览器设置的样式可能不同。浏览器的默认设置在很多情况下不需要，覆盖原来的设置增加额外的工作量。

CSS Reset清除默认样式，全局样式定义。

在项目初期把CSS Reset定好，引入时一定要在link第一位或其它CSS样式之前。

CSS Reset文件，根据项目需求调整。

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}

header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}

table{border-collapse:collapse;border-spacing:0;}

caption,th{text-align:left;font-weight:normal;}

html,body,fieldset,img,iframe,abbr{border:0;}

i,cite,em,var,address,dfn{font-style:normal;}

[hidefocus],summary{outline:0;}

li{list-style:none;}

h1,h2,h3,h4,h5,h6,small{font-size:100%;}

sup,sub{font-size:83%;}

pre,code,kbd,samp{font-family:inherit;}

q:before,q:after{content:none;}

textarea{overflow:auto;resize:none;}

label,summary{cursor:default;}

a,button{cursor:pointer;}

h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;}

del,ins,u,s,a,a:hover{text-decoration:none;}

body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,simsun;color:#333;outline:0;}

body{background:#fff;}

a,a:hover{color:#333;}

二、布局解决方案

1、居中布局

父元素和子元素的大小不确定。

</div>

body{font:30px/2 'microsoft yahei';}

.parent{background:#ddd;height:200px;width:300px;}

.child{background:#666;color:#fff;}

（1）水平居中

inline-block+text-align。兼容IE6,7需要通过display:inline; zoom:1;模拟inline-block。

.parent{text-align:center;}

.child{

display:inline-block;

text-align:left;/*需要额外代码修复center造成的问题*/

}

table+margin。兼容IE6,7需要把结构换为<table>。

.child{

display:table;/*像block，但宽度随内容变化*/

margin:0 auto;

}

absolute+transform。绝对定位脱离文档流，不会对其它元素产生影响。transform是CSS3新增内容，对IE6,7,8可能没法兼容，在高版本浏览器需要加前缀。

.parent{position:relative;}

.child{position:absolute;left:50%;transform:translateX(-50%);}

flex+justify-content。IE6,7,8可能没法兼容flex。

.parent{

display:flex;

justify-content:center; /*也可以在.child{margin:0 auto;}代替justify-content*/

}

（2）垂直居中

table-cell+vertical-align。兼容IE6,7需要把结构换为<table>。

.parent{

display:table-cell;/*单元格*/

vertical-align:middle;

}

absolute+transform。

.parent{position:relative;}

.child{position:absolute;top:50%;transform:translateY(-50%);}

flex+align-items。

.parent{display:flex;align-items:center;}

（3）居中

/*方案1：兼容性好*/

.parent{

text-align:center;

display:table-cell;

vertical-align:middle;

}

.child{

display:inline-block;

}

/*方案2*/

.parent{

position:relative;

}

.child{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

/*方案3*/

.parent{

display:flex;

justify-content:center;

align-items:center;

}

2、多列布局

（1）定宽与自适应

</div>

<p>right</p>

</div>

body{font:30px/1.5 'microsoft yahei';}

p{margin:0;padding:0;}

.parent{background:#ddd;color:#fff;}

.left p{background:#333;}

.right p{background:#999;}

.clearfix:after{content:'';clear:both;display:block;height:0;visibility:hidden;}

float+margin。

.left{float:left;width:100px;}

.right{margin-left:120px;}

float+margin+(fix)。

.left{float:left;width:100px;position:relative;}

.right-fix{float:right;width:100%;margin-left:-100px;}/*该div类包裹right*/

.right{margin-left:120px;}

float+overflow。

.left{float:left;width:100px;margin-right:20px;}

.right{overflow:hidden;}

table。

.parent{display:table;width:100%;table-layout:fixed;}

.left,.right{display:table-cell;}

.left{width:100px;padding-right:20px;}

flex。

.parent{display:flex;}

.left{width:100px;margin-right:20px;}

.right{flex:1;}

（2）不定宽与自适应

第一列可以是任意宽度，或由内容决定。第二列自适应。

float+overflow。IE6,7不支持。

.left{float:left;margin-right:20px;}

.right{overflow:hidden;}

.left p{width:200px;}/*left宽度由其内容决定*/

table。IE6,7不支持。

.parent{display:table;width:100%;}

.left,.right{display:table-cell;}

.left{width:0.1%;padding-right:20px;}/*设置1pxIE8有问题*/

.left p{width:200px;}/*根据内容设置宽度*/

flex。兼容性问题。

（3）等分

</div>

body{font:30px/1.5 'microsoft yahei';}

p{margin:0;padding:0;}

.parent{background:#ddd;color:#fff;}

.column p{background:#333;}

.clearfix:after{content:'';clear:both;display:block;height:0;visibility:hidden;}

float。IE6,7对float、百分比兼容性不好。百分比设置随列数需要变化。

.parent{margin-left:-20px;}

.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}

table。单元格不能设置maigin，可以设置padding。table默认总宽度随内容变化，需要设置width:100%;，因此在父元素外面再包裹一个parent-fix。table-layout:fixed;布局优先，如果单元格未设置宽度，则宽度平分。

.parent-fix{margin-left:-20px;}

.parent{display:table;width:100%;table-layout:fixed;}

.column{display:table-cell;padding-left:20px;}

flex。

.parent{display:flex;}

.column{flex:1;}

.column+.column{margin-left:20px;}

（4）等高

对于自适应布局，每一列要等高。

table每一行单元格等高，因此已经实现每一列等高。

flex中align-items对齐方式默认stretch，因此已经实现每一列等高。

float。兼容性好，但是是伪等高。

p{background:none!important;}

.left,.right{background:#444;}

.parent{overflow:hidden;}

.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}

.left{float:left;width:100px;margin-right:20px;}

.right{overflow:hidden;}

3、全屏布局

布局充满整个浏览器窗口，滚动条只出现在主内容区域。

（1）position

overflow:hidden;禁止滚动条。均相对于body定位，未设置relative。

position IE6不支持，Hack方案：http://nec.netease.com/library/141027。

<!DOCTYPE html>

<html>

<head>

<title>全屏布局-position</title>

<style>

html,body,.parent{height:100%;overflow:hidden;}

body{color:white;}

.top{

position:absolute;top:0;left:0;right:0;height:100px;

background:blue;

}

.left{

position:absolute;top:100px;bottom:50px;left:0;width:200px;

background:red;

}

.right{

position:absolute;overflow:auto;

top:100px;bottom:50px;left:200px;right:0;

background:pink;

}

.bottom{

position:absolute;bottom:0;left:0;right:0;height:50px;

background:black;

}

.right .inner{min-height:1000px;}

</style>

</head>

<body>

<div class="right"><div class="inner">right</div></div>

<div class="bottom">bottom</div>

</div>

</body>

</html>

（2）flex

IE9及以下不支持。

<!DOCTYPE html>

<html>

<head>

<style>

html,body,.parent{height:100%;overflow:hidden;}

body{color:white;}

.parent{display:flex;flex-direction:column;}

.top{height:100px;background:blue;}

.bottom{height:50px;background:black;}

.middle{flex:1;display:flex;}

.left{width:200px;background:red;}

.right{flex:1;background:pink;overflow:auto;}

.right .inner{min-height:1000px;}

</style>

</head>

<body>

<div class="right"><div class="inner">right</div></div>

</div>

<div class="bottom">bottom</div>

</div>

</body>

</html>

可以将position、flex的定宽定高设置为百分比，随浏览器大小的变化而变化。

如果需要定宽定高变为随内容变化，position不能实现，flex、grid可以实现。

方案

兼容性

性能

自适应

position

好

部分自适应

flex

较差

差

可自适应

grid

差

较好

可自适应

三、响应式

为了大小不同的设备都能正常访问网页，需要做一些变化，使内容能适应不同大小。响应式即一个网站能适应不同的设备，不需要定制不同的网站（www.163.com、wap.163.com），开发成本降低，但对于小屏幕有些内容不显示但仍加载，有资源上的冗余。

viewport：移动设备有一个虚拟的视窗（如宽度980px）显示网页，通过一定的比例等比缩小至屏幕宽度（如320px），使文字、图片等被缩小。需要设置viewport为设备宽度，初始缩放为1.0，防止用户手动缩放。

width=device-width

,initial-scale=1.0

,user-scalable=no

采用自适应布局。

媒体查询：宽度较小时，采用布局不同，或显示隐藏一部分。

@media screen and (max-width:320px){

/*视窗宽度<=320px*/

}

@media screen and (min-width:769px) and (max-width:1000px){

/*769px<=视窗宽度<=1000px*/

}

如2.2的定宽与自适应。

.left{float:left;width:100px;margin-right:20px;}

.right{overflow:hidden;}

@media screen and (max-width:320px){

.left{float:none;width:auto;margin-right:0;margin-bottom:20px;}

}

四、页面优化

页面优化是为了提高页面响应速度，对搜索引擎、屏幕阅读器友好，提高可读性和可维护性。

优化方法

备注

减少请求

图片合并

CSS文件合并

少量CSS样式内联

避免用@import引入CSS文件

多个@import请求是同步的

减少文件大小

选择合适的图片格式PNG、JPG

页面上有62%的内容来自图片

压缩图片

ImageOptim、ImageAlpha、JPEGmini等

CSS值缩写

值缩写会设置每个值，不一定要值缩写

省略值为0的单位

用0代替0px、0%，用.5代替0.5

颜色值最短表示

rgb->十六进制->三位十六进制

CSS选择器合并

合并属性相同的选择器

文件压缩去掉空格等

YUI Compressor、cssmin等

提升页面性能

加载顺序，CSS在<head>中，

js在<body>底部，

边解析html边渲染，

js等到页面加载完才处理

减少不必要标签数量

选择器长度

只要能选择到就不需要嵌套

避免使用耗性能属性

expression、filter、border-radius、

box-shadow、gradients

<img>设置宽高且不要缩放

方便浏览器对页面布局进行定位

所有表现用CSS实现

通过更换类名等，用js需要多次渲染

可读性和可维护性

规范

页面开发前制定，如缩进空格数、

变量名、文件名统一

语义化

标签、类名等

尽量避免Hack

模块化

复用性强且减少文件大小

注释

五、规范与模块化

1、规范

团队规范使团队成员间的代码交流更容易，方便开发和维护。

前四种规范与CSS相关，其它规范与html和图片相关。

文件规范

文件分类

通用类base,lib,ui,…

业务类album,artist,…

文件引入

行内样式，不推荐

外联引入

内联引入

文件本身

文件名，如由小写字母、数字、-组成

编码，UTF-8

注释规范

块状注释

统一缩进，在被注释对象之上，注释内容

单行注释

文字两端需空格（中文乱码），在被注释对象之上

行内注释

文字两端需空格，在分号之后

命名规范

分类命名

重名可能会导致样式污染

命名格式

建议小写，权衡长度和可读性

语义化命名

以内容语义命名，如导航nav而不是命名为top

书写规范

单行与多行

二选一，遵守之

空格与分号

缩进、规则内空格，保留最后一个属性值的分号

属性顺序

依据属性的重要性按顺序书写。

Hack方式

不滥用Hack，统一各浏览器的Hack方式

IE6 _property:value

IE6,7 *property:value

值格式

统一属性值，color,url()（无/单/双引号）

html规范

文档声明

如<!DOCTYPE html>，且首行顶格开始

闭合

闭合标签<div></div>

自闭合标签<input> or <input/>

属性

class=”logo” or class=’logo’

层级

用缩进（二/四个空格）体现层级，提高可读性

标签正确嵌套，但不宜太深

注释

注释开头注释结尾

大小写

标签和属性均小写，除了DOCTYPE

图片规范

文件名称

语义、长度

保留源文件

图片合并

尽可能使用sprite技术，可按模块、业务、页面划分

分类命名。

属性重要性。

Hack方式。

/* IE7显示#888，IE6显示#fff，其它浏览器显示#000 */

.m-list{color:#000;*color:#888;_color:#fff;}/*设置顺序不能变*/

2、模块化

模块指一系列相关联的结构组成的整体，带有一定语义，而非表现。如分页器、图片轮播。模块化利于多人协同开发，避免样式污染问题；便于扩展和重用；可读性、可维护性好。

以模块分类命名（如m-, md-）；以一个主选择器开头（唯一模块根节点）；使用以主选择器开头的后代选择器（模块子节点）。模块可扩展，增加一个模块名，原有样式仍有效。

<ul>

<li class="z-crt"><a href="#">index</a></li>

</ul>

</div>

/* 导航模块 */

.m-nav{}/* 模块容器 */

.m-nav li,.nav a{}

.m-nav li{}

.m-nav a{}

.m-nav .z-crt a{}/* 交互状态变化 */

<ul>

<li class="z-crt"><a href="#">index</a></li>

</ul>

<a class="btn">Login</a>

</div>

/* 导航模块扩展 */

.m-nav-1{}

.m-nav-1 a{border-radius:5px;}

.m-nav-1 .btn{}

前端学堂

java搭建web平台都有什么框架？

前端页面如何构成与企业前端如何合理架构？

猜你喜欢

最新文章

随机文章

热门文章

标签

关于本站

联系我

特别鸣谢