@w460461339
2016-11-16T07:26:10.000000Z
字数 7129
阅读 934
JAVA_Web
今天学的是CSS和JavaScript。呃,说实话,这两门都不算是一门语言吧,算是HTML的扩展。因为HTML之前的写法是在太那个蛋疼了,利用这两种方式来写就比较方便~~
css: 层叠样式表
** 层叠:一层一层的
** 样式表:
很多的属性和属性值
在说运用前,先介绍下大致的格式,基本格式是这样的:
属性:设置内容;属性:设置内容;……
即,利用冒号来设置属性的值,利用分号来将其隔开。
一共有四种结合方式:
<html>
<head>
<title>HTML EXAMPLE</title>
<!--第二种方法,在头标签中,利用<style></style>包住-->
<!--并像如下的方式进行撰写-->
<style type="text/css">
div.way2{
background-color:blue;
color:yellow;
}
</style>
<!--第三种方法,在头标签中,利用<style></style>包住-->
<!--并实现撰写好.css文件,.css文件的内容和格式与方法二中style内部的一样-->
<!--之后利用@import将该.css文件加载即可-->
<style>
@import url(div22.css);
</style>
<!--第四种方法,在头标签中,不用style围着-->
<!--需要实现写好.css文件-->
<!--直接用link标签,rel中写stylesheet,表示样式表-->
<!--type和前面方法一样,href写.css文件的地址-->
<link rel="stylesheet" type="text/css" href="div2_.css"/>
</head>
<body>
<!--第一种方法,直接在div后面的style属性里面写-->
<div style="background-color:red;color:green;" class="way1">
<h1>6666</h1>
</div>
<div class="way2">
<h1>7777</h1>
</div>
<div class="way3">
<h1>8888</h1>
</div>
<div class="way4">
<h1>9999</h1>
</div>
</body>
</html>
嘛,之前看到的div.class就是一种选择器。选择器是用来解决如下问题的:
当程序中有多段内容都是用<div></div>包裹起来的,且需要显示不同的效果时,就用需要利用选择器,来选择不同的div块来显示不同的效果。
<html>
<head>
<title>HTML EXAMPLE</title>
<style type="text/css">
/*CSS中的注释方式*/
/*这是第一种选择器,标签选择器,可以将不同标签的模块区分*/
/*比如这里就将div和pre区分开了*/
div{
background-color:blue;
color:yellow;
}
/*这是第二种选择器,类选择器,用以将同标签不同内容的块区分*/
/*用 . 来进行连接*/
div.way2{
background-color:yellow;
color:blue;
}
/*这是类选择器第二种用法*/
/*当块的标签不同但类相同时,直接写.classname,可以将这些类统一设置*/
.way2{
background-color:yellow;
color:blue;
}
/*这是第三种选择器,ID选择器*/
/*除了使用#而非.隔开外,其他用法,包括不同标签同ID名的用法*/
/*都与类选择器一样*/
div#NO4{
background-color:red;
color:#ff00ff;
}
</style>
</head>
<body>
<div>
<h1>6666</h1>
</div>
<pre>
<h1>7777</h1>
</pre>
<div class="way2" >
<h1>8888</h1>
</div>
<pre class="way2">
<h1>88888</h1>
</pre>
<div id="No4">
<h1>9999</h1>
</div>
</body>
</html>
扩展标签
<html>
<head>
<title>HTML EXAMPLE</title>
<style type="text/css">
/*关联选择器,设置相同标签下的不同子标签的格式*/
/*利用空格来区分层级*/
div p{
background-color:yellow;
color:blue;
}
div pre{
background-color:gray;
color:#ff0000;
}
/*关联选择器,用来将同级的两个不同标签设置为相同格式*/
div,p{
background-color:red;
color:blue;
}
/*另外还有伪标签,这里就不写了*/
</style>
</head>
<body>
<div>
<p>6666</p>
<pre>7777</pre>
</div>
<p>
88888
</p>
</body>
</html
另外,各级标签的优先级:
style(就是第一种结合方式) > id > class > 标签
<html>
<head>
<title>HTML EXAMPLE</title>
<style type="text/css">
div{
/*设置边框长宽*/
width:300;
height:400;
/*设置边框粗细 样式 颜色*/
border:4px dashed black;
/*设置文字左上角到边框左边以及顶部的距离*/
/*可用padding-top,padding-left等单独设置*/
padding:100;
/*设置整个框的左上角到页面左边以及顶部的距离*/
/*可用margin-top,margin-left等单独设置*/
margin:200;
}
</style>
</head>
<body>
<div>
<h1>6666</h1>
</div>
</body>
</html>
先讲漂浮吧,看下来感觉漂浮也没什么用, 就是把让目标文本 流向后面内容的左边/右边.
这个效果不是很好描述,自己看看吧~~
<html>
<head>
<title>HTML EXAMPLE</title>
<style type="text/css">
div{
width:100;
height:75;
border:2px solid yellow;
}
#div1{
float:left;
}
#div2{
float:left;
}
</style>
</head>
<body>
<div id="div1">
<h1>6666</h1>
</div>
<div id="div2">
<h1>7777</h1>
</div>
<div id="div3">
<h1>8888</h1>
</div>
</body>
</html>
定位:
<html>
<head>
<title>HTML EXAMPLE</title>
<style type="text/css">
div{
width:100;
height:75;
border:2px solid black;
}
/*position后面跟absolute或者relative都是移动块的方式*/
/*只是利用absolute,后面的内容会自动补位*/
/*而利用relative则不会*/
/*不要忘了之后利用top或者left等确定位置*/
#div2{
background-color:orange;
position:absolute;
left:120px;
top:200px;
}
#div3{
background-color:blue;
position:relative;
left:220px;
top:60px;
}
</style>
</head>
<body>
<div id="div1">
<h1>6666</h1>
</div>
<div id="div2">
<h1>7777</h1>
</div>
<div id="div3">
<h1>8888</h1>
</div>
<div id="div4">
<h1>9999</h1>
</div>
</body>
</html>
* 是基于对象和事件驱动的语言,应用与客户端。
- 基于对象:
** 提供好了很多对象,可以直接拿过来使用
- 事件驱动:
** html做网站静态效果,javascript动态效果
- 客户端:专门指的是浏览器
* js的特点
(1)交互性
- 信息的动态交互
(2)安全性
- js不能访问本地磁盘的文件
(3)跨平台性
- java里面跨平台性,虚拟机
- 只有能够支持js的浏览器,都可以运行
* javascript和java的区别(雷锋和雷峰塔)
(1)java是sun公司,现在oracle;js是网景公司
(2)JavaScript 是基于对象的,java是面向对象
(3)java是强类型的语言,js是弱类型的语言
- 比如java里面 int i = "10";
- js: var i = 10; var m = "10";
(4)JavaScript只需解析就可以执行,而java需要先编译成字节码文件,再执行。
* javascript的组成(下面js)
三部分组成
(1)ECMAScript
- ECMA : 欧洲计算机协会
- 有ECMA组织制定的js的语法,语句.....
(2)BOM
- broswer object model: 浏览器对象模型
(3)DOM
- document object model:文档对象模型
嘛,就像之前的CSS一样,JavaScript要和HTML接合在一起才有用
<html>
<head>
<title>HTML EXAMPLE</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
<!--javascript的代码放在哪里都可以,一般放在最后,防止块在javascript之后出现-->
<script type="text/javascript">
//这是注释
</script>
<!-- 在src里面写JavaScript文件路径
即为第二种方法
<script src="">
</script>
-->
原始类型有五种:
string(字符串) number(数字) boolean(布尔) null(对象引用) undefined(未定义)
定义时,都用关键字 var
<html>
<head>
<title>HTML EXAMPLE</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var str="Hello world";
//这样不合法,必须要引号
//var str2=hello;
//需要注意字符串与数字类型的相加为向后添加数字;
//相减则将字符转为数字再减
//加了引号都是string类型
var num="11";
//这个才是数字类型
var num2=22;
//同上,这个才是boolean,加引号都是string
var bol=true;
var bol2="false";
//另外两个不演示了
//弹框用以显示内容
alert(typeof(bol));
</script>
另外在这里顺便把数组的定义方式说了
第一种: var arr = [1,2,3]; var arr = [1,"4",true];
第二种:使用内置对象 Array对象
var arr1 = new Array(5); //定义一个数组,数组的长度是5
arr1[0] = "1";
第三种:使用内置对象 Array
var arr2 = new Array(3,4,5); //定义一个数组,数组里面的元素是3 4 5
介绍三种语句:
if
switch
循环
<html>
<head>
<title>HTML EXAMPLE</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var i=5;
if(i<6){
//这个想说的是,js里面true=1,false=0;
alert((i<6)==1);
alert("i"+"<"+6);
}
//这里想说的是,js里面switch可以判断字符串的
var j="b";
switch(j){
case "a":alert("hello");break;
case "b":alert("world");break;
default:break;
}
for(var m=5;m>=0;m--){
alert(m);
}
//while一样的,就不写了
</script>
呃,其实就是科普一些小知识:
<html>
<head>
<title>HTML EXAMPLE</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//表明不区分整数和小数
document.write(123/1000*1000);
//用引号(单引号双引号都行)就可以写HTML代码了
document.write("<hr/>");
//打印出来时aaa1
document.write("aaa"+1);
document.write("<hr/>");
//打印是4
document.write("5"-1);
document.write("<hr/>");
//打印是NaN,表示非数字
document.write("h"-1);
document.write("<hr/>");
//打印是true,表示==值比较值(内容)
document.write("1"==1);
document.write("<hr/>");
//打印是false,表示===比较值和类型
document.write("1"===1)
</script>
<html>
<head>
<title>HTML EXAMPLE</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var i=1;
var j=1;
//非表格版
for(;i<=9;i++){
j=1;
for(;j<=i;j++){
document.write(i+"*"+j+"="+i*j);
document.write(" ");
}
document.write("<br/>");
}
document.write("<hr/>");
//表格版
i=1;
j=1;
document.write("<table border='5' cellspacing='0' bordercolor='red'>");
for(;i<=9;i++){
j=1;
document.write("<tr>")
for(;j<=i;j++){
document.write("<td>")
document.write(i+"*"+j+"="+i*j);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
<html>
<head>
<title>HTML EXAMPLE</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//方式一
function sum(a,b){
var result=a+b;
return result;
}
alert(sum(5,6));
//方式二,创建匿名函数,最后给函数起名为sum2
var sum2=function(a,b,c){
var result=a+b+c;
return result;
}
alert(sum2(4,5,6));
//方式三 更麻烦的匿名函数,最后给函数起名为add
var add = new Function("a,b","var result=a*b;return result;");
alert(add(2,3));
</script>
** 全局变量:在script标签里面定义一个变量,这个变量在页面中js部分都可以使用
- 在方法外部使用,在方法内部使用,在另外一个script标签使用
** 局部变量:在方法内部定义一个变量,只能在方法内部使用
- 如果在方法的外部调用这个变量,提示出错
- SCRIPT5009: “nn”未定义
12-js的局部变量.html, 行18 字符3
** ie自带了一个调试工具,ie8及其以上的版本中,键盘上 F12,在页面下方出现一个条
实验知,JavaScript里面没有重载的~