[关闭]
@w460461339 2016-11-16T07:26:10.000000Z 字数 7129 阅读 938

Web学习Day2(CSS & JavaScript)

JAVA_Web


今天学的是CSS和JavaScript。呃,说实话,这两门都不算是一门语言吧,算是HTML的扩展。因为HTML之前的写法是在太那个蛋疼了,利用这两种方式来写就比较方便~~

1、CSS

1.1 CSS简介
1.2 CSS在HTML中的运用

在说运用前,先介绍下大致的格式,基本格式是这样的:

属性:设置内容;属性:设置内容;……

即,利用冒号来设置属性的值,利用分号来将其隔开。

1.2.1 如何在CSS中用HTML

一共有四种结合方式:

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <!--第二种方法,在头标签中,利用<style></style>包住-->
  5. <!--并像如下的方式进行撰写-->
  6. <style type="text/css">
  7. div.way2{
  8. background-color:blue;
  9. color:yellow;
  10. }
  11. </style>
  12. <!--第三种方法,在头标签中,利用<style></style>包住-->
  13. <!--并实现撰写好.css文件,.css文件的内容和格式与方法二中style内部的一样-->
  14. <!--之后利用@import将该.css文件加载即可-->
  15. <style>
  16. @import url(div22.css);
  17. </style>
  18. <!--第四种方法,在头标签中,不用style围着-->
  19. <!--需要实现写好.css文件-->
  20. <!--直接用link标签,rel中写stylesheet,表示样式表-->
  21. <!--type和前面方法一样,href写.css文件的地址-->
  22. <link rel="stylesheet" type="text/css" href="div2_.css"/>
  23. </head>
  24. <body>
  25. <!--第一种方法,直接在div后面的style属性里面写-->
  26. <div style="background-color:red;color:green;" class="way1">
  27. <h1>6666</h1>
  28. </div>
  29. <div class="way2">
  30. <h1>7777</h1>
  31. </div>
  32. <div class="way3">
  33. <h1>8888</h1>
  34. </div>
  35. <div class="way4">
  36. <h1>9999</h1>
  37. </div>
  38. </body>
  39. </html>
1.2.2 css基本选择器

嘛,之前看到的div.class就是一种选择器。选择器是用来解决如下问题的:

当程序中有多段内容都是用<div></div>包裹起来的,且需要显示不同的效果时,就用需要利用选择器,来选择不同的div块来显示不同的效果。
  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. /*CSS中的注释方式*/
  6. /*这是第一种选择器,标签选择器,可以将不同标签的模块区分*/
  7. /*比如这里就将div和pre区分开了*/
  8. div{
  9. background-color:blue;
  10. color:yellow;
  11. }
  12. /*这是第二种选择器,类选择器,用以将同标签不同内容的块区分*/
  13. /*用 . 来进行连接*/
  14. div.way2{
  15. background-color:yellow;
  16. color:blue;
  17. }
  18. /*这是类选择器第二种用法*/
  19. /*当块的标签不同但类相同时,直接写.classname,可以将这些类统一设置*/
  20. .way2{
  21. background-color:yellow;
  22. color:blue;
  23. }
  24. /*这是第三种选择器,ID选择器*/
  25. /*除了使用#而非.隔开外,其他用法,包括不同标签同ID名的用法*/
  26. /*都与类选择器一样*/
  27. div#NO4{
  28. background-color:red;
  29. color:#ff00ff;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div>
  35. <h1>6666</h1>
  36. </div>
  37. <pre>
  38. <h1>7777</h1>
  39. </pre>
  40. <div class="way2" >
  41. <h1>8888</h1>
  42. </div>
  43. <pre class="way2">
  44. <h1>88888</h1>
  45. </pre>
  46. <div id="No4">
  47. <h1>9999</h1>
  48. </div>
  49. </body>
  50. </html>

