CSS

掌握：看见css要懂，常见的样式要会写

HTML中嵌入CSS样式的第一种方式：内联定义

内联定义语法格式？

    <标签 style="样式名 : 样式值; 
          样式名 : 样式值; 
          样式名 : 样式值;">

</标签>

      **style：风格，样式。**
      任何一个HTML标签都可以指定style属性。

<body>
    <div id="div1" style="background-color : #CCCC33; 
              width : 300px; 
              height: 300px;
              position : absolute;
              top: 100px;
              left: 100px;
              border-style : solid;
              border-color : red;
              border-width : 1px;">
    </div>
  </body>

HTML中嵌入CSS样式的第二种方式：定义内部样式块对象

CSS中常见的选择器包括：最常用的三种选择器。

标签选择器

标签名 {}

作用于改类型的所有标签

id选择器

ID选择器
#id{} 只作用于id这个元素

class选择器

.class {} 样式作用于当前网页中某一类的标签
class属性，任何一个标签都有，class相同的，可以看做是同一类标签。

      div{ /* 作用于所有的div元素*/
        background-color: aqua;
        width: 100px;
        height: 100px;
        border-color: red;
        border-style: solid;
        border-width: 10px;
      }
      /* ID选择器
        #id{} 只作用于id这个元素
       */
      #username {
        width: 400px;
        height: 30px;
        border-color: black;
        border-style: solid;
        border-width: 1px;
      }
      /* 类选择器
        .class {} 样式作用于当前网页中某一类的标签
       */
      .student {
        font-size: 12px;
        color: #FF0000;
      }
    </style>
  </head>
  <body>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <br>
    <br>
    <br>
    <!-- 怎么才能让样式作用于某1个标签，可以使用id选择器 -->
    <input type="text" id="username" />
    <hr>
    <!-- class属性，任何一个标签都有，class相同的，可以看做是同一类标签。 -->
    <span class="student">文本内容span</span>
    <p class="student">文本内容：段落p标签</p>
    <br><br><br><br><br><br><br><br><br><br><br>
  </body>

HTML中嵌入CSS样式的第三种方式:链入外部样式表文件

<head>
    <meta charset="utf-8">
    <title>HTML中嵌入CSS样式的第三种方式:链入外部样式表文件</title>
    <!-- 引入外部独立的CSS样式表文件 -->
    <!-- 在web前端开发中，这种方式是最常用的！ -->
    <link rel="stylesheet" type="text/css" href="css/1.css"/>
  </head>

隐藏样式

<head>
    <meta charset="utf-8">
    <title>隐藏样式</title>
    <style type="text/css">
      #citysOfChina {
        display: none; /* 隐藏*/
      }
      input {
        display: block; /* 显示*/
      }
      ul {
        /* list-style-type: circle; */
        list-style-type: none;
      }
      ol {
        /* list-style-type: none; */
        list-style-type : upper-roman;
      }
    </style>
  </head>

文本装饰样式

<head>
    <meta charset="utf-8">
    <title>文本装饰样式</title>
    <style type="text/css">
      #baidu {
        text-decoration : underline;
        /* text-decoration : overline; */
        /* text-decoration : line-through; */
        /* text-decoration : blink; */
      }
      #baidu2 {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div id="baidu">百度</div>
    <a id="baidu2" href="http://www.baidu.com">百度</a>
  </body>

设置鼠标的悬停效果

:hover 是专门用来设置鼠标悬停效果的
:hover在使用的时候，这个冒号两边都是不允许有空格的

<head>
    <meta charset="utf-8">
    <title>设置鼠标的悬停效果</title>
    <style type="text/css">
      /* :hover 是专门用来设置鼠标悬停效果的 */
      span:hover {
        color: red;
        font-size: 20px;
      }
      /* 注意：:hover在使用的时候，这个冒号两边都是不允许有空格的。 */
      input:hover {
        border-color: black;
      }
    </style>
  </head>
  <body>
    <span>我是一个段落</span>   
    <span>我是一个段落</span>
    <input type="text" />
  </body>

内边距和外边距

<head>
    <meta charset="utf-8">
    <title>内边距和外边距</title>
    <style type="text/css">
      #div1 {
        width: 300px;
        height: 300px;
        background-color: #00FFFF;
        border: solid 1px red;
        /* 内补丁 */
        padding-left: 20px;
      }
      #div2 {
        width: 100px;
        height: 100px;
        background-color: black;
        border: solid 1px red;
        /* 在div2这个节点顶部top打一个补丁，这个补丁离top 10px */
        /* 外补丁 */
        margin-top : 10px;
      }
    </style>
  </head>
  <body>
    <!-- 盒子套盒子 -->
    <!-- 如果盒子套盒子，需要定位的话，可以使用外补丁和内补丁。 -->
    <div id="div1">
      <div id="div2">
      </div>
    </div>
  </body>

float浮动效果

<head>
    <meta charset="utf-8">
    <title>float浮动效果</title>
    <style type="text/css">
      img {
        float: right;
      }
    </style>
  </head>

