标签：
是开始标签到结束标签的所有代码<a href="http://www.w3school.com.cn">This is a link</a>
HTML 水平线<hr />
HTML 注释
<!-- This is a comment -->
<p>This is a paragraph</p>
<br />由于关闭标签没有任何意义，因此它没有结束标签。
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
内联样式
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
<a href="http://www.cnblogs.com/flipped/" target="_blank">Visit MyBlog!</a>
<img src="boat.gif" alt="Big Boat" width="50" height="50">
没有闭合标签，src属性为图片地址，alt属性为当图片不能加载时的替换文本，宽高属性调整图片尺寸<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
<tr>表示行，<td>表示列，border属性为表格边框宽度<ul> <li>Coffee</li> <li>Milk</li> </ul>无序列表始于 <ul> 标签。每个列表项始于 <li>。有序列表即把<ul>替换为<ol>
HTML 元素被定义为块级元素(block level element)或内联元素(inline element)。块级元素在浏览器中以新的一行开始和结束例如<h1>, <p>, <ul>, <table>，内联元素如<b>, <td>, <a>, <img>
是块级元素，作为组合其他元素的容器，或用于文档布局
是内联元素，作为文本的容器，可给部分文本设置样式
<form> ... input 元素 ... </form>
表单指包含文本域、下拉列表、单选框、复选框等输入信息的表单元素的区域
<input type="text" name="nickname" /><input type="radio" name="sex" value="male" />type属性指定输入类型，text表示文本输入框，radio表示单选框，checkbox表示复选框，button表示普通按钮，submit表示提交按钮
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
通过frame标签将几个HTML文档放在一个HTML文档中，每个文档独立于其他文档
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0" ></iframe>
用于在网页内显示其他网页
<head>是所有头部元素的容器，可以放<title>、<base>、<link>、<meta>、<script> 以及 <style>，其中<title>定义网页标题
<title>Title of the document</title>
<link>常用来连接外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style>用于定义样式信息
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
<meta>用于定义网页的描述关键词，便于搜索引擎索引
<meta name="description" content="这是一个个人博客" />
<meta name="keywords" content="前端,博客,个人" />
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。因此HTML 中的预留字符必须被替换为字符实体。如小于号写成< 或 <，在HTML源码中打10个空格，浏览器只显示1个空格，因此用 来输出更多空格
<embed height="80" width="500" src="/i/horse.mp3"></embed>
用embed标签嵌入MP3文件
<video src="movie.ogg" controls="controls" width="320" height="240" ></video>
添加视频，control 属性供添加播放、暂停和音量控件。
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
selector {declaration1; declaration2; ... declarationN }
h1 {color:red; font-size:14px;}
h1,h2,h3,h4,h5,h6 {
color: green;
}
被分组的选择器共享系统的声明
li strong {
font-style: italic;
font-weight: normal;
}
只改变<li>标签中的strong元素的样式
css代码为：#red {color:red;}HTML代码为：<p id="red">这个段落是红色。</p>
同一个id 属性只能在每个 HTML 文档中出现一次
css代码为：.center {text-align: center}HTML代码为：<p class="center">
This paragraph will also be center-aligned.
</p>
类名的第一个字符不能使用数字，类 属性可以在每个HTML中出现多次
h1 {color:blue;}
p {background-color: gray;}
body {background-image: url(/i/eg_bg_04.gif);}
背景重复body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
背景定位body
{
background-image:url(‘/i/eg_bg_03.gif‘);
background-repeat:no-repeat;
background-position:center;
}
背景固定body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
缩进文本 p {text-indent: 5em;}
文本居中对齐 h1 {text-align:center}
文本装饰(使链接无下划线) a {text-decoration: none}
按给出的字体顺序，选择候选字体p {font-family: Times, TimesNR, ‘New Century Schoolbook‘,
Georgia, ‘New York‘, serif;}
不同的style p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
不同的粗细 p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小 h1 {font-size:60px;}
1em=父元素的字体大小 h1 {font-size:3.75em;}
所有字体属性在一个声明里，其中30px表示line-height行高 p{font:italic bold 12px/30px arial,sans-serif;}
链接的四种状态：
无序列的小圆点 ul.circle {list-style-type:circle;}
无序列的小方块 ul.square {list-style-type:square;}
有序列的大写罗马数字 ol.upper-roman {list-style-type:upper-roman;}
有序列的小写字母 ol.lower-alpha {list-style-type:lower-alpha;}
无序列的图片 ul li {list-style-image : url(xxx.gif)}
简写样式，inside代表标志出现在列表项内容内部li {list-style : url(example.gif) square inside}
td
{
height:50px;设置高度
vertical-align:bottom;文本竖直对齐
padding:15px; 表格内边距
}
table, td, th
{
border:1px solid purple;表格边框颜色
background-color:gray;表格背景颜色
color:white;表格文字颜色
}
外边距 margin: 0; 内边距 padding: 0;
分别设置上下左右的内边距 padding: 10px 0.25em 2ex 20%;
position 属性值的含义：
向右浮动 float:right;
清除浮动（左右两边的） clear:both;
左和右外边距设置为 "auto"，来水平对齐块元素
margin:auto
position设置左右对齐
position:absolute; right:0px;
float设置左右对齐
float:right;
| 属性 | 描述 |
|---|---|
| clear | 设置一个元素的侧面是否允许其他的浮动元素。 |
| cursor | 规定当指向某元素之上时显示的指针类型。 |
| display | 设置是否及如何显示元素。 |
| float | 定义元素在哪个方向浮动。 |
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| visibility | 设置元素是否可见或不可见。 |
内联元素display: inline; 消失display: none; 块级元素display: block
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
div
{
box-shadow: 10px 10px 5px #888888;
}
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
div
{
background:url(bg.gif);
-moz-background-size:50px 100px; /* 老版本的 Firefox */
background-size:50px 100px;/* 分别代表宽度高度 */
background-repeat:no-repeat;
}
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div
{
background:url(bg.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;/* 背景图片在文本区域 */
}
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
p {word-wrap:break-word;}
<style>
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
url(‘Sansation_Light.eot‘); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
transform: translate(50px,100px);/* 移动到X,Y坐标 */
transform: scale(2,4);/* 拉伸到2倍宽4倍高 */
transform: skew(30deg,20deg);/* 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。 */
transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* 旋转，缩放，移动，倾斜*/
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
div
{
transform: rotateX(120deg); /* rotateY(130deg); */
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
transition: width 2s, height 2s, transform 2s;
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
标签：
原文地址：http://www.cnblogs.com/flipped/p/5184610.html
