前端—每天5道面试题（十一）

阳光穿透心脏的1/2处 2023-01-23 14:57 86阅读 0赞

## 前端—每天5道面试题（十一） ##

> ### 每天进步1% 不多 就1% ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]

# 一、简述对 Web 语义化的理解？ #

就是让浏览器更好的读懂你写的代码，在进行 HTML 结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简介明了，易于进行 Web 操作和网站 SEO，方便团队协作的一种标准，以图实现一种“无障碍”的 Web 开发。

# 二、合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么？ #

结构是 html，表现是 css

# 三、你能描述一下渐进增强和优雅降级之间的不同吗？ #

*  渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
 *  优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
 *  区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带，举个例子：

a{ 
    display： block；
    width： 200px；
    height： 100px；
    background：aquamarine；
    /*我就是要用这个新 css 属性*/
    transition： all 1s ease 0s；
    /*可是发现了一些低版本浏览器不支持怎么吧*/
    /*往下兼容*/
    -webkit-transition：all 1s ease 0s；
    -moz-transition：all 1s ease 0s；
    -o-transition： all 1s ease 0s；
    /*那么通常这样考虑的和这样的侧重点出发的 css 就是优雅降级*/
    }
    a：hover{ 
    height： 200px；
    }
    / *那如果我们的产品要求我们要重低版本的浏览器兼容开始*/ a{ 
    /*优先考虑低版本的*/
    -webkit-transition：all 1s ease 0s；
    -moz-transition：all 1s ease 0s；
    -o-transition： all 1s ease 0s；
    /*高版本的就肯定是渐进渐强*/
    transition： all 1s ease 0s；
    }

*  “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。
 *  “渐进增强”观点则认为应关注于内容本身。

# 四、display： none；与 visibility： hidden 的区别是什么？ #

*  display：none； 使用该属性后，HTML 元素（对象）的宽度、高度等各种属性值都将 “丢失”；
 *  visibility：hidden； 使用该属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

# 五、Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? #

**DOCTYPE 是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义来解析文档。只有确定了一个正确的文档类型，超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效，甚至对 javascript 脚本都会有所影响。**

*  标准模式是指浏览器按 W3C 标准解析执行代码
 *  怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
 *  浏览器解析时到底使用标准模式还是怪异模式，与你网页中的 DTD 声明直接相关，DTD 声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略 DTD 声明,将使网页进入怪异模式(quirks mode)
 *  区分它们的意义：doctype 声明指出阅读程序应该用什么规则集来解释文档中的标记

## 如何触发两种模式？ ##

DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现  
**触发严格模式**

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

**触发混杂模式**

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]: /images/20221004/d20cd83833654bc0b57531500e8d43e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]: /images/20221004/ef026b2d39cd4baa84fcae4255712eb0.png