HTML-CSS速查

页面下载

HTML标签

< html> 标准HTML结构 +

<! doctype html>
< html>
< head>
  < meta charset="utf-8" />
  < title> 页面名称</ title>
  < meta name="Keywords" content="关键词"/>
  < meta name="description" content="描述"/>
  < meta http-equiv="x-ua-compatible" content="ie=7" /> <--IE7兼容模式-->
  < meta http-equiv="imagetoolbar" content="no" /> <--去掉图片工具条-->
  < base href="http://www.cnblogs.com/"> <--页面所有相对链接的基准URL-->
  < base target="_blank"> <--连接默认在新窗口打开-->
  < link href="*.css" rel="stylesheet" type="text/css" /> <--外部样式表-->
  < style type="text/css"></ style> <--内嵌样式表-->
  < script type="text/javascript" src="*.js"></ script> <--外部JS-->
  < script type="text/javascript"></ script> <--内嵌JS-->
</ head>
< body>
  < div>
    < span></ span>
  </ div>
</ body>
</ html>

< a> 连接标记 +

常用连接

< a href="http://www.cnblogs.com"> 博客园</ a>
< a href="http://www.cnblogs.com/index.html"> 转到页面</ a>
< a href="index.html?id=123&tag=love#book"> 多个参数</ a>
< a href="/about.aspx"> 根目录</ a>
< a href="./about.aspx"> 本目录</ a>
< a href="../about.aspx"> 上级目录</ a>
< a href="index.html" rel="nofollow"> 搜索引擎不要跟踪链接</ a>

锚点

< a id="abc1"></ a> < a name="abc1"></ a>
< a href="#abc1"> 转到锚点</ a>
< a href="a.html#abc1"> 转到锚点</ a>

跳转 target

< a target="_blank" href="a.html"> 新窗口打开</ a>
< a target="_self" href="a.html"> 本窗口打开</ a>
< a target="_parent" href="a.html"> 父窗口打开</ a>
< a target="_top" href="a.html"> 顶级窗口打开</ a>
< a target="frame1" href="a.html"> 在指定框架中打开</ a>

执行脚本

< a href="javascript:alert('1');"> 执行JS脚本</ a>
< a href="javascript:void(0);" onclick="alert(1);"> 执行JS脚本</ a>

< table> 表格结构 +

标准表格结构

< table border="1" cellpadding="3" cellspacing="0" style="border-collapse:collapse;">
  < caption> 表头</ caption>
  < colgroup>
    < col style="color:Red;" />
  </ colgroup>
  < thead>
    < tr>
      < th> 列1</ th>
      < th> 列2</ th>
      < th> 列3</ th>
    </ tr>
  </ thead>
  < tbody>
    < tr>
      < td> 1</ td>
      < td> 1</ td>
      < td> 1</ td>
    </ tr>
    <tr style="background-color:Gray;">
      < td> 2</ td>
      < td> 2</ td>
      < td> 2</ td>
    </tr>
    <tr>
      < td> 3</ td>
      < td> 3</ td>
      < td> 3</ td>
    </tr>
  </ tbody>
  < tfoot>
    < tr>
      < th> 低</ th>
      < th> 低</ th>
      < th> 低</ th>
    </ tr>
  </ tfoot>
</ table>

显示效果

表头

列1	列1	列1
1	1	1
2	2	2
3	3	3
低	低	低

< form> 表单 +

表单

< form action="a.aspx" method="get"></ form>

按钮

< input type="button" value="按 钮" onclick="" />
< input type="reset" value="重 置" />
< input type="submit" value="提 交" />
< input type="image" src="" /> <--图片按钮-->
< button type="button">确 定 < img /></ button>

选项

< input type="checkbox" id="chk1" /> < label for="chk1"> 复选框</ label>
< input type="checkbox" disabled /> <--复选框(禁用)-->
< input type="checkbox" checked /> <--复选框(默认选中)-->
< input type="radio" name="rr" checked /> <--单选框(默认选中)-->
< input type="radio" name="rr" /> <--单选框-->
< select multiple> <--multiple多选标记-->
  < optgroup label="选项组">
    < option> 选项1</ option>
    < option value="sss"> 选项1</ option>
    < option selected> 选项1</ option>
  </ optgroup>
</ select>

输入框

< input type="text" value="文本框" />
< input type="text" disabled value="禁用文本框" />
< input type="text" readonly value="只读文本框" />
< input type="text" maxlength="10" value="限制长度" />
< input type="text" accesskey="a" value="文本框alt-a" />
< textarea>多行输入框</ textarea>

其他

< fieldset> <--表单框-->
  < legend>表单框</ legend>
   内容
</ fieldset>
< input type="file" /> <--选择文件-->
< input type="hidden" value="" /> <--隐藏字段-->

效果演示

表单演示

复选框
复选框(禁用)
复选框(默认选中)
上传文件
隐藏字段
图片按钮
密码输入框
单选框(默认选中)
单选框






文本框关联alt-a
单选下拉框 选项1 选项1 选项1
多选列表
选项1 选项2 选项3
多行输入框

&nbsp; 特殊字符 +

