html标签知识
- img标签为内联元素，但是其自带width和height属性，所以其可以设置宽高；
- a标签上的name属性可以实现文档内的链接跳转；但是要保证为a标签的name属性和href属性配合；
- 代码：
<a name="mass">美好</a> <a href="#mass">跳转到美好</a> - table表格
- table内联样式设置单元格的边距cellpadding和间距cellspacing；
- 合并单元格给td标签设置内联样式
colspan="3"，即合并三个单元格；
- webStorage网页存储
- 分为两种：localStorage和sessionStorage两种
- localStorage：本地存储对象；永久保存在本地浏览器中，不会过期，直到手动清除；
- sessionStorage：会话存储对象；用于临时保存同一窗口的数据，在关闭窗口或标签页后，数据就会删除；
- webStorage和Cookie的区别：
- cookie始终在同源的http请求中携带，用于在浏览器和服务器端之间来回传递，而webStorage不会自动把数据传递给服务器端，仅在本地保存；
- 数据的生命周期不同：
- localStorage设置后永久在本地存储，不会过期，直到手动清除；sessionStorage在窗口关闭后，就会清除；
- cookie的生命周期一般在其设置的过期时间之前有效；
- 存储数据大小的限制：
- cookie存储的数据大小要求不超过4k；
- webStorage存储的数据可以达到5M以上，不同的浏览器设置可能不同；
- 作用域的不同：sessionStorage不在不同浏览器中共享，即使在同一页面中也不支持；而localStorage在所有同源窗口中都是共享的；同样，cookie在所有同源窗口中也是共享的；
- 参考链接：webStorage和cookie的区别
html5新增元素知识
- html5新增页面结构元素：
- article:文章，独立性；
- section:页面分块，用于评论区域等独立区域；如果需要给其添加样式，不能作为设置样式的页面容器，则需要给其添加一个div来设置样式；
- nav：导航，配合ul,li来完成导航栏制作；
- aside:附属信息，表示当前页面和文章的附属信息；
- time: 时间信息；如：
<time datetime="2019-02-21T10:40+09:00">2019-02-21</time> - header:顶部；
- footer:底部；
- hgroup:H标签进行分组；
- address:地址；
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5新增的结构元素</title> </head> <body> <div> <header> <h1>网页标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">帮助</a></li> </ul> </nav> </header> <article> <hgroup> <h1>文章主标题</h1> <h2>文章副标题</h2> </hgroup> <p>文章正文</p> <!--评论区：独立板块--> <section> <!--此时添加div的作用是：设置评论区的css样式，section标签不能设置样式--> <div> <article> <h1>评论标题</h1> <p>评论内容</p> </article> </div> </section> </article> <footer> <address>地址</address> </footer> </div> </body> </html> - html5新增的表单属性
- html4中表单标签必须写在form标签中；通过设置action和method属性来指定唯一的一个服务器和提交方法；
- html5中表单标签可以不放在form标签中，通过id来指定form标签；
<form id="testform"> </form> <textarea form="testform">xxxx</textarea>- html5针对表单标签新增的表单属性
- formaction属性：设置提交的服务器，可以给提交按钮添加不同的fromaction属性，可以将表单提交不同的页面；
- formmethod属性：设置提交方法，分别对表单元素指定提交方法；
- formenctype属性：编码类型；
- formtarget属性：指定提交后在何处打开页面；
- autofocus属性：自动聚焦；
- required属性：若内容为空白，无法提交且会出现信息提示字；
- placeholder:占位符；默认字体设置；
- list列表，datalist数表
- 目的：给单行文本框添加一个list属性，属性值为某个datalist元素的ID值；已达到的效果：当文本框获得焦点时，以提示文本的方式显示下拉列表；
- datalist标签类似于select下拉列表，本身不显示；
- 代码：
<form> <input type="text" name="test" list="cur"/> <!--其中display:none可以不写，写的目的是为了满足兼容性--> <datalist id="cur" style="display:none;"> <option value="a">美好</option> <option value="b">美丽</option> </datalist> </form> - image提交按钮的height和width属性
- 代码：
<input type="image" src="img/p1.jpg" alt="图片提交按钮" width="20" height="20"/>
- 代码：
- html5改良的input元素
- number:属性有value,min,max,step;获取表单的数值时使用valueAsNumber，直接获取数值；针对于number表单元素；
- range:滑块条，属性有：value,min,max,step;
- 表单元素input元素的三个改变事件
- onchange、oninput、onpropertychange三者的区别：
- onchange事件只在键盘或者鼠标操作改变对象属性，且失去焦点时触发；脚本触发无效；
- oninput事件与onpropertychange事件，只要对象属性发生改变，就会立即触发，不用考虑是否失去焦点；
- oninput为html5中标准事件，IE9以下浏览器不支持此事件；可通过addEventListener绑定二级事件；
- onproperchange事件是IE浏览器专属，在IE9以下浏览器使用此事件；
var oInput=document.getElementsByTagname("input"); if("oninput" in oInput){ Object.addeventListener("input",fn,false); }else{ Object.onpropertychange=fn; }
- onchange、oninput、onpropertychange三者的区别：
- Range对象和Selection对象
- Range对象基本概念：一个Range对象代表页面上的一段连续区域，通过Range对象，可以获取或修改网页上的任何区域；
- 获取页面中选取区域的文字内容
- 通过getSelection()来获取选中区域文档的元素节点；如：
var sel=document.getSelection();包括所有选中区域的文本节点，相当于一个数组；每一个元素为一个文本节点； - 通过rangeCount来获取选中区域的个数；如
sel.rangeCount; - 通过for循环来遍历每个选中区域，然后通过
sel.getRangeAt(i)来获取每个选中区域； - 注：chrome浏览器中只能选中一个区域，而FireFox浏览器中可选取多个区域；
<body> <h2>selection对象和range对象的使用让我们红尘作伴，活的潇潇洒洒，策马奔腾共享人世繁华</h2> <input type="button" value="点击" onclick="add2()"/> <div id="con"></div> <script> var oCon=document.getElementById("con"); var con=null; function add2() { //获取选中区域 var selection=document.getSelection(); //判断选中区域的个数是否不为0 if(selection.rangeCount>0){ con="您选中了"+selection.rangeCount+"段区域<br/>"; for(var i=0; i<selection.rangeCount; i++){ con+="选中的第"+(i+1)+"段区域内容为："+" "+selection.getRangeAt(i)+"<br/>"; } oCon.innerHTML=con; } } </script> </body> - 通过getSelection()来获取选中区域文档的元素节点；如：
- Range对象的方法: 选中节点范围
-
rangeObject.selectNode(elementNode):选中elementNode元素节点；即此节点下的所有子孙节点，包括自己； -
rangeObject.selectNodeContents(elementNode):选中elementNode元素节点内的内容，即该节点下的所有子孙节点，不包括自己； -
rangeObject.deleteContents():删除选中的内容；
<body> <div id="div1"> <p>这是美好的日子啊</p> <p>这是美好的日子啊1</p> 这是天空的蓝牙 </div> <form action=""> <input type="button" onclick="delBtn(true)" value="删除元素节点"> <input type="button" onclick="delBtn(false)" value="删除元素下所有内容"> </form> <script> var oDiv=document.getElementById("div1"); //创建Range对象； var rangeObj=document.createRange(); function delBtn(val) { if(val){ //选中元素节点 rangeObj.selectNode(oDiv); rangeObj.deleteContents(); }else{ //选中元素节点下的子孙节点 rangeObj.selectNodeContents(oDiv); rangeObj.deleteContents(); } } </script> </body> -
- Range对象的方法：选中特定的范围
-
rangeObject.setStart(node,n):从文本节点中的第n个节点开始选中； -
rangeObject.setEnd(node,m):从文本节点中的第m个节点结束选中；- 选中n到m之间的节点，包含n，不包含m；其中n从0取值；
-
rangeObject.setStartBefore(node1):将node1节点的起点位置作为range对象的起点位置； -
rangeObject.setStartAfter(node1)：将node1节点的终点位置作为range对象的起点位置； -
rangeObject.setEndBefore(node2)：将node2节点的起点位置作为range对象的终点位置； -
rangeObject.setEndAfter(node2)：将node2节点的终点位置作为range对象的终点位置； - 参考链接：range对象的选取的起终点位置
-
- Range对象的复制，剪切
- Range对象操作自己；需要接收返回值，然后对返回值进行操作；
-
rangeObj.cloneRange()：复制Range对象； -
rangeObj.cloneContents()：复制Range对象下的内容； -
rangeObj.extractContents()：剪切Range对象下的内容；
- Range对象insertNode(),compareBoundaryPoints()方法
-
rangeObj.insertNode(elenode)：将节点插入到range对象区域的起点位置； - compareBoundaryPoints()方法：比较指定范围的边界点和当前范围的边界点；根据他们的顺序返回-1,0,1;
- 语法：
curRangeObj.compareBoundaryPoints(how,sourceRange);即：当前选中的range对象范围与源对象范围的比较； - 返回值：-1,0,1;
- how合法值：
1）Range.START_To_START：比较两个Range节点的开始点；
2）Range.END_To_END：比较两个Range节点的结束点；
3）Range.START_To_END：比较sourceRange的开始点与当前范围的结束点进行比较；
4）Range.END_To_START：比较sourceRange的结束点与当前范围的开始点进行比较； - 返回值：比较sourceRange边界点和当前范围的边界点
- 若sourceRange边界点在当前范围的边界点之前，则返回1；
- 若sourceRange边界点在当前范围的边界点之后，则返回-1；
- 若sourceRange边界点与当前范围的边界点相同，则返回0；
- 两者比较的位置关系共有7种；
- 方法实例验证：
- 知识点：获取源Range对象，通过创建一个Range对象，然后通过
r.selectNodeContents(elenode)来获取区域；无需接收返回值；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Range对象比较</title> </head> <body> <div> 这是一段文字，用来体验range对象的比较，通过与<span id="red" style="color:red;">美好的明天</span>进行比较，看范围是否合适！ <input type="button" value="点击比较" onclick="Fn()"/> </div> <script> function Fn() { var oSpan=document.getElementById("red"); var oRange=document.createRange();//创建一个range对象； oRange.selectNodeContents(oSpan.firstChild);//此时oRange就已经存在源区域；无需接收返回值； var sel=document.getSelection(); if(sel.rangeCount>0){ //获取选中区域的range对象； var curRange=sel.getRangeAt(0); //比较当前range对象和源对象 var how=Range.START_TO_START; var num=curRange.compareBoundaryPoints(how,oRange); if(num===-1){ alert("当前选中的区域的起点位置在源位置的起点位置的前面"); }else if(num===1){ alert("当前选中的区域的起点位置在源位置的起点位置的后面"); } } } </script> </body> </html> - 知识点：获取源Range对象，通过创建一个Range对象，然后通过
- 语法：
-
- Range对象的collapse()和detach()方法
-
r.collapse(false):取消Range选中的内容；即Range对象无选中内容； -
r.detach()：释放掉创建的Range对象；不再使用的时候；
-
网友评论