扩展标签

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. /*关联选择器,设置相同标签下的不同子标签的格式*/
  6. /*利用空格来区分层级*/
  7. div p{
  8. background-color:yellow;
  9. color:blue;
  10. }
  11. div pre{
  12. background-color:gray;
  13. color:#ff0000;
  14. }
  15. /*关联选择器,用来将同级的两个不同标签设置为相同格式*/
  16. div,p{
  17. background-color:red;
  18. color:blue;
  19. }
  20. /*另外还有伪标签,这里就不写了*/
  21. </style>
  22. </head>
  23. <body>
  24. <div>
  25. <p>6666</p>
  26. <pre>7777</pre>
  27. </div>
  28. <p>
  29. 88888
  30. </p>
  31. </body>
  32. </html

另外,各级标签的优先级:

style(就是第一种结合方式) > id > class > 标签
1.2.3 CSS盒子模型
  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. div{
  6. /*设置边框长宽*/
  7. width:300;
  8. height:400;
  9. /*设置边框粗细 样式 颜色*/
  10. border:4px dashed black;
  11. /*设置文字左上角到边框左边以及顶部的距离*/
  12. /*可用padding-top,padding-left等单独设置*/
  13. padding:100;
  14. /*设置整个框的左上角到页面左边以及顶部的距离*/
  15. /*可用margin-top,margin-left等单独设置*/
  16. margin:200;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div>
  22. <h1>6666</h1>
  23. </div>
  24. </body>
  25. </html>
1.2.4 css的漂浮以及定位

先讲漂浮吧,看下来感觉漂浮也没什么用, 就是把让目标文本 流向后面内容的左边/右边.
这个效果不是很好描述,自己看看吧~~

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. div{
  6. width:100;
  7. height:75;
  8. border:2px solid yellow;
  9. }
  10. #div1{
  11. float:left;
  12. }
  13. #div2{
  14. float:left;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="div1">
  20. <h1>6666</h1>
  21. </div>
  22. <div id="div2">
  23. <h1>7777</h1>
  24. </div>
  25. <div id="div3">
  26. <h1>8888</h1>
  27. </div>
  28. </body>
  29. </html>

定位:

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. div{
  6. width:100;
  7. height:75;
  8. border:2px solid black;
  9. }
  10. /*position后面跟absolute或者relative都是移动块的方式*/
  11. /*只是利用absolute,后面的内容会自动补位*/
  12. /*而利用relative则不会*/
  13. /*不要忘了之后利用top或者left等确定位置*/
  14. #div2{
  15. background-color:orange;
  16. position:absolute;
  17. left:120px;
  18. top:200px;
  19. }
  20. #div3{
  21. background-color:blue;
  22. position:relative;
  23. left:220px;
  24. top:60px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div id="div1">
  30. <h1>6666</h1>
  31. </div>
  32. <div id="div2">
  33. <h1>7777</h1>
  34. </div>
  35. <div id="div3">
  36. <h1>8888</h1>
  37. </div>
  38. <div id="div4">
  39. <h1>9999</h1>
  40. </div>
  41. </body>
  42. </html>

2、JavaScript

2.1 JavaScript简介
* 是基于对象和事件驱动的语言,应用与客户端。
    - 基于对象:
        ** 提供好了很多对象,可以直接拿过来使用
    - 事件驱动:
        ** 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:文档对象模型
2.2 JavaScript和HTML接合的方式

嘛,就像之前的CSS一样,JavaScript要和HTML接合在一起才有用

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. </style>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <!--javascript的代码放在哪里都可以,一般放在最后,防止块在javascript之后出现-->
  11. <script type="text/javascript">
  12. //这是注释
  13. </script>
  14. <!-- 在src里面写JavaScript文件路径
  15. 即为第二种方法
  16. <script src="">
  17. </script>
  18. -->
2.3 JavaScript原始类型和声明变量方法

原始类型有五种:

string(字符串) number(数字) boolean(布尔) null(对象引用) undefined(未定义)

定义时,都用关键字 var

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. </style>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <script type="text/javascript">
  11. var str="Hello world";
  12. //这样不合法,必须要引号
  13. //var str2=hello;
  14. //需要注意字符串与数字类型的相加为向后添加数字;
  15. //相减则将字符转为数字再减
  16. //加了引号都是string类型
  17. var num="11";
  18. //这个才是数字类型
  19. var num2=22;
  20. //同上,这个才是boolean,加引号都是string
  21. var bol=true;
  22. var bol2="false";
  23. //另外两个不演示了
  24. //弹框用以显示内容
  25. alert(typeof(bol));
  26. </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 
