Html,Css,JS

內容總結： 

css和html的四種結合方式

一、   在每一個html標籤上都有一個屬性style，把css和html結合在一塊兒

<div style=」background-color:red;color:green;」>

二、   使用html的一個標籤實現<style>標籤，寫在head裏面

<style type=」text/css」>   css代碼;</stype>

例如：<style type=」text/css」>  div{    background-color:red;  color:red;}  </stype>

三、在style標籤裏面  適用語句（在某些瀏覽器不能用）

@import url(css文件路徑);

第一步   建立一個css文件 

<style type=」text/css」>     @import url(div.css);  </style>

四、使用頭標籤   link  引入外部css文件

第一步   建立一個  css文件

<link rel=」stylesheet」 type=」text/css」 href=」css」文件的路徑/>

 

第三種結合方式  缺點：在某些瀏覽器下不起做用

優先級（通常狀況下）

                  由上到下，由外到內，優先級由高到低

                  後加載優先級高

格式：選擇器名稱{屬性名：屬性值；屬性名：屬性值;…}

 

Css的基本選擇器:

標籤選擇器  div{css 代碼;}

Class選擇器（類選擇器）    .名稱{}

Id選擇器   #名稱{}

Css的擴展選擇器（瞭解）

關聯選擇器:嵌套標籤的樣式的設置

組合選擇器：不一樣標籤設置的相一樣式

僞元素選擇器：   a標籤的狀態

Css裏面提供了一些定義好的樣式，能夠直接拿過來用

例如超連接狀態

原始狀態        鼠標放上去的狀態    點擊        點擊後

:link                :hover            :active       :visited

   記憶方法：     lv  ha

 

Css的盒子模型

*邊框:border   上下左右              

*內邊距：padding   上下左右

*外邊距：margin   上下左右

漂浮：float:left   right       定位：position:absolute     relative

 

Javascript

          *****什麼是javascript   基於對象和事件驅動的語言，應用與客戶端。

特色：交互性    安全性   跨平臺性   

Javascript  和java區別

組成（三部分）

*EAScript

*bom

*dom

 

**Js和html的結合方式（兩種）

第一種：<script  type=」text/javascript」>js代碼</script>

第二種：<script  type=」text/javascript」 src=」js的路徑」>

**Js數據類型

*五種原始類型   string  number    boolean   null   undefined

*定義變量的使用：var

**Js語句  *if    *switch     *for  while   do-while

**Js的運算符   字符穿的操做：   *相加：鏈接   *相減：執行相減運算

*Boolean類型相加：true:1     false:0     *==和===的區別  ==判斷值 ; ===判斷值和類型

**Js的數組：    三種的定義方式  ** var  arr = {1,2,」3」};   **var arr = new Array(9);//長度9

**var arr = new Array{1,2,3};   //元素是1,2,3     屬性：length：數組的長度

** js的函數    

**  function add(z,b){方法體和返回值;};

**  var add = function(m,n){方法體和返回值;}

** var add = new Function(「a,b」,」方法體和返回值」);        ******不要忘記調用，否則不起做用

**js的全局變量和局部變量

**script標籤的位置

**重載

 

JS事件20181127

鼠標移入的事件onmouseover  =」alter(‘aaaa’)」;

鼠標移出的事件  onmouseout = 「」;     相似

Id  在  JS  有更普遍的做用

Onmouseout = 「div1 .style.display = ‘none’」      .點至關於中文的」的」   最簡單的js效果

 

兼容寫法

document.getElementById

onmouseover = 「document.get.ElementById(‘div1’).style.display = ‘block’」   經過id獲取元素

 

function  函數名（）{

}

變量的使用   別名

定義和調用

script type="text/javascript">

         function show() {  //定義

                  alert("hello");

         }

         show();  //調用

</script>

  任何標籤均可以加ID 包括link

任何標籤的任何屬性，也均可以修改

HTML怎麼寫   JS就怎麼寫  Class除外  是JS的關鍵字        需寫成className例外

 

 

<script type="text/javascript">

         function setText(){

                  var oTxt =        document.getElementById('txt1');

                  oTxt.value = '馬總好';

                  oTxt.title = '馬總好';  //提示文字

         }

</script>

If

 

<script type="text/javascript">

         function showHide(){

                  var oDiv = document.getElementById('div1');

                  if(oDiv.style.display=='block'){

                          oDiv.style.display = 'none';

                  }else{

                          oDiv.style.display = 'block';

                  }

         }

</script>

 

<input type="button" name="" value="顯示隱藏" onclick="showHide()">

             <div id="div1"></div>

 

爲超連接加JS   <a href="javascript:alert('hello')">連接</a>    //儘可能別放在a標籤裏

 

函數傳參