HTML5

H5前端面试题

HTML5/CSS3

左中右3个DIV，如何让中间的DIV先显示出来？

浏览器的兼容问题你如何解决。

  • Webkit前缀
  • hack

Position属性的值有哪些？怎样使用？

  • relative 相对定位，相对定位不脱离文档流，参考其在原来文档流中的位置，通过 top,bottom,left,right 定位，并 且可以通过z-index进行层次分级。
  • absolute 绝对定位，绝对定位脱离文档流，依据最近的已经定位（绝对、相对或固定定位）的父元素，通过 top,bottom,left,right 定位。当父级 position 为 static 时，absolute元素将依据body根元素（浏览器窗口）进行定 位，可以通过z-index进行层次分级。
  • fixed 固定定位，固定定位与父元素无关（无论父元素是否定位），直接根据浏览器窗口定位，且不随滚动条拖动 页面而滚动，可通过z-index进行层次分级。

Doctype有什么作用？严格模式与混杂模式有什么区别？

  • 声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
  • 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码
    混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

常用浏览器的内核有哪些？

  • 360浏览器：Chrome内核和IE内核
  • 百度浏览器：IE和Webkit双内核。、
  • QQ浏览器：Chromium内核+IE双内核
  • 猎豹浏览器：Trident和WebKit。
  • 搜狗浏览器：chromium内核

什么是CSS Hack，作用是什么？

  • CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。
  • 属性级Hack：比如IE6能识别下划线“_”和星号“*”，IE7能识别星号“*”，但不能识别下划线”_ ”，而firefox两个都不能认识。

对W3C标准有哪些认识和理解

XHTML和HTML有何不同？

在书写方面:
1.XHTML 元素必须被正确地嵌套。****2.XHTML 元素必须被关闭。标签名必须用小写字母。****3.XHTML 文档必须拥有根元素。**
4.XHTML标签必须成双成对
5.html对标签顺序要求不严格，XHTML标签顺序必须正确总而言之xhtml比html更加规范**

知道哪些浏览器的兼容性问题？如何解决？

不同浏览器的标签默认的外补丁和内补丁不同

*{margin:0;padding:0}

什么是语义化的HTML?

  • 用最恰当的标签来标记内容。

HTML5为什么只需要写就可以了？

  • 声明位于位于HTML文档中的第一行，处于 标签之前。作用：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以怪异模式呈现。

HTML5有哪些新特性？移除了哪些元素？如何处理新标签的浏览器兼容性问题？如何区分HTML和HTML5?

  • 用于媒介回放的 video 和 audio 元素;
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
  • sessionStorage 的数据在浏览器关闭后自动删除;
  • 语意化更好的内容元素，比如 article、footer、header、nav、section;
  • 表单控件，calendar、date、time、email、url、search;
  • 新的技术webworker, websockt, Geolocation;

页面编码和被请求的资源编码如果不一致如何处理？

  • 对于ajax请求传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api。对于post请求不需要进行编码

不用媒体查询和盒子布局，如何实现自适应？

  • 弹性布局：flex; grid 布局；

常见表单元素有哪些？HTML5提供了哪些新的表单元素？

  • Text, radio, submit, textarea, file,

SVG图片和普通图片有何不同？有什么优势？

如何实现垂直居中？

什么是FOUC?如何解决？

  • 如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.原因大致为： 1，使用import方法导入样式表。 2，将样式表放在页面底部 3，有几个样式表，放在html结构的不同位置。其实原理很清楚：当样式表晚于 结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂 的 花屏现象。解决方法：使用LINK标签将样式表放在文档HEAD中更多

什么是DIV高度塌陷？，如何解决？

  • 父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。

  • 使用after伪类

  • 设置overflow为一个非默认值，一般都是使用overflow:hidden来开启BFC

开启BFC以后元素将会具有如下特性：

  • 2.1 父元素的垂直外边距不会与子元素重叠
  • 2.2. 开启BFC的元素不会被浮动元素所覆盖
  • 2.3 开启BFC的元素可以包含浮动子元素

两个a标签之间为何有空白？如何解决？

  • a标签默认是行内元素，而行内元素之间的回车键、多个空格、多个制表符（tab）等均会按一个空格来处理，这样的话，如果相邻的两个a标签不在同一行（换句话说它们之间有回车换行符），则显示在页面的时候它们之间就会出现一个空格的间隙。

如何实现响应式布局？

  • 媒体查询 盒子布局 flex弹性布局 grid 布局

如何让div居中？如何居中一个浮动元素？如何让绝对定位的元素居中？

  • div居中的方式:text-algin:center/margin:0 auto;

  • 浮动元素居中的方式:position:relative

  • 让绝对定位的元素居中: left: 0;

  •             right: 0;

  •             top: 0;

  •             bottom: 0;

  •             margin: auto;

怎样清除浮动？

  • 1.clear:both 2.父级overflow:hidden 3.父级伪元素after：{content:””,clear:both;display:block}

如何实现中间div宽度固定，两端div自适应宽度？说出2种方法

  • 双飞翼（自适应加个父级容器，应用margin），圣杯（不加容器,padding）

Background是否包含border？

CSS3的变形有哪些类型？

  • Rotale,scale,skew,translate

说明CSS3动画(@keyframes,animation)和过渡(transition)的区别？

  • 1）动画不需要事件触发，过渡需要。
  • 2）过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个

CSS定位有哪些类型？说明一下具体的应用场合

  • relative,自身为原点
  • absolute,浏览器窗口原点为原点
  • fixed，不随滚动条拖动 页面而滚动

优雅降级和渐进增强是什么意思？

  • 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

  • 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

  • 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

display样式值有哪些？有啥作用

  • none,block,inline,inline-block

如何在sass中定义一个变量

  • 声明变量的符号“$”

什么是弹性布局？

CSS的优先级如何定义

  • 行内样式>内部样式>外部样式>默认样式>继承样式

描述一下盒子模型

  • W3c和IE两种：都由content,  padding，border, margin构成
  • box-sizing:content-box/border-box

什么是outline属性，有什么作用？

  • outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

Position属性有哪些值？分别用在什么场景？

隐藏一个界面元素的方式你能想到哪些？分别有什么区别

  • display:none
  • 该方式让元素隐藏时，隐藏的元素不占空间，隐藏后将改变html原有样式。一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。
  •     2. visibility:hidden
  •     该方式让元素隐藏时，隐藏的元素还是占用原有位置，隐藏后不将改变html原有样式。但，如果该元素的子元素使用了visibility:visible的话，改子元素将不被隐藏。
  •     3. opacity:0
  •      该方式让元素隐藏时，隐藏的元素还是占用原有位置，隐藏后不将改变html原有样式。但，隐藏的元素所对应的事件，仍然可以触发。display属性不会出现过渡 即使添加了transition,opacity属性适合有过渡的元素使用.

对于web前端适配多端的模式，你有什么解决方案？

  • 适配多端 = 响应式设计页面

A，button和input点击出现蓝色边框，如何去掉？

  • outline: none;

  • 父元素 height：auto，子元素使用了浮动样式，编码使用伪元素清除浮动

  • .clearfix::after{

  •             content: “”;

  •             display: block;

  •             clear: both;

  •         }

父子div中，子div宽度不定，编码实现子元素在父元素中水平居中

  • 弹性布局
  •   display: flex;
  •   align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */

写出适配移动端的meta代码