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

  
  

   

 

 

•