JAVAWEB-CSS和JS的基本用法

1.css和html的四种结合方式

(1)在每个html标签上面都有一个属性style，把css和html结合在一起
<div class="" style="background-color:red;color:green;">

(2)使用html的一个标签实现<style>标签，写在head里
<style type="text/css">
css代码;
</style>
<style type="text/css">
div{
background-color:blue;
color: red;
}
</style>

(3)在style标签里面 使用语句
@import url(css文件的路径);
-第一步:创建一个css文件
-第二部：引入css文件
<style type="text/css">
@import "div.css";
</style>
Warning: faultly
在某些浏览器下不起作用。一般使用第四种方式。

(4)使用头标签link，来引入外部文件(css)
-第一步:创建一个css文件
-第二部：引入css文件
在头标签里头写。
<link rel="stylesheet" href="div.css" media="screen" title="no title" charset="utf-8">

CSS优先级:
由上到下，由外到内，优先级由低到高。(后加载的优先级高)
格式:
选择器名称{
属性名1:属性值;
属性名2:属性值;
属性名3:属性值;
}

2.css基本选择器

要对哪个标签里面的数据进行操作
(1)标签选择器
*使用标签名作为选择器的名称
div{
background-color: blue;
color: white;
}

(2)class选择器
*每个html标签都有一个属性class
<div class="lion">666</div>
div.lion{
background-color: red;
}
如果是 .lion =>无论是什么标签只要class=”lion” 那么都是相同属性

(3)id选择器
*每个html标签上面有一个属性 id
-<div id="yinxin"></div>
div#yinxin{
background-color: gray;
}
p#yinxin{
background-color: gray;
}
#yinxin{
background-color: green;
}
id="yinxin"的所有标签 背景颜色都是green.
这三个选择器的优先级
class选择器优先级大于标签选择器
标签style属性 > id > class > 标签(选择器)
<p style="background-color:red;">

3.css的扩展选择器（了解）

(1)关联选择器
*<div><p></p></div>
*设置div标签里面p标签的样式,嵌套标签里面的样式
div p{
background-color: green;
}

(2)组合选择器
*<div>111</div>
   <p>222</p>
*把div和p标签设置成相同的样式,把不同的标签设置成相同的样式
  <style media="screen">
    div,p{
      background-color: orange;
    }
  </style>

(3)伪元素选择器
*CSS里面提供一些定义好的样式，可以拿来使用
*比如 超链接
超链接状态:原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited

4.盒子模型（了解）

在进行布局前需要把数据封装到一块一块的区域内(div)
-1.边框 border
-2.内边距
-3.外边距

 边框
  border:统一设置
  上 border-top
  下 border-bottom
  左 border-left
  右 border-right
    border: 2px solid blue;   大小 样式 颜色

内边距
  文本内容距离div四条边的距离
  padding:统一设置
  上 padding-top
  下 padding-bottom
  左 padding-left
  右 padding-right
  基本语法: padding: length;

 外边距
  margin:统一设置
  上 margin-top
  下 margin-bottom
  左 margin-left
  右 margin-right
  基本语法: margin: auto | length;

5.布局的漂浮（了解）
属性值
经测试不好用!
float:
left:文本流向对象的右边
right:文本流向对象的左边

6.布局的定位（了解）
position:
属性值
-absolute 将对象从文档流中拖出
可以是top、bottom等属性进行定位
-relative 对象不可重叠
不会把对象从文档流中拖出
可以使用top、bottom等属性进行定位

7.javascript简介
*javascript是基于对象和事件驱动的脚本语言，应用于客户端。
-基于对象:提供好了很多对象，可以直接拿来用
-事件驱动:html做网站静态，javascript动态效果
-客户端:专门指的是浏览器;
*javascript的特点
-1 交互性
信息的动态交互
-2 安全性
js不能访问本地磁盘的文件
-3 跨平台性
java里面的跨平台性-虚拟机
只有能够支持js的浏览器，都可以允许
*javascript和java的区别
没关系-跟雷锋和雷峰塔一样、、没关系
(1)js是基于对象，java是面向对象
(2)java是强类型语言，js是弱类型语言
js: var a = “123”; var b = 123;
(3)js只需解析即可运行,java要先编译成字节码再执行