2.4 JavaScript语句

介绍三种语句:

if
switch
循环
  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. </style>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <script type="text/javascript">
  11. var i=5;
  12. if(i<6){
  13. //这个想说的是,js里面true=1,false=0;
  14. alert((i<6)==1);
  15. alert("i"+"<"+6);
  16. }
  17. //这里想说的是,js里面switch可以判断字符串的
  18. var j="b";
  19. switch(j){
  20. case "a":alert("hello");break;
  21. case "b":alert("world");break;
  22. default:break;
  23. }
  24. for(var m=5;m>=0;m--){
  25. alert(m);
  26. }
  27. //while一样的,就不写了
  28. </script>
2.5 JavaScript运算符

呃,其实就是科普一些小知识:

  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. </style>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <script type="text/javascript">
  11. //表明不区分整数和小数
  12. document.write(123/1000*1000);
  13. //用引号(单引号双引号都行)就可以写HTML代码了
  14. document.write("<hr/>");
  15. //打印出来时aaa1
  16. document.write("aaa"+1);
  17. document.write("<hr/>");
  18. //打印是4
  19. document.write("5"-1);
  20. document.write("<hr/>");
  21. //打印是NaN,表示非数字
  22. document.write("h"-1);
  23. document.write("<hr/>");
  24. //打印是true,表示==值比较值(内容)
  25. document.write("1"==1);
  26. document.write("<hr/>");
  27. //打印是false,表示===比较值和类型
  28. document.write("1"===1)
  29. </script>
2.6 JavaScript 99乘法表
  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. </style>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <script type="text/javascript">
  11. var i=1;
  12. var j=1;
  13. //非表格版
  14. for(;i<=9;i++){
  15. j=1;
  16. for(;j<=i;j++){
  17. document.write(i+"*"+j+"="+i*j);
  18. document.write("&nbsp");
  19. }
  20. document.write("<br/>");
  21. }
  22. document.write("<hr/>");
  23. //表格版
  24. i=1;
  25. j=1;
  26. document.write("<table border='5' cellspacing='0' bordercolor='red'>");
  27. for(;i<=9;i++){
  28. j=1;
  29. document.write("<tr>")
  30. for(;j<=i;j++){
  31. document.write("<td>")
  32. document.write(i+"*"+j+"="+i*j);
  33. document.write("</td>");
  34. }
  35. document.write("</tr>");
  36. }
  37. document.write("</table>");
  38. </script>
2.7 JavaScript里面函数
  1. <html>
  2. <head>
  3. <title>HTML EXAMPLE</title>
  4. <style type="text/css">
  5. </style>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <script type="text/javascript">
  11. //方式一
  12. function sum(a,b){
  13. var result=a+b;
  14. return result;
  15. }
  16. alert(sum(5,6));
  17. //方式二,创建匿名函数,最后给函数起名为sum2
  18. var sum2=function(a,b,c){
  19. var result=a+b+c;
  20. return result;
  21. }
  22. alert(sum2(4,5,6));
  23. //方式三 更麻烦的匿名函数,最后给函数起名为add
  24. var add = new Function("a,b","var result=a*b;return result;");
  25. alert(add(2,3));
  26. </script>
2.8 JavaScript全局/局部变量
** 全局变量:在script标签里面定义一个变量,这个变量在页面中js部分都可以使用
    - 在方法外部使用,在方法内部使用,在另外一个script标签使用

** 局部变量:在方法内部定义一个变量,只能在方法内部使用
    - 如果在方法的外部调用这个变量,提示出错
    - SCRIPT5009: “nn”未定义 
    12-js的局部变量.html, 行18 字符3

** ie自带了一个调试工具,ie8及其以上的版本中,键盘上 F12,在页面下方出现一个条
2.9 JavaScript的重载

实验知,JavaScript里面没有重载的~

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注