HTML快速复习

1,强调  em用斜体
      strong用粗体
2，<q>引用文本</q>
blockquote标签 长文本引用 块级引用
3,address为网页加入联系地址信息
4,<code>一行代码</code> <pre>多行代码</pre>
5，无序列表ul>li 有序列表ol>li
6,div是独立的版块
7，表格table tbody,tr行,th表格头部的一个单元格,td一个单元格 
   摘要 <table summary="表格简介文本"></table>
   标题 <table> <caption>标题文本</caption></table>
8，<a href="目标网址" title="鼠标滑过显示的文本" target="_black"></a>在新的浏览器中打开 
   <a href="mailto:yy@qq.com">发送</a> 发送邮寄
9，<img src="图片地址" alt="下载失败时替换文本" title="提示文本">图像可以使gif,png,jpeg的图像文件
10,<form action="服务器文件；浏览者输入的数据被传输送到另一个地方" method="传送方式"></form>
11，<input type="text/password" name="名称：文本框命名，后台程序员使用" value="为文本输入框设置默认值" 
12，文本域 <textarea name="" id="" cols=" 30 列数" rows="10 行数 "></textarea>
13，<input type="radio" checked="checked" value="提交数据到服务器的值" name="为控件命名，后台程序员使用"> 单选
   <input type="checkbox" checked="checked" value="提交数据到服务器的值" name="为控件命名，后台程序员使用">复选框
14，<select name="" id="" multiple="multiple"> <!--下拉框多选-->
      <option value="向服务器提交的值" selected="selected">显示的值</option>  selected="selected"默认被选中
   </select>
15， <label for="控件id名称"></label>
CSS层叠样式表
1，#id选择器   .类选择器  
子选择器 .food>li 选定的是第一代子元素。
.first span {} 后代选择器
a:hover {color:red;} 伪类选择器。
分组选择器 h1,span
16，文字排版：text-indent:2em;缩进。 
   行间距（行高） line-height:1.5em;
   letter-spacing:50px;
   text-align:center;图片中的文本设置水平居中。
   块状元素：</div>,</p>,h1..h6,ol,ul,dl,table,address,blockquote,form
   内联元素：内联块状元素，a,span,br,i,strong,lable,q,var cite,code
   内联块状元素，img,input。

   盒子模型原理：
   border:2px solid red;
   一个元素的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边
   层模型：绝对定位：absolute  相对于最接近一个具有定位属性的父包含块进行绝对定位。
         相对定位:relative 相对于之前的位置定位，偏移前的位置保留不动。
         固定定位:position:fixed  相对的坐标是视图本身
         子绝父相。
font: italic  small-caps bold 12px/1.5em "宋体", sans-sereif;     font-size和font-family必须指定。
 font : font-style || font-variant || font-weight || font-size || line-height || font-family

 水平居中总结：不定宽块状元素。
         1，加入table标签   margin: auto;
         2，设置display:inline，进行不定宽元素设置， text-align:center;
         3，设置position：relative和left:50%;利用相对定位的方式，将元素向左偏移50%；即达到居中目的。
 垂直居中 父元素高度确定的单行文本
      height和line-height高度一致来实现

 父元素高度确定的多行文本，多行文本图片竖直居中的方法有两种（方法一）
   使用table， vertical-align:middle;  设置为表格单元显示
   <table> <tr><td> <!--td默认vertical-align:center--></td></tr></table>
   方法二：
   display:table-cell;(设置为表格单元显示) vertical-align:middle; IE8以上
隐性的改变display类型；position:absolute;  2,float:left/right;元素的display类型就会自动变变为display:inline-blok;


javascript 
1,confirm();消息对话框 prompt()；
打开新的窗口window.open([url],[窗口名称]，[参数字符串]);
   window.close();//关闭本窗口
   <窗口对象>.close();关闭本窗
DOM节点---1，元素结点，2属性结点，3,文本节点
document.getElementById("id");  
Object.innerHTML;
改变HtML的样式Object.style.property=new style;
      backgroundColor 设置背景颜色
      height        设置元素的高度
      width        设置元素的宽度
      color        设置文本的颜色
      font         在一行设置所有字体的属性
      fontFamily    设置元素的字体系列
      fontSize      设置元素的字体大小
