HTML、CSS

HTML

浏览器页面有哪三层构成，分别是什么，作用是什么?
- 结构层、表示层、行为层
- HTML、CSS、JavaScript
- HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。
HTML5有哪些新特性、移除了哪些元素？
- 新特性：canvas，web storage，web worker，service worker，语义化标签
- 移除的元素——纯表现元素、框架集
  - < basefont > 默认字体，不设置字体，以此渲染，< font > 字体标签， < center > 水平居中， < u > 下划线，< big > 大字体， < strike > 中横线， < tt > 文本等宽
  - < frameset >，< noframes >， < frame >
- 把 HTML5 的元素按优先级定义为结构性元素、级块性元素、行内语义性元素和交互性元素 4 大类
  - 结构性元素主要负责web上下文结构的定义
    
    section：在 web 页面应用中，该元素也可以用于区域的章节描述。
    
    header：页面主体上的头部， header 元素往往在一对 body 元素中。
    
    footer：页面的底部（页脚），通常会标出网站的相关信息。
    
    nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。
    
    article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。
  - 级块性元素主要完成web页面区域的划分，确保内容的有效分割。
    
    aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
    
    figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。
    
    code：表示一段代码块。
    
    dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。
  - 行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
    
    meter：表示特定范围内的数值，可用于工资、数量、百分比等。
    
    time：表示时间值。
    
    progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。
    
    video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
    
    audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
  - 交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
    
    details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。
    
    datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
    
    menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。
    
    command：用来处理命令按钮。
你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
- IE: trident 内核
- Firefox ： gecko 内核
- Safari : webkit 内核
- Opera: 以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核
- Chrome:Blink( 基于 webkit ， Google 与 Opera Software 共同开发 )
- 浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。
说说超链接target属性的取值和作用？
- target这个属性指定所链接的页面在浏览器窗口中的打开方式。
  
  它的参数值主要有：
  
  _blank ：在新浏览器窗口中打开链接文件
  
  _self ：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。
  
  _top ：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。
  
  _parent ：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象 _self 参数一样
