HTML&CSS学习总结+js学习总结（2）

                                                                                                                                                                       2019年5月18日

目录

 

1消除浮动

方法一：添加空标签

方法二：伪元素

方法三：父元素设置overflow:hidden

方法四：直接对父元素设置高度

2结构与变现

3菜单栏的设计制作

要点1：

要点2

3伪元素和伪类的区别

4js文档引入

5基本的交互方式

6改变HTML样式和内容的方法

7DOM事件

8js数据类型

其中几点使用注意：

数值转化

9js中的对象

---

1消除浮动

浮动的副作用：

1. 子元素如果均浮动，父元素将失去高度
2. 布局时，会对后边的布局造成影响

方法一：添加空标签

在最后一个元素的后边添加空标签，并给这个标签设置属性{clear:both}

注：关于clear:both | left | right的区别？

凡是可以用到clear:right，clear:left的地方都可用clear:both替换，原因是让自身不能和前边的浮动元素相邻，对后边的元素浮动与否无关，而float属性不是left就是right。暂且认为clear:both和clear:right,clear:left；效果一样

方法二：伪元素

父元素设置类名“clearfix”

样式表中，

.clearfix:after {

    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;

}

方法三：父元素设置overflow:hidden

为什么：

因为overflow属性相当于让父级紧贴内容，这样既可紧贴元素内容，又实现了清除浮动。

注：overflow的用处。

1. 清除浮动

2. 当父元素高度指定，父元素使用overflow:hidden,使子元素超出父元素的那部分隐藏。

方法四：直接对父元素设置高度

设置父元素的高度是最高子元素的高度。

2结构与变现

结构与样式相分离

拿到一个网页，如何实现结构，不应把重心放在样式上，而应放在HTML的结构语义化上。首先应关注里边文字内容，还有各模块之间的关系，重心是放在编写语义化的HTML代码上，而不是过多考虑设计中的布局样式。不要用元素的增加去实现样式效果，如1清除浮动中的方法一，就违背了结构与实现相分离的原则。

3菜单栏的设计制作

要点1：