" - &quot;
& - &amp;
< - &lt;
> - &gt;
小空格 - &nbsp;
大空格 - &emsp;
© - &copy;
® - &reg;
囍 - &#22221;

< div> 块文本 +

< div>块级元素</ div>
< h1>标题</ h1> <--h1到h6-->
< pre>预格式文本</ pre>
< span>行级元素</ span>
< p>段落</ p>
< i>斜体</ i>
< b>粗体</ b>
< br /> <--换行-->
< bdo dir="rtl"> 文字从右到左</ bdo>
< hr /> <--分割线-->
< ul> <--无序列表-->
  < li> Coffee</ li>
  < li> Tea</ li>
  < li> Milk</ li>
</ ul>
< ol> <--有序列表-->
  < li> Coffee</ li>
  < li> Tea</ li>
  < li> Milk</ li>
</ ol>
< img src="../mypic.gif" galleryimg="no"/> <--图片-->

< IE> ie条件注解 +

<!--[if IE]>此内容只有IE可见<![endif]-->
<!--[if IE 6.0]>此内容只有IE6.0可见<![endif]-->
<!--[if !IE 6.0]>此内容除了IE6.0版本之外都可见<![endif]-->
<!--[if gt IE 5.0]>此内容只有IE5.0以上版本可见<![endif]-->
<!--[if lt IE 6.0]>此内容只有IE6.0以下版本可见<![endif]-->
<!--[if gte IE 5.0]>此内容只有IE5.0及以上版本可见<![endif]-->
<!--[if lte IE 6.0]>此内容只有IE6.0及以下版本可见<![endif]-->

CSS

添加 添加CSS +

< link href="*.css" rel="stylesheet" type="text/css" /> <--外部样式表-->
< style type="text/css"></ style> <--内嵌样式表-->
< div style="font-size:12px;"></ div>
< div class="divRed divBlue"></ div>
< div id="div1"></ div>

选择器 CSS选择器 +

* {} /* 所有元素 */
body {} /* body元素 */
div,span {} /* 所有div span元素 */
div span {} /* 所有div包含的span元素 */
.title {} /* 类选择器 */
p.title {} /* 类名为title的所有P元素 */
p .title {} /* P包含的所有类型为title的元素 */
#txtName {} /* ID选择器 */
a:link {} /* 正常连接 */
a:visited {} /* 访问过的连接 */
a:hover {} /* 鼠标经过时 */
a:active {} /* 鼠标按下时 */
p:first-line /* P的第一行 */
p:first-letter /* P的第一个字 */
/* 以下选择器IE6不支持 */
#title>p {} /* 子选择器(IE7) */
img[title] {} /* 属性选择器 所有设置了title的图片(IE7) */
input[type="text"] {} /* 所有文本框(IE7) */
div+p {} /* 紧跟着DIV的第一个同级P元素(IE7) */
div~p {} /* DIV后的所有同级P元素(IE7) */
a:hover span {} /* 伪类选择器(IE7) */
div:hover {} /* 当鼠标在DIV上时(IE7) */
input:focus {} /* 当input获得焦点时(IE8) */
div:before {content:"abc"} /* 在DIV前加abc(IE8) */
div:after {content:"abc"} /* 在DIV后加abc(IE8) */
div li:first-child {} /* DIV下的第一个LI元素(IE7) */

文字 文字样式 +

color:#FF0000; /* 文字颜色 */
color:#F98; /* 文字颜色 */
color:rgb(100,255,0); /* 文字颜色 */
color:rgb(100%,20%,0%); /* 文字颜色 */
color:Black; /* 文字颜色 */
/* White|Black|Red|Blue|Green|Yellow|Gray|Orange */
color:inherit; /* 继承父级 */
direction:rtl; /* 文字从右到左 */
font-size:30px; /* 文字大小 */
font-size:2em; /* 文字大小 */
font-size:large; /* 文字大小 */
/* xx-small|x-small|small|medium|large|x-large|xx-large */
font-family:Arial; /* 字体 */
font-family:Arial,serif,宋体; /* 字体 */
/* Arial|Georgia|Tahoma|Times|Verdana|sans-serif|serif|宋体|微软雅黑 */
font-style:italic; /* 字体风格 */
/* normal|italic|oblique */
font-variant:small-caps; /* 小型大写字母 */
font-weight:small-caps; /* 字体粗细 */
/* normal|bold|bolder|lighter|数值 */
text-indent:5em; /* 文本缩进 */
text-align:center; /* 文本对齐 */
/* left|right|center|justify */
letter-spacing:1px; /* 字间距 */
line-height:23px; /* 行间距 */
text-decoration:none; /* 文字修饰 */
/* none|underline|overline|line-through */
text-transform:uppercase; /* 大小写控制 */
/* none|capitalize|uppercase|lowercase */
white-space:normal; /* 空格处理方式 */
/* normal|pre|nowrap|pre-wrap|pre-line */
word-spacing:1px; /* 词间距 */

背景 背景样式 +