定位样式

<head>
    <meta charset="utf-8">
    <title>定位样式position</title>
    <style type="text/css">
      #div1 {
        background-color: red;
        border: solid 1px black;
        width: 100px;
        height: 100px;
        /* 定位 */        
        position: absolute;
        top: 100px;
        left: 100px;
      }
      #baidu:hover {
        /* 变成小手 */
        cursor: pointer ; /* 尽量不要使用hand，有浏览器兼容问题！*/
        text-decoration: underline;
        color: blue;
      }
    </style>
  </head>

JAVAScript

HTML中嵌入JS代码的第一种方式：行间事件

笔记:
1、要实现的功能：
用户点击以下按钮，弹出消息框。

2、JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。

在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何
事件都会对应一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：
事件句柄是在事件单词前添加一个on。】，而事件句柄是以HTML标签的属性存在
的。

3、onclick="js代码"，执行原理是什么？
页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。

4、怎么使用JS代码弹出消息框？
在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
window对象有一个函数叫做:alert，用法是：window.alert("消息");这样就可以弹窗了。

5、JS中的字符串可以使用双引号，也可以使用单引号。

6、JS中的一条语句结束之后可以使用分号“;”，也可以不用。

7 事件和事件句柄的区别,多了一个on

画图理解:

代码:

<html>
  <head>
    <title>HTML中嵌入JS代码的第一种方式</title>
  </head>
  <body>
    <!--
    -->
    <input type="button" value="hello" onclick="window.alert('hello js')"/>
    <input type="button" value="hello" onclick='window.alert("hello jscode")'/>
    <input type="button" value="hello" onclick="window.alert('hello zhangsan')
                          window.alert('hello lis')
                          window.alert('hello wangwu')"/>
    <!-- window. 可以省略。-->
    <input type="button" value="hello" onclick="alert('hello zhangsan')
                          alert('hello lis')
                          alert('hello wangwu')"/>
    <input type="button" value="hello" onclick="alert('hello zhangsan');
                          alert('hello lis');
                          alert('hello wangwu');"/>
  </body>
</html>

在HTML中嵌入JS代码的第二种方式：脚本块的方式

<html>
  <head>
    <meta charset="utf-8">
    <title>在HTML中嵌入JS代码的第二种方式：脚本块的方式</title>
  </head>
  <body>
    <!-- 这个按钮会先被加载到浏览器内存。 -->
    <input type="button" value="按钮1" />
    <!-- 脚本块 -->
    <!-- 一个页面中脚本块可以出现多个！ -->
    <script type="text/javascript">
      /* 在这里直接编写JS代码，这些JS代码在页面打开的时候自上而下的顺序依次逐行执行！ */
      //alert("hello world"); // 单行注释
      alert("hello zhangsan");
      alert("hello lisi");
      /*
        多行注释
      */
    </script>
    <!-- 最后加载这个按钮2 -->
    <input type="button" value="按钮2" />
  </body>
</html>
<script type="text/javascript">
  alert("page end!")
</script>

在HTML中嵌入JS的第三种方式：引入外部独立的JS文件

<html>
  <head>
    <meta charset="utf-8">
    <title>在HTML中嵌入JS的第三种方式：引入外部独立的JS文件</title>
    <!-- 引入外部独立的CSS文件。这个标签link中属性是href -->
    <link rel="stylesheet" type="text/css" href=""/>
  </head>
  <body>
    <!-- 引入外部独立的js文件 -->
    <!-- script标签引入js文件的时候，是src属性，不是href。 -->
    <script type="text/javascript" src="js/1.js"></script>
    <!-- 引入第二次，这个操作没有意义，测试结果：只要引入一次JS文件，JS文件中的代码就会全部执行一遍 -->
    <script type="text/javascript" src="js/1.js"></script>
    <script type="text/javascript" src="js/1.js">
      //alert("hello world!~~~~~"); // 这里的代码不会执行！
    </script>
    <!-- 单独的脚本块 -->
    <script type="text/javascript">
      alert("hello world!%%%%%%%%");
    </script>
  </body>
</html>

关于前端的各种注释：

<html>
  <head>
    <meta charset="utf-8">
    <title>关于各种注释</title>
    <style type="text/css">
      /* CSS的注释 */
    </style>
  </head>
  <body>
    <!-- 这是HTML的注释 -->
    <script type="text/javascript">
      /* 这是javascript注释，多行 */
      // 这是javascript注释,单行
    </script>
  </body>
</html>

标识符和关键字

<html>
  <head>
    <meta charset="utf-8">
    <title>标识符和关键字</title>
  </head>
  <body>
    <script type="text/javascript">
      /* 标识符命名规则和命名规范按照java那一套来就行！ */
      /*
        以下这段代码是JS的for循环，找出其中的关键字和标识符？
          关键字：var、for
          标识符：i、alert
        标识符命名规则：
          标识符只能由数字、字母、下划线、美元符号组成，不能含有其它特殊符号
          标识符不能以数字开始
          标识符严格区分大小写
          关键字不能做标识符
          标识符理论上没有长度限制
        标识符命名规范？
          .....
      */
      for(var i = 0; i < 10; i++){
        alert("i = " + i)
      }
    </script>
  </body>
