【万字长文】史上最强css、html总结~看完涨薪再也不是梦

HTML

什么是前端？什么是H5？

主要工做，作页面。PC端的网站、移动APP、小游戏、小程序

H5是HTML语言的简称，是HTML语言的第五个版本

能不能介绍一下web标准

web标准：结构标准 表现标准 行为标准

• W3C：万维网联盟,制定告终构和表现的标准
• WHATWG:网页超文本应用技术工做小组，以推进HTML5标准为目的而成立的组织,在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
• ECMA:欧洲电脑厂商联合会 制定了行为标准

什么是html？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）。“超文本”就是指页面内能够包含图片、连接，甚至音乐、程序等非文字元素。

HTML5指的是HTML的第五次重大修改（第5个版本）

XHTML和HTML的区别？

1.XHTML 元素必须被正确地嵌套。 XHTML是HTML的严格模式。

2.XHTML 元素必须被关闭。

3.标签名必须用小写字母。

4.XHTML 文档必须拥有根元素。

DOCTYPE有什么做用？

定义文档类型，让浏览器解析器知道应该用哪一个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档 的第一行，这并非一个 HTML 标签。

标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。

html标签有哪些类型？

一共有三种类型，分别是：

• 块级元素

特色：自上而下排列的，能够设置宽和高，独占一行h1-h六、p、ul、li、ol、dl、dt、dd、form、 table。。。

• 行内（内联）元素

特色：横向排列的，不能设置宽和高，大小是由内容撑开的 span、font、b、strong、em、i、 a。。。

• 行内（内联）块元素

特色：横向排列的，能够设置宽和高 img、全部的input、select、textarea。。。

标签语义化的优势

• HTML结构清晰
• 代码可度性好
• 无障碍阅读
• 搜索引擎可根据标签的语言肯定上下文和权重问题
• 移动设备能更完美的展现页面
• 便于团队维护开发

h5新增语义化标签

• section：章节、页眉、栏目。能够与标题标签结合使用
• article：文章标签
• aside：广告、侧边栏
• header：头部标签
• footer：页脚标签
• nav：导航标签
• figure:插图用的标签,在figure下嵌套img标签
• video视频

<video src="video/mov_bbb.mp4" controls="controls"></video> 
source能够有多个，若是当前浏览器不支持此格式的视频，有其余的格式作备用 支持的视频格式：mp四、ogg（ogv）、webm scr表示路径 controls 播放控件 autoplay自动播放 loop循环播放 poster 视频封面 muted 静音  在实际的开发中，须要本身给设定样式 复制代码

• audio音频

<audio src="music/金志文 - 夏洛特烦恼.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio> 
 属性跟video差很少... 复制代码

• mark高亮显示
• canvas画布
• datalist数据集

datalist：提供一个事先定义好的列表，经过id与input关联，当在input内输入时，用户将会看到一个下 拉列表供选择 
<input list="sd"/> <datalist id="sd">  <option value="宝马">宝马</option>  <option value="奔驰">奔驰</option> </datalist> 复制代码

五大浏览器内核

• Trident(MSHTML)
• Gecko
• Presto
• Webkit
• Blink

如何实现浏览器内多个标签页之间的通讯?

WebSocket SharedWorker

也能够调用 localstorge、cookies 等本地存储方式。 localstorge 在另外一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，咱们经过监听事件，控制它的值来进行页面信息通讯。

注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常

CSS

什么是css?

css就是层叠样式表，是web标准的表现标准语言，对网页信息的显示的控制 层叠，对于样式表来讲就是优先级的问题，选择器是权重大小

css样式表类型有哪些？

内部样式表

内部样式表包含在 style 标签内，一个 style 标签就表示一个内部样式表。

而经过标签的 style 属性定义的样式属性就不是样式表。若是一个网页文档中包含多个 style 标签，就表示该文档包含了多个内部样式表。

例如：

<style> 
 选择器{属性:属性值;} </style>  复制代码

外部样式表

若是 CSS 样式被放置在网页文档外部的文件中，则称为外部样式表，实际上，外部样式表也就是一个文本文件，扩展名为.css。而后须要使用的时候，导入html文件便可。

