前端笔试题总结-HTML&CSS

HTML&CSS专项

• web页面级优化：

  • 减少HTTP请求次数；
  • 进行资源合拼并压缩；
  • Inline images；
  • 将外部脚本置于底部；
  • 减少不必要的HTTP跳转。

• CSS3新增属性： CSS3新增属性用法整理

• CSS高级选择器：

  css选择器参考手册-w3school

  a,b可以是标签选择器、类选择器或id选择器。

  • 后代选择器： a b{} 空格分隔，选择a的后代中的所有b元素；
  • 子代选择器： a>b{} >分隔，选择a的直系子代b元素；
  • 并集选择器： a,b{} ,分隔，选择满足a或b的元素；
  • 交集选择器： ab{} 没有分隔，选择同时满足ab的元素。

• @import和link的区别：

  • link是XHTML标签，无兼容性问题；@import是css2.1提出，不支持低版本浏览器（IE5+）；
  • link可以加载css和js文件；@import只能加载css文件；
  • link加载时与页面同时加载；@import需要页面完全加载完成后加载。

• DOM可控性区别： 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

  • 权重区别： link引入的样式权重大于@import引入的样式。

• animation-timing-function属性：

  属性	描述
  ease**(默认)**	动画以低速开始，然后加快，在结束前变慢（等于 cubic-bezier(0,0,1,1)）。
  linear	动画从头到尾的速度是相同的（cubic-bezier(0.25,0.1,0.25,1)）。
  ease-in	动画以低速开始（等于 cubic-bezier(0.42,0,1,1)）。
  ease-out	动画以低速结束（等于 cubic-bezier(0,0,0.58,1)）。
  ease-in-out	动画以低速开始和结束（等于 cubic-bezier(0.42,0,0.58,1)）。
  cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

• css样式优先级顺序：

  !import > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符(*) > 继承

• css样式权重：

  1. id选择器的权值为100
  2. class、属性和伪类选择器的权值为10
  3. 标签选择器、伪元素的权值为1
  4. 权值较大的优先级越高
  5. 比较样式时，将对应的选择器权值相加，大的优先级高
  6. 权值相同的，根据从上往下的原则，后定义的优先级高
  7. 特殊！important，优先级最高

• form表单的enctype属性：

  • application/x-www-form-urlencoded ：发送前编码所有字符（默认）；
  • multipart/form-data ：不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值；
  • text/plain ：空格转换为 “+” 加号，但不对特殊字符编码。

• a标签的属性：

  • a 元素可以没有 href 属性，此时为超链接的一个占位符；
  • target 属性可选有：_blank、_self、framename等值；
  • rel 属性有多个值时，使用空格 " " 分隔；
  • href 属性的可选有：
    • 绝对路径（href = “https://www.baidu.com”）
    • 相对路径（href = “index.html”）
    • 锚（href = “#top”）

• CSS清除页面浮动的方法：

  在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

  • 在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>（W3C推荐，比较少用）；
  • 通过设置父元素overflow值为hidden；
  • 给父元素添加clearfix类；
  • 父元素也设置浮动（会导致整体浮动，不推荐使用）。

  详细解析：CSS清除浮动

• CSS块状元素、内联元素和内联块状元素：

  在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素、内联元素(又叫行内元素)和内联块状元素。

  常用的块状元素有：

  <div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

  什么是块级元素？

  在html中<div>、<p>、<h1>、<form>、<ul>和<li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;}

  块级元素特点：

  1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）;

  2、元素的高度、宽度、行高以及顶和底边距都可设置。

  3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 常用的内联元素有：

  <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 在html中，<span>、<a>、<label>、<strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。
  当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div 元素具有内联元素特点。
  div{ display:inline; } … <div>我要变成内联元素</div>

  内联元素特点：

  1、和其他元素都在一行上；

  2、元素的高度、宽度及顶部和底部边距不可设置；

  3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

  常用的内联块状元素有：

  <img>、<input>
  内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。

  inline-block 元素特点：

  1、和其他元素都在一行上；

  2、元素的高度、宽度、行高以及顶和底边距都可设置。

