JAVA WEB前端入门和总结

来源：互联网发布：壳氏唯切菜板知乎编辑：程序博客网时间：2024/05/21 14:45

自WEB推出服务器模式后，web从未熄火，本文为新入门小白总结。

开发WEB应用前端，HTML+CSS+JS。

平台：myeclipse。

编写html文件的软件：sublime text3。

HTML，一堆文本标签，但以一个网页的经验来看，大部分都是通过div+css的属性构造出大块的框架后，进行编写css类。在实践中获取的经验，通过开发者工具直接修改属性，可以方便观看修改后的结果。

html的结构大致为：

<!DOCTYPE html>

<html>

<head>

<styletype=”text/css”></style>

<head>

<body>

</body>

</html>

在head中style定义需要的css样式，通用的情况下可以放入外部文件*.css。

script中定义需要的js函数，浏览器默认为javascript，构造动态的网页。*.js。

html比较容易，重要的是理解各个标签所包含的css属性。

css也可以包含几个动态的效果，如hover就是鼠标移动到上面之后，更改表现的属性，如：

.head-nav:hover{

text-decoration:none;

color:#ff9d00;

height:65px;

border-bottom:3px solid #ff9d00;

}

代表class=”head-nav”的元素的hover事件，更复杂的事件（触发、激发）应该由js来处理。

JavaScript

js也比较容易，但要注意var声明后的变量是局部变量，在块{}内为他的生命周期，而任意位置的不声明变量都是全局变量，直到网页关闭为止。

js中比较重要的是jQuery，他的一个库，可以在微软和谷歌在线获取，或者是下载后访问服务器获取，如果在线获取有一个好处是一般服务器内都有缓存，可以提高速度，不必从服务器中读取。

jQuery的作用就是快速生成十分牛逼的动画效果，真的是非常容易学习，但没有艺术家头脑还是不行，谁能想到进度条竟然是背景图片加solid的一个颜色，可以通过控制颜色占父块宽度的百分比来控制进度，可能我天生没有艺术细胞吧。透明度缓缓变化，翻来覆去的界面效果，jQuery都可以实现，稍后进行学习HTML5，youtube中的播放视频部分采用html5的新标签。

$(document).ready(function(){

$("#nav-ulli").click(function()

{

$("#main-img").animate({opacity:0.4},200,function(){$("#main-img").attr('src','./res/site3.jpeg').animate({opacity: 1}), 200});

$(this).attr("class","active");

});

$("button").click(function()

{

$("p").hide();

});

会制作网页后，总想看看别人的优秀界面是怎么做的，只要点击审查元素，基本就能了解个大概布局，console中也包含各个公司的hr邮箱。前端让生活更精彩。

JS无法快速地进行科学运算，更好的是用python，但你可以通过js控制所有访问的浏览器进行分布式运算。

广为人知的json也是js中表示数据的方法：

var person={firstname:"Bill", lastname:"Gates", id:5566};

我们可以通过person[firstname]得到Bill，很像是python中的字典，C++中的map，但他表示简单，在网络中省流量，广为流传。

还有值得注意的地方就是JS中的数据类型和逻辑运算比较诡异

x==”5”是true，但x===”5”是false。单引号，双引号均可，脚本都这样吗?

另，语句需要分号；

具体的学习还是要在各个网站或是书上学习，有些事不写出来不痛快，23:30，码农的深夜时间,

自WEB推出服务器模式后，web从未熄火。

开发WEB应用前端，HTML+CSS+JS。

平台：myeclipse。

编写html文件的软件：sublime text3。

html的结构大致为：

<!DOCTYPE html>

<html>

<head>

<styletype=”text/css”></style>

<head>

<body>

</body>

</html>

在head中style定义需要的css样式，通用的情况下可以放入外部文件*.css。

script中定义需要的js函数，浏览器默认为javascript，构造动态的网页。*.js。

html比较容易，重要的是理解各个标签所包含的css属性。

css也可以包含几个动态的效果，如hover就是鼠标移动到上面之后，更改表现的属性，如：

.head-nav:hover{

text-decoration:none;

color:#ff9d00;

height:65px;

border-bottom:3px solid #ff9d00;

}

代表class=”head-nav”的元素的hover事件，更复杂的事件（触发、激发）应该由js来处理。

JavaScript

js也比较容易，但要注意var声明后的变量是局部变量，在块{}内为他的生命周期，而任意位置的不声明变量都是全局变量，直到网页关闭为止。

$(document).ready(function(){

$("#nav-ulli").click(function()

{

$("#main-img").animate({opacity:0.4},200,function(){$("#main-img").attr('src','./res/site3.jpeg').animate({opacity: 1}), 200});

$(this).attr("class","active");

});

$("button").click(function()

{

$("p").hide();

});

JS无法快速地进行科学运算，更好的是用python，但你可以通过js控制所有访问的浏览器进行分布式运算。

广为人知的json也是js中表示数据的方法：

var person={firstname:"Bill", lastname:"Gates", id:5566};

我们可以通过person[firstname]得到Bill，很像是python中的字典，C++中的map，但他表示简单，在网络中省流量，广为流传。

还有值得注意的地方就是JS中的数据类型和逻辑运算比较诡异

x==”5”是true，但x===”5”是false。单引号，双引号均可，脚本都这样吗?

另，语句需要分号；

具体的学习还是要在各个网站或是书上学习，有些事不写出来不痛快，23:30，码农的深夜时间,

0 0