上学时的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 = "[email protected]";
          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 - 定义变量

时间: 2024-10-06 19:21:07

上学时的HTML+JS+CSS(小总结)的相关文章

js,css小知识点记录

JS手册中提到:可以使用任意表达式作比较表达式.任何值为0.null.未定义或空字符串的表达式被解释为 false.其他任意值的表达式解释为 true.也就是说,这里会隐式的转换为布尔值. //css :#id .下属class(可以是直接或间接下属classs) #newfncbtnpanel .am-condition { margin-top: 10px; margin-left: 6px; margin-bottom: 5px; } show()\hide()  是jquery方法,即d

【必备】史上最全的浏览器 CSS &amp; JS Hack 手册

[必备]史上最全的浏览器 CSS & JS Hack 手册 浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊! IE 选择器 Hack 1 2 3 /* IE 6 and below */ * html .s

JavaScript之打飞机小游戏 js css

先引入    jquery-1.12.4.min.js 和    lodash.min.js css .container{ width: 320px; height: 568px; margin: 0 auto; text-align: center; position: relative; overflow: hidden; } .start-page{ width: 320px; height: 568px; background: url('../images/start_bg.png'

springmvc如何访问到静态的文件,如jpg,js,css

如何你的DispatcherServlet拦截"*.do"这样的有后缀的URL,就不存在访问不到静态资源的问题. 如果你的DispatcherServlet拦截"/",为了实现REST风格,拦截了所有的请求,那么同时对*.js,*.jpg等静态文件的访问也就被拦截了. 要解决这个问题. 目的:可以正常访问静态文件,不可以找不到静态文件报404. 方案一:激活Tomcat的defaultServlet来处理静态文件 <servlet-mapping> &l

JS firebug小技巧

实际上前端的发展与进步也离不开浏览器的支持,而对于开发人员来讲,浏览器最好的支持,就是对于debug的良好支持,甚至在某些后续接手的项目中,前端的debug甚至可以解决好多问题--不说了,都是泪啊!还是说下firefox下的firebug吧.虽然ff内置一个调试的功能,但是,感觉不完善,对于开发人员来讲,根本不够用,于是ff下还是推荐firebug,老牌的前端debug工具,好用!而IE.Chrome都有很不错的工具支持,基本够用,但是用惯了ff的我,还是坚挺在firebug下. 1.使用"de

Call Me By Your Name - node.js的小美好

个人总结:读完这篇文章需要20分钟 Call Me By Your Name - node.js的小美好 node的出现,真是让用惯js的前端工程师遇见了爱情,进而大踏步的走向了后端,尽管有时候会被质疑,不被理解.那又有什么关系. 本文是<一站到底 ---前端基础之网络>代码的整理.但也是一篇独立的node零基础学习笔记. 首先你需要安装node环境.大家自己去看教程就好.本文和函数式编程那篇文章是一样的思路.我们先用先实现.如果有机会我们回过头再来补理论,其实API也没啥需要补,有时间我们写

js css样式操作代码(批量操作)

js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09 用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率. 我们用js书写css样式通常会用下面的两种方式: 一般情况下我们用js设置元素对象的样式会使用这样的形式: 复制代码 代码如下: var element= document.getElementById(”id”); element.style.width=”20px”; element.style.he

CSS小技巧

CSS 小技巧 总结的网络上的资源,以备自己后续参考... 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… /* 添加边框 */ .nav li { border-right: 1px

Google Pagespeed,自动压缩优化JS/CSS/Image

Google Pagespeed,自动压缩优化JS/CSS/Image 浏览:257 发布日期:2015/07/05 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Image 这个周末,把服务器的Nginx升级了下,并加入了Google Pagespeed模块 效果很明显: 页面加载的多个JS.CSS会自动合并压缩处理 发现新版本的Pagespeed能很好的发现处理用户加载的第三方JS库,如jQuery 发现新版本的lazyload_imag