• CSS overflow：

  • 参数是scroll时候，必会出现滚动条。
  • 参数是auto时候，子元素内容大于父元素时出现滚动条。
  • 参数是visible时候，溢出的内容出现在父元素之外。
  • 参数是hidden时候，溢出隐藏。

• BFC： BFC基础分析 BFC理解

• CSS宽高：

  

  

• autofocus属性： H5新增，可用于button和input，如果值为autofocus，则在页面加载后自动获取焦点。

• text-transform：

  text-transform:capitalize /*是首字母大写*/
  text-transfrom:lowercase /*是全部字母为小写*/
  text-transfrom:uppercase /*是全部字母为大写*/
  

• 表单常用属性：

  • cellpadding：单元格边沿与其内容之间的空白

  • cellspacing：单元格之间的空白

  • border：表格边框的宽度（也可以理解我边框的粗细程度）

  • height：表格高度

  • width：表格的宽度

  • bgcolor：表格背景颜色

  • align：表格相对周围元素的对齐方式（也可以理解为表格中的文字内容的对齐方式）

  • frame：规定外侧边框哪些部分是可见的

  • rules：规定内侧边框哪些部分是可见的

• meta viewport属性：

  • width - viewport的宽度 height - viewport的高度
  • initial-scale - 初始的缩放比例
  • minimum-scale - 允许用户缩放到的最小比例
  • maximum-scale - 允许用户缩放到的最大比例
  • user-scalable - 用户是否可以手动缩放

• 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%没实现水平居中而紧靠右了吗？)

  由此也可以算出图片的左顶点距离容器的左顶点的垂直距离为20px

  y%:对应x%

  x:图片距离容器水平方向距离

  y:图片距离容器垂直方向距离

• DOCTYPE（H4）： DOCTYPE不存在或格式不正确会导致文档以**混杂模式（兼容模式）**呈现。

• float： float小结

  1. 行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上
  2. 块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上

• web worker：

  当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

  web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

  web worker使用教程

  h5 web worker

• HTML常用编码：

  • UTF-8（8-bit Unicode Transformation Format，万国码）。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
  • GBK是汉字编码，是双字节码，可表示繁体字和简体字。
  • ISO8859-2 字符集，也称为 Latin-2，收集了 东欧 字符。

• label元素只有2个属性：

  • for（ 规定 label 绑定到哪个表单元素。 ）

  • form（规定 label 字段所属的一个或多个表单）

• position：

  

• 回流和重绘： 浏览器的回流与重绘 (Reflow & Repaint)

• background-attachment：

  • scroll是默认值，背景图像会随着页面其余部分的滚动而移动。
  • fixed当页面的其余部分滚动时，背景图像不会移动。
  • inherit规定应该从父元素继承 background-attachment 属性的设置。

• css中clear的作用是： 指明该元素周围不可出现浮动元素。

• CSS 百分比参照问题：

  • 参照父元素宽度的元素：padding margin width text-indent

  • 参照父元素高度的元素：height

  • 参照父元素属性:font-size line-height

  • 特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

• p元素和a元素：

  • p是块元素，但是其不能包含除了它本身之外的任何块元素；
  • a是内联元素，但是它可以包含除了它本身外的任意块元素

• 主流浏览器内核私有属性css前缀：

  • mozilla内核(firefox,flock等)：-moz
  • webkit内核(safari,chrome等):-webkit
  • opera内核(opera浏览器):-o
  • trident内核(ie浏览器):-ms

• BootStrap栅格系统：

  • .col-xs- 超小屏幕 手机 <768px

  • .col-sm- 小屏幕 平板 >=768px

  • .col-md- 中等屏幕 >=992px

  • .col-lg- 大屏幕 >1200px

• 置换元素和不可替换元素：

  • 置换元素： 浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：浏览器会根据<img>标签的src属性的 值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容。<img>、<input>、<textarea>、<select>、<object>
  • 不可替换元素： html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。

• IE6/7/8不支持事件捕获

