感觉在Sublime Text3中写起来比较方便~~
将HTML5中要用到的基本标签全部放在了一起，没有好好的整理，为了自己记忆的方便，就先这样写下来了~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>All Base knowledge</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
标题
<h1>I am h1</h1>
<h2>I am h2</h2>
<h3>I am h3</h3>
<h4>I am h4</h4>
<h5>I am h5</h5>
<h6>I am h6</h6> 段落
<p>I am paragraph</p> 链接
<a href="http://www.baidu.com">我是链接</a> 图片
<img src="img/back.jpg" alt=""> 换行
<br>
I am line feed
<br>
<br>
I am line feed 水平线
<hr >
hr is horizontal line <!---->
<! --I am not see-->
<br>
<br><br> 粗体字
<br>
<b>I am bold face letter </b>
<br> 加重语气
<br>
<strong>I am say sth. with emphasis</strong>
<br>
<br> 着重文字<br>
<em>I am focus on words</em>
<br>
斜体字<br><br>
<i>I am inclined letter</i>
<br><br>
大号文字<br><br>
<big>I am bigger letter</big>
<br><br>
小号字<br><br>
<small>I am small letter</small>
<br><br>
上标字<br>
HTML<sup>5</sup><br>
下标字<br>
HTML<sub>5</sub><br> 插入字<br>
<ins>I am insert letter</ins>
<br> 删除字<br>
<del>I am delete letter</del>
<br> 缩写字<br>
<abbr>I am abbrevation letter</abbr><br>
<abbr title="World Wide Web">WWW是万维网</abbr><br> 首字母缩写<br>
<acronym title="World Wide Web">WWW</acronym> <br>地址<br>
<address>
联系地址：area<br>
联系电话：1212324<br>
联系人：cat
</address>
<br>
div
<div>I am div</div>
<br> span
<br>
<span>I am span</span><br> 表格：table
<br>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<br>
<tr>
<td>Mary</td>
<td>18</td>
<td>girl</td>
</tr>
<br>
<tr>
<td>Helen</td>
<td>38</td>
<td>girl</td>
</tr>
<br>
无序列<br>
<ul>
<li>I am gradefather
<ul>
<li>I am father
<ul>
<li>I am son</li>
<li>I am son, too</li>
</ul></li>
<li>I am father, too</li>
</ul></li>
<li>I am gradefather, too</li>
</ul>
<br>
有序列<br>
<ol>
<li>I am gradefather
<ol start="30">
<li>I am father
<ol start="50">
<li>I am son</li>
<li>I am son,too</li>
</ol>
</li>
<li>I am father,too</li>
</ol>
</li>
<li>I am gradefaher, too</li>
</ol>
<br> 定义列表<br>
dl dt dd
<br>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置</dd>
</dl>
<br>
表单<br>
<form action="">
<input type="text" name="t1">
<input type="text" name="t2">
<input type="submit">
<!<input type="password">
<input type="submit">
</form>
<br>
文本域<br>
textarea<br>
<textarea name="textarea" id="" cols="10"rows="5"maxlength="10" placeholder="请填写" readonly readonly></textarea>
rows:高度
<br>
cols：宽度<br>
maxlength:最大输入文字数
disabled:禁止输入
placeholder="请填写"：制定占位符
readonly:只读
<br>
控制标签:label
<br>
<label for="l1">性别：</label><input type="radio" id="l1" name="set">
<label for="l2">城市</label><input type="radio" id="l2" name="set">
<br>
对表单进行组合<br>filedset legend<br>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text"/>
体重：<input type="text"/>
</fieldset>
</form>
<br>
<br><br>
标签：<br>
头部：header<br>
尾部：footer<br>
主体：section<br>
导航：nav<br>
生成注释：aside<br>
引入插件：embed<br>
独立主体：article<br>
组合标签：hgroup
<br>
<hgroup>
<h1>I am h1</h1>
<h2>I am h2</h2>
</hgroup> <br>进度条:progress<br>
<progress value="22" max="100"></progress>(ie9以下不支持的标签)
<br>
使用图片：figure figcation<br>
<figure><img src="img/img.jpg"/></figure>
<figcation>html5</figcation>
<br>
按钮：button<br>
<form action="">
name:<input type="text" name="t1">
phone:<input type="tetx" name="t2">
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
<br>
输入框：input<br>
<input type="radio"/>
<input type="checkbox">
<input type="text">
<input type="passward">
<input type="color">
<input type="number" min="5" max="50" step="0.1">
<input type="file">
<br><br>
视频：video<br>
音频：audio<br>
<br><br>
背景：background:#00FF00 url(../img/img.jpg)no-repeat fixed top;
<br>
background-img
<background-img>
<background-size>
<background-color>
<background-position>
<background-repeat>
<br>
background-img<br>
background-size<br>
background-color<br>
background-position<br>
background-repeat<br>
文本：<br>
text-indent<br>
text-align<br>
tetx-spacing<br>
text-decoration<br>
text-shadow<br>
<tetx-spacing>
<text-shadow>
<text-decoration>
<text-align>
<text-indent> <br><br><br><br><br>
<h1>样式</h1>
<br>字体<br>
font-size<br>
font-stye<br>
font-weight<br>
font-family:"Microsoft Yahei"<br>
@font-face<br>
<font-family>
<font-face>
<font-weight>
<font-stye>
<font-size>
<br>
定位：
<br>position：fixed<br>
position:absolute<br>
position:relative<br>
<position>
<position：fixed>
<br>溢出<br>
overflow:
<br>hidden quto scroll<br>
<overflow> <br>尺寸<br>
height<br>width<br>max-height<br>max-width<br>min-height<br>min-width<br>line-height<br>
浮动<br>
clear:
<br > left:<br>right<br>both<br> <br>
光标：<br>
curosr<br><br>pointer<br>text<br>help<br>wait<br>
圆角：<br>
border-radius:5px
<br>
内边距：
<br>padding
<br>外边距：<br> margin<br>
浮动：<br>float<br>
透明<br>opacity<br>
链接:<br>
未被访问的链接：a:link<br>
已被访问的链接：a:visited<br>
鼠标指针移动到链接上：a:hover<br>
正在被点击的链接：a:active<br> <br>2D<br>
移动：transform:translate(50px, 80px)<br>
缩放：transform:scale(0.5, 0.5);
<br>旋转：transform:rotate(50deg)<br>
倾斜：transform:skew(50deg, 80deg);
<br>
动画<br>
div{
height:200px;
width:200px;
animation:mymove 5s infinite;
position:relative;
}
@-moz-keyframes mymove{
0% {top:0px; left:0px; background}
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
}
<br>
-moz-:Firefox<br>
-webkit-:Safari 和Chrome<br>
-o-:Opera<br>
-ms-:IE<br>
<br>
<h1>CSS 的核心</h1>
<h2>>盒模型（padding, margin， border</h2>
<h2>定位(position</h2>
<h2>浮动(float)</h2> </body>
</html>