前端学习笔记

1.css简介
用来修饰html样式的一种语言，层叠样式表
增强复用性
方便后期维护
2.css样式引入方式：
(1)内嵌方式

   <div style="color:red"></div>

(2)内部样式:head里边

<style>
       div{color:red}
    </style>

(3)外部样式
创建一个.css文件

  div{color:red}

调用一个外部的css样式文件

   <link rel="stylesheet" type="text/css" href="style.css">
      rel:relation的缩写，引入的文件与html本身的关系，样式表
      type:告知浏览器这段代码需要解析
      href:需要引入的css的路径

特点:书写方便，复用性强，

3.css选择器
(1)基本选择器
优先级;id>class>元素
1)元素选择 h1{color:red;}d选择器

    #div1{}----<div id="div1">

3)类选择器

      .div1{}------<div class="div1">

(2)属性选择器

    <style>
      input[type="text"]{}
      imput[type="password"]{}
    </style>

(3)伪元素选择器

a标签的伪元素选择器
    静止时：a:link{color:black}
    悬浮时：a:hover{color:red}
    活动时：a:active{color:blue}
    完成时：a:visited{color:yellow}

(4)层级选择器
父选择器 子选择器{}
4.css的属性
(1)文字属性

font-size:字号
  font-family:字体类型

(2)文本属性

 color:颜色
  text-align:对齐方式
  text-decoration:下划线

(3)背景属性

 bckground-color:背景颜色
  background-image:背景图片   url("路径")
  background-repeat:平铺方式  默认x方向和y方向都平铺
    属性:repeat,no-repeat,repeat-x,repeat-y

(4)长度宽度属性

 width:
  height:

(5)列表属性

 list-style-type:列表项前的小标志
  list-style-image:列表项前的小图片  url("")

(6)显示属性

 display:是否让标签元素显示
  属性:none(消失),block(显示),inline(覆盖)

(7)浮动元素

div是行元素
  float:浮动方向   left,right

缺点：会对父元素和相邻元素没有设置浮动的 造成不可预测的后果
属性：clear:both /left/right 清除浮动

5.css的盒子模型

  border:盒子的边框
  padding:盒子内部的间隙
  margin:盒子外部与其他元素的间隙


  border:
  border-width:边框宽度
  border-style:边框的线型
  border-color:边框颜色

  padding
  padding:20px,50px  上下20 左右50
  padding:10 20 30 40  顺时针

二、JS
1.javascript是基于对象模型 和 事件驱动 的脚本语言，可以潜入到html中
特点：交互性 ：
安全性：js不能访问本地磁盘
跨平台性：所有的浏览器都内置js解析器
2.js作用？
可以动态的修改(增删)html及 css的代码
可以动态的校验数据
3.js的历史及组成？
组成：ECMAScript BOM(浏览器模型) DOM(文档对象模型)
4.js的引入方式
(1)内嵌脚本

     <input type="button" value="button" onclick="alert('x')">

(2)内部脚本

    <input id="btn" type="button" value="button">
     <script type="text/javascript">
    document.getElementById("btn").onclick = function(){
        alert("xxx");
        };
     </script>

(3)外部脚本创建一个.js文件 将js代码卸载其中，在Html 中使用<script>标签进行引入

     <input id="btn" type="button" value="button">
        window.onload = function(){
    document.getElementById("btn").onclick = function(){
            alert("xxx");
        };
    }

js代码写在哪都可以，在不影响html功能情况下 越晚越好。
5.js的基本语法
1）变量(弱类型)

     var x = 5;   var str = "hello";
      y = 5;

2）原始类型
number:数字
string:字符串
boolean:布尔类型
undefined:未定义
null:空———>object

类型转换

     number||boolean-->string:   toString();
      string-->number  :  parseInt("10");  parseFloat();

  强制转换：
  Boolean(value)

3)引用类型

    var obj = new Object();

4)引用类型
赋值：=、
判断：>、 <、 ==、>=、<=、!=或<>、===(全等，代表值与类型都一致)
算术：+、-、*、/、
逻辑：&&、||、！
void运算:
类型运算符:typeof:判断数据类型
instanceof：预测数据类型
5)逻辑语句

      if else:
      switch:
      for

     "10"+"20"=1020  进行连接
     "7"-"2"=5   其它的进行算术运算

三、js
1.js的内置对象
1）Number

    var myNum = new Number(value);
      var myNum = Number(value);
      toString():数字转换成字符串
      valueOf():返回一个Number对象的基本数字值

 2）Boolean

     var bool = new Boolean(value);  //object类型
       var bool = Boolean(value);
       toString():逻辑值转换为字符串,并返回结果
       valueOf():返回Boolean对象的原始值

 3）String
   属性：length
   方法:indexOf():检索字符串
    lastIndexOf():从后检索
        split():分割为字符串数组
        substring():提取两个指定索引号之间的字符
        substr():co索引号提取指定数目的字符