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>
<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="" /> <--隐藏字段-->
效果演示
特殊字符
+
" - "
& - &
< - <
> - >
小空格 -
大空格 -  
© - ©
® - ®
囍 - 囍
& - &
< - <
> - >
小空格 -
大空格 -  
© - ©
® - ®
囍 - 囍
<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"/> <--图片-->
<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]-->
<!--[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>
<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) */
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; /* 词间距 */
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 */
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; /* 内边距 */
100px; /* 宽度 */
height:100px; /* 高度 */
max-100px; /* 最大宽度[IE7] */
max-height:100px; /* 最大高度[IE7] */
min-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 */
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; /* 内边距 */
100px; /* 宽度 */
height:100px; /* 高度 */
max-100px; /* 最大宽度[IE7] */
max-height:100px; /* 最大高度[IE7] */
min-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; /* 表格样式 */
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不支持] */
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; 980px;">
/* DIV水平居中 */
<ruby>注音陈瑞银<rt style="font-size: 11px">zhu yin chen rui yin</rt></ruby> /* 汉语注音[仅IE下可用] */
<div style="overflow:hidden; text-overflow:ellipsis; 100px; white-space:nowrap"> /* 超出内容省略 */
<div style="word-break:break-all; word-wrap:break-word; 100px;"> /* 强制换行 */
<ruby>注音陈瑞银<rt style="font-size: 11px">zhu yin chen rui yin</rt></ruby> /* 汉语注音[仅IE下可用] */
<div style="overflow:hidden; text-overflow:ellipsis; 100px; white-space:nowrap"> /* 超出内容省略 */
<div style="word-break:break-all; word-wrap:break-word; 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支持 */
}
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;
}
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;
}