zoukankan      html  css  js  c++  java
  • Html,Css,JS

    内容总结: 

    css和html的四种结合方式

    1、   在每个html标签上都有一个属性style,把css和html结合在一起

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

    2、   使用html的一个标签实现<style>标签,写在head里面

    <style type=”text/css”>   css代码;</stype>

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

    3、在style标签里面  适用语句(在某些浏览器不能用)

    @import url(css文件路径);

    第一步   创建一个css文件 

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

    4、使用头标签   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标签里

    函数传参

  • 相关阅读:
    Turtlebot3 OpenCR 机器人端刷固件方案(包括ROS1和ROS2)
    TurtleBot3自动驾驶Noetic模拟仿真项目 1.准备工作
    OpenManipulatorX Gazebo仿真(Noetic)
    Ned
    OpenMANIPULATORX Melodic ROS包安装
    TurtleBot3自动驾驶Noetic6.模拟隧道
    Turtlebot3 Noetic ROS包安装
    WEB网站发布服务器IIS报错问题终极解决方案,查到问题点
    理解javascript中的连续赋值
    C# webBrowser.DocumentCompleted 解决之道
  • 原文地址:https://www.cnblogs.com/mzdljgz/p/10028631.html
Copyright © 2011-2022 走看看