html标记

html标记 
<p>我叫<u><span style="color:blue;font-weight:bolder">林建辉</span><u></p>
<em>倾斜</em> <i>倾斜</i> 
<strong>加粗</strong> <b>加粗</b>  
<sup>子元素</sup>  <sub>子元素</sub>   

<u>下划</u>  
 <s>删除</s>
 <pre>预格式化标记 :就是你在源码里面写成怎样,页面就会表现为什么样</pre>
<center></center>居中标记 
<blockquote  cite=” ”>  </blockquote> 该标签可定义一个块引用。文本缩进 HTML文档中的特殊字符： 空格：   < :   < 
 
 >  :     >   
版权号：&copy; 
注册商标：&reg; 
 
 
 
图片标记：<img  src=”url”alt=”” title=”” width=”” height=”” border=”” align=”” vspace=”” hspace=” ”  /> 
说明：
 src=”url”  图片的路径；alt=” 文本” 图片无法显示时替代的文本；  title=” 文本” 鼠标悬停时显示的内容；  
 width=” px/%” 设置图片宽；  height=”px/%” 设置图片高；  border=”数字”设置图像边框； 
 align=” ”left ( right ) 图片靠左，文字靠右（right相反）； 
top/middle/bottom 文字垂直居上、中、下（默认）；  vspace=”px” 定义图像顶部和底部的空白（垂直边距）；
 hspace=”px” 定义图像左侧和右侧的空白（水平边距）；提示：img的align属性只体现图片与文字之间的关系，不能改变图片在网页中的对齐方式。 
如果想让插入网页中的图片居中显示，则可以设置包含<img>标记的外层标记的align=”center”属性。
如：<p align=”center”><img src=”” alt=”” title=”” /></p>  

表格元素的属性：

<table  border=” ”> 边框宽，默认为0
<table  cellpadding=” ”>  表格边距（边框与内容），默认为2；
<table  cellspacing=” ”>  表格单元格之间的距离
text-bottom  [把元素的底端与父元素字体的底端对齐]; 
1.Td，英文全称是"table data cell"，中文含义："表中的数据单元".
2.Tr ，英文全称是"table row"的缩写，中文含义"表行".
3.Th，英文全称是"table header cell"的缩写，中文含义"表头单元格".
tr的属性：valign 规定表格行中内容的垂直对齐方式。、align 定义表格行的内容对齐方式。
td的属性： colspan 跨列 rowspan 跨行

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

