html主要笔记

1、用title属性作为工具提示

2、链接到锚点 
 <a href="http://wickedlysmart.com/buzz#Coffee">
 
3、<em>斜体


4、<a target="_blank" href="http://wickedl">指定新窗口

5、链接上一个目录：../images/good.jpg

6、图像元素, 单标记<img src='dfd.gif'>

7、alt属性，当图片显示不出来时，alt起作用
    <img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png"
            alt="The typical new pencil can draw a line 35 miles long.">
            
8、img width、height属性确定图片大小，默认是像素指定


9、web字体
@font-face {
    font-family: "Emblema One";
    src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), 
         url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf"); 
}
            

10、行高
line-height: 1.6em;

11、设置元素的背景图片
background-color: white;
background-image: url(images/background.gif);
background-repeat: no-repeat;
background-position: top left;

repeat：默认水平垂直重复
no-repeat: 显示一次
repeat-x 水平重复
repeat-y 垂直重复
inherit 按父元素的设置来处理

background简写
background: white url(images/cocktail.gif) repeat-x;


12、内边距
padding: 50px 25px 25px 50px;
上 右 下 左

取代padding-left:80px; ……

13、外边距
margin：上 右 下 左
取代margin-left……

14、
边框样式 8种 border-style: groove;
边框宽度 border-width: 5px;
边框颜色 border-color: #ff000000;
指定某一边框 
border-top-color
border-top-style
border-top-width
边框圆角 border-radius: 15px;
指定边框圆角 border-top-left-radius: 3em;

边框缩写
border: thin solid #007e7e;
宽度 样式 颜色


15、media为不同的设备建立不同的样式表
<link href="****.css" rel="stylesheet" media="screen and (max-device-width: 480px)"

设备屏幕大于480px就会使用这些规则
@media screen and (min-device-width: 481px){
    #guarantee{
        margin-right: 25px;
    }    
}

16、盒模型内容区的宽度
width: 200px;

17、块元素居中对齐
text-align: center;
会对块元素中所有的内联元素对齐，如文本、图像
只在块元素上使用

18、line-height: 1;
各元素的行高是其自己字体大小的1倍

19、span使内联元素逻辑分区

20、超链接
伪类：一个东西看上去像是真的， 其实不是
表示开发者为把某些特征归类，但是浏览器会这么做

a:link{
    color: green;
}

a:visited{
    color: red;
}

a:hover{
    color: yellow;
}

a:active{
    color: purple;
}

21、clear属性
clear: right;
当元素流入页面时，不允许指定的方向有浮动内容。

22、浮动元素
float：right;


23、div精确放置位置
top 
right 
width 
bottom 
left

24、每个定位元素都有一个z-index属性，
这会指定它在一个虚拟轴z轴上的位置
上面的元素更贴近用户，所以z-index更大


25、绝对路径
#sidebar{
    position: absolute;
    top: 100px;
    right: 200px;
    width: 280px;
}
postiton： 
absolute绝对位置
static 默认，浏览器定位
fixed 将元素固定在浏览器窗口
relative：正常流入页面

26、加入视频
<video 
    controls 
    autoplay 
    width="512" 
    height="288" 
    src="video/tweetsip.mp4"
    poster="images/poster.png"
    loop>
    
27、视频备选
<video controls autoplay width="512" height="288">
    <source src="a.mp4">
    <source src="b.webm">
    <source src="c.ogv">
    <p>
        Sorry, your browser doesn't support the video element
    </p>
</video>

28、表格奇数偶数颜色设置
p:nth-child(2n){
    background-color:    red;
}    
p:nth-child(2n+1){
    background-color:    green;
}


29、表格跨行
<tr>
<td rowspan="2">Truth or Consequences NM</td>
<td class="text_center">August 9th</td>
<td class="text_center">93</td>
<td rowspan="2" class="text_right">4,242, ft</td>
<td rowspan="2" class="text_right">7,289</td>
<td class="text_center">5/5</td>
</tr>      
<tr>

<td class="text_center">August 27th</td>
<td class="text_center">85</td>


<td class="text_center">3/5</td>
</tr>