例如：

<link rel="stylesheet" type="text/css" href=""/> 
<style>  @import url(); </style>  复制代码

两种引入方式的区别:

• link是html的标签,import是css提供的一种方式
• link，页面与样式同时加载，而@import必须先加载页面再加载样式。
• @import可能会有兼容性问题，而link标签没有这个问题
• 使用dom控制样式时：link能被dom控制，而@import不能被dom控制

内联样式表

在标签内部的style属性里面写

样式表的优先级

内联样式表的优先级最高，内部样式表和外部样式表的优先级和书写的顺序有关。 后写的会把前面的相同属性覆盖掉，其余属性依旧会继承

css选择器

标签选择器

经过html的标签名进行选择，例如：p{}

class选择器

经过html中标签的class属性进行选择，例如：

html:<div class="div1"></div> 
css: .div1{属性:属性值;属性:属性值}  class选择器通常给css使用，id选择器留给js使用. 标签的一个class能够取多个名  <div class="div1 big">这是猴子</div> 复制代码

id选择器

经过html中标签的id属性进行选择，例如：

<div id="top"></div>  css: #top{属性:属性值;属性:属性值}  复制代码

*通配符

选择全部的标签,通常用来清除内外边距，重置样式。

/*重置样式*/ 
*{margin:0;padding:0;} a{text-decoration:none;} li{list-style:none;} 复制代码

包含选择器

选择器之间用空格隔开。修改选择器1下的全部选择器2

选择符1 选择符2{属性:属性值;}

伪类选择器:

• a:link{属性:属性值;}超连接初始状态
• a:visited{属性:属性值;}超连接访问后的状态
• a:hover{属性:属性值;}鼠标滑动到上面时的状态
• a:active{属性:属性值;}超连接被激活时的状态，即鼠标点下左键时的状态 注意:伪类选择器有浏览器缓存问题，点击超连接a访问事后，会缓存，须要清除历史记录，才能再看到超连接 的初始状态

伪类选择器使用时须要按照上面的顺序书写，以避免发生错误。 不要给其余标签使用除了hover之外的伪类选择器

伪对象选择器

伪对象选择器有::after、::before、::first-letter、::first-line，伪对象选择符也称为伪元素选择器----可让咱们把一个元素当作两个来使用。

• ::after与content属性一块儿使用，定义在对象后的内容

div::after{content:url(logo.jpg);} 
div::after{content:"文本内容";} 复制代码

• ::before与content属性一块儿使用，定义在对象前的内容

div::before{content:"放在前面的内容"}
复制代码

• ::first-letter定义对象内第一个字符的样式。（该伪元素只能用于块级元素）

• ::first-line定义对象内第一行的样式。该伪元素只能用于块级元素。

ie6如下版本不支持伪对象选择符

群组选择器

选择器以逗号隔开，能够同时选中多个，例如

//多个选择器有相一样式的时候，用群组选择器，合并为一组
div,p,span{color:red;} 复制代码

介绍一下css的权重

上面已经说过，css是层叠样式表，有优先级。权重越大的样式的优先级越高，css权重以四位数表示分别以下：

• 标签选择器的权重为0001
• class选择器的权重为0010
• id选择器的权重为0100
• 伪类选择器的权重为0010
• 包含选择器的权重为包含选择器的权重之和
• 内联样式的权重为1000

css3新增选择器

序列选择器

1.序列选择器(同级别)

• :first-child 同级别第一个
• :last-child 同级别最后一个
• :nth-child(n) 同级别的第n个
• :nth-last-child(n) 同级别倒数第n个
• :only-child 父元素中惟一的一个标签

2.同类型,能够被隔开

• :first-of-type 选中同级中同类型的第一个
• :last-of-type选中同级中同类型的最后一个
• :nth-of-type （n）选中同级中同类型的第n个
• :nth-last-of-type(n) 选中同级中同类型的倒数第n个
• :only-of-type 选中父元素中惟一类型的标签
• :not 否认选择器 同种元素 只有自身不起做用，其它的都起做用。
• :root 选择文档的根元素 对根元素起做用

