1.html5 与 html4的区别
如果文档第一行为<!DOCTYPE html> 说明该页面使用的是html5；
否则使用的就是html4
2.html骨架
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>我是标题</title>
</head>
<body>
...
<p>此处可以包含各种标签</p>
...
</body>
</html>
3.块级元素，行内元素
| 元素 | 特点 | 标签 |
|---|---|---|
| 块级元素 | 1.块元素独占一行 2.块元素可以设置width,height 3.块元素的宽以浏览器的宽为主 | p,div,ul,dl,pre,address,h1~h6... |
| 行内元素 | 1.一行内可以放多个 2.行元素不可以设置width,height 3.行元素以文内容的大小为准 | a b em strong i img... |
img虽然是行内元素，但是他比较特殊，可以设置width,height
4.Html文档流
html文档流：把元素按照从上而下，从左到右的顺序默认排列。不在一行的元素从上而下，在同一行的元素从左到右排列。元素可以脱离文档流显示。
5.布局的三种方式
1.框架布局
<!-- 框架集与body同级，所以有frameset不能有body -->
<frameset rows="200,*">
<frame src="https://www.baidu.com">
<frameset cols="20%, *" noresize="no">
<frame src="https://www.youku.com">
<frame src="https://www.taobao.com">
</frameset>
</frameset>
框架布局在h5中并不推荐，h5中有frameset的替代方案
2.表格布局
<table border="1" align="center">
<!-- caption表示表头 -->
<caption>这是一张课程表</caption>
<tr>
<th colspan="5">课程表</th>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td rowspan="2">星期五</td>
</tr>
<tr>
<td>上课</td>
<td>不上课</td>
<td></td>
<td></td>
</tr>
</table>
3.div布局
待续。。。
6.Html实体字符
| 符号 | 字符码 |
|---|---|
| < | < |
| > | > |
| ; | " |
| >> | » |
| << | « |
| 空格 |   |
实体字符对照表：http://tool.xker.com/htmlchar.php
7.CSS引用方式
1.行内样式表 <span style="color:'red';width:100px;height:100px" />
2.内部样式表 （位于head中）
<style>
p{width:100px;height:100px;color:red}
</style>
3.外部样式表 <link rel="stylesheet" href="xxxx.css" />
8.CSS选择器
| 选择器 | 含义 |
|---|---|
| * | 通用元素选择器，匹配页面上任何元素 |
| #id | id选择器，匹配特定id的元素 |
| .class | 类选择器，匹配class包含特定类 |
| element | 标签选择器 |
9.CSS选择器优先级
ID > CLASS > 元素 > *通配符
10.文本越界省略设置
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
<span>内文本自动换行，类似于聊天气泡的效果
max-width: 200px; word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;
11.CSS关系选择器
| 选择器 | 含义 |
|---|---|
| E F | 包含选择符，选择所有被E元素包含的F元素 eg. ul li |
| E > F | 子选择符，选择所有作为E元素的直接子元素F，对更深一层的元素不起作用 |
| E + F | 相邻选择符，选择紧贴再E元素之后的F元素，只选择相邻的第一个元素 |
| E ~ F | 兄弟选择符，选择E元素之后所有的F元素，可包含多个 |
12.CSS属性选择器
| 选择器 | 含义 |
|---|---|
| E[attr] | 属性选择器eg. option[disabled]{color:red} 选择带有disabled属性的option元素，设置颜色为红色 |
| E[attr="abc"] | 选择attr属性等于abc的元素 |
| E[attr~="value"] | 选择有attr属性的元素，且属性值列表中有一个符合val的元素 |
| E[attr^="p"] | 选择有attr属性的元素，且属性值列表中以p开头的元素 |
| E[attr$="p"] | 选择有attr属性的元素，且属性值列表中以p结束的元素 |
| E[attr*="p"] | 选择有attr属性的元素，且属性值列表中有p的元素 |
13.CSS伪类选择器
| 选择器 | 含义 |
|---|---|
| E:link | 设置超链接a在未被访问前的样式（特指a标签） |
| E:visited | 设置超链接a在被访问过后的样式（特指a标签） |
| E:hover | 设置鼠标悬停再元素上时的样式 |
| E:active | 设置元素再鼠标按下时的样式 |
| E:not(s) | 匹配不含有s选择器的元素E eg. div:not(.d1) 选择除了类名为d1的元素 |
| E:first-child | 父元素的第一个子元素E，E必须包含父元素才能使用 |
| E:last-child | 父元素的最后一个子元素E，E必须包含父元素才能使用 |
| E:only-child | 父元素的唯一一个子元素E，E必须包含父元素才能使用 |
14.position定位
position属性指的是本体相对于上级的定位，position又分绝对定位（position:absolute）和相对定位（position:realtive），默认值是static，意味着元素没有定位。如果用position来布局页面，父级元素的position属性必须为relative或者absolute，行元素加了position:absolute后可以设置宽和高（加了float和fixed以后也可以设置宽和高）
15.浏览器内核
1.Gecko内核 前缀-moz- firefox
2.webkit内核 前缀-webkit- chrome,safari,360,世界之窗，猎豹
3.trident内核 前缀-ms- IE
4.presto内核 前缀-o- opera
16.清除浮动3中方式
1.使用空div
.clear{clear:both}
<div class="clear"></div>
2.使用伪元素
.box::after{content:"";display:block;clear:both}
.left,.right{width:100px;height:100px;background:red;float:left}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
3.使用overflow:hidden
.box{overflow:hidden}
.left,.right{width:100px;height:100px;background:red;float:left}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
17.css使用自定义字体
将字体文件放入本地目录后，可以通过以下方式进行引用，自定义字体样式要通过@font-face进行声明，两个参数，font-family指明自定义字体的名字，
@font-face {
font-family: qst;
src: url("res/qst.tff");
}
li{font-family:qst}
18.CSS3自定义动画
动画是CSS3.0的高级特性，类似于自定义字体的使用，动画需要使用@keyframes进行定义，动画的内容可以用from-to来进行属性过度的设置，同时也可以使用百分比来进行设置；
@keyframes myAnimation {
from{background-color: orange}
to{background-color: red}
}
@keyframes myAnimation {
0%{background-color: orange}
50%{background-color: red}
}
完整的动画属性定义： animation:动画名 执行时间 插值器 延时时间 执行次数
animation: myAnimation 2s linear 1s infinite
19.字体图标
字体图标通过字体的方式实现一下图片，可以有效的减小包的大小（字体文件比图片小的多）
20.CSS Sprite
CSS雪碧图，将n多个小图片集成到一张大图中，使用过程中，能有有效的较少网络请求的次数，减少请求造成的延时，提高用户体验。CSS中通过background-image，background-position来定位当前标签需要显示的图片内容
21.px em rm
px：以px为单位的字体，修改浏览器字体大小后不会发生改变，他的大小跟屏幕的分辨率有关系。
em：以em为单位的字体，修改浏览器的字体大小后会发生改变，随浏览器字号大小的调整而改变。一个em是网页浏览器的基础文本尺寸高度，一般情况下是16px，所有未经过调整的浏览器都符合：1em=16px；em有继承性，从包含标签中继承尺寸。
<!-- 这种情况下 div_p_16会变显示8px -->
div{font-size: .5em}
.div_p_16{font-size: 1em}
.p{font-size: 16px}
<div>
<p class="div_p_16">我是1em</p>
</div>
<p class="p">我是16px</p>
rem:rem是基于html的，他跟em类似，但是区别在于，rem不受包含标签的影响，始终是基于浏览器字体大小的。推荐使用！
22.CSS hack
在css中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，我们使用它来解决不同浏览器中显示效果不一致的问题。
条件hack
不写在<style></style>中,他与style标签同级
<!-- IE11 后实现已经和Chrome Firefox之类无大区别-->
<!--[if 关键词 ie 版本号]>
HTML代码块，示例课见bootstrap基础模板
<![endif]-->
属性hack
和条件hack不同，这一般放在css属性中
_ 选择ie6及以下
.test{
_color:red;
}
\9 选择ie6及以上
.test{
color:red\9;
}
选择符hack
*+ 可指定ie789， 一般放在css属性中
*+ .test{color:red;}
网友评论