• 在HTML body部分中的JavaScripts会在页面加载的时候被执行。

  在HTML head部分中的JavaScripts会在被调用的时候才执行。

• translate3d和translateZ(0)：

  在页面中使用translate3d或者translateZ(0)会强行使用GPU硬件加速，但是滥用硬件加速会导致严重性能问题，因为它增加了内存使用，并且它会导致移动端电池寿命减少。

• DOM树分类： Element类型（元素节点）、Text类型（文本节点）、Comment类型（注释节点）、Document类型（document节点）。

• currentColor关键字： currentColor是 color 属性的值，具体意思是指：currentColor关键字的使用值是 color 属性值的计算值。如果currentColor关键字

  被应用在 color 属性自身，则相当于是 color: inherit。

• CSS attr()函数：

  attr(attribute-name)：取选择器元素的相应attribute-name属性的值。

• 鼠标点击按钮时的事件顺序： hover -> fouces -> active

• @media： 使用媒体查询

• media queries的条件（使用方法）： 可以使用设备像素比、设备类型、设备高度作为查询调解条件。使用and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。

• @media适配移动端：

  max-width 指的是显示区域的宽度，比如浏览器的显示区域宽度

  max-device-width 指的是设备整个渲染（显示）区域的宽度，比如设备的实际屏幕大小，也就是设备分辨率

  max-height 与 max-device-height 也是同理。更进一步说，max-width在窗口大小改变或横竖屏转换时会发生变化

  max-device-width只与设备相关，横竖屏转换或改变尺寸，缩放都不会发生变化（部分android的宽高会互换而IOS不会）

  device- width指的是设备本身的宽度，也就是屏幕的分辨率，比如说你手机的分辨率是1440*900，这表示你的屏幕宽是1440px， 所以device-width是1440px。

• iframe可用在以下几个场景中：

  1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
  2：ajax上传文件。
  3：加载别的网站内容，例如google广告，网站流量分析。

  4： 在上传图片时，不用flash实现无刷新。

  5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

• 每条选择器最多只能出现一个伪元素，但可以出现多个伪类。

• background-position：

  • 该属性可有两个取值，第一个取值为背景图像与其容器在水平方向上的距离，第二个取值为背景图像与其容器在垂直方向上的距离

  • 若属性取值用left、center、right、top、bottom表示，则该属性取值的顺序可以颠倒，否则其取值顺序不能颠倒

  • 若只有一个取值，则其第二个取值默认为50%

  • 若此取值用百分数表示，如x%， x%指的是父级容器的宽度减去图片的宽度后的差值的百分数。

    举个栗子：background-position：50%，20%；
    图片的宽度为 imgwidth：100px；高度为 imgheight：100px；
    容器的宽度为 conwidth：200px；高度为 conheight：200px；
    那么此时图片的左顶点距离容器的左顶点的水平距离就是(conwidth-imgwidth)50%=50px,而不是conwidth50%=100px；(很好理解的吧，不然盒子宽度200px，图片宽度100px，又距离左边100px，岂不是50%没实现水平居中而紧靠右了吗？)
    由此也可以算出图片的左顶点距离容器的左顶点的垂直距离为20px

