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>