语义化标签
- 定义：用最恰当的HTML元素标记的内容，描述的是业务。
- 优点：1 提升可访问性；2 SEO；3 结构清晰，利于维护
  
  < title >< /title>：简短、描述性、唯一（提升搜索引擎排名）。搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。
  
  < hn >< /hn >：h1~h6分级标题，用于创建页面信息的层级关系。对于搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是h1。
  
  < header >< /header >：页眉通常包括网站标志、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。
  
  < nav >< /nav >：标记导航，仅对文档中重要的链接群使用。html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。
  
  < main >< /main >：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
  
  < article >< /article >：包含像报纸一样的内容，表示文档、页面、应用或一个独立的容器。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。
  
  < section >< /section >：具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。如果只是为了添加样式，请用div！
  
  < aside >< /aside >：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。其中的导航多数是到关联页面或者是整站地图。如果放在main内，应该与所在内容密切相关。
  
  < footer>< /footer >：页脚，只有当父级是body时，才是整个页面的页脚。
  
  < small >< /small >：指定细则，输入免责声明、注解、署名、版权。只适用于短语，不要用来标记“使用条款”、“隐私政策”等长的法律声明。
  
  < strong >< /strong > ：表示内容重要性。
  
  < em >< /em >：标记内容着重点（大量用于提升段落文本语义）。
  
  < mark >< /mark >：突出显示文本，提醒读者。
  
  在HTML5中em是表示强调的唯一元素，而strong则表示重要程度。
  
  < b >< /b >：出于实用目的提醒读者的一块文字，不传达任何额外的重要性
  
  < i ></ i >：不同于其他文字的文字
  
  < figure ></ figure >：创建图（默认有40px左右margin）。
  
  < figcaption></ figcaption>：figure的标题，必须是figure内嵌的第一个或者最后一个元素。
  
  < cite></ cite >：指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会、音乐会、规范、报纸、或法律文件等。只用于参考源本身，而不是从中引述。
  
  < blockquote ></ blockquote >：引述文本，默认新的一行显示。
  
  < q ></ q >：短的引述（跨浏览器问题，尽量避免使用）。
  
  blockquote 表示段落级引述内容，q 表示行内的引述内容，cite 表示引述的作品名。
  
  可以对blockquoto和q元素使用cite属性（不是cite元素！），对搜索引擎自动化工具有用。cite=“URL”引述来源地址。
  
  < time ></ time >：标记时间。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
  
  < abbr ></ abbr >：解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。
  
  例子：< abbr title=”World Wide Web” >WWW</ abbr >
  
  abbr[title]{ border-bottom:1px dotted #000; }
  
  < dfn ></ dfn >：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
  
  < address ></ address >：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。如果提供整个页面的作者联系信息，一般放在页面级footer里。不能包含文档或者文档等其他内容。
  
  < del ></ del >：移除的内容。
  
  < ins ></ ins >：添加的内容。
  
  少有的既可以包围块级，又可以包围短语内容的元素。
  
  < code ></ code >：标记代码。包含示例代码或者文件名。
  
  < pre ></ pre >：预格式化文本。保留文本固有的换行和空格。对内容的换行要求是非常严格的。
  
  < meter></ meter >：表示分数的值或者已知范围的测量结果。如投票结果。
  
  例如：< meter value=”0.2” title=”Miles”>20%completed</ meter>
  
  < progress ></ progress >：完成进度。可通过js动态更新value。
  
  progress控件为进度条控件，可表示任务的进度，如Windows系统中软件的安装、文件的复制等场景的进度。meter控件为计量条控件，表示某种计量，适用于温度、重量、金额等量化的表现。

替换型元素和链接性元素

凡是替换型元素，都是使用src属性来引用文件的；链接型元素是使用href属性

替换型元素：引入一个外部资源来进入页面，替换掉自身的位置。

script标签是为数不多的既可以作为替换型标签，又可以不作为替换型标签的元素。

img、picture、audio、video、iframe

picture元素可以根据屏幕的条件为其中的img元素提供不同的源，它的基本用法如下：

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

浏览器对视频的编码格式兼容问题分成了几个派系，对于一些兼容性要求高的网站，我们使用单一的视频格式是不合适的。现在的video标签可以使用source标签来指定接入多个视频源。

<video controls="controls" >
    <source src="movie.webm" type="video/webm" >
    <source src="movie.ogg" type="video/ogg" >
    <source src="movie.mp4" type="video/mp4">
    You browser does not support video.
</video>

链接性元素：链接有两种类型。一种是超链接型标签，一种是外部资源链接。超链接型标签是一种被动型链接，在用户不操作的情况下，它们不会被主动下载。

link标签一般用于看不见的链接，它可能产生超链接或者外部资源链接，a和area一般用于页面上显示的链接，它们只能产生超链接。
link标签：< link rel=”stylesheet” href=”xxx.css” type=”text/css” >
a标签：基本解决了在页面中插入文字型和整张图片超链接的需要。用法：< a href=”http://www.baidu.com" target=”_blank”>百度</ a >

area标签：在图片的某个区域产生超链接。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
 
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

元信息类标签
- 定义：用于描述文档自身的一类标签
  - meta标签是一组键值对，它是一种通用的元信息表示标签。
    - < meta >标签定义元信息，包含页面的描述、关键字、最后的修改日期、作者及其它元信息。元信息不会显示在客户端，会被浏览器解析，元信息会被浏览器、搜索引擎（关键字）、以及其它web服务调用。
    - 常用属性
      
      charset：定义文档的字符编码，常用的是”utf-8” < meta charset=’UTF-8’ >
      
      content：定义与name和http-equiv相关的元信息
      
      http-equiv：把content的内容关联到HTTP头部(content-type) < meta http-equiv=”Content-Security-Policy” content=”script-src ‘self’; object-src ‘none’; style-src cdn.example.org third-party.org; child-src https:” >
      
      name：关联content的名称（常用的有：keyowrd关键字、author作者名、discriptiont页面描述） < meta name=”keyword” content=”html、css” >
Doctype
- 作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat
- 文档的解析类型
  - BackCompat：怪异模式/混杂模式/兼容模式，浏览器使用自己的怪异模式解析渲染页面，页面以宽松的向后兼容的方式显示。
  - CSS1Compat：标准模式/严格模式，浏览器使用W3C的标准解析渲染页面。
- Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
URI标记了一个网络资源，仅此而已； URL标记了一个WWW互联网资源（用地址标记），并给出了它的访问地址。
- 模式触发：
h5 web worker 和 websocket
- web worker
  - 运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
- websocket
  - 一种在单个 TCP 连接上进行全双工通讯的协议

CSS

自适应布局（两栏和三栏）

两栏

1.float+margin-left

2.absolute+margin-left

3.float+BFC

4.双 float+calc

5.flex (flex:1)

6.grid (grid-template-columns: 300px 1fr)

三栏

1.浮动布局

2.绝对布局

3.flex布局

4.grid 布局

5.圣杯布局（利用父级的padding）

6.双飞翼布局（利用center的margin)

