1. 结构标记
<section> 定义一个区域 <article> 定义独立的内容
<aside> 定义页面内容之外的内容 <nav>定义导航链接
<header> 定义一个页面或者一个区域的头部 <footer>定义一个页面或者一个区域的底部
<hgroup> 标签用于对网页或区段（section）的标题进行组合
<figure> 定义一组媒体内容以及它们的标题 <figcaption> 定义figure元素的标题
例如：一个网页上中间是广告和正文组成，那么此时这个整体就可以使用
<section>
<div>这边可以用div来加广告</div>
<article>
<header>
<h1>标题</h1>
<p><time>20:25</time></p>
</header>
<p>今年的<time datetime="2016-09-14">中秋节</time>没有博饼了<p>
</article>
</section>
<aside>作用是用于网页两边
<nav> 顾名思义就是导航作用的，例如
<nav>
<a href="超链接的url" target=“_blank代表点击超链接后是用新页面跳转，self是在本页跳转”> PHP</a>
<a href="javascript=void(0);">JAVA</a>
<a href="javascript=void(0);">iOS</a>
</nav>
<figure>
<h1>图片标题</h1>
<img scr="../../source/play.png">
</figure>
2. div、section、article区别
div、section、article，语义是从无到有，逐渐增强。
div无任何语义，仅仅用作样式化或者脚本的钩子，对于一段主体性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用article。
原则上来说，能适用article的时候，也是可以适用section的，但是实际上，假如使用article更合适，那么就不要使用section。 nav和aside的使用也是如此，这两个标签页是特殊的section在使用nav和aside更适合的情况下，也不要适用section。
3. audio标记
audio标签用于定义声音，支持MP3音频。
例：
<audio controls="controls">
<source src="tian.mp3">
</audio>
4. video标记
用于标记定义视频
5. font字体
font的属性表现只有两种情况，一种是类似于background：属性，但是前提是得把字体所有属性一并写上去才能有效果，另一种是，需要用的属性需要一个个单独写。如：font-style：normal； font-variant：small-caps等。
字体font的属性有：
a. font-style：正常（normal），斜体（italic，比较斜点），oblique（斜体）
b. font-variant:用于变化字母，原本大写的字母不变，原本小写的字母变成大写，但是此时由小写变成大写的这些字母会比原本就大写的字母小。它的属性有normal、small-cap，设置文本为小型的大写字母。
c. font-weight:设置文本字体的粗细。 normal、bold（最粗）、bolder、light。
d. font-size ：设置对象中的字体尺寸。有绝对值（small、large等），相对值（smaller，lager）、length，百分比。
e. font-family ：设置字是什么字体，如：宋体，黑体等等。（注意：有字体是有版权的，注意查询）
6. 背景background
属性有：
a. background-color : 设置背景颜色。
b. background-image : 设置渐变色。
c. background-repeat :
7. 表格table
table-layout：auto|fixed;
默认是auto:列宽度由单元格内容设定。
fixed：列宽由表格宽度和列宽度设定。
比如table的width为200，而td的width设置为80px，使用fixed时，当td的内容 超过了80px后那么第二个td的内容就会叠加在从81px开始。 若使用auto，则它会根据内容的大小来确定第二个td需要放的位置。
border-collapse :设置table的每个cell边框
separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
caption-side:设置表头的位置，可以为top、bottom、left、right，设置表头的标签为<table><caption>标题</caption></table>
empty-cells:hide、show（默认），设置表格单元格无内容时是否显示，这个一般不常用。
8. list列表
list-style-type设置列表项标记的类型。例如默认的无序列表的标记类型是实心黑色。这个属性有参数：
ul.a {list-style-type:circle;} 圆形空心
ul.b {list-style-type:square;} 方块
ol.c {list-style-type:upper-roman;} 大写罗马数字
ol.d {list-style-type:lower-alpha;} 小写罗马数字
list-style-position设置在何处放置列表项标记。
list-style-image使用图像来替换列表项的标记。
list-style: url(地图路径)，
9. CSS盒子模型
margin ： 边距，例如一个电脑屏幕上放着一个div。此时设置margin即设置div与屏幕的间距。margin有四个属性，top，right，bottom，left。
boder：边框，引用上面的例子。border即是div的边框。
padding：内边距，如div里边有正文，则设置这个即是正文距离div内边距的距离。
10. 背景background
a. background-position：设置背景对象的位置，top，left，top, bottom, center;
b. background-origin: border-box/padding-box/content-box; 默认值：padding-box；
例如：border：20px solide #000；此时边框的宽度为20；
border-box：设置的背景图片左边与边框重合。即图片的左边与边框的最左边重合。
padding-box： 设置的背景图片的左边与边框的右边重合。
content-box: 设置的背景图片与文本重合。
c. background-clip: 裁剪超出指定的范围部分，与iOS中的裁剪类似。有属性：border-box、padding-box；content-box；
例如当你的设置背景图片的background-origin属性为border-box。 再设置background-clip为padding-box。那么展示出来的效果就和background-origin为padding-box效果一样。
d. background- repeat ：repeat-x/repeat-y/repeat/no-repeat
repeat-x:横向重复，如一张小图片，设置了这个属性，那么效果就是一行全部都是重复了这张图片。
repeat-y: 纵向重复，如一张小图片，设置了这个属性，那么效果就是一例全部都是重复了这张图片。
repeat: 即整个背景全部横向和纵向都重复这张图片。也就是铺满屏幕。
no-repeat: 即是不重复。
e. background-image：渐变色属性。它有 linear-gradient(red,blue);，background-image:radial-gradient(red,blue);两个属性，linear-gradient 是线性的渐变，radial-gradient是圆圈的渐变。这两个属性至少要有赋值两个颜色。可以有例如：（red，blue）| （red ， blue ， green）|（角度90deg ，red，blue）等。
e. background-attachment: fixed | scroll | local;设置背景图片是随对象滚动还是固定的。scroll是默认值。 fixed 是不随滚动。
f. background-size ： auto / cover / contain
auto: 背景图像的真实大小。
cover：将背景图像等比例缩放到完全覆盖容器。背景图像有可能超出容器。
contain： 将背景图像等比例缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
/*background-image: linear-gradient(red, yellow); 线性渐变*/
/*background-image:linear-gradient(left top, red 100px, yellow 200px); 从左上角开始的线性渐变(注意：需要加浏览器前缀,例如：-moz-liner-gradient，-moz-（火狐）、-webkit-（safari）、-0-(Opera)、 -ms-（微软）) */
/*background-image: -moz-linear-gradient(180deg, black 200px, white 300px); 旋转180°的线性渐变*/
/*background-image:radial-gradient( #0033cc, #FF0000); 径向渐变*/
/*background-image: -moz-repeating-linear-gradient(left , #0033cc 100px, #FF0000 150px); 重复线性渐变，使用方向（eg:left,right...）需加浏览器前缀，也可使用角度来设定方向，也可使用坐标值*/
/*background-image: -moz-repeating-radial-gradient( 300px 60px, #0033cc 100px, #FF0000 150px); 重复径向渐变，使用方向（eg:left,right...）需加浏览器前缀，也可使用角度来设定方向，也可使用坐标值*/
11. border边框
border：border-width / border-style / border-color
border-width: 设置边框宽度。
border-style: 设置边框的样式，凹槽，突出，等等
border-color: 设置边框颜色。
12. 文本text
a. text-align: start/end/left/right/center/justify/match-parent/justify-all,默认是start，设置内容的水平方式，如center居中。
b. text-ident：16px。设置文本首行缩进。
c. line-height:normal/40px. 设置对象的行高， 与height配合使用，可以设置内容水平垂直居中，如：height = 40px， line-height：= 40px；
e. word-wrap: normal/ break-word.设置是否自动换行。
f. word-break : break-word/break-all/keep-all/normal; /*word-break: break-all;整段结束后才换行,带符号*/
/*word-break: keep-all;整个单词要么在上行要么在下行*/
g. text-decoration:none;设置有无下划线。
h. text-decortation-style: solid/double/dotted/dashed/wavy;设置线条的样式，
solid是实线， double两条线，dotted点虚线， dashed线虚线，wavy波浪线
i. text-decoration-corlo: 设置装饰线条的颜色。
j. text-shadow:设置阴影。text-shadow:3px 3px 5px;/*参数1：向左右偏移，参数2：向上下偏移 参数3：模糊度*/
13. 阴影box-shadow
box-shawod:(参数1：横向偏移， 参数2：纵向偏移， 参数3：阴影宽度，参数4：阴影模糊度一般不设置，设置该参数会使得这个对象四周都有阴影， 参数5：阴影颜色)
14. 圆角边框
方法一： border-radius：左上角水平半径（em） 右上角水平半径（em） 右下角水平半径（em） 左下角水平半径（em） / 左上角垂直半径（em） 右上角垂直半径（em）
右下角垂直半径（em） 左下角垂直半径（em）
方法二：border-radius：设置四个角
border-top-left-radius:200px； 设置左上角
border-top-right-radius:200px；右上角
border-bottom-right-radius:200px; 右下角
border-bottom-left-radius:200px; 左下角。
方法三：border-radius=200px； 即四个角的倒圆角度为200px；
拓展：旋转动画。
<style>
div:nth-child(1){
background: url(../../../resource/images/6.jpg);
background-size: cover;
border-radius: 200px;
animation: rotation linear 3.6s infinite; // 实现animation方法。 rotation是写的方法名 linear是使动画平缓过渡 3.6s 是动画时间，（当然如果设置了一直旋转就不能设置时间了） infinite 设置一直旋转。
}
@keyframes rotation{ // 声明一个旋转函数
0%{
tramsform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>