显示和隐藏
   Object.style.display =value; 
      none         此元素不会被显示（隐藏）
      block        此元素将显示为块级元素（显示）
object.className=classname; 控制类名
逻辑运算符：b>a && b<c  //&& 并且的意思     短路。。一假的即假。
                     ||    或者或者       一真即真。
操作符之间的优先级
   高————>低   算术运算符 > 比较操作符 > 逻辑操作符  > 赋值运算符
一维数组： arr[], arr[][],
switch 必须赋初始值，与每一个case匹配
for（）;  while(boolean) {//直到条件不满足}  do{//循环体}while(判断条件)至少执行一次循环体；break退出循环；continue跳过 本次循环
事件： onclick  鼠标点击事件
      onmouseover 鼠标经过事件
      onmouseout 鼠标移开事件
      onchange   文本框内容改变事件
      onselect   文本框内容被选中事件
      onfocus    光标聚集
      onblur    光标离开
      onload        网页导入
      onunload   关闭网页

string charAt(index);返回指定位置的字符。
      indexOf(substring,startops) 返回某个字符串在指定的字符串 中首次出现的位置; 没有返回-1；
      split(指定的地方开始分割,分割的次数)将字符串分割为数组，并返回此数组。
      substring(startPos,stopPos);字符串截取。
      substr(起始位置,截取长度);
Math    ceil()向上取整
      floor()向下取整
      round()四舍五入
      random()随机数  0-1 不包1
Array  concat();数组连接；返回一个新的数组，不改变原来的数组；
      join()
      reverse() 用于颠倒数组中的元素，该方法会改变原来的数组，而不会重建新的数组。
      slice（开始的，结束的）方法可从已有的数组中返回选定的元素，不改变原来的数组，返回新的数组，
      sort(使元素按照一定得到顺序排序) 若不指定按照unicode排序
      sort(funcction (a,b) { return a-b;}) 
Window对象 ：window是BOM的核心，window对象指当前浏览器窗口，

   计时器：setTimeOut() 指定的延迟时间之后执行代码。clearTimeout() 取消settimeout的设置
         setInterval() 每隔指定时间执行指定得到代码 clearInterval()取消setIntval()设置。
window.history.[属性|方法] 
      length: 返回浏览器历史列表中额url数量；
      back()    上一个URL   ===>相当于 go(-1)
      forward() 下一个URL
      go()       列表中的某个具体的页面
Navigator对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本；
   appCodeName 浏览器代码名的字符串表示
   appName 返回浏览器的名称
   appVersion 返回浏览器的平台和版本信息
   platform   返回浏览器的操作系统平台
   userAgent  返回由客户机发送服务器的user-agent头部的值
      function validB(){ 
        var u_agent = navigator.userAgent; 
        var B_name="Failed to identify the browser"; 
        if(u_agent.indexOf("Firefox")>-1){ 
            B_name="Firefox"; 
        }else if(u_agent.indexOf("Chrome")>-1){ 
            B_name="Chrome"; 
        }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
            B_name="IE(8-10)";  
        }
          document.write("B_name:"+B_name+"<br>");
          document.write("u_agent:"+u_agent+"<br>"); 
      } 

screen对象
   window.screen.height  屏幕的高度，单位像素
             .width   屏幕的宽度，单位像素
             .colorDepth 用户浏览器表示的颜色位数，通常为32位;
             .pixelDepth 用户浏览器表示的颜色位数，通常为32位，（没像素的位数）（IE不支持）;
             .avaiHeight  窗口可以使用的屏幕高度，单位像素
             .availWidth  窗口可以使用的屏幕宽度，单位像素
DOM 
   nodeName 返回一个字符串，其内容是给定节点的名字
   nodeType 返回一个整数，这个数值代表给定节点的类型
   nodeValue   返回给定节点的当前值
遍历树节点
   childNodes 返回一个数组，这个数组由给定元素节点的子节点构成
   firsChild     返回第一个子节点
   lastChild     返回最后一个子节点
   parentNode    返回一个给定结点的父节点
   nextSibling       返回给定结点的下一个子节点
   previousSibing 返回给定结点的上一个子节点
