初识HTML+CSS

1. <blockquote> 长文本引用标签 
2. <br> 换行标签
3. &nbsp;  空格标签
4. <hr>  添加水平横线
5. <address>  地址标签，默认斜体
6.<code>  标签，代码标签。
7.<pre>   大段代码标签
8. <ul><li></li></ul> 标签，列表标签
9. <ol></ol>  有序列表标签
10.<div></div>  板块标签
11. <div id ="xxx"></div> 命名
12. 表格标签 <table></table> <tbody></tbody>
            <tr></tr> <th></th> <td></td>
13. 表格摘要与标题  <table summary=""></table> <caption></caption>
14.    <a href=""></a> 链接标签
15. <a href="" target="_blank"></a> 在新的浏览器窗口中打开链接
16. 链接email地址  <a href="mailto:"></a>
17. <img src=""> 图片标签
18. 表单标签，与用户交互  <form></form>
19. 文本出入框，密码输入框 <input type="text/password" name="" value="">
20. 文本域 <textarea rows="" cols=""></textarea>
21. 单选框，复选框 <input type="radio/checkbox" name="" value="" checked="">
22. 下拉列表框  <option value="" selected=""></option>
23. 下拉列表框多选 <select multiple="multiple"><option value=""></option>
                    </select>
24. 提交按钮 <input type="submit" value="提交">
25. 重置按钮  <input type="reset" value="重置">
26. label 标签 为鼠标用户改进可用性 <label></label>
27. css 字体颜色 大小 加粗 p{ color:red; font-size:12px; font-weight:bold;}
28. css 内嵌样式  <p style="color: red; font-size: 12px"></p>
29. 嵌入式样式 <style type="text/css">
                span{ color: red; }
                </style>
30. css样式单独文件 <link rel="stylesheet" type="text/css" href="base.css">

31. 三种方法的优先级 内嵌式>嵌入式>外部式
32. 选择器   例 span{ color:red } 其中span 即为选择器
33. 类选择器   例  .stress{ color:red }  根据类名进行选择
34. id选择器  例  #stressP{ color:red }  根据id进行选择
35. id选择器与类选择器的区别 类选择器可以使用多次 id选择器只能使用一次 类选择器可以使用选择器列表设置多个样式而id选择器不能使用列表
36. 子选择器  .food>li{ color:red }
37. 包含选择器  .food li { color:red} 包含选择器不同于自选择器，子选择器值指向直接后代，而包含选择器指向所有后代，包括孙子代等
38.通用选择器  *{color:red } 指向所有标签
39.伪类选择符  鼠标滑过的状态 来设置字体的颜色 a:hover( color:red; )
40.分组选择器  h1,span{color:red;} 相当于 h1{color:red;} span{color:red}
41. 有一些css的样式是具有继承性的
42. 标签选择器的权值为1 类选择器的权值为10 id选择器的权值为100 继承的权值很低为0.1
43. 层叠 如果有相同权值的 处于最后的css样式会被应用
44. 为某一样式设置最高权值  p{color:red!important;}
45. 字体 body{ font-family:"宋体";}
46. 字号颜色  body{font-size:12px; color:#666;}
47. 粗体  body{ font-weight:bold;}
48. 斜体 body{ font-style:italic;}
49. 下划线 a{text-decoration:underline;}
50. 删除线 a{text-decoration:line_through;}
51. 缩进 p{text-indent:2em;}
52. 行间距，行高 p{line-height:1.5em}
53. 中文字间距 字母间距 h1{ letter-spacing:50px }
54. 对齐 h1{ text-align:center }
55. 块级元素 <div></div> <p></p> <h1></h1> <form></form> <ul></ul> <li></li>
        a{display:block;} 转换为块状元素
    (特点 ： 独占一行  可以设置高宽)
56.内联元素 <span></span> <a href=""></a> <strong></strong> <em></em> 
        div {display:inline;}
    (特点 ： 和其他元素在同一行上 不能设置高宽)
57.内联块状元素 <img src=""> <input type="" name=""> 
        a{display:inline-block}
    （特点 ： 和其他元素在同一行上 可以设置高宽）
58.盒子模型 标签：<div> <ul> <ol> <p> <h> <table>等块级标签
                内填充padding，边框border，外边距margin
59.边框 border  div{ border:2px solid red; }
60.单独设置一个边框  div{border-bottom : 1px solid red ;}
61.盒子模型 宽度和高度 padding border margin
62. 填充  即设置  padding  div{padding :20px 10px 15px 30px;}
63. 边界  即设置  margin   div{ margin : 20px 10px 15px 30px ;}
64. css 布局模型 流动模型（flow） 浮动模型（float） 层模型（layer）
65. 流动模型 块状元素自上而下垂直延伸分布 ， 内联元素从左到右水平分布显示
66. 浮动模型 使得块状元素并排显示 div{float:left;}
67. 层模型  对图层的精确定位操作 分为三种
绝对定位（position：absolute） 相对定位（position:relative） 固定定位(position:fixed)
68. 绝对定位  div{ position:absolute;left:100px;top:50px; }
69. 相对定位  div{ position:relative;left:100px ;top:50px; }
70. 固定定位  div{ position:fixed ;left:50px;top:100px;}
71. relative 与 absolute 组合使用
72. 盒子模型代码简写 margin:10px 15px 12px 14px ;
73. 颜色值缩写 略
74. 字体缩写  在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
75. 长度值 px 基于像素   em 百分比 基于 font-size
76. 水平居中设置-行内元素 通过给父类元素设置 text-align:center 实现
77. 水平居中设置-定宽块状元素 设置左右 margin值为auto 来实现居中 
    例 ： div{ margin:20px auto; }

78.不定块状元素居中  加入table标签
                   设置 display:inline 方法
                   设置 position:relative 和left:50%
79.垂直居中-父元素高度确定的单行文本: 设置父元素的 height 与 line-height 高度一致来实现
80.垂直居中-父元素高度确定的多行文本： 使用插入table 同时设置 vertical-align:middle
           父元素高度确定的多行文本： 设置为表格单元显示 display:table-cell;vertical-align:middle;
81. 隐性改变display类型 设置 position:absolute 或者 float:left/right 会使得元素的类型自动变为
display:inline-block