伪类：选择符：伪类状态｛属性：值；｝ 
a.类选择符：状态｛属性：值；｝ ----->   a.web:visited{ } CSS伪类控制链接： 
未访问的链接：  a:link {color:#f00;}   已访问的链接：  a:visited {color:#0f0;}  鼠标移到链接上： a:hover {color:#f0f;}  鼠标按下链接：  
a:active {color:#00f;}  
设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。注：IE6/IE7不支持 语法格式： 
对象：focus{ } 
例： 
input:focus{font-size:14px;text-decoration:underline;color:blue;} 页面模块的常用CSS命名： 头：header 热点：hot 内容：cintent  新闻：news 
 
下载：download 尾：footer 
导航：nav 
广告：banner  
侧栏：siderbar 
栏目：column 
页面主体：main 子导航：subnav 菜单：menu  
左中右：left  center  right   子菜单：submenu 
登录条：loginbar 
版权：copyright 
标志：logo 
页面外围控制整体布局宽度：wrapper 友情链接：friendlinks 
CSS盒子模型： 
盒模型主要控制四个区域：①内容content、②边框border、③填充padding(也叫内边距、内补丁)、④
边界margin(也叫外边界、外补丁) 
整个盒模型在页面中所占的宽度 = 左边界+左边框+左填充+内容+右填充+右边框+右边界     控制元素的尺寸： 宽度：width:100px;   
高度 ： height:100px;    
设置元素的某一个方向外边距：margin-top/right/bottom/left: 10px;    通过参数个数不同来设置元素的外边距： 
margin:10px;   
 
 上下左右四个方向 ；  margin:10px  20px    
 
 
上下   左右 ；    
margin:10px  20px  30px;    上   左右  下；   
注意：如果鼠标放上超链接效果不起作用，请修改相应CSS中链接状态的顺序， 顺序如下：
link/visited/hover/active 
即L--V--H--A 
margin: 10px  20px  30px  40px;   上   右   下   左 ；   
设置元素的内边距：padding: 10px  20px  30px  40px; 上   右   下   左  ；   属性清零：不使用通配符*，网页中用到什么选择符就都写上。例： 
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div {    border: 0 none;    margin: 0;    padding: 0;  } ul, ol {    list-style-type: none;   } 
边框属性：border:border-width  border-style   border-color     例： border:2px  solid  #ccc;    
边框粗细为2像素，线型为实线，线颜色为灰色；   
盒子水平居中【只需设置左右外边界为auto即可】：  margin:100px  auto  0;     
html元素分两种：块状元素和内联元素 1、块状元素：{display:block;}    
一般是其它元素的容器，可容纳内联元素和其它块状元素，块状元素排斥其它元素与其位于同一行（独占一行），可设置宽度（width:）和高度（height:）。 
常见的块状元素有：div、p、body、h1~h6、dl、ul、ol、blockquote、center、form、hr、menu、table、pre等。 
2、内联元素：{display:inline;}   
内联元素也叫行内元素，只能容纳文本或者其它内联元素，它允许其它元素与其位于同一行，但是宽、高、行高、内外边距都不能改变。常见的内联元素：a、em、span、img、big、small、br、font、b、i、u、input、lable、select、sub、sup、textarea、var  等。 块状元素与内联元素的相互转换： 
将内联元素转换成块状元素：a{display:block;}   将块状元素转换成内联元素：div{display:inline;} CSS控制背景： 
背景：background:颜色;图片;平铺方式;固定方式;位置;   背景颜色：background-color:#ccc;   
背景图像：background-image:url(图像位置及文件名) 背景图像的重复方式：background-repeat: repeat; 默认值，背景图像在纵向和横向上平铺； 
     no-repeat; 不平铺；      repeat-x; 
仅在横向上平铺； 
 
 
 
 
 
repeat-y;   仅在纵向上平铺； 
背景图像的位置：background-position:top [left/center/right]   



        center [left/center/right];           bottom [left/center/right];           x坐标   y坐标;    
 
 
 
 
 
背景图像默认在元素的左上角显示。 
背景图像的依附方式：【存在兼容性问题】 backbround-attachment:scroll 
默认值，背景图像是随对象内容滚动  
backbround-attachment:fixed 背景图像固定（是将图像固定在屏幕的某个位置，而不是元素）  兼容性：IE6只有html与body这两个元素支持这个属性值 CSS精灵： 
制作翻转按钮效果的两种方法： 
1、需要两张图片，一张用于正常状态（a:line{background:url(pic1.jpg)}），一张用于鼠标经过状态（a:hover{background:url(pic2.jpg)}）。 
2、将上面两张图片合并成一张，设置为按钮的背景，然后将a:hover{ }背景属性向上移动相应的像素即可。 
技巧：在使用图片时，能合成一张图片使用的尽量使用一张图片，这样可以减少HTTP请求。 CSS布局的三种方式： 
1、默认的文档流布局方式：按默认的html元素的结构顺序显示；  
2、浮动布局方式：通过设置html元素的float属性显示； 3、定位布局方式：通过设置html元素的position属性显示； 浮动float:none/left/right;   
不浮动、左浮动、右浮动   
如果想让多个 块显示在同一行中，可以将这些块都 设置为浮动，并且浮动方向相同。 清除浮动【就是去掉前面的元素浮动对父元素及后面元素的影响（布局错乱）】 属性 clear: none;  默认值，允许两边都可以有浮动对象；   left;  不允许左边有浮动现象；   right;  不允许右边有浮动现象；  
 
both;   
左右两侧不允许有浮动现象； 
让块元素在html窗口中居中显示：margin: 0  auto;    
注意：设置一个块元素为水平居中时，一般要给它设置一个宽度值，这样它的宽度才是固定不变的，否
则，它默认宽度是浏览器窗口的100%宽，这样的宽度是不固定的，它会随着浏览器窗口的大小改变而发生变化。   









清除浮动的方法： 
浮动元素对父元素的影响：当父元素没有指定高度时，并且它的子元素有浮动，这时，这个父元素的高度不会自动适应。下面清除浮动的几种方法或解决这个问题。 1、额外标签法：在容器的末尾增加一个“clear:both;”的元素。 
2、父元素使用overflow的方法：通过设置父元素overflow值设置为hidden   。 3、利用伪对象after的方法：定义一个类，使用伪对象after，控制浮动元素的影响。 网上最流行的清除浮动代码： 
.clearFix: after{ 
clear:both;   display:block;  visibility:hidden;  height:0;  line-height:0;  content:”.”; } 
 
定位布局： 
position 
Position: static; 静态定位，默认值；  
Absolute; 绝对定位，设置left/right/top/bottom，相对父级定位，无父级依据body。 Relative; 
相对定位，设置left/right/top/bottom，相对自身定位。 
注意：当我们想使用绝对定位时，必须要具备两个条件： 
①、必须给父元素加定位属性，一般建议使用position:relative;    ②、给子元素加绝对定位：position:absolute;  同时要加方向属性。  
CSS中溢出的使用： 属性overflow: visible; 默认值； 
  auto;  在必需时对象内容都会被裁切或显示滚动条；   hidden; 不显示超过对象尺寸的内容；   
scroll; 
总是显示滚动条； 
 
 
.clearFix{ zoom:1; } 
只IE6支持。