*js的组成(三部分组成)
(1)ECMAscript
-ECMA(组织):欧洲计算机协会
它制定js的语法,语句
(2)BOM
-broswer object model:浏览器对象模型
(3)DOM
-document object model:文档对象模型

2.js和html的结合方式
第一种
-使用一个标签

      <script type="text/javascript">
       js代码;
      </script>

第二种
-使用script标签,引入一个外部的js文件
**创建一个js文件,写js代码

     <script type="text/javascript" src="first.js">

      </script>

使用第二种方式的时候,就不要在标签里写其他代码(不会执行的);

8.js的原始声明和声明变量
*java的基本数据类型 byte short int long float double char boolean
*定义变量 都使用关键字 var
*js的原始类型(5个)
-string 字符串
var str = “abc”;
-number 数字类型
var m = 123;
-boolean true和false
var flag = true;
-null
var date = new Date();
表示获取对象的引用,null表示对象引用为空,所有对象的引用也是object
-undefined
定义一个变量,但没有赋值
var a;

typeof运算符,可查看变量类型。

9.js的语句
-java语句
-if
-switch
-for
-while / do while

-js语句
-if判断语句(和java相同)
-switch语句(所有类型都支持)

    switch(a)
      {
        case 5:
                break;
        case 6:
                break;
        default:
      }

-循环语句 for / while / do while

    //while循环
        var i =5;
        while (i>1) {
          alert(i);
          i--;
        }
     // for循环
      for(var i = 0; i < 3; i++)
      alert(i);

  *直接向页面输出的语句(可以把内容显示在页面上)
  document.write("aaa");
  document.write("<hr/>");
  可以向页面输出变量,固定值和html代码
  document.write里面是双引号,如果设置标签的属性需要使用单引号

10.js的数组
java里面数组的定义 int []arr = {1,2,3};
js数组的定义方式:
(1)var arr = [1,2,3];
var arr = [1,”4”,true];
(2)var arr = new Array(5); //定义一个数组,数组长度是5
arr[0] = “1”;
(3)使用内置对象Array
var arr = new Array(3,4,5);//定义一个数组,数组里面的元素是3,4,5
*数组里有一个属性 length:获取到数组的长度

11.js的函数
*java里面定义方法
public 返回类型 void / int 方法名(参数列表){
方法体;
返回值;
}
public int add(int a,int b)
{
int sum = a + b;
return sum;
}

  **js定义函数
  -函数参数列表不需要写var,直接写参数名称即可。
  (1)使用关键字 function
      function 方法名(参数列表){
        方法体;
        //返回值可有可无(根据实际需要)
      }
      <script type="text/javascript">
         function text() {
           alert("QQ");
         }
         //调用方法
         text();
         //定义一个有参数的方法
         function add(a,b) {
           var sum = a + b;
           alert(sum);
         }
         add(2,3);
         function add1(a,b,c){
           var sum = a+b+c;
           return sum;
         }
         alert(add1(1,2,3));
      </script>
  (2)匿名函数
    var add = function(参数列表){
      方法体和返回值;
    }
  (3)使用js里面内置对象Function(很少用)
    var 名称 = new Function("参数列表","方法体和返回值");
    var add = new Function("x,y","var sum;sum=x+y;return sum;");

12.js的全局变量和局部变量
*全局变量,在script标签里面定义一个变量,这个变量在页面中js部分都可以使用
*局部变量,在方法内部定义一个变量,只能在方法内部使用

13.script放置的位置
建议*把script标签放到</body>后面
需求:
在js里面需要获取到input里面的值,如果script标签放到head里面会出现问题
html解析是从上到下的,script标签放到的是head里面,直接在里面取input里面的值,因为页面还没解析到input那一行,肯定取不到;