层次选择器

• 后代选择器（E F）最多见的选择器 没有兼容问题*
• 子元素选择器（E>F） 选择某元素的子元素 IE6不支持*
• 相邻兄弟选择器（E+F）紧跟在另外一元素后面的元素。不能被隔开*
• 通用兄弟选择器（E~F）指定选择器后面的全部选择器选中的标签。能够被隔开。

属性选择器

• E[attr] 只使用属性名，但没有肯定任何属性值

input[name]{ 
 width: 200px;  height: 50px; } input[id]{  border: 1px solid red; } 复制代码

• E[attr="value"] 指定属性名，并指定了该属性的属性值

input[type="text"]{ 
 border: 1px solid red; } input[type="tel"]{  border: 1px solid blue; } 复制代码

• E[attr^="value"] 指定属性名，而且有属性值，属性值是以value开头的；

a[href^="#"]{ 
 background-color: red; } 复制代码

• E[attr$="value"] 指定属性名，而且有属性值，并且属性值是以value结束的；

a[title$="叫"]{ 
 background-color: orange; } 复制代码

• E[attr*="value"] 指定属性名，而且有属性值，并且属值中包含了value；

a[href*="#"]{ 
 background-color: red; } 复制代码

浮动

什么是标准流（文档流）？

就是网页的正常排版顺序 --- 元素排序方式根据元素类型来的

什么是浮动流？

一个元素设置了float属性，就会变成浮动流，不遵循标准流的规则

一个元素若是设置了浮动，再也不遵循标准流中的规则，它看起来就像从标准流中删除了同样，原先 在标准流的中位置会发生改变

文本环绕现象

浮动的元素对标准流元素原本不占位了，但文字却不能到浮动的元素的位置，所以 会出现文本环绕现象

浮动注意事项

• 两个元素，第一个浮动了，第二个没有浮动，这个时候，浮动的元素会把没有浮动的元素给覆盖
• 两个元素，第一个没有浮动，第二个浮动了，这个时候位置保持不变
• 两个元素，都设置了浮动，若是宽度不够的状况下，第二个依旧会被挤到第二行去
• 文本环绕显示，一个元素若是浮动了，另外一个元素没有浮动，这个时候它里面的文本会环绕浮动元素显示

高度塌陷和元素重叠

高度塌陷就是若是没有给父元素设置高度而但愿父元素高度自适应的时候，若是给子元素设置了浮动， 会发生高度塌陷。

在标准流中子元素能够撑开容器的高度，可是浮动后，脱离了标准流，子元素撑不开容器的高度了，把 这种现象叫高度塌陷。

高度塌陷会引发元素重叠。

清楚浮动

清除浮动:清除浮动的负面影响

注意点：并非只要设置了浮动就要必须清除，只有在发生高度塌陷和元素重叠时才须要清除

清除浮动的方法:

一、给父元素设置overflow:hidden

overflow:hidden本来意思是文本溢出隐藏,有清除浮动的功能

二、使用空元素（空盒子）的方法

在浮动的子元素的同级下增长一个空（div）的元素

这个空的元素不能有任何其余样式,再给空元素设置clear:both/left/right/none;

三、万能清除法

定义一个类名,使用伪元素:after,并把类名赋给浮动元素的父级元素

