一、网页练习知识点小总结

在看视频的过程中整理了一些小细节的东西，有需要的朋友可以看一下。

1.首先在打开的网页中的小图标一般的是这么做的

<link rel="shortcut icon" href="/favicon.icon" />

2.清除浮动的方法

   a.单伪元素清除浮动

    浮动元素的父元素调用clearfix类。

.clearfix:after{
  content:"";
  height:0;
  visibility:hidden;
  overflow:hidden;
  display:block;
  clear:both;
}
.claerfix{
  *zoom:1;/*兼容ie*/   
}

 b.双伪元素标签发

.clearfix:befor,.clearfix:after{
  content:"";
  display:table;
}
.clearfix:after{
  clear:both;
}
.clearfix{
  zoom:1;
}

3.什么时候使用margin和padding.

 a.需要使用背景图的时候必须用padding.

 b.会出现外边距合并或者margin塌陷的时候用padding.

 c.行内元素只能设置padding,不能设置margin.

 d.看需求.

4.隐藏盒子问题

  a.overflow:hidden;隐藏超出盒子的部分

  b.display:none;隐藏不占位

  c.visibility:hidden;隐藏占位

  d.opacity:0;隐藏占位

  e.position/top/left:-999px;隐藏占位

5.js关闭a链接的跳转

  <a href="javascript:;">链接</a>

 <a href="javascript:void(0)">链接</a>

6.权重问题

  a. left比right权重高，两者同时有的时候就执行left;

  b.top比bottom权重高，两者同时有的时候就执行top.

7.opacity:0.4的缺点是里面的内容也会半透明，可以使用background:rgba(0,0,0,.3).

8.行内元素尽量不要使用font来设置行高。

9.在做ul列表时，给每个li都加上边框就会出现上边li的下边框和下边li的上边框重合的情况，边框变为2px可以通过下面方法解决。

li{
  border:1px solid #fff;
  margin-top:-1px;
 }
li:hover{
  position:relation;
  z-index:2; 
}

10.不熟悉的表单事件

    oninput 用户输入内容时触发，可用于移动端输入字数统计

    oninvalid 验证不通过时触发

11.html5的setCustomeValidity讲解

 <form name="test" action="return false" method="post">
    <input id="number" type="text"  required pattern="^\d{4,11}$" placeholder="请输入4-11位数字" οninput="check(this,'格式不正确，请重新输入')"
    />
        <button type="submit">测试</button>
    </form>
    <script>
        //通过setCustomerValidity方法来自定义提示信息，更准确的提示给用户
        function check(i,tip){
            if(i.validity.patternMismatch === true){
                i.setCustomValidity(tip);
            }else{
                i.setCustomValidity("");
            }
        }
    </script>

所以只有validity下的属性值（除valid外）都为false并validationMessage为空时才算验证通过。

12.一些禁止选中，复制，粘贴的操作，来源于https://blog.csdn.net/qq_32786873/article/details/52325940

   a.禁止选中：onselectstart="return  false"

  b.禁止复制：οncοpy="return  false"

  c.禁止粘贴：οnpaste="return  false"

  d.禁止粘贴：oncut="return  false"

  e.禁止拷贝：οncοpy="document.selection.empty()"

  f.禁止鼠标右键：οncοntextmenu="return false"

  g.关闭输入法：<input  style="ime-mode:disabeld"

  h.禁止拖拽：οndragstart="return false"

  i.禁止保存：<noscript><iframe src="*.htm"></iframe</noscript>要放在head里面

13.DOM扩展

  document.querySelector('div')这是通过css选择器获取元素，会选中符合条件的第一个元素，就算类名相同也会只获得第一个。

  document.querySelectorAll('sector')通过css选择器获取元素，以类数组形式存在

14.类名操作classList

   el.classList.add('class')添加类名

   el.classList.remove('class')删除类名

   el.classList.toggle('class')切换类名

   el.classList.contains('class')检测是否存在class

15.在html5中自定义属性data-*="",要获取自定义的属性值就这样操作el.dataset['info'];

   如果是这样形式的data-my-name="itcast",获取的时候就这样el.dataset['myName']需要以驼峰格式才能正确获得。