之前有尝试记录错题,花费时间长,效果不太好,后面发现牛客网自动生成了错题本。所以就开一篇专门记录一下易错知识点吧,刚好最近把HTML&CSS所有专项练习做完啦。大声BB:牛客网能不能不要把bootstrap的内容加到这个专项练习中鸭!你让我这种不学bootstrap的怎么办!
错题知识点整理
-
CSS3新增的特性:前端面试之 CSS3 新特性
-
a标签不跳转有三种方法:
- onclick事件返回false
- 用href=“Javascript: void(0)”这种伪协议
- 使用(#)跳转到页面顶部
-
IndexdDB 是 HTML5 的本地存储,把一些数据存储到浏览器(客户端)中,当与网络断开时,可以从浏览器中读取数据,用来做一些离线应用。
Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份,最大为 4 kb 。
url 参数用的是 get 方法,从服务器上获取数据,大小不能大于 2 kb 。
Session 是服务器端使用的一种记录客户端状态的机制 。
post 是向服务器传送数据,数据量较大。
local Storage 也是 HTML5 的本地存储,将数据保存在客户端中(一般是永久的)。
-
CSS伪类用于向某些选择器添加特殊的效果。
- :active 向被激活的元素添加样式。
- :focus 向拥有键盘输入焦点的元素添加样式。
- :hover 当鼠标悬浮在元素上方时,向元素添加样式。
- :link 向未被访问的链接添加样式。
- :visited 向已被访问的链接添加样式。
触发顺序为link–>visited—>hover—>active即记为love and hate,然后单独记住focus在hover和active之间即可。hover -> focus -> active悬停 -> 聚焦 -> 响应。
-
创建带有id属性的DOM元素有什么副作用:会创建同名的全局变量。
-
DOM树中总共分为如下几种节点格式:Element类型(元素节点)、Text类型(文本节点)、Comment类型(注释节点)、Document类型(document节点)。
- document可以说是一种节点格式,但节点树的根节点也叫document。
- 所有的HTML elements(元素节点,其实就是HTML标签)都是element。
- comments属于注释节点
-
DOM事件流包括哪些阶段:
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
-
HTML5新增的表单元素有:
autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、pattern、placeholder、required、step、width。
-
bootstrap中,一个元素需要在打印时隐藏,使用的类是hidden-print。
-
关于Canvas和SVG的描述:
-
Canvas和SVG都可以使用JavaScript来绘制。
-
Canvas对象支持所有的JavaScript的鼠标事件,但绘制在其中的图形并不作为其子元素存在,所以需要通过获取Canvas对象上的鼠标坐标,来绑定事件。因此,并不能直接给canvas里面的图形绑定事件。
-
WebGL (Web图形库) 是一种JavaScript API,用于在任何兼容的Web浏览器中呈现交互式3D和2D图形,而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API,可以在HTML5
<canvas>
元素中使用。 -
SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景;Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制。
-
-
跨域:发起请求与指向资源域不相同(协议+域名+端口),也就是标签上的src属性不受同源策略影响。 常见有指向资源的部件:
<a>
,<form>
,<img>
,<script>
,<iframe>
,<link>
等标签以及Ajax
。 -
哪些元素在浏览器默认样式下会加粗文本:
<h1> - <h6>
标签表示 HTML 标题,默认加粗。<caption>
标签表示表格标题,标题一般被居中表格之上,但不加粗文本。<em>
标签表示强调内容,显示为斜体,但不加粗文本。<th>
标签表示表格的表头,默认加粗文本。 -
能够用于边距的单位:em, px, pt。
-
层级显示优先级: frameset > 表单元素 > 非表单元素
- 在html中,帧元素(frameset)的优先级最高,表单元素比非表单元素的优先级要高。
- 表单元素包括:文本输入框,密码输入框,单选框,复选框,文本输入域,列表框等等;
- 非表单元素包括:链接(a), div, table, span等。
所有的html元素又可以根据其显示分成两类:有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。
- 有窗口元素包括:select元素,object元素,以及frames元素等等。
- 无窗口元素:大部分html元素都是无窗口元素。
-
BFC 块级格式化上下文:
- BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。
- 内部的Box会在垂直方向,从顶部开始一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box叠加。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
- 计算BFC的高度时,浮动元素也参与计算。
-
浮动元素
-
如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象。
-
浮动元素会尽可能地向顶端对齐、向左或向右对齐。
-
如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素。
-
浮动元素重叠:
-
行内元素与浮动元素发生重叠,边框、背景、内容都会显示在浮动元素之上
-
块级元素与浮动元素发生重叠,边框、背景会显示在浮动元素之下,内容会显示在浮动元素之上
-
-
-
CSS中可以继承的属性:
继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性。
- css不可继承的属性:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
- 所有元素可继承:visibility和cursor。
- 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
- 终端块状元素可继承:text-indent和text-align。
- 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
- 表格元素可继承:border-collapse。
-
CSS的font-style用于设置字体的风格,font-weight设置字体的粗细。
- normal:默认正常情况
- italic:显示字体为斜体
- oblique:显示字体为斜体
- inherit:从父亲那里继承一个样式
-
浏览器支持的锚伪类(锚代表超链接):
- 未访问状态(a:link)
- 鼠标悬停状态(a:hover)
- 活动状态(a:active)
- 已访问状态(a:visited)
📌分清楚锚伪类和伪类。
-
置换元素与不可置换元素:
-
置换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。 例如:浏览器会根据
<img>
标签的src属性的值来读取图片信息并显示出来,而如果查看html代码,则看不到图片的实际内容;<input>
标签的type属性来决定是显示输入框,还是单选按钮等。html中的
<img>
、<input>
、<textarea>
、<select>
、<object>
都是置换元素。这些元素往往没有实际的内容,即是一个空元素。置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。
-
不可置换元素:html 的大多数元素是不可置换元素,即其内容直接表现给用户端(如浏览器)。
例如:
<label>
label中的内容</label>
:标签<label>
是一个非置换元素,label中的内容将全被显示。
-
-
<input>
元素的type属性的取值可以是: -
块级元素、内联元素(行内元素)和内联块级元素:
-
HTML5中,自关闭的斜线(/)对 :area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr空标签无效,言即不再需要自闭合(/)这个小尾巴了,如果要写上也是可以的。
-
a链接标签没有设置href属性时是不能获取到焦点的。
能够获得焦点的几种情况:
<div contenteditable="true">我可以</div>
<p tabindex="1">我可以</p>
<input type="text" value="我可以" />
<a id="yes" href="#">我可以</a>
-
页面导入样式文件时,对于使用link和@import区别和用法:
两者的区别:
1)link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
2)link可以加载CSS,Javascript;@import只能加载CSS。
3)link加载的内容是与页面同时加载;@import需要页面网页完全载入以后加载。
用法:
1)link的写法:
<link rel="stylesheet" href="index.css">
2)import的写法:
<style type="text/css"> @import url(“index.css”); </style>
-
HTML
<body>
元素中,vlink属性用于定义超链接被鼠标点击后所显示的颜色。 -
回流与重绘:
在讨论回流与重绘之前,我们要知道:
- 浏览器使用流式布局模型 (Flow Based Layout)。
- 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。
- 有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。
- 由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时间,这也是为什么要避免使用table布局的原因之一。
一句话:回流必将引起重绘,重绘不一定会引起回流。
回流 (Reflow):当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。
会导致回流的操作:
- 调整窗口大小,浏览器窗口尺寸改变——resize事件发生时
- 元素尺寸改变——边距、填充、边框、宽度和高度;改变字体大小
- 页面渲染初始化
- 元素位置改变
- 样式表变动
- 元素内容变化,尤其是输入控件
- CSS伪类激活
- DOM操作,添加或者删除可见的DOM元素
- offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算, 会使浏览器将渐进回流队列Flush,立即执行回流。内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变。
-
MVC是一种常见的架构,任何系统都可以使用MVC的设计理念:
-
Model(模型)是应用程序中用于处理应用程序数据逻辑的部分,而不是保存数据实体。 通常模型对象负责在数据库中存取数据。
-
View(视图)是应用程序中处理数据显示的部分。视图有多种形式,不止是HTML。 通常视图是依据模型数据创建的。
-
Controller(控制器)是应用程序中处理用户交互的部分。 通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。
-
-
HTML5 是作为Flash的替代技术出现。
-
关于背景定位属性background-position的说法:
用处:配合background-image属性一起使用,用于设置背景图片在盒子中的位置
参数:xpos ypos x% y% x y三种, 如果只写第一个水平方向的参数,第二个垂直方向的参数会默认为:center 50% 容器高度的一半px Xpos:规定水平方向的对齐方式,值有left,right,center
Ypos:规定垂直方向的对齐方式,值有top,bottom,center
x%:规定图片水平方向的距离。
你会不会以为这个x%就是父级容器宽度的x%?那你就想错了哦,这里的x%指的是父级容器的宽度减去图片的宽度后的差值的x%。
举个栗子:background-position:50%,20%;
图片的宽度为 imgwidth:100px;高度为 imgheight:100px;
容器的宽度为 conwidth:200px;高度为 conheight:200px;
那么此时图片的左顶点距离容器的左顶点的水平距离就是(conwidth-imgwidth)50%=50px,而不是conwidth50%=100px;(很好理解的吧,不然盒子宽度200px,图片宽度100px,又距离左边100px,岂不是50%没实现水平居中而紧靠右了吗?)
y%:对应x%
x:图片距离容器水平方向距离
y:图片距离容器垂直方向距离
-
track标签:
<track>
标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。<track>
标签是 HTML 5 中的新标签。目前所有主流浏览器都不支持<track>
标签。 -
DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起,用于创造动态性更强的网页。通过 JavaScript 和 HTML DOM,能够动态地改变 HTML 元素的样式。
-
HTML5新增元素:
📍viewport不是新增元素!
-
在不考虑H5的情况下,text、submit、button是可以作为标签的type属性的属性值。考虑html5的话,date也可以作为标签的type属性的属性值。
-
iframe可用在以下几个场景中:
- 典型系统结构,左侧是功能树,右侧就是一些常见的table或者表单之类的。为了每一个功能,单独分离出来,采用iframe。
- ajax上传文件。
- 加载别的网站内容,例如google广告,网站流量分析。
- 在上传图片时,不用flash实现无刷新。
- 跨域访问的时候可以用到iframe,使用iframe请求不同域名下的资源。
-
嵌入在HTML文档中的图像格式可以是
*.gif
、*.png
、*.bmp
、*.jpg
。 -
在class中可以定义:hover伪类,在id中也可以定义。一个元素只能有一个id属性值,却可以拥有多个class属性值。
-
关于表单的说法:
- multiple: 用于select的多选或者上传多个文件
- textarea: 表单多行输入
- placeholder: 可以用来提示用户输入什么内容
- disabled:用户无法直接修改包含disabled属性的文本框的内容
-
Animation-timing-fuction:
默认的是ease,不是linear。
属性 描述 linear 动画从头到尾的速度是相同的。 ease 默认 动画以低速开始,然后加快,在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 -
:before
不是css3才定义的。 -
屏幕大小:
-
.col-xs- 超小屏幕 手机 <768px
-
.col-sm- 小屏幕 平板 >=768px
-
.col-md- 中等屏幕 >=992px
-
.col-lg- 大屏幕 >1200px
-
-
可以作为table元素的子元素:
- caption
- tr
- tbody
-
可用于优化 CSS 图片加载的技术:
- CSSSprite
- SVGSprite
- Iconfont
- Base64
-
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
- height:和 width 相对应,指定高度。
- initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
- maximum-scale:允许用户缩放到的最大比例。
- minimum-scale:允许用户缩放到的最小比例。
- user-scalable:用户是否可以手动缩放。
-
以下两种情况都是用来创建一个多选框,且和文本关联起来(单击文本就像单击核选框一样):
<label><input type="checkbox" />记住我</label>
<input type="checkbox" id="c1" /><label for="c1">记住我</label>
-
id和class的使用说明:
- 一个class可以在一个网页中多次使用
- ID和class都能和javascript及CSS一起使用
- 同一个id或class,都可以在一个网页中出现多次
-
块级元素、行内元素、行块级元素:
-
常见的块级元素(自动换行, 可设置高宽 )有:div,h1-h6,p,pre,ul,ol,li,form,table,label等
-
常见的行内元素(无法自动换行,无法设置宽高)有: a,img,span,i(斜体),em(强调),sub(下标),sup(上标)等。
-
常见的行块级元素(拥有内在尺寸,可设置高宽,不会自动换行 )有: (button,input,textarea,select), img等。
-
label元素不会是浏览器默认的行块级元素:input默认情况下可以设置可设置高宽,不会自动换行。但是label并没有变化
-
-
总结那些有默认margin,padding值的html标签:
- h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值。
- dl标签:有默认margin(top,bottom且相同)值,没有默认padding值。
- ol,ul标签:有默认margin-(top,bottom且相同)值,有默认padding-left值
- table标签没有默认的margin,padding值;th,td标签没有默认的margin值,有默认的padding值。
- form标签在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中没有默认的margin,padding值,但在IE6.0,7.0中有默认的margin:19px 0px;
- p标签有默认margin(top,bottom)值,没有默认padding值。
- textarea标签在上述所有浏览器中:margin:2px;padding:2px;
- select标签在Chrome,Safari,Maxthon中有默认的margin:2px;在Opera,Firefox,IE6.0,7.0,8.0没有默认的margin值。