1.在html中，字符之间写再多的空格，浏览器也会当作一个空格解析，执行也会当作一个空格解析
2.<br />表示一个换行，是一个自结束标签
3.在html中，一些如<,>的特殊字符是不能直接使用的，需要使用一些特殊的符号来表示这些特殊符号，这些特殊符号我们称为实体（转义字符串），&实体名字； 如：> > < <；空格  ；
4.<img>用来向网页引入一个外部图片，也是一个自结束标签。
属性：src：设置一个外部图片的路径，可以使用…/来返回一级目录，返回几级目录就写几个…/
alt：可以设置在图片不能显示时，对图片的描述。搜索引擎可以通过alt属性识别不同的图片，如果不写，则搜索引擎不会对img中的图片进行识别。
width：设置图片的宽度，一般用px做单位
height：设置图片的高度，一般用px做单位
-如果宽度和高度只设置一个，另外一个也会同时等比例调整大小，
-如果两个值同时指定则按照你指定的值设置，一般开发中除了自适应的页面，不建议设置width和height
5.图片格式
JPEG（JPG）：支持的图片的颜色较多，图片可以压缩，但不支持透明，一般用于保存照片等颜色丰富的图片
GIF：支持的颜色少，只支持简单的透明，支持动态图，图片颜色单一或动态图可以使用gif
PNG：PNG支持的颜色多，并且支持复杂的透明，可以用来显示颜色复杂的透明的图片
使用原则：效果不一致，使用效果好的；效果一致，使用小的
6.meta标签：
a.使用meta标签可以用来设置网页的关键字
<meta name="keywords" content="HTML5，前端" />
b.用来指定网页的描述。 搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但这两个值不影响在搜索引擎中的排名
<meta name="description" content="发布h5，js等信息" />
c.使用meta可以用来做请求的重定向
<meta http-equir="refresh" content="5;url="http://www.baidu.com""/>
其中5:秒数 url：目标路径
7.<a>标签：超链接
-创建超链接时，如果不能确定地址，可以先用#代替。如果将超链接地址设置为#，则点击超链接后，会自动跳转转到当前页面的顶部。
-可以给元素设置一个id，如果想要跳到此元素的位置，则直接在href中写#id属性值
如：<a href="#box">去box处</a>
a标签可以包含任意元素，除了它本身
8.伪类选择器：专门用来表示元素的一种特殊的状态
:link 表示普通的链接（没有访问的链接） 例如：a:link{color:yellow;}
:visited 表示访问过的链接
:hover 表示鼠标移入的状态
:action 表示超链接被点击的状态
:hover和:active也可以为其他元素设置，但在IE6中不支持对超链接以外的元素设置
:focus 获取焦点
:before 指定元素前，表示元素的最前边的部分，一般都需要结合content这个样式一起使用
:after指元素后，表示元素最后边，通过content可以向before或after的位置添加一些内容
::selection表示选中的元素，但注意：这个伪类在火狐中需要写为::-moz-selection
9.属性选择器
语法：[属性名] 选取含有指定属性的元素
[属性名=“属性值”]选取含有指定属性值的元素
[属性名 ^=“属性值”]选取属性值以指定内容开头的元素
[属性名 $=“属性值”]选取属性值以指定内容结尾的元素
[属性名 *=“属性值”]选取属性值以包含指定内容的元素
10.子元素的伪类
:first-child可以选中第一个子元素
:last-child可以选中最后一个子元素
:nth-child可以选中任意位置的子元素，该元素可以指定一个参数，指定要选中第几个子元素
其中even表示偶数位置的子元素，odd表示奇数位置的子元素
例：p:nth-child(3){color:red;}
:first-of-type :last-of-type :nth-of-type和:first-child这些非常的类似，只不过child这一类，是在所有的子元素中排列，而type这一类，是当前类型的子元素中排列
11.兄弟元素的伪类
a.后一个兄弟元素选择器 语法：前一个+后一个
例：span+p{background：red;}
b.选中后边的所有兄弟元素 语法：前一个~后一个
例：span~p{background：red;}
c.否定伪类 ：可以从已选中的元素中剔除某些元素
例：p:not(.hello){background：red;}
12.伪类的顺序
涉及到a是伪类一共4个，且顺序为:link :visited :hover :active，它们是同一级的
13.文本标签
<em>表示一段内容的着重点，在浏览器中默认使用斜体显示
<strong>表示一个内容的重要性，默认使用粗体显示，和可以一起使用，也可以单独使用
<i>内容以斜体显示
<b>内容会以加粗显示，对不需要着重的内容而是单纯加粗或斜体，可以使用b或i标签
<small>内容会比它的父元素的文字小一点，可以用来细则一类的内容
<cite>所有需要加书名号的内容都可以使用cite标签，表示参考的内容
<q>表示一个短的引用（行内引用）
<blockquote>表示一个长引用（块级引用）
<sup>用来设置一个上标，例：<p>3<sup>2</sup></p>表示3的2次方
<sub>用来设置一个下标 ,例：<p>H<sub>2</sub>O</p>
<ins>表示插入的内容，显示时通常会加上下划线
<del>表示一个删除的内容，del标签中的内容，会自动添加删除线 例如：<p><del>17.5</del> <br/>15.6<br/></p>
<code>专门用来表示代码
<pre>是一个预格式标签，会将代码的格式保存，不会忽略多个空格，我们可以结合pre和code标签来表示一段代码
14.去除项目符号：ul{list-style:none;}
15.dl和ul,ol标签之间可以互相嵌套
16.长度单位
像素px：网页中使用最多的一个单位，一个像素相当于屏幕中的一个小点，不同显示器一个像素的大小不同。像素越小，显示效果越好越清晰
百分比%：若将单位设置为%，则根据其父元素的样式来计算该值。使用%的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
em：和%类似，它是相对于当前元素的字体大小来计算的。1em=1font-size
使用em时，当字体大小发生改变时，em也会随之改变，当设置字体相关样式时，经常使用em
17.颜色单位
有三种表示方法：rgb(红色的浓度,绿色的浓度,蓝色的浓度)，里面的数值可以为0-255之间的数，也可以为百分比。rgb(161,134,211) rgb(10%,56%,83%)
还可以用十六进制的rgb来表示颜色，使用三组两位的十六进制数组来表示一个颜色,#ffaacd;
18.字体
color：设置字体的颜色
font-size：设置文字的大小，实际上设置的不是文字的大小，而是设置格的高度
font-family：设置文字的字体
font-weight：设置文本的加粗效果，可选择：normal，bold，也可以指定100-900之间的9个值
font-style：设置文字的斜体
font-variant：设置小型大写字母，可选值：normal，small-caps
font：可同时设置字体相关的所有样式，要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个，如font：12px/30px "微软雅黑"；
line-height：设置行高，将行高设置为和父元素的高度一致，这样就可以使单行文本在父元素中垂直居中。如.box{width:200;height:200px;background-color:red;line-height:200px;},在font中也可以指定行高，即在字体大小后添加/行高，如，font：30px/40px "微软雅黑"；
19.文本样式
text-transform：可以设置文本的大小，可选值：none，capitalize单词首字母大写，通过空格识别单词，uppercase，lowercase
text-decoration：设置文本的修饰，可选值：none，underline，overline，line-through。
超链接会默认添加了下划线，即超链接的text-decoration默认为underline，只要设置为none，则可去除下划线。
letter-spacing：可以指定字符间距。如：.p3{letter-spacing:10px;}
word-spacing:可以指定单词之间的距离，实际上就是设置词与词之间空格的大小
这两个属性都可以直接指定一个长度或百分比作为值，正数表示增加距离，负数表示减少距离
text-align：用于设置文本的对齐方式，可选值：left，right，center，justify两端对齐
text-indent：设置首行缩进。正值则向右缩进指定像素；负值则向左移动指定像素，通过这种方式可以将一些不想显示的文字隐藏
20.盒子模型
一个盒子分为：内容区content，内边距padding，外框border，外边距margin
width和height只是设置内容区的大小，而不是盒子整个的大小
*由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置改变，而如果设置右和下外边距会改变其他盒子的位置
margin也可以指定为一个负值，元素会向反方向移动；还可以设置为auto，
如果将left和right同时设置为auto，则会将两侧的margin设置为相同的值，就可以使元素自动在父元素中居中，margin：0 auto; 0表上下，auto表左右
21.垂直外边距的重叠
–在网页中垂直方向的相邻外边距会发生外边距的重叠
–兄弟元素之间的相邻外边距会取最大值，而不是求和；如果是父子元素的垂直外边距相邻，则子元素的外边距会设给父元素。
22.内联元素的盒模型
– 内联元素不能设置width和height，但可以设置水平和垂直方向的内边距，设置垂直方向内边距不会直接影响页面的布局。
– 内联元素可以设置边框，且不会影响到页面布局
–内联元素支持水平方向的外边距，水平方向相邻的外边距不会重叠，而是求和
不支持垂直外边距
23.display：修改元素的类型 可选值：inline，block，inline-block，none
使用display：none；不显示元素，且元素不会在页面中继续占有位置
24.visibility：用来设置元素的隐藏和显示的状态，可选值：visible，hidden。
使用visibility：hidden；隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持
25.overflow：可以设置父元素如何处理溢出的内容，可选值：visible，hidden，scroll，auto
若overflow:scroll;则不论内容是否溢出，都会添加水平和垂直方向双方向的滚动条
若overflow:auto;则会根据需要自动添加滚动条
26.文档流：
在文档流中，块元素的高度默认被内容撑开，宽度是父元素的100%；内联元素的高度和宽度默认被内容撑开
27.浮动
-元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或其他浮动元素
-如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
-浮动元素不会超过他的兄弟元素，最多一边齐
-浮动元素不会盖住文字，文字会自动环绕在浮动元素周围，所有可以通过浮动来设置文字环绕图片的效果
-当元素设置浮动后，会完全脱离文档流。
-块元素脱离文档流后，宽度和高度都被内容撑开；内联元素脱离文档流后变为块元素
28.高度塌陷问题
-在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高
-但是当子元素设置浮动后，会完全脱离文档流，此时将会导致子元素无法撑开父元素的高度，导致父元素的高度塌陷
clear：用来清除其他浮动元素对当前元素的影响，可选值：none，left，right，both
解决方法：
.clearfix:after{
content:"";//添加一个内容
display:block;//转换为一个块元素
clear:both;//清除两侧的浮动
}
.clearfix{zoom:1;}//兼容IE
...
<div class="box1 clearfix">
<div class="box">ha</div>
</div>
29.相对定位position：relative；
-当开启了元素的相对定位后，而不设置偏移量时，元素不会发生任何变化
-相对定位是相对子元素在文档流中原来的位置进行定位
-相对定位的元素不会脱离文档流
-相对定位会使元素提升一个层级
-相对定位不会改变元素的性质，块还是块，内联还是内联
当开启了元素的定位（position属性值是一个非static的值）时，可以通过left，right，top，bottom来设置元素的偏移量
30.绝对定位position：absolute；
-当开启了绝对定位，会使元素脱离文档流，不设置偏移量，元素的位置不会发生变化
-绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的，如果所有祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
-绝对定位会使元素提升一个层级
-绝对定位会改变元素的性质：内联变块元素，块元素的宽度和高度默认都被内容撑开
31.固定定位position：fixed；
-固定定位也是一种绝对定位，它的大部分特点和绝对定位一样
-不同的是：固定定位永远都会相对于浏览器窗口进行定位；固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
32.元素的层级
z-index:设置元素的层级，指定一个正整数作为值，该值即为层级，层级越高，越优先显示。
-对于没有开启定位的元素不能使用z-index
-父元素的层级再高，也不会盖住子元素
33.background-attachment:用来设置背景图片是否随页面一起滚动
可选值：scroll，fixed
不随窗口滚动的图片我们一般是设置给body的
例：
.box1{
background-image:url(相对路径)；
background-repeat：no-repeat；
background-attachment:fixed;
}
34.表格
tr：表示表格中的一行
td：用来创建一个单元格
colspan：设置横向的合并单元格，<td colspan="2">aa</td>表示往右合并两格
rowspan：设置纵向的合并单元格, <td rowspan="2">aa</td>表示往下合并两格
th：设置表头发内容，默认加粗，居中
border-space：table和td边框之间默认有一个距离，通过border-space可设置这个距离
border-collapse：设置表格的边框合并，如果设置了边框合并，则border-spacing自动失效
在HTML中为我们提供了三个标签：thead 表头，tbody 表格主体，tfoot 表格底部
注意：tr并不是table的子元素，而是tbody的，所有要通过tbody>tr选中
**33.cursor：**可以设置鼠标指针的样式
34.resize：none；设置文本域不能调整大小
35.placeholder：在文本框和文本域中可以通过它来指定提示文字。
1351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