</html>

变量

<html>
  <head>
    <meta charset="utf-8">
    <title>JS的变量</title>
  </head>
  <body>
    <script type="text/javascript">
      /*
        回顾Java中的变量？
          怎么声明？
            int i;
            double d;
            String s;
          怎么赋值？
            i = 100;
            d = 3.14;
            s = "abc";
          一行上能声明多个变量吗？
            int a, b, c = 300;
            a b c都是int类型。
            a和b没有赋值。
            c赋值300
          重点：Java语言是一种强类型语言，有编译阶段，属于编译型语言。
            Java语言在编译阶段确定变量的数据类型，也就是说程序还没有
            运行呢，变量的数据类型就已经确定了，并且该变量的数据类型
            在这一生中，永远不可变。
              int x = 1200;【x = true; java的编译器会报错。不让这样做。语法不对！】
              double d = x; 
              这行代码表示x的变量中保存的值1200给d变量
              x变量还是int类型，d变量是double类型。一生不变。
        JS的变量？
          怎么声明？
            var 变量名;
            var i;
          怎么赋值？
            变量名 = 值;
            i = 100;
          一行上能声明多个变量吗？
            var a, b, c = 300;
            声明3个变量，a b c，并且c赋值300，其中a和b变量没有赋值，系统默认赋值undefined
            undefined 在JS中一个具体的值，这个值就是 undefined
          重点：JS语言是一种弱类型语言，没有编译阶段，直接浏览器打开解释执行，
          在JS中声明变量时不需要指定变量的数据类型，程序在运行过程当中，赋什么
          类型的值，变量就是什么数据类型，并且变量的数据类型是可变的。
            var i;
            i = 100; 到这里i是整数型
            i = false; 到这里i就是布尔类型了
            i = true;
            i = 3.14;
            i = new Object();
      */
       var i;
       alert(i) // 变量只声明没有赋值,系统默认赋值undefined, 在JS当中undefined是一个具体存在的值.
       var x = "undefined";
       alert(x) // "undefined"这个不是undefined,它是一个字符串.
       // 声明时,同时赋值
       var k = 100;
       alert(k + 1) // 101
       k = false;
       alert(k);
       k = "abc";
       alert(k)
       // 一行上可以声明多个变量
       //var是一个关键字,就是用来声明变量的,variables单词的前3个字母.
       var a, b, c = 100;
       alert(a) // undefined
       alert(b) // undefined
       alert(c) // 100
    </script>
  </body>
</html>

函数初步（一）

1.笔记：

      回顾Java中的方法：
        [修饰符列表] 返回值类型 方法名(形式参数列表){
          方法体;
        }
        例如：
          public static int sum(int a,int b){
            return a + b;
          }
      JavaScript当中的函数：
        函数定义的语法格式是什么？
          function 函数名(形式参数列表){
            函数体;
          }
          例如：
            function sum(a, b){
              return a + b;
            }
            函数名：sum
            形式参数列表是：a和b  (a和b都是变量名！)
        JS中的函数返回值类型是不需要指定的，因为可以返回任何类型的数据。没有限制。
      关于JS的的调试？
        首选方案是：alert()，在程序的某个位置先使用alert弹出某个变量的值，看看是否是你需要的。
        通过alert可以调试JS代码。
        另外一种方案是：采用浏览器自带的调试插件，F12
          F12这个插件中比较重要的面板：
            控制台
            查看器
            网络
            掌握以上三个面板！！！！！！！！！！！！

<html>
  <head>
    <meta charset="utf-8">
    <title>函数初步</title>
  </head>
  <body>
    <script type="text/javascript">
      //alert(122222);
      */
       /* function sum(a, b){
       } */
       // 函数必须调用才会执行.
       function sum(x, y){
         alert(x + "," + y);
         //alert("sum函数执行了！");
       }
       //这一切都是因为js是一门弱类型语言!
       sum("abc", false);
       // 调用sum函数
       sum();
       // 调用sum函数
       sum(1);
       // 调用sum函数
       sum(1,2);
       // 调用sum函数
       sum(1,2,3);
       /* JS的函数还有另一种声明方式？*/
       /* function mysum(a, b){
       } */
       //效果相同
       mysum = function(a, b){
         return a + b; //返回计算结果!
       }
       // 调用函数
       var result = mysum(10, 20);
       alert(result)
       //定义一个函数
       function sayHello(username){
         alert("欢迎" + username + "光临！")
       }
    </script>
    <!-- 在事件句柄当中调用sayHello函数 -->
    <input type="button" value="hello" onclick="sayHello('李四')" />
  </body>
</html>

HTML+CSS+JS（三）

CSS