圣杯布局和双飞翼布局的理解与思考

可继承属性和不可继承属性
- 不可继承属性
  - display
  - text-decoration 添加文本样式
  - list-style
  - 盒子模型属性（padding、border、margin、width）
  - 背景属性 background系列
  - 定位属性 position float clear z-index overflow
- 可继承属性
  - 字体系列 font系列
  - 文本系列 text-indent 文字缩进 text-align line-height color
  - visibility
  - cursor
伪类和伪元素
- 伪类
  - 获取不存在于DOM树中的信息。比如<a>标签的:link、visited等，这些信息不存于与DOM树结构中，只能通过CSS选择器来获取
  - 获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素
- 伪元素
  - DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：document接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）
  - 简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。
  - 不存在于DOM文档中，是虚拟的元素，是创建新元素。这个新元素(伪元素) 是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中
- 区别
  - 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
  - 伪元素本质上是创建了一个有内容的虚拟容器；
  - CSS3中伪类和伪元素的语法不同；
三角形的实现

width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: red transparent transparent transparent;

清除浮动

触发父元素的BFC

1	overflow: hidden;

父元素定义伪元素

.layout.float::after{
   width: 0;
   height: 0;
   content: '';
   display: block;
   visibility: hidden;
   clear: both;
}

加空标签并设置css 为 clear:both

1	<div style="clear:both;"></div>

父元素定义height

盒模型

概念和分类

CSS盒模型就是一个盒子，封装周围的HTML元素，它包括内容content、边框border、内边距 padding、外边距margin

CSS盒模型分为标准模型(content-box)、IE模型和 padding-box

标准模型和IE模型的区别

标准模型：width=内容content的宽度（默认) ; 设置方式为 box-sizing:content-box;盒子总宽度= width + margin(左右) + padding(左右) + border(左右)

IE模型：width=内容 content+内边距 padding+边框 border 的宽度；设置方式为box-sizing:border-box;盒子总宽度= width + margin(左右)（即width已经包含了padding和border值）

padding-box:width=内容 content+内边距 padding;设置方式为box-sizing:padding-box;盒子总宽度= width + border(左右)+margin(左右)（即width已经包含了padding值）

通过js如何获取盒模型的宽高

dom.style.width/height 只能获取到dom的内联样式

dom.currentStyle.width/height 获取到的是dom实际宽高，但这种方式只在IE中可以使用

window.getComputedStyle(dom,null).width/height 获取到的是dom实际宽高，但是不支持IE

dom.offsetWidth/offsetHeight 最常用的，兼容性最好

dom.getBoundingClientRect().width/height 计算dom的绝对位置，根据视窗左上角对应位置的绝对位置，可以拿到四个值：left、top、width、height

BFC和IFC

BFC的基本概念：Block Formatting context,块级格式化上下文

BFC的原理（BFC的渲染原则）

属于同一个BFC的两个相邻box的margin会在垂直方向上发生重叠

BFC区域不会与float box重叠 ——>自适应两栏布局

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

计算BFC的高度时，浮动元素也参与计算 ——>清除内部浮动，防止高度塌陷

补充：

BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度

如何创建BFC

脱离文档流：float不为none;position为absolute或fixed

