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标签里

 

函数传参