html、css重难点总结

 

1、<a href="html02" target="_blank">html02</a> 
 target:链接中的内容在哪儿打开
 _blank:在新的窗口中打开
 _self:在当前窗口打开(默认)
2.使用图像作为链接地址
 <a href="html02.html"><img src="images/cp.gif" border="0"></a>
3.发邮件
 <a href="mailto:chengzh@tarena.com.cn">mail to me</a>
4.锚点(一个页面内容的跳转)
  命名一个锚点
  <a name="top">top</a>
  跳转到锚点
  <a href="#top">to top</a>
5.使用热点
  将一个图片划分成多个区域,每一个区域表示一个
  链接。
  <img src="index04.jpg" width="500"
  height="500" border="0" usemap="#m1" />
  <map name="m1" id="m1">
   <area shape="rect" coords="…" href="#" />
   <area shape="circle" coords="…" href="#" />
   <area shape="poly" coords="…" href="#" />
  </map>
   当shape="rect"(矩形)时,coords的值为左上角和右下角的坐标值; 当shape="poly"(多边形)时,
   为各顶点值; 当shape="circle"(圆形)时,为圆心坐 标值和半径值。 coords值依照图片大小的不同
   和所希望链接区域的不同而有所不同
  </map>

6、框架
  (1)什么是框架
  将一个窗口划分成多个子窗口,每一个子窗口都
  可以放置一个页面。
  frameset:
  
  iframe:
  frameset页面中不能出现body,而iframe可以
  用在body标记里。
7.xhtml与html的关系
  xhtml:可扩展的超文本标记语言
  html是一种语法宽松的语言,大小写不敏感,
  一些错误会忽略,w3c对html语法做了进一步的要求,
  即按照xml语法的要求重新定义了html标记。
  按照以下方式来写html
  第一行,写文档类型声明(可以省略)
  XHTML 过渡型
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  XHTML 严格型
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  HTML严格型
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  HTML松散型
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

8.实体代替某些符号:引号(&quot;),&(&amp;) >(&gt;) <(&lt;),空格(&nbsp;)

 

9.图片提交按钮:

  <button type="submit">
      <img src="images/cp.gif" border="0">
     </button>

10.选择器
  A.标签选择器(选择器的名称是一个标签的名字)
   标记的名称{
   }
  B. class选择器
   .任意的名称{
   }
   或者
   标记名称.任意的名称{
   }
  C.id选择器
   #任意的名称{
   }
  D.包含选择器
   
  E. 群组选择器
     
11.样式的继承
  子标记会继承父标记的样式
12.样式的优先级
  内联样式>内部样式>外部样式
  浏览器内部也有一个默认的样式
13.重点的属性
  文本相关的属性
  font-size: 12px;/15px; //字体大小
  font-weight:900 //磅 100-900 共9个数字
  text-align:rigth center left
  color:
  背景相关的属性
  background-color:#ff88ee;//背景
  background-image:url(images/t1.jpg)//背景图片
  background-repeat:no-repeat repeat-x repeat-y //平铺
  background-attachment:fixed //固定
  边框
  border:1px solid red;//宽度 样式 颜色
  border-left:
  border-right:
  border-top:
  border-bottom:
  位置
  width:100px //宽度
  height:100px //高度
  margin: 10px 9px 8px 7px;//外边距
  margin-left:7px;
  margin-right:9px;
  margin-top:10px
  margin-bottom:8px;
  margin:1px;//上,右,下,左都是1个像素
  margin:20px auto;//上下各20px,左右居中
  padding://内边距 有可能会将父元素撑大
  padding-left:
  padding-top:
  padding-right:
  padding-bottom:
  padding:10px 9px 8px 7px;
  
  块元素与行内元素:
  块元素:
   另起一行: h1..hn, p,div,form,ul/ol,li,img
  行内元素:
   在一行内:span
   
  display属性://元素的显示方式
   none:不显示
   block:以块元素的方式来显示
   inline:以行内元素的方式来显示
  position属性://元素的摆放方式
   static://默认摆放,从左到右,从上到下。
   absolute://按照父元素的位置偏移
   relative://先按照默认方式摆放,然后偏移
  
  float属性:
   left://取消独占一行的特性,向左浮动。
  text-decoration:none underline;//下划线
  链接的伪样式:
   a:link { color: red} 没有访问时
   a:visited { color: blue} 访问后
   a:active { color: lime} 鼠标点击但还没有放开时
   a:hover { color: aqua} 鼠标指向时
   
  
  

posted @ 2012-08-20 11:39  欢歌911  阅读(656)  评论(0编辑  收藏  举报