DOM操作
   createElement(element) 创建一个新的元素节点
   createTextNode()       创建一个包含着给定文本的新文本节点
   appendChild()        指定节点最后一个子节点列表之后添加一个新的子节点
   insertBefore()        将一个给定节点插入到一个给定元素节点的给定子节点的前面
   removeChild()            从一个给定元素中删除一个自子节点
   replaceChild()           把一个给定父元素里的一个子节点替换为另外一个节点 

   document.getElementByName()  返回带有指定名称的节点对象的集合
   document.getElementByTagName()  标签节点对象的结合
   getAttribute(name) 通过元素节点的属性，名称获取属性的值
   setAttribute(name,value) 可以增加一个指定名称和值得新属性，活着把现有的属性设定为指定的值
DOM 节点得到三个重要的属性
   1，nodeName 节点的名称
      1，元素节点的nodeName与标签名相同 
      2，属性节点的nodeName是属性的名称
      3，文本节点的nodeName永远是#text
      4,文档节点的nodeName永远是#document
   2，nodeValue  节点的值
      元素节点的nodeValue是undefined或null
      文本节点的nodeValue是文本自身
      属性节点的nodeValue是属性的值
   3，nodeType   节点的类型---只读
      元素类型   节点类型
         元素    1
         属性    2
         文本    3
         注释    8
         文档    9
访问子节点childNodes访问选定元素节点下的所有子节点的列表，返回的值可以看做是一个数组它具有length属性。
   兼容问题：节点之间额空白符，在firefox，chrome,opera，safai浏览器是文本节点。IE不是节点

   parentNode访问父节点
   firstChild第一项
   lastChild最后一项

访问兄弟节点 nextSibling某个节点之后紧跟的节点
          previousSibling 某个节点之前紧跟的节点
          <script>
            function get_nextSibling(n) {
               var x =n.nextSibling;
               while(x.nodeType!=1){
                  x=x.nextSibling;
               }
               return x;
            }
          </script>
插入节点 appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点
      insertBefore(newNode ， node) 在已有的子节点前插入一个新的子节点
删除节点 removeChild() 方法从子节点列表中删除某个节点，如果删除成功，此方法可返回被删除的节点，如果失败，则返回nul;
replaceChild替换元素节点，实现子节点对象的替换，返回被替换对象的引用。（newNode,oldNode）
创建元素节点 createElement(tagName)可以创建元素节点
            createTextNode(字符串);创建text节点
获取浏览器窗口的尺寸 ===》（不包括工具栏和滚动条）
   对于ie9+,Chrome，FireFox,Opera以及Safari
      window.innerHeight 浏览器窗口的内部高度
      window.innerWidth  浏览器窗口的内部宽度
   对IE8,7,6,5
      document.documentElement.clientHight表示HTML文档所在窗口的当前高度
      document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度
      或者
      document.body.clientHeight
      document.body.clientWidth
   在不同浏览器都实用的JavaScript方案
      var w = document.documentElement.clientWidth || document.body.clientWidth;
      var h = document.documentElement.clientHeight || document.body.clientHeight;


获取网页的内容区域的高度scrollHeight和scrollWidth
   针对IE Opera 
      scrollHeight是网页内容的实际高度，可以小于clientHeight;
   浏览器的兼容问题
   var w = document.documentElement.scrollWidth || document.body.scrollWidth;
   var h = document.documentElement.scrollHeight || document.body.scrollHeight;
获取网页内容高度的和宽度（包括滚动条等边线，会随窗口的显示大小改变。）
   offsetHeight =clientHeight+滚动条+边框
   浏览器兼容
      var w = document.documentElement.offsetWidth || document.body.offsetWidth;
      var h = document.documentELement.offsetHeight || document.body.offsetHeight;
网页卷曲的距离和偏移量
   scrollLeft:设置或获取位于给定对象左边界与窗口中最左端之间的距离。
   scrollTop:
   offsetLeft
   offsetHight;

转载于:https://www.cnblogs.com/niusan/p/8010934.html