H5模拟面试题

ゞ浴缸里的玫瑰 2022-06-06 07:12 219阅读 0赞

## HTML & HTML5 ##

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

*  `absolute`  
    生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过”left”,”top”,”right”以及”bottom”属性进行规定。
 *  `fixed`  
    生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
 *  `relative`  
    生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20”会向元素的 LEFT 位置添加 20 像素。
 *  `static`
 *  默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
 *  `inherit`  
    规定应该从父元素继承 position 属性的值。

--------------------

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

*  Doctype作用

> `<!DOCTYPE>`声明叫做文件类型定义DTD（Document Type Definition），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。`<!DOCTYPE>`声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

*  严格模式与混杂模式的区别:

>  *  严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
>  *  混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
>  *  如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

*  意义：

> 严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

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

*  Trident内核。又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。
 *  Gecko内核。以C++编写的网页排版引擎。
 *  WebKit内核。它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。
 *  Presto内核。加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

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

> CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

*  作用

> CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题。

![浏览器识别字符标准对应表][ie.png]  
—–浏览器识别字符标准对应表—–

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

> 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性

### 什么是语义化的HTML? ###

> 语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

优点：
        1.语义化有利于SEO(网站推广)，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
        2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
        3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
        4.支持多终端设备的浏览器渲染。

### HTML5为什么只需要写`<!DOCTYPE html>`就可以了？ ###

> doctype是documenttype（文档类型）的简写，在页面中，用来指定页面所使用的xhtml（或者html）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就 是doctype声明。只有确定了一个正确的doctype，xhtml里的标识和css才能正常生效。  
> html 告诉浏览器这个文件是html格式网页文件  
> 两个合起来就是 html5标准网页声明,原先的是一串很长的字符串,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。

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

> HTML5已形成了最终的标准，概括来讲，它主要是关于图像，位置，存储，多任务等功能的增加。

*  新增的元素有绘画 canvas ，
 *  用于媒介回放的 video 和 audio 元素，
 *  本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，
 *  此外，还新增了以下的几大类元素。
    
    > 内容元素，`article`（定义外部的内容。）、`footer`、`header`、`nav`、`section`（内容）。  
    > 表单控件，`calendar`（日历）、`date`（日期）、`time`（时间）、`email`邮箱（）、`url`（链接）、`search`（搜索）。  
    > 控件元素，`webworker`（是运行在后台的JavaScript，不会影响页面的性能）, `websockt`, `Geolocation`。
 *  移出的元素有下列这些：

> 显现层元素：`basefont`，`big`，`center`，`font`, `s`，`strike`，`tt`，`u`。  
> 性能较差元素：`frame`，`frameset`，`noframes`。

### 如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？ ###

*  处理兼容问题有两种方式：

> 1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。  
> 2.使用是html5shim框架另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

## CSS & CSS3 ##

### 1.如何实现垂直居中? ###

> 为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，`table-cell`，负边距等方法。

// HTML结构：
    <div class="box box1">
        <span>垂直居中</span>
    </div>

*  方法1：table-cell

// CSS:
    .box1{
        display: table-cell;
        vertical-align: middle;
        text-align: center;        
    }

*  方法2：display:flex

.box2{ display: flex; justify-content:center; // 主轴 align-items:Center; // 交叉轴 }

*  方法3：绝对定位和负边距

.box3{ position:relative;}
    .box3 span{ position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px; margin-top:-25px; text-align: center; }

*  方法4：绝对定位和0

.box4 span{ width: 50%; height: 50%; background: #000; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

*  方法5：translate

.box6 span{ position: absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); text-align: center; }

*  方法6：display:inline-block

.box7{ text-align:center; font-size:0; }
    .box7 span{ vertical-align:middle; display:inline-block; font-size:16px; }
    .box7:after{ content:''; width:0; height:100%; display:inline-block; vertical-align:middle; }

*  方法7：display:flex和margin:auto

.box8{ display: flex; text-align: center; }
    .box8 span{ margin: auto;}

*  方法8：display:-webkit-box

.box9{ display: -webkit-box; -webkit-box-pack:center; -webkit-box-align:center; -webkit-box-orient: vertical; text-align: center }

*  方法9：display:-webkit-box

<div class="floater"></div>  
    <div class="content"> Content here </div>  
    
    // CSS
    .floater {
        float:left; 
        height:50%; 
        margin-bottom:-120px;
    }
    .content {
        clear:both; 
        height:240px; 
        position:relative;
    }

### 2. 什么是FOUC?如何解决？ ###

> 如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

*  原因大致为：

> 1，使用import方法导入样式表。  
> 2，将样式表放在页面底部  
> 3，有几个样式表，放在html结构的不同位置。

其实原理很清楚：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

*  解决方法：  
    
    
    > 使用LINK标签将样式表放在文档HEAD中;或将css文件放在CDN服务器上。

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

*  如果父元素只包含浮动元素，且父元素未设置高度和宽度，那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”。

> 解决“高度塌陷”问题的方法：

1.浮动父级元素，父级元素的高度就会扩大，直到完全包含它里面的浮动元素。如果使用这种方法，一定要在该元素的下个元素添加`clear:both`,确保浮动元素落到父级元素的下方。

2.使用`overflow:hidden,zoom:1`,`overflow:hidden`属性会强制父级元素扩大到包含浮动元素，`zoom:1`只是触发IE6的`hasLayout`模式，不会对其他浏览器产生影响。

{ 　　overflow:hidden; 　　zoom:1; }

3.使用`:after`伪类清除，不会影响其他任何样式，通用性强。

.clearfix{ 　　zoom:1; } 
    .clearfix:after{ 　　content:''; 　　display:block; 　　height:0; 　　clear:both; 　　overflow:hidden; }

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

*  float法

> 通过使两边的div左右浮动，脱离文档流，再为中间的div设置margin-left,margin-right值为左右div的宽度即可.此处应该注意的是中间div在代码中的位置，应该放在最后。存在问题：在屏幕宽度减少至一定程度后，右边div会错位，另起一行。

/*float法*/
    .float .left { float: left; height: 200px; }
    .float .center { margin: 0 400px; height: 200px; }
    .float .right { float: right; height: 200px; }

*  display:flex法

[ie.png]: http://www.kwstu.com/Content/uploadFiles/images/ie.png