• 分析错误代码：

  some text

  
  - ```html
  <button type="submit"><a href="some link">some text</a></button>
  <!--button子元素不可以嵌套交互性元素。a属于交互性元素。-->
  

  • <dl>
        <dt><h1>some title</h1></dt>
        <dd>
            <p>some text</p>
            <p>some text</p>
        </dd>
    </dl>
    <!--<dt>、<th>不可嵌套<header>、<footer>、区块型元素(sectioning content)、标题型元素(heading content)-->
    

• empty选择器， root选择器和target选择器:

  • :empty选择器，选择指定空元素。如

    p:empty{ 
    	background:#ff0000;
    }
    

  • :root选择器，匹配文档的根元素。如

    :root{ 
    background:#ff0000;
    }
    

  • :target选择器，匹配当前活动的锚（突出当前的锚点）。如

    p:target{ 
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
    }
    

• 常见inline-block元素： img, input, button, textarea, object, select等。

• head标签里面必不可少的标签是title。

• 哪些情况会产生BFC：

  BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与。

  1. 根元素
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visible

• IE兼容设置透明度方法： filter:alpha(opacity=80);

• 为HTML标签使用fixed或absoult的position，那么修改他们的CSS是不会reflow的。

• HTML5的picture标签用于为不同设备提供图像

  <picture>
    <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
    <img src="mdn-logo-narrow.png" alt="MDN">
  </picture>
  

• JQ DOM选择器：

  $(‘#wrapper’).children();  //（只沿着 DOM 树向下遍历单一层级）查询直接的子元素。而不管子元素的子元素。
  
  $(‘#wrapper’).html();  //返回的是dom结构。而不是集合
  
  $(‘#wrapper’).contents(); //获得匹配元素集合中每个元素的子节点，包括文本和注释节点。
    
  $(‘#wrapper’).find();  //获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
  

• 表格间距：

  • bordercolor表示边框颜色；

  • cellspacing表示单元格之间的间隔；

  • cellpadding表示单元格内边距。

• html元素优先级和显示顺序：

  • 在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。

    表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；

    非表单元素包括：连接（a），div,table,span等。

  • 所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。

    有窗口元素包括：select元素，object元素，以及frames元素等等。

    无窗口元素：大部分html元素都是无窗口元素。

• DHTML:

  • DHTML是Dynamic HTML的简称，就是动态的HTML(标准通用标记语言下的一个应用)，是相对传统的静态的html而言的一种制作网页的概念。
  • DHTML只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括**html+css+javascript(**或其它客户端脚本)。
  • html+css+javascript（或其他脚本）的优点：html确定页面框架，css和脚本决定==页面样式、动态内容和动态定位==。

• DOM事件流包括： 事件捕获阶段、处于目标阶段、事件冒泡阶段。[关于DOM事件流、DOM0级事件与DOM2级事件

• 用4位16进制数表示颜色： 前三位是重复的值简写值，第四位代表透明度，f是1。如：#f00f对应rbg(255, 0, 0, 1)。

• H5新增的表单元素：

  • datalist： 规定输入域的选项列表。

    

  • keygen： 规定用于表单的密钥对生成器字段，提供一种验证用户的可靠方法，当提交表单时，私钥存储在本地，公钥发送到服务器。。

  • output： 定义不同类型的输出，比如脚本的输出。

• animation-timing-function属性： 指定动画将如何完成一个周期。

• transition-timing-function属性： 指定切换效果的速度。

• 贝塞尔曲线 - cubic-bezier() 函数：

  贝塞尔曲线可用于animation-timing-function和transition-timing-function属性。

  语法：

  cubic-bezier(x1,y1,x2,y2)
  

  贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。

  P0：默认值 (0, 0) P1：动态取值 (x1, y1) P2：动态取值 (x2, y2) P3：默认值 (1, 1)
  

  我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。

  最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。

  快慢解析： 快慢由斜率k决定，k1=y1/x1,k2=y2/x2,

  • k1为开始斜率，k2为结束斜率

  • k>1 则为快，k<1则为慢

  贝塞尔曲线效果预览网站

• 修改font-size会导致回流。

• embed标签用来定义嵌入的内容

• track标签：

  • track标签为媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
  • 目前所有主流浏览器都不支持track标签。

• 创建带有id属性的DOM元素有什么副作用：

  如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名。==会创建同名的全局变量。

围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。

最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。

快慢解析： 快慢由斜率k决定，k1=y1/x1,k2=y2/x2,

• k1为开始斜率，k2为结束斜率

• k>1 则为快，k<1则为慢

贝塞尔曲线效果预览网站

• 修改font-size会导致回流。

• embed标签用来定义嵌入的内容

• track标签：

  • track标签为媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
  • 目前所有主流浏览器都不支持track标签。

• 创建带有id属性的DOM元素有什么副作用：

  如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名。==会创建同名的全局变量。

• A+B选择器： 选择B是A的下一个兄弟节点。