• 用
  、
  • 的无序列表去创建
  • 如何实现将垂直菜单转化为水平菜单？给
  • 添加浮动

  li{
      float:center;
  }
  a{
      text-align:center;
  }

  • 在制作圆角菜单时，背景图片是贴在哪个标签上？标签

  或者设置border属性

  border-radius:10px;
  border-top-left-radius:10px;//顶部和左边的角是圆角显示

  • 在制作改变高度的伸缩菜单时，用什么技巧使高度向上延伸，而不是向下？想往某个方向移动，设置这个方向的margin为负值。
  • 文本缩进text-indent  VS  padding-left

  padding-left会改变元素的总宽度，即元素会撑大父元素的宽度，而缩进不会

  要点2

  • 定位中，不指定top、left和top=0、left=0是不同的
  • 行内块元素之间的间隙去除方法

  原因：代码的标签之间空格或者换行的存在

  （1）在HTML文档中，inline-block元素之间不换行。问题：代码不整洁，易读性差

  （2）inline-block元素不闭合

  （3）inline-block元素之间换行时，用注释代替

  （4）inline-block元素父级设置font-size=0；

  （5）设置margin-left的值

  （6）使用浮动（推荐）

  • 菜单栏中文字的居中、离边框有空隙的设置

  （1）

  li a{
      //垂直居中
      height:40px;
      line-height:40px;
      //水平居中
      text-align:center
      paddding:10px;
  }

  （2）视频上的写法

  li{
      float:left;
  }
  li a{
      display:block;
      line-height:40px;
      width:120px;
      height:40px;
      height:40px;
      text-align:center;
  }

  • 内联元素的文本排版中，可能用到的设置

  display:block;
  clear:both;
  //或者
  display:inline-block;

  3伪元素和伪类的区别

  https://www.cnblogs.com/ihardcoder/p/5294927.html

  简单的讲：伪类是为了选择其他 简单选择器（单纯的id选择器或者类选择器） 不能选择到的信息（或者说就是“伪类”所指的某个形态），如a:hover a:visited a:link等等。

  

  伪元素是指能 创造了一个 抽象的元素，这个元素在DOM的语言之外。如befor，after等等。

  

  4js文档引入

  • 内部引入
  • 外部引入

  注意：与css文件的外部引入方式区别

  css的引入方式：

  • 引入的设置

  js代码可以放在html文件的恩和位置，但是放在哪个位置，浏览器在解析这块时就会停止渲染，并开始执行代码。所以如果涉及元素的操作，应该在html文档加载完后再执行js代码，这时要么将js代码放在body部分的最后，要么将js代码抱在一个window.onload的函数中。

  5基本的交互方式

  • document.write(str) 在文档中打印

  • alert(str);  弹出提示窗口，窗口内容为str

  • var a = confirm(str);  弹出含str内容的窗口，并含有“是否”的选项，是则返回true，否则返回false

  • var b = prompt(str1,str2);  str1是将在消息对话框中显示的内容，不可修改，str2是文本框中默认的内容，可修改，点击确认后，将文本框内的内容返回到b中，取消则返回null

  6改变HTML样式和内容的方法

  1. 使用   obj.style.property  修改样式，实际上，这等价于在行内设置元素的样式(行内引入css样式)，它的优先级仅次于   !important

  注：这里的obj只能是一个元素对象，通过getElementsByClassName或者getElementsByTagName获取的是元素对象的数组，即使只获取一个也是一个数组的对象（长度为1），所以设置是一定要写下标，否则会出错。

       2.  使用   obj.style.cssText = "backgroundcolor:black; display:block;.....";与1类似，但可以一次设置多种样式

       3.  修改元素的类名实现样式修改，即设置两个不同类名下的样式表，然后通过以下的js语句实现切换

  obj.className="style2";
  obj.setAttribute("class", "style2");

  注：obj. className而不是obj.class因为，class是js的保留字

      4.  通过更改外部引入方式下的css文件，从而改变样式

  
  
  //js代码
  window.onload = function(){
      var hf = document.getElementById("css");
      hf.href = "css2.css";
      //或者
      //hf.setAttribute("href", "css2.css");
  }

     5.  修改内容

  • 通过innerHTML修改HTML内容
  • 通过node.nodeValue修改一个文本节点的值

  7DOM事件

  DOM是一种API(应用编程接口)，w3c退出的标准化DOM可以让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一份文档进行操控。

  如果想把DOM技巧运用到web浏览器找以外的应用环境中，严格遵守“第1级DOM”能让你避免与兼容有关的任何问题。

  • 添加事件

  //使用HTML时间属性（不推荐），行为与结构分离原则
  点击
  //使DOM分配事件，js代码中
  document.getElementById("id1").onlick = function(){
      //.....事件处理
  }
  //使用addEventListener监听器
  //IE
  obj.attachListener("onlick", method);
  //FF
  obj.addEventListener("onlick", methos);

  • 事件传递方式（针对addListener(event,method,useCapture)）
  1. 冒泡，内部元素会先触发;其中useCapture=false;也即默认useCapture参数缺省情况下的设置
  2. 捕获，外部元素的事件会先触发；useCapture=ture；
  • 移出事件

  // 向 
   元素添加事件句柄
  document.getElementById("myDIV").addEventListener("mousemove", myFunction);
  
  // 移除 
   元素的事件句柄
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
  

  • 去除默认行为
  1. 为a标签href设置 href="javascript:void(0)";
  2. 在onclik事件处理函数的最后增加一句，return false;  表示“这个链接没有被点击”，只执行了前面设置的事件，而不执行默认事件
  • DOM中三种结点
  1. 元素节点（element node），nodeType的属性值是1
  2. 文本节点（text node），nodeType的属性值是2
  3. 属性节点（attribute node），nodeType的属性值是3

  注意：DOM和BOM的区别

  BOM的操作重点和核心：对浏览器进行操控，BOM是用于操作浏览器的API，BOM对象是JavaScript对于BOM接口的实现

  DOM是w3c定义的一套用于处理HTML和XML文档内容的标准API，javascript对DOM接口的实现即DOM对象

  BOM对象主要是对浏览器相关属性进行操作，在js中对应的顶级对象是window，DOM顶级对象是document，document对象属于window对象，所以可以认为DOM是BOM的一部分。

  

  8js数据类型

  js中有6数据类型：5中基本数据类型：undefined、null、number、string、boolean；1中引用数据类型：object。

  其中几点使用注意：

  1. typeof null; 返回的是object
  2. 在使用var声明变量，但是未对其初始化，或者没有声明，这个变量的typeof 返回值都是undefined
  3. undefined == null 的返回值是true，这时因为undefined值派生自null
  4. boolean(参数)；参数是空字符串、0、NaN、null、undefined返回值都是false；
  5. 简单数据类型的存储空间是固定的，而且保存在较小内存下的栈中，引用数据类型保存在较大内存下的堆中，栈中只存放这个引用变量在堆中的地址，好比是个指针。
  6. 浮点数值。永远不要测试某个特定的浮点值
  7. NaN与任何数值都不想等，本身也不相等。当本来要返回数值却返回数值的情况；任何数值除以非数值会返回NaN;typeof NaN会返回Number

  数值转化

  （1）其他类型转化为String()

  • 方法一：调用对象的toString()

  只适用于String、Number、Boolean类型的转化，null、undefined这两个值没有toString()方法，调用会出错

  • 方法二：String()函数

  当（）内的参数是String、Number、Boolean类型，实际上是调用了toString()方法，当（）参数是null、undefined类型，就不会调用toString方法，只会null->"null"，undefined->"undefined"

  （2）其他类型转化为Number类型

  • 方法一：使用Number()函数
  1. 当参数是String类型时。如果是纯数字，直接转出；如果字符串有非数字内容，则返回NaN；如果字符串是空的或者全是空格，则返回0.
  2. 当参数是布尔型。true->1;false->0;
  3. null->0
  4. undefined->NaN
  • 方法二：parseInt()、parseInt()函数——只对准String类型的转化
  1. parseInt()可将字符串有效整数序列读出，只读出从左边起的数字
  2. parseFloat()方式与parseInt()类似，不同的是获得的是有效的小数部分
  3. parseInt("abs");这种参数没有数字，返回NaN

  注：如果参数不是String类型，则会将其先转化为字符串，然后在做相关操作。

  9js中的对象

  三种对象：内建对象、由ECMAScript实现提供的，独立于宿主环境的所有对象，如Array、Math、Date、Number、Boolean；宿主对象：由ECMAScript提供的、宿主环境提供的对象，所有BOM和DOM对象都是宿主对象。如console、document。

  • 对象属性的使用

  对象.属性名     或者     对象["属性名"]；这两种方式，后者更为灵活，原因有二：其一，“”  引号内可以是特殊的属性名标识符，而不必强制遵守标识符的规范，其二，[]  可以传递一个变量，这样可以动态地访问对象的属性。如，

  var obj = new Object();
  obj["name"] = "zsk";
  obj["1st"] = 12;
  var n = "1st";
  obj[n]  //返回12，如果n="name"，则返回"zsk"

  再如，for-in遍历对象的属性名和属性值

  var obj = {
  		name: "zsk",
  		age: 19,
  		sex: "男"
  	};
  	for (pro in obj) {
  		console.log(pro+":"+obj[pro]);
  	}

  同时，判断一个对象中是否含有指定对象

  if("name" in obj){
  		alert("yes");
  	}

  • 判断对象是否相等

  var obj = {
  		name: "zsk",
  		age: 19,
  		sex: "男"
  	};
  var obj1 = {
  		name: "zsk",
  		age: 19,
  		sex: "男"
  	};
  	if (obj == obj1) {
  		alert("yes");
  	}
  	else {
  		alert("no");
  	}

  弹出的是“no”，如果两个对象的内容一模一样，但是地址不同，也会返回false。

  如何判断两个对象的内容是否相同？

  • 对象字面量

  var obj1 = {
  		name: "zsk",
  		age: 19,
  		sex: "男"
  	};

  1. 键值对
  2. 属性名和属性以：隔开
  3. 多个键值对之间用，隔开
  4. 最后一个键值对之后什么都不要加
  5. 所有键值对包含在一个大括号{}内，大括号之后最好加一个；表示是一个语句
  6. 如果是方法

  var obj1 = {
  		name: "zsk",
  		age: 19,
  		sex: "男"
          run: function(){
              console.log("run");
          }
  	};

  • 函数

  函数也是对象，一起都是对象

  函数对象的特点：函数中可以封装一些功能（代码），使用typeof 检查一个函数对象时，返回的是function；封装函数中的代码不立即执行，而是在函数调用的时候执行。函数对象具有一般对象的多具有的功能。

  • 创建函数的方法

  function fun1(){
      //函数体
  }
  fun1();
  var fun2 = function(){
      //函数体
  }

  • 函数参数

  参数可以是任何类型（包括一个函数），任何数量。

  当实参数量大于形参数量，多余的实参将不会被赋值

  当实参数量小于形参数量，没有对应实参的形参将是undefined 

  • 函数的返回值

  函数的返回值也可以是任何类型（包括函数对象），闭包的实现