web标准开发-ppt讲义

• Web标准开发优点
  } 使 Web 页面的结构 (html/ Xhtml /xml) 、表现 ( css ) 、行为 ( javascipt ) 分离； } 使 web 页面可以适应当前所有流行的浏览器 ( 甚至是手机上的浏览器 ); } Web 页面整洁和简短 , 提 高 了页面的响应速度； } 利于扩展和维护 ; } 节约开发成本和缩短页面开发周期 ;
• Web 开发中的结构 (HTML)
  
  
  } Html 展示页面内容主要使用 html 标签 ; } Html 的常用标签及标签语义 , 标签主要包括有内容和属性 ; } <a href=“/demo/cc/cc.html"> 去到搜狐网 </a> } XHTML 的文档类型声明 : 严格版本 ( strict)、 过渡版本 ( transitional) 和基于框架的 HTML 文档 ( frameset); } 标签类型 : 块标签 / 行内标签 / 行内块标签 ; } 块标签 / 行内标签 / 行内块标签之间的区别 ;
  
  
• 
  
  常用的 HTML 标签 -block 标签
  
  } Html; } head; } body; } Title; } base; } div; } P; } blockquote ; } br ; } address, } abbr } img ; } object; } H1-h6
  
  
  
• 
  
  常用的 HTML 标签 -List
  
  } ul ; } ol ; } li ; } dl; } dt ; } dd ;
  
  
  
  
• 
  
  
  常用的 HTML 标签 -Form
  
  } form; } fieldset ; } legend; } input; } select; } optgroup ; } option; } label
  
  
  
  
  
• 
  
  
  
  常用的 HTML 标签 -Table
  
  } Table; } thead ; } tbody ; } tfoot ; } tr , } td; } th ; } caption; } summary; } colgroup ; } col ;
  
  
  
  
  
  
• 
  
  
  
  
  常用 HTML 标签 - 行内标签
  
  } A; } Span ; } strong ; } i ; } em ; } sup; } sub; } &copy, } & nbsp ; } ins; } del; } dfn
  
  
  
  
  
  
  
• 
  
  
  
  
  
  Web 开发中的表现 ( css )
  

样式的控制对象}针对属性id控制;

} 针对属性 class 控制 ;

} 针对标签控制 ;

} 针对标签的行为进行控制 ;

} 针对标签层级进行控制 ;

} 组合控制 ;

} 针对 * 进行控制 ;

• 
  
  
  
  
  
  
• 
  
  
  
  
  
  CSS控制的优先级
  
  } 0,0,0,0 } 写在标签上的是 1,0,0,0; } 使用 id 值的 0,1,0,0; } 使用 class 的值 0,0,1,0; } 直接使用标签或伪类 0,0,0,1; } !important;
  
  
  
  
  
  
  
  
• 
  
  
  
  
  
  
  CSS 中常见的控制属性 -border
  
  } Margin; } padding; } border; } width; } height; } line-height; } Outline
  
  
  
  
  
  
  
  
• 
  
  
  
  
  
  
  
  CSS 中常见的控制属性 -Background
  
  } background-image; } background-color; } background-position; } background-repeat; } background- attachment:fixed ;
  
  
  
  
  
  
  
  
  
  
• 
  
  
  
  
  
  
  
  
  CSS 中常见的控制属性 -position
  
  } postion ; } top; } Left; } Right; } Bottom; } Z-index;
  
  
  
  
  
  
  
  
  
  
  
• 
  
  
  
  
  
  
  
  
  
  CSS 中常见的控制属性 -word
  
  } font-family; } color; } font-size; } font-weight; } font-style; } text-decoration; } text- align:left /right/center/justify; } vertical-align: } Letter-spacing; } Word-spacing; } text-indent; font- variant:noraml /small-caps
  
  
  
  
  
  
  
  
  
  
  
• 
  
  
  
  
  
  
  
  
  
  CSS 中常见的控制属性 -list
  
  } List-style-type;  } List-style-image; } List-style-position;
  
  
  
  
  
  
  
  
  
  
  
  
• 
  
  
  
  
  
  
  
  
  
  
  CSS 中常用的控制属性 -table
  
  } rowspan ; } colspan ; } align, } border-spacing } valign ; } border; } border-collapse; } caption-side } empty-cells ; } Caption-side;
  
  
  
  
  
  
  
  
  
  
  
  
  
• 
  
  
  
  
  
  
  
  
  
  
  
  CSS 中常用的控制属性 -layout
  
  } Float; } clear; } Overflow } Display:none / block;inner -block; } Zoom;
  
  
  
  
  
  
  
  
  
  
  
  
  
  
• 
  
  
  
  
  
  
  
  
  
  
  
  
  CSS 控制的几种煤介
  
  } screan ; } print; } tv ; } handheld
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
• 
  
  
  
  
  
  
  
  
  
  
  
  
  
  几种常用图片的差异
  
  } jpg } bmp } gif } png