html及html5知识笔记

2019-02-23 本文已影响0人果木山

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"/>
    
    <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;
 }
```
  - 参考链接：oninput、onchange与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)+"段区域内容为："+"&nbsp;&nbsp;"+selection.getRangeAt(i)+"<br/>";
             }
             oCon.innerHTML=con;
         }
     }
 </script>
 </body>

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对象的collapse()和detach()方法
- r.collapse(false):取消Range选中的内容；即Range对象无选中内容；
- r.detach()：释放掉创建的Range对象；不再使用的时候；

html及html5知识笔记

html标签知识

html5新增元素知识

猜你喜欢

热点阅读