.clear:after{
 display:block;  clear:both;  content:".";  visibility:hidden;  height:0; } .clear{  //兼容ie浏览器  zoom:1; } 复制代码

盒模型

盒模型是css布局的基石，决定了网页元素如何显示以及元素相互之间的关系,盒模型是一种形象的称呼，在css里面规定了全部的标签都有一个盒模型。

盒模型组成：margin（边界、外边距）、padding（内边距、填充、补白）、border（边框）、 content（内容---width和height）

盒模型有如下两种:

w3c标准盒模型

盒模型的宽度 = 左右margin + 左右padding + 左右border + width（内容）

IE怪异盒模型

盒模型的宽度 = 左右margin + width（内容）--- 包含了padding和border

区别：

标准盒模型和怪异盒模型的区别在于计算方式的不一样,怪异盒模型的宽度在计算时包含了padding和border

设置怪异盒模型的方法: 在css3里面提供了一个属性，能够把标准盒模型转成怪异盒模型使用

box-sizing:border-box(把标准盒模型转成怪异盒模型)/content-box;(标准盒模型--默认值)

若是但愿所有转成怪异盒模型，在*里面设置box-sizing:border-box;

单行省略号显示

省略号显示:text-overflow:clip/ellipsis 不显示省略号/显示省略号标记。

单行省略号显示的条件：

• 定义一个宽度width
• 强制不换行nowrap
• 文本溢出隐藏
• 省略号显示text-overflow:ellipsis;

.test{
 width:200px;  white-space:nowrap;  overflow: hidden;  text-overflow: ellipsis; } 复制代码

多行省略号显示

WebKit浏览器或移动端的页面

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，能够直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出如今 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它须要组合其余的WebKit属性。常见结合属性:

• display: -webkit-box; 必须结合的属性 ，将对象做为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow: ellipsis;，能够用来多行文本的状况下，用省略号“…”隐藏超出范围的文本 。

例子：

overflow : hidden;
text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 复制代码

跨浏览器兼容的方案

比较靠谱简单的作法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

例如：

p {
 position:relative;  line-height:1.4em;  /* 3 times the line-height to show 3 lines */  height:4.2em;  overflow:hidden; } p::after {  content:"...";  font-weight:bold;  position:absolute;  bottom:0;  right:0;  padding:0 20px 1px 45px;  background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y; } 复制代码

注意：

• height高度正好是line-height的3倍
• 结束的省略好用了半透明的png作了减淡的效果，或者设置背景颜色
• IE6-7不显示content内容，因此要兼容IE6-7能够是在内容中加入一个标签，好比用span标签去模拟
• 要支持IE8，须要将::after替换成:after

JavaScript 方案

用js也能够根据上面的思路去模拟，实现也很简单

定位

position定位介绍

语法：position：static（默认值-静态定位） /absolute（绝对定位）/relative（相对定 位）/fixed（固定定位），其也是为了解决布局问题。

所谓的定位其实就是让元素的位置进行移动，给元素设置了position属性后，元素就变成了定位流。

定位属性，必须配合其余值来使用，left、right、top、bottom。

定位元素有参照物。

相对定位

特色：

• 相对定位是相对于本身之前在标准流中的位置进行定位的（注意点：相对定位是半脱落状态）

• 不脱落文档流（标准流）的，占位置（空间）

• 区分元素类型的（区分是块级元素、内联元素、行内块元素）,元素之前是什么类型，设置了相对定位后仍是什么类型

• 对元素进行微调，主要的做用是配合绝对定位来使用

绝对定位

特色：

• 脱离文档流的，不占位置的

• 不区分元素类型

• 绝对定位是相对于父元素进行定位的，若是父元素不是定位流，元素会往上查找有定位流的元素，找到最上级仍是没有定位流，会相对于body进行定位（相对于祖先元素进行定位的）

固定定位

特色：

• 脱落文档流的，不占空间

• 不区分元素类型

• 相对于body进行定位的

• 不会随着滚动条的滚动而滚动

• 能够相互之间重叠

粘性定位

position: sticky; 粘性定位

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，以后为固定定位。

元素垂直居中的方法

定位，父相子绝

父元素相对定位

子元素绝对定位

子元素left,right,top,bottom=0

子元素margin:auto;

利用css3的transform属性

示例：

html

<div class="transform"><img src="favicon.ico" /></div>
复制代码

css

.transform {
 width: 300px;  height: 300px;  text-align: center;  line-height: 300px;  background: #90EE90;  margin: 0 auto;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); }  .transform img {  width: 50px;  height: 50px;  vertical-align: middle; } 复制代码

Flex垂直水平居中

css示例:

.flex{
 font-size: 25px;  height: 200px;  border: 1px solid black;  display: flex;  align-items: center;  justify-content: center; } 复制代码

利用display:table-cell属性使内容垂直居中

css示例:

.table-cell {
 display: table-cell;  vertical-align: middle;  text-align: center;  width: 120px;  height: 120px;  background: purple; } 复制代码

什么是BFC？

BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是W3C CSS 2.1 规范中的 一个概念，它决定了元素如何对其内容进行定位，以及与其余元素的关系和相互做用。

特色：

• 在BFC下，内部的Box会在垂直方向，一个接一个地放置
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 在BFC中，每个盒子的左外边缘（margin-left）会触碰到容器（父元素）的左边缘(border-left)（对于从右到左的格式来讲，则触碰到右边缘），即便存在浮动也是如此
• BFC的区域不会与float box重叠。例子：两个div，一个进行浮动，一个不浮动，这时浮动的元素会覆盖没有浮动的元素。给没有浮动的元素加overflow:hidden。就不会重合
• 计算BFC的高度时，浮动元素也参与计算

如何触发BFC:

• 浮动元素，float 除 none 之外的值
• position的值不为static或者relative
• display为inline-block、table-cell、table-caption
• overflow 除了 visible 之外的值

主要应用场景：

• 解决浮动塌陷问题
• 自适应两栏布局（咱们还能够运用BFC能够阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow:hidden。）
• 解决设置margin值重叠问题。

visibility:hidden和display:none的区别

两者均为隐藏显示区域。于前者而言，该属性会使对象不可见，但该对象在网页中所占的空间没有改 变；于后者而言，该属性则使对象彻底完全消失

为何会出现浏览器兼容问题

简单的来讲就是个大浏览器使用的内核版本是不同的，有着具备本身的内核。其中不得不说ie六、7了。

做为咱们前端人员来讲ie无疑成为咱们前端开发人员的一大阻碍，有人就说ie是垃圾浏览器，是奇葩浏览器。而为何还会用它呢，那是它在市场上占据着重要地位。

其实在很早之前ie就占据了绝大部分的浏览器市场拥有者霸主地位，以谷歌，火狐为表明的浏览器商家为了争夺市场，从新瓜分浏览器市场这块大的蛋糕，因而就组织起来制定了w3cschool的这样的一套规范来与ie来进行抗衡。就是这样ie浏览器和w3c下的个大浏览器才会有这么多的兼容性问题。

说到这里其实浏览器兼容性缘由很简单那是由于ie先于为w3c诞生。在w3c诞生以前ie就有着本身的的一套执行的标准。之因此以谷歌，火狐为表明的浏览器商家会指定一套属于本身的标准，究其根源是为了争夺市场的占有力。两个字“利益”。

其实ie并无错，咱们不能只看到事物的一面，还要看到实物的本质。用哲学的话来讲，咱们要从感性认识上升到理性认识透过事物的表象抓住事物的本质。能够看到在后来的ie8之后，ie为了在市场上生存下去，只有向w3c妥协。慢慢接近于为w3c的标准

常见CSSbug和CSShack

图片间隙

图片默认会给容器撑大3px,给图片display:block，这样图片就会自上而下排列，不横向排列。。

图片并排中间有间隙,给图片左浮动。。

dt,li中的图片间隙

给图片display:block;

图片在IE浏览器上，在a下面时，有蓝色边框

img{border:none;}

低版本IE部分块有默认高度

如何在低版本IE下写出1px的高度?

• 给元素font-size:0;
• overflow:hidden;

百分比bug

IE6及如下版本，会出现50%+50%>100%的状况

给右面的元素clear:right;才能解决

margin-top的bug

子元素的margin-top,被浏览器误认为设置给父元素，致使父元素往下掉。

解决方法:给父元素overflow:hidden;或者让子元素浮动。

以上就是我对css、html的一些总结，但愿能够帮到你们，后期会更新我对JavaScript的一些总结，想持续了解的请关注我公众号

我是monkeysoft，你的【三连】就是monkeysoft创做的最大动力，若是本篇博客有任何错误和建议，欢迎你们留言！

文章持续更新，能够微信搜索 【小猴子的web成长之路】关注公众号第一时间阅读,关注以后后台回复知识体系，更可领取小编精心准备的前端知识体系，将来学习再也不迷茫,更可加入技术群交流讨论。

本文使用 mdnice 排版