overflow不为visible (hidden,auto,scroll)

display为”table-cell”,”table-caption”,”inline-block”,”flex”等

BFC的使用场景

自适应两栏布局

清除内部浮动

防止垂直margin重叠

IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

层叠上下文
- 定义：元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。
- 触发条件：
  - 根层叠上下文(html)
  - position
  - css3属性
    - flex
    - transform
    - opacity
    - filter
    - will-change
    - -webkit-overflow-scrolling
  补充知识：
  
  will-change:为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这个属性作用很单纯，就是“增强页面渲染性能”。
  
  -webkit-overflow-scrolling:控制元素在移动设备上是否使用滚动回弹效果。
  
  GPU：图形处理器，是与处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几何计算而设计的，可以让CPU从图形处理的任务中解放出来，从而执行其他更多的系统任务，例如，页面的计算与重绘。
  
  GPU加速：浏览器的GPU加速功能是将需要进行动画的元素提升到一个独立的层（layer），这样就可以避免浏览器进行重新布局（Reflow）和绘制（Repaint），将原先的浏览器使用CPU绘制位图来实现的动画效果转为让GPU使用图层合成（composite）来实现，如果两张图层内部没有发生改变，浏览器就不再进行布局和绘制，直接使用GPU的缓存来绘制每个图层，GPU只负责将各个图层合成来实现动画，这就可以充分利用GPU的资源和优势，减轻CPU的负载，可以使动画更流畅。通过改变两张图片之间的相对位置代替绘制一张图片的每一帧来实现动画，虽然视觉效果相同，但省去了许多绘制的时间。为了让浏览器将动画元素提升到一个独立的层，可以使用transform和opacity属性来实现动画，当设置了这两个属性之一时，浏览器会自动进行这一优化操作（透明度的变化可以通过GPU改变a通道来实现，不需要浏览器进行重绘）。
  
  MDN:will-change
  
  MDN:-webkit-overflow-scrolling
  
  一篇文章说清浏览器解析和CSS（GPU）动画优化
  
  CSS动画的性能分析和浏览器GPU加速
  
  使用CSS3 will-change提高页面滚动、动画等渲染性能 —张鑫旭
- 层叠等级：层叠上下文在z轴上的排序
  - 在同一层叠上下文中，层叠等级才有意义
  - z-index的优先级最高

不定宽元素垂直水平居中

absolute+transform

.parent{
   position: relative;
}
.child{
   position: absolute;
   top:50%;
   left: 50%;
   transform: translate(-50%,-50%);/* 相对自身的宽和高 */
}

flex

.parent{
   display: flex;
   justify-content: center;
   align-items: center;
}

grid

.parent{
	display: grid;
}
.child{
   align-self:center;
   justify-self: center;
}

rem、em

px是固定的像素，一旦设置了就无法因为适应页面大小而改变

em和rem相对于px更具有灵活性，他们是相对长度单位。em相对于父元素，rem相对于根元素

子元素字体大小的em是相对于父元素字体大小

元素的width/height/padding/margin用em的话是相对于该元素的font-size

rem是全部的长度都相对于根元素，通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

媒体查询

@media mediatype and|not|only (media feature) { CSS-Code;}

单行文本和多行文本溢出

单行文本溢出

1
2
3

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出

overflow: hidden;//首先是溢出隐藏，不可或缺
display: -webkit-box;//弹性盒模型显示
-webkit-box-orient: vertical;//盒模型元素的排列方式
-webkit-line-clamp: 3;//显示行数

选择器优先级
- !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
- 选择器 从右往左 解析
link 与 @import 的区别
- 区别1：link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件
- 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
吸顶效果

浏览器兼容

参考资料：中高级前端大厂面试秘籍

HTML

CSS

自适应布局（两栏和三栏）

可继承属性和不可继承属性

伪类和伪元素

三角形的实现

清除浮动

盒模型

BFC和IFC

层叠上下文

不定宽元素垂直水平居中

rem、em

媒体查询

单行文本和多行文本溢出

选择器优先级

link 与 @import 的区别

吸顶效果

浏览器兼容