background:#FF0000 url(*.jpg) no-repeat fixed top center; /* 背景 */
background-color:#FF0000; /* 背景色 */
/* red|#FF0|#ff9090|rgb(2,3,89)|transparent */
background-image:url(*.jpg); /* 背景图片 */
/* url(URL)|none */
background-repeat:no-repeat; /* 背景图片平铺方式 */
/* repeat|repeat-x|repeat-y|no-repeat */
background-attachment:fixed; /* 背景图片是否固定位置 */
/* scroll|fixed */
background-position:fixed; /* 背景图片是否固定位置 */
/* top center|10% 50%|20px 30px */

块属性 大小、位置 +

margin:10px; /* 外边距[四边] */
margin:10px 20px; /* 外边距[上下，左右] */
margin:10px 20px 30px 10px; /* 外边距[上右下左] */
margin-top:10px; /* 外边距 */
margin-bottom:10px; /* 外边距 */
margin-left:-10px; /* 外边距 */
margin-right:auto; /* 外边距 */
padding:10px; /* 内边距[四边] */
padding:10px 20px; /* 内边距[上下，左右] */
padding:10px 20px 30px 10px; /* 内边距[上右下左] */
padding-top:10px; /* 内边距 */
padding-bottom:10px; /* 内边距 */
padding-left:10px; /* 内边距 */
padding-right:10px; /* 内边距 */
width:100px; /* 宽度 */
height:100px; /* 高度 */
max-width:100px; /* 最大宽度[IE7] */
max-height:100px; /* 最大高度[IE7] */
min-width:100px; /* 最小宽度[IE7] */
min-height:100px; /* 最小高度[IE7] */
position:absolute; /* 定位类型 */
/* absolute|fixed|relative|static fixed[IE7] */
top:10px; /* 距顶 */
bottom:10px; /* 距低 */
left:10px; /* 距左 */
right:10px; /* 距右 */
float:left; /* 浮动 */
/* left|right|none */
clear:both; /* 清除浮动 */
/* left|right|both|none */
cursor:pointer; /* 鼠标样式 */
/* url()|default|auto|crosshair|pointer|move|text|wait|help */
display:none; /* 显示方式 */
/* none|block|inline|inline-block */
overflow:hidden; /* 超出显示方式 */
/* visible|hidden|scroll|auto */
vertical-align:baseline; /* 上下对齐方式 */
/* baseline|sub|super|top|text-top|middle|bottom|text-bottom|数值 */
visibility:hidden; /* 是否显示 */
/* visible|hidden */
z-index:3; /* 层叠顺序 */
/* 数字|auto */

边框 边框、列表、表格 +

border:3px solid red; /* 边框 */
border-top:3px dotted red; /* 上边框 */
border-bottom:3px dashed red; /* 下边框 */
border-left:3px solid red; /* 左边框 */
border-right:none; /* 右边框 */
list-style:square inside url('/i/arrow.gif'); /* 列表样式 */
list-style-image:url('/i/arrow.gif'); /* 列表图片 */
list-style-position:inside; /* 列表标记位置 */
/* inside|outside */
list-style-type:inside; /* 列表标记类型 */
/* none|circle|square|decimal|disc */
border-collapse:collapse; /* 表格样式 */

CSS3 CSS3样式 +

color:rgba(255,100,0,0.3); /* 半透明颜色[IE9] */
border-radius:15px; /* 圆角[IE9] */
-moz-border-radius:15px; /* 圆角[Firefox] */
box-shadow:10px 10px 5px #888; /* 阴影[IE9] */
-moz-box-shadow:0 0 5px 5px #888; /* 阴影[Firefox] */
-webkit-box-shadow:10px 10px 5px #888; /* 阴影[Chrome] */
opacity:0.5; /* 半透明[IE9] */
text-shadow:2px 2px 2px #000; /* 文字阴影[IE不支持] */
outline:2px solid blue; /* 外边框[IE不支持] */

CSS技巧 CSS技巧 +

< div style="margin:10px auto; width:980px;"> /* DIV水平居中 */
< ruby> 注音陈瑞银< rt style="font-size: 11px"> zhu yin chen rui yin</rt></ruby> /* 汉语注音[仅IE下可用] */
< div style="overflow:hidden; text-overflow:ellipsis; width:100px; white-space:nowrap"> /* 超出内容省略 */
< div style="word-break:break-all; word-wrap:break-word; width:100px;"> /* 强制换行 */

CSS hack CSS兼容方法 +

#test{
  color:red; /* 所有浏览器都支持 */
  color:red !important; /* Firefox、IE7支持 */
  _color:red; /* IE6支持 */
  *color:red; /* IE6、IE7支持 */
  *+color:red; /* IE7支持 */
  color:red\9; /* IE6、IE7、IE8支持 */
  color:red\0; /* IE8支持 */
}

CSS reset CSS同一初始化 +

body, div, dl, dt, dd, ul, ol,
li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td {
  padding: 0;
  margin: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset, img {
  border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
  font-weight: normal;
  font-style: normal;
}
ol, ul {
  list-style: none;
}
caption, th {
  text-align: left;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
}
q:before, q:after {
  content:”;
}
abbr, acronym {
  border: 0;
}

参考资料

HTML参考
HTML5 CSS3支持速查