• 上学时的HTML+JS+CSS(小总结)


    html:超文本标记语言
    基本标签:
    {
    文本标签:<pre></pre>:原封不动的保留空白区域。
         <br />:换行。
         <hr width="宽度(单位:%)" size="高度" noshade(该行不带阴影) color="线条颜色" />:在文档中画一条水平线,可用来          分割文档。
         <strong></strong>:加粗。
         <em></em>:斜体。
         <marquee direction="滚动方向(left/right/up/down)" loop="循环次数(-1代表无限循环)" behavior="滚动形式          (scroll:普通/alternate:来回滚动/slide:文字滚动出来不再动)" scrolldelay="每次循环的间隔时                    间"></marquee>:设置文字滚动。
    图像标签:<img src="图像的url(地址)" alt="简短的描述,当图像不能显示时在图像位置出现给图像的提示内容或文本信息"           width="宽度" hright="高度" />
    超链接:<a href="http://www.baidu.com"></a>{定义锚点:<a href="锚点名"></a>,链接到锚点:<a href="#锚点名"></a>}
    框架标签:frameset与body相冲突,不能同时存在。
         <frameset rows="222,*" frameborder="yes"></frameset>[rows:将框架集分为几个水平的框架,*代表余下的部 分。          cols:将框架集分为几个垂直的框架。frameborder:是否显示边框,取值为yes或no。border:边框的宽度。]
         <frame name="框架名称" src="框架内容的链接" frameborder="框架边框的宽度" noresize(不可改变边框的大小)                     scrolling="滚动条设置,取值为auto/yes/no" />
         浮动框架:iframe与frameset不能混用。
         <iframe name="浮动框架" src="框架内容的链接" frameborder="框架边框的宽度" width="300" height="200"           align="right">
         </iframe>
    表单标签:
         多行文本框:<textarea name="名称" cols="高度" rows="宽度">请输入</textarea>
         下拉列表:<select name="名称" selected="默认值">
                   <option >内容</option>
                </select>
         文本框:<input type="text" name="名称" />
         密码框:<input type="password" name="名称" />
         单选框:<input type="radio" name="名称" />(设置name需相同  在同一个form下)
         多选框:<input type="checkbox" name="名称" />(设置name不能相同)
         提交按钮:<input type="submit" name="名称" />
         重置按钮:<input type="reset" name="名称" />
         图像按钮:<input type="image" name="名称" />
         普通按钮:<input type="button" name="名称" />
         maxlength:可以限制输入的字符数。readonly:设置只读文本。
    表格标签:<table border="边框宽度" width="宽度" cellpadding="填充" cellspacing="间距" bordercolor="边框颜色" bgcolor="背景颜色">
       <caption align="top"><h1><font color="red">商品简介</font></h1></caption>确定题注位置,必须包含在 table内且必须紧跟在table开始标记之后。
       <colgroup><col span="列数" /><col span="1" /></colgroup>跨列修饰
        <tr>行元素
           <td>商品</td>列元素
        </tr>
       </table>
         创建不规则表格:colspan:水平跨列,rowspan:垂直跨行。只能出现在td或th中。
    热点区域:<map></map>.
         <img src="图像地址" usemap="(映像名,需与name名相同。)#ditu" />
           <map name="ditu">
              <area shape="图形名称(rect:矩形/circ:圆形/poly:多边形)" coords="热点的坐标范围:343,155,371,175" href="http://www.kuaibo.com" />
           </map>
    div层和列表:<div></div>(块级元素,容器,占用资源):属性:position:absolute绝对定位/position:relative相对定位。{图层 (浮动、广告)}
         <span ></span>:设置同一行文字的不同格式。
         定义列表:<dl>
                    <dt>名称<dd>说明文字
                </dl>
         无序列表:<ul>
                    <li>名称</li>
                </ul>

         有序列表:<ol>
                    <li>名称</li>
                </ol>

         目录列表:<dir>
                    <li>名称</li>
                </dir>

         菜单列表:<menu>
                    <li>名称
                </menu>
    }
    -------------------------------------------------------------------------------------------------------------------
    css:层叠样式表,级联样式表,简称样式表。
    链入外部样式:<link rel="stylesheet" type="text/css" href="样式表文件的地址" />
    css伪类:(必须写在style标记之内)
         <style type="text/css">
              a:link{未访问过的链接};
              a:hover{鼠标经过时};
              a:active{鼠标点击不松开时};
              a:visited{已访问过的链接};
         </style>
    设计列表样式:list-style-type:disc(列表符号位黑圆点)/circle(空心圆点)
    添加列表图像:list-style-image:none(不适用图像符号)/url(指定图像路径)
    调整列表位置:list-style-position:outside(不向内缩进,默认值)/inside(向内缩进)
    清除:clear:left(不允许某元素的左边有浮动元素)/right(不允许某元素的右边有浮动元素)/both(某元素的左右两边都不允许有     浮动元素)/none(某元素的左右两边都允许有浮动元素)
    设置层空间:z-index:数字(z-index要与position:absolute配合使用)
    设置层裁切:clip:rect(裁切的矩形四个顶点,上右下左)
    -------------------------------------------------------------------------------------------------------------------
    js(javascript):一种基于对象和事件驱动的解释性脚本语言(逐行翻译)。
    脚本数据类型:数字类型:number
               字符串类型:string
               布尔类型:boolean
               未定义:undefined
               空:null
               数组:array
               对象:object
    内置对象:<script type="text/javascript">
         var str = "welcomeo JoCXY";
         //alert(str.substring(str.indexOf("c"),str.lastIndexOf("e")+1));

         //alert(str.substring(0,str.lastIndexOf("o")) + "a" + str.substring(str.lastIndexOf("o")+1,str.length));
    //String对象
              //小写转换
                        //alert(str.toLowerCase());
              //大写转换
                        //alert(str.toUpperCase());
              //获取指定位置字符[从0开始.]
                        //alert(str.charAt(5));
              //获取指定位置字符编码
                        //alert(str.charCodeAt(5));       
              //正向索引位置
                        //alert(str.indexOf("m"));
              //反向索引位置
                        //alert(str.lastIndexOf("o"));
              //获取匹配字符串[若没有匹配的字符串则返回null.]
                        //alert(str.match("come"));
              //获取匹配字符串的首字母索引
                        //alert(str.search("JoCXY"));
              //截取[从第3个字符开始截取,截取了4个字符.]
                        //alert(str.substr(3,4));
              //截取[从第3个字符开始截取,截取到第4个字符结束.]
                        //alert(str.substring(3,4));
              //截取[同substring相同.可使用负数]
                        //alert(str.slice(-4));//从-4位开始截取,截取到最后一位
                        //alert(str.slice(-4,-1));
              //替换
                        //alert(str.replace(str.substring(str.lastIndexOf("o")),"a"));
                       
                       
              //分割
                        //alert(str.split("o"));
              //连接
                        //alert(str.concat(3,4,5));
    //Array对象
              //定义数组方式
                   /*var arr = new Array();

                   var arr = new Array(3);
                   arr[0] = "lan";
                   arr[1] = "tian";
                   arr[2] = 222;
                   alert(arr[2]);*/

                   /*var arr = new Array(22,234,"lan",true);
                   for(a = 0;a < 4;a++){
                        alert(arr[a]);
                   }*/
    //定义二维数组
                   /*var arr = new Array(3);
                   for(var a = 0;a < 3;a++){
                        arr[a] = new Array(2);
                             for(var b = 0;b < 2;b++){
                             arr[a][b] = a * b;    
                             }
                   }*/
                   //alert(arr);//0[第0行第1列],0[第0行第2列],0[第1行第1列],1[第1行第2列],0[第2行第1列],2[第2行第2列]
                   //alert(arr[2][1]);//输出第三行第一列的内容
                  
      //定义数组
           var arr = new Array(21,12,"lan","tian");
           //连接[自定义]
                   //alert(arr.join("-"));
           //连接[逗号]
                   //alert(arr.toString());
           //连接[添加新数组]
                   //alert(arr.concat(2,21,2));
           //反向数组
                   //alert(arr.reverse());
           //将数组排序,并将结果保留到原数组中
                   //alert(arr.sort());
           //截取
                   //alert(arr.slice(0,1));
           //对指定位置进行删除和插入
                   /*arr.splice(2,1,3);
                   alert(arr);*/
           //进出栈操作[插入.删除操作]
                   //数组末端插入
                        /*arr.push("火",7,"凤凰");
                        alert(arr);*/
                   //数组末端删除
                        /*arr.pop();
                        arr.pop();
                        alert(arr);*/
                   //数组首端插入
                        /*arr.unshift("战");
                        alert(arr);*/
                   //数组首端删除
                        /*arr.shift();
                        alert(arr);*/
    //Math对象
              //1~10随机数
                     //alert(Math.random()*10);
              //四舍五入成整数
                     //alert(Math.round(Math.random()*10));
    //Date对象
              var date = new Date();
       //获取日期和时间
              //获取当前时间
                   alert(date.toLocaleString());
              //获取年份数
                   //alert(date.getFullYear());
              //获取月份数[月份数从0开始.]
                   //alert(date.getMonth());
              //获取月天数
                   //alert(date.getDate());
              //获取星期天数
                   //alert(date.getDay());
              //获取小时数
                   //alert(date.getHours());
              //获取分钟数
                   //alert(date.getMinutes());
              //获取秒数
                   //alert(date.getSeconds());
              //获取毫秒数
                   //alert(date.getMilliseconds());
              //获取
                   //alert(date.getTime());
         //设置日期和时间
              //设置年份
                   /*date.setFullYear(2014);
                   alert(date);*/
              //设置月份
                   /*date.setMonth(6);
                   alert(date);*/
              //设置月天数
                   /*date.setDate(6);
                   alert(date);*/
              //设置小时数
                   /*date.setHours(06);
                   alert(date);*/
              //设置分钟数
                   /*date.setMinutes(06);
                   alert(date);*/
              //设置秒数
                   /*date.setSeconds(06);
                   alert(date);*/
              //设置毫秒数
                   /*date.setMilliseconds(2014);
                   alert(date);*/
              //使用毫秒数设置date对象,并返回date
                   /*date.setTime(2014);
                   alert(date);*/
             
              //返回本地时间与用UTC表示当前日期的时间差,以分钟为单位.
                        /*date.getTimezoneOffset();
                        alert(date);*/
              //返回date对象的世界标准时间(UTC)的字符串表示.
                        /*date.toUTCString();
                        alert(date);*/
              //根据本地时间格式,把date对象转换为字符串.
                        /*date.toLocalString();
                        alert(date);*/
              //解析一个日期的字符串.
                        /*Date.parse();
                        alert(date);*/
              //返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数
                        /*Date.UTC();
                        alert(date);*/
                  
    /*验证E-Mail地址
         [A."@"不能是第一个字符;
         B."."必须在"@"之后;
         C."."不能是最后一个字符;
         D."@"不能与"."相邻;
         E."@"之前的字符不能超过20个.]*/
              /*var str = "students@jcxy.org";
              var a = str.indexOf("@");
              var b = str.indexOf(".");
             
              if(a != 0 && a < b && b != length-1 && b - a > 1 && a>0&&a<21){
                   alert("邮箱地址格式正确");
                   }else{alert("邮箱地址格式错误");}*/


    //冒泡排序
              /*var arr = [100,36,23,188,7,56,18,99]
              for(var i = 0;i < arr.length;i++){
                   for(var a = 0;a < arr.length - 1;a++){
                        if(arr[a] > arr[a + 1]){
                        var b = arr[a];
                        arr[a] = arr[a + 1];
                        arr[a + 1] = b;
                        }
                       
                        }
                   }
              for(var i in arr){
                        document.write(arr[i] + "&nbsp;");
              }*/

    //比较日期大小
                   var date1 = "2013-12-27";
                   var date2 = "2013-6-1";
                   //创建日期格式
                   var a = new Date(date1.split("-")[0]+"/"+date1.split("-")[1]+"/"+date1.split("-")[2]);
                   alert(a.getTime());
                   var b = new Date(date2.split("-")[0]+"/"+date2.split("-")[1]+"/"+date2.split("-")[2]);
                   alert(b.getTime());
                   if(a > b){
                        alert(a);
                   }else{
                        alert(b);
                   }
      </script>
    -------------------------------------------------------------------------------------------------------------------
    DHTML:定时器:周期性执行定时器:timerID = setInterval停止启动的定时器clearInterval(timmerID)
                一次性执行定时器:timerID = setTimeout停止启动的定时器clearTimeout(timmerID)
    窗口大小和位置:window.moveTo(x,y)移动窗口到指定位置,单位为像素。
              window.moveBy(x,y)向右移动x像素,向下移动y像素。参数为负数时表示反方向移动。
              window.resizeTo(width,height)调整窗口大小为指定大小。
              window.resizeBy(x,y)放大或缩小,参数为负数时表示缩小。


    =============
    Cookie

    var time = new Date();
    var t = time.getTime()
     
    ==================
    内置对象:
    History对象------------------------------------------------------------------------------
    history.length:属性。用来记录istory中缓存了多少个URL。
    history.back():方法。返回上一页。
    history.forward():方法。前进一页。
    history.go(num):方法。前进或后退指定的页数。当参数num大于0时,表示前进多少页。反之则为后退。参数等于0时表示刷新当前页面。
    window对象---------------------------------------------------------------------------------
    window.open(url,name,config){打开新窗口。URL为打开的超链接地址。name为窗口名称。config为配置参 数:menubar--菜单条,toolbar--工具条,location--地址栏,directories--链接,status--状态 栏,scrollbars--滚动条,resizeable--可调整大小。参数值均为“yes”或“no”}
    window.close():关闭窗口。
    对话框================alert--提示框,confirm(str)--确认框,prompt(str,value)--确认框。
    状态栏================window.status=str。
    滚动条================window.scrollTo(x,y)--一次性滚动窗口到指定位置,单位为像素。window.scrollBy(ax,ay)--从当前位置开始,向右滚动ax像素,向下滚动ay像素。
    document对象-------------------------------------------------------------------------------
    document.forms[]集合属性:form对象数组,存放文档中所有表单。
    document.images[]集合属性:image对象属性,存放文档所有照片。
    document.getElementById()方法:对拥有指定id的对象的引用。
    document.getElementsByName()方法:对拥有指定name的对象的引用。
    document.getElementsByTagName()方法:对拥有指定标签的对象的引用。
    对象事件-----------------------------------------------------------------------------------
    鼠标事件:onclick--单击,ondblclick--双击,onmousedown--鼠标按下,onmouseup--鼠标弹起,onmouseover--鼠标移入,onmouseout--鼠标移出。
    键盘事件:onkeypress--按过键盘,onkeydown--键盘按下,onkeyup--键盘弹起。
    状态事件:onload--文档家在完毕,onunload--退出文档,onchange--值发生变化,onfocus--获得焦点,onblur--失去焦点,onresize--调整窗口大小,onsubmit--表单提交。
    JS高级技巧总结
    ===================================================================================================
    错误处理:Error对象-- 基本语法:例:
    var lan = 7;
    try{
         document.write(lan);//执行代码
    }
    catch(e){//参数e为Error错误对象。
         document.write("错误代码:"+(e.number&0xffff)+"<br />");//&0xffff代表将e.number与之位与操作,因为e.number是一个32位的二进制的数字,而只有低16位是真 正的错误代码,而我们需要将低16位二进制码转换成10进制的错误码。
         document.write("错误message:"+e.message+"<br />");
         document.write("错误description:"+e.description+"<br />");//错误处理
    }
    finally{
         alert(lantian);//最终执行代码,可省略。
    }
    =====================================
    ActiveX对象:浏览器插件。-- FileSystemObject:文件系统对象。---------------------------------------------------------------------
    创建文件系统对象的语法为:var fso = new ActiveXObject("Scripting.FileSystemObject");
    创建文件(文件夹)语法:
    function fun(){
              var fso =new ActiveXObject("Scripting.FileSystemObject");
              var fldr = fso.CreateFolde(document.form1.txt.value);
              /*CreateFolde:创建文件夹。CreateTextFile:创建文件。*/
         }
    Driver对象--------------------------------------------------------------------------------
    VolumeName--磁盘的卷标。DriverLetter--磁盘代号。SerialNumber--磁盘序列号。DriverType--磁盘种 类【1--移动磁盘。2--本地磁盘。3--网络磁盘。4--光驱。5--其他。】FileSystem--磁盘使用的文件系统。TotalSize-- 磁盘的使用空间,返回字节数。FreeSpace--磁盘的可用空间,返回字节数。
    Folder对象---------------------------------------------------------------------------------
    fso.CreateFolder--创建文件夹。fso.DeleteFolder--删除文件夹。fso.MoveFolder(指定文件夹,指定路 径)--移动文件夹。fso.CopyFolder(源文件夹的路径,指定复制路径)--复制文件夹。fldr.Name--获取文件夹的名字(属性)。 fso.FolderExists--检查文件夹是否存在。fso.GetFolder--获得Folder对象。 fso.GetParentFolderName--查找父文件夹名字。
    File对象-----------------------------------------------------------------------------------
    Name--文件名。Type--文件类型。Path--完整文件路径。Attributes--文件属性。DateCreated--创建日期。 DateLastAccessed--最后访问日期。DateLastModified--最后修改日期。Size--文件大小。
    创建文件语法----fso.CreateTextFile()。
    打开文件语法----fso.OpenTextFile()。
    读取文件方法===================
    fo.Read(charNum)--从文件当前位置读取charNum个字符。
    fo.ReadAll()--从文件对象fo读取全部内容。
    fo.ReadLine--从文件读取一行。
    fo.Skip(charNum)--读取文件时跳过charNum个字符。
    fo.SkipLine()--文件当前位置跳到下一行。
    写入文件方法====================
    fo.Write(string)--向打开的文件写入字符串string。
    fo.WriteBlankLines(lineNum)--写入lineNum个换行符。
    fo.WriteLine(string)--写入字符串string再加上换行符。
    ==============================================
    块元素(block element)

    ◎ address - 地址

    ◎ blockquote - 块引用

    ◎ center - 居中对齐块

    ◎ div - 常用块级容易,也是css layout的主要标签

    ◎ fieldset - form控制组

    ◎ form - 交互表单

    ◎ h1 - 大标题

    ◎ h2 - 副标题

    ◎ h3 - 3级标题

    ◎ h4 - 4级标题

    ◎ h5 - 5级标题

    ◎ h6 - 6级标题

    ◎ hr - 水平分隔线

    ◎ isindex - input prompt

    ◎ noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容)

    ◎ noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)

    ◎ p - 段落

    ◎ pre - 格式化文本

    ◎ table - 表格

    ◎ dl - 定义列表

    ◎ dir - 目录列表

    ◎ ol - 排序表单

    ◎ ul - 非排序列表(无序列表)

    ◎ menu - 菜单列表



    内联元素(inline element)

    ◎ a - 锚点

    ◎ abbr - 缩写

    ◎ acronym - 首字

    ◎ b - 粗体(不推荐)

    ◎ bdo - bidi override

    ◎ big - 大字体

    ◎ br - 换行

    ◎ cite - 引用

    ◎ code - 计算机代码(在引用源码的时候需要)

    ◎ dfn - 定义字段

    ◎ em - 斜体强调

    ◎ font - 字体设定(不推荐)

    ◎ i - 斜体

    ◎ img - 图片

    ◎ input - 输入框

    ◎ kbd - 定义键盘文本

    ◎ label - 表格标签

    ◎ q - 短引用

    ◎ s - 中划线(不推荐)

    ◎ samp - 定义范例计算机代码

    ◎ select - 项目选择

    ◎ small - 小字体文本

    ◎ span - 常用内联容器,定义文本内区块

    ◎ strike - 中划线

    ◎ strong - 粗体强调

    ◎ sub - 下标

    ◎ sup - 上标

    ◎ textarea - 多行文本输入框

    ◎ tt - 电传文本

    ◎ u - 下划线

    ◎ var - 定义变量
  • 相关阅读:
    IntelliJ IDEA设置JDK1.8
    maven Create from archetype
    字符串的获取相关方法
    字符串比较
    题目:自定义4个学生对象,添加到集合,并遍历
    生成6个1-33之间的随机整数,添加到集合,并遍历集合。
    ArrayList的集合概述和基本使用
    对象数组
    匿名对象作为方法的参数和返回值
    构造方法
  • 原文地址:https://www.cnblogs.com/yuhangwang/p/4569066.html
Copyright © 2020-2023  润新知