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

在看视频的过程中整理了一些小细节的东西，有需要的朋友可以看一下。
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位数字" oninput="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为空时
a9b5
才算验证通过。
12.一些禁止选中，复制，粘贴的操作，来源于https://blog.csdn.net/qq_32786873/article/details/52325940
   a.禁止选中：onselectstart="return  false"
  b.禁止复制：oncopy="return  false"
  c.禁止粘贴：onpaste="return  false"
  d.禁止粘贴：oncut="return  false"
  e.禁止拷贝：oncopy="document.selection.empty()"
  f.禁止鼠标右键：oncontextmenu="return false"
  g.关闭输入法：<input  style="ime-mode:disabeld"
  h.禁止拖拽：ondragstart="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']需要以驼峰格式才能正确获得。