前端常规代码__书写法.doc

HTML 注释： map area shape= rect circle coords带有可点击区域的图像映射： CSS代码中进行注释的三种方法不能以数字开头命名CSS类请不要以阿拉伯1、2、3、4开头来命名css伪类，不然将造成浏览器无法解释解析以数字开头命名的css类，最后造成类似css hack样不兼容，或直接以数字开头css名称的类无效（浏览器无法解释）。但是可以用字母命名加数字方式命名，切记不能用数字加字母或纯数字方式来命名css选择器。1、选择器（childselector）如果你想在IE中隐藏一个CSS定义，可以使用子选择器。CSS注释代码：htmlbodyp /*declarations*/ 2、“通配符”(*)这种写法只有IE浏览器可以理解（对其他浏览器都隐藏）CSS注释代码：*htmlp /*declarations*/ 3、“反斜线”()如果你希望IE/Win有效而IE/Mac隐藏，可以使用“反斜线”技巧。CSS注释代码：/*/ *htmlp declarations /*/ JavaScript 多行注释多行注释以 /* 开始，以 */ 结尾。单行注释以 / 开头。HtmlCss从整体到局部套写代码Css规则由两个主要部分构成：选择器，以及一条或多条声明。每个声明由一个属性和一个值组成选择器声明选择器属性：值；属性：值；选择器，选择器，。属性：值，值，。空格是多种属性的值 Tableborder：1px solid red；逗号是或的意思（同种属性的各种值）body font-family: Verdana, sans-serif; 多种字体 不支持选后一种 派生选择器通过依据元素在其位置的上下文关系来定义样式li strong #开头为id选择器 （唯一性）. 开头为class选择器 （群类）属性选择器 所有元素属性都改变格式为 中括号 title color：red；提示：如果值为若干单词，则要给值加引号：p font-family: sans serif;Css创建外部样式内部样式表 内联样式This is a paragraph 第一行说明了他的文字编码第二行说明了他采用的语言第三行说明了他的作者第四行说明了他的版权第五行是对网站的简单描述第六行是说明了本网站的关键字后便两行主要是被百度这些搜索网站检索的时候用的 非常重要块级元素和行内元素的区别块级元素常见元素：div、p、form、ul、ol、li特性：独占一行，默认情况下，其宽度自动填满其父元素宽度width、height属性：可以设置，设置了宽度还是独占一行margin和padding属性：可以设置对应的相关display属性：block切换：display:inline变成行内元素行内元素常见元素：span、strong、em特性：不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化width、height属性：无效margin和padding属性：水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。对应的相关display属性： inline切换：display: display:block变成块级元素margin padding 上 右 下 左 和 上下 右左 和 上 右左 下text-decoration（装饰）:none(没有一点) n n去下划线CSS position 属性通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。position 属性值的含义：static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative （相对的 对比原始位置）元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。absolute （绝对的 浏览器）元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。fixed （固定的 浏览器）元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 z-index 堆叠顺序（上下覆盖）visibility 属性规定元素是否可见。提示：即使不可见的元素也会占据页面上的空间。请使用 display 属性来创建不占据页面空间的不可见元素值 描述visible 默认值。元素是可见的。hidden 元素是不可见的。collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 hidden。inherit 规定应该从父元素继承 visibility 属性的值。IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。imgopacity（不透明性）:0.4;filter（过滤）:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */-moz-opacity:0.4;/*火狐浏览器*/css float浮动产生浮动无法显示背景样式颜色 假设对一个对象设置了background背景颜色样式，该对象内部盒子有使用float浮动属性样式，这个时候该对象浮动产生，导致该对象不能撑开，所以css背景颜色就不能无法显示，解决方法有三种，一个是设置clear清除浮动、设置css高度、设置css overflow样式。Javascript对象访问对象的属性属性是与对象相关的值 （值的多少）objectNpertyName访问对象的方法方法是能够在对象上执行的动作objectName.methodName()Javascript创建内部 老式浏览器会用 外部 老式浏览器用 type=”text/script”注释 单行 / 多行 /* */document 文档对象var 变量 （该变量没有值）变量=“名词”/x+4数据类型字符串 数字 布尔 数组 对象 null undefined数字类型可以带小数点，也可以不带var x1=3400 或var x1=34e2var x2=0.0003或 var x2=3e-4数组var car=new Array();cars0=”audi”;cars1=”bmw”;cars2=”volvo”或者(condensed array)var cars=new Array(“aydi”,”bmw”,”volvo”);或者（literal array）var cars=“aydi”,”bmw”,”volvo”;对象对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式（name：value）来定义。属性由逗号分隔。var person=firstname:”bill”,lastname:”gates”,id:5566空格和折行无关紧要。声明可横跨多行。对象属性有两种寻址方式：name=person .lastnamename=person“lastname”布尔 null undefined声明变量类型当您声明新变量时，可以使用关键词“new”来声明其类型var x= mew numbervar y= mew booleanjavascript 中括号的应用小括号1. 函数声明时参数表function func(arg1,arg2)/.2.和一些语句联合使用以达到某些限定作用 和for in一起使用 for （var a in obj）和if一起使用if（boo）和while一起使用while（boo）和do while一起使用dowhile（boo）注意:在与if，while，do while一起使用时小括号会将其中的表达式结果隐式转换成布尔值。见无处不在的隐式类型转换。3. 和new一起使用用来传值（实参） 假设已经定义了类Person，它有两个字段姓名（name），年龄（age） var p1=new Person(jack，26)4. 作为函数或对象方法的调用运算符（如果定义了参数也可与语义3一样传实参） 假设已经定义了函数func func（）；假设已经定义了对象obj，且拥有func方法 obj.func()这里提下tpyeof运算符，有人喜欢这么使用请注意typeof后的小括号并非语义4（即不是函数调用），而是后面提到的语义5。我使用typeof一般不加后面的小括号。见具名函数的多种调用方式5. 强制表达式运算function strToJson(str)/eval中字符串两旁加了强制运算符（）var json=eval(+str+);return json;关于语义5，大家最熟悉的莫过于使用eval解析JSON又如使用较多的是匿名函数自执行（funtion()）();注意，以上代码第1对小括号是语义5，第3对则是语义4。大括号javascript中大括号有四种语义作用1.组织复合语句，这是最常见的if(condition)elsefor()2. 对象直接量声明 var obj=name:jack,age:23;整个是个赋值语句，其中name:jack,age:23是个表达式。3. 声明函数或函数直接量 function f1() var f2=function()f1与f2的区别是前者在语法解释期，后者在运行期。区别在于：如果调用函数的代码在函数定义之后， 则没有区别；如果调用函数的代码在函数定义之前，则f1仍然可以调用，f则会报错，提示f2未定义。4. 结构化异常处理的语法符号 trycatch（）exfinally这里的大括号与符合语句（语义1）是有区别的，大括号中如果只有一条语句，在if/else/for等大括号是可以省略的，但try/catch/finally则不能省略。以下代码纠结了偶n次function（）（） 匿名函数立即执行，语法分析期报错.constructor 获取对象直接量的构造器，语法分析期报错令人不解的是为何.constructor这么写却不报错呢，一个是想获取对象直接量的构造器，一个是获取数组直接量的构造器而已。当然添加个变量接收也不会报错同样的情况如var fn=function（）（），也不会报错。实际上是js的“语句优先”在作怪，即被理解成复合语句块（语义1）而不是对象直接量(语义2 )或声明函数(语义3 )的语义。function()()，大括号被理解成复合语句，自然前面的function()声明函数的语法不完整导致语法分析期出错。 .constructor，大括号被理解成复合语句，大括号后面是点运算符，点运算符前没有合理的对象自然也报错。 修复方式众所周知：加个强制运算符() (function()()，(function();/强制其理解为函数(语义3 )，“函数()”表示执行该函数，即声明后立即执行了。 ().constructor /()强制把大括号理解成对象直接量(语义2 )，“对象.xx”表示获取对象的成员，自然后面的点运算符可以正常执行了。中括号javascript中括号有四种语义1. 声明数组2. var ary= 声明一个空数组 var ary=1,3 声明一个数组，同时赋值2. 取数组成员 var ary=1,2,3;var item=ary03. 定义对象成员（可以不遵循标识符规则） var obj=为obj添加一个属性name，name是合法的标识符，即也可以通过方式来定义objname=jack为obj添加一个属性2a，2a不是合法的标识符（不能以数字开头），不能通过obj.2a来定义obj2a=test4. 取对象成员var obj=name:jack;obj2a=testobjname;/- - jackobj2a /- -test(不能通过obj.2a获取)函数Function 名（参数）var 变量名=方法（值）名.属性=值名.属性.属性=值.名 等于名（用于样式名替换 不固定的属性）执行 名（参数）字面量（常量） （数字 字符串） 变量SEO（搜索引擎优化）有很多工作要做，其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面中部IT网将对目前流行的CSS+DIV的命名规则整理如下：页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:regsiter状态:status按钮:btn投票:vote合作伙伴:partner友情链接:friendLink页脚:footer版权:copyRight 1.CSS ID 的命名外套:wrap主导航:mainNav子导航:subnav页脚:footer整个页面:content页眉:header页脚:footer商标:label标题:title主导航:mainNav(globalNav)顶导航:topnav边导航:sideba