HTML面试

Phoebe_TANG

已于 2022-03-03 12:27:46 修改

阅读量577

点赞数 1

分类专栏：前端文章标签： html 前端

于 2022-03-03 12:21:30 首次发布

本文链接：https://blog.csdn.net/weixin_45725601/article/details/123245263

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Doctype作用是什么？严格模式与混杂模式分别是如何触发这两种模式的，区分它们有何意义？

.HTML、XML、XHTML的定义和区别？

前端页面有哪三层构成，分别是什么？作用是什么？

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

页面重构怎么操作？网站为什么要进行重构？页面重构过程中需要哪些常见的前端优化方法？

SEO是什么意思？

四、HTML5：

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

HTML5哪些标签可以做SEO优化？

HTML5的离线存储？

一、

语义化的理解？

用正确的标签做正确的事情；
HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

二、

Doctype作用是什么？严格模式与混杂模式分别是如何触发这两种模式的，区分它们有何意义？

（1） <!DOCTYPE>告知浏览器解析器，用什么文档类型规范来解析这个文档。声明位于文档中的最前面。

（2）CSSACompat 严格模式的排版是以该浏览器支持的最高标准运行。（JavaScript运作模式也是以该浏览器支持的最高标准运行）。

（3）BackCompat 混杂模式中页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）<!DOCTYPE> 不存在或者格式不正确会导致文档以混杂模式呈现。

meta标签

提供给页面的一些元信息（名称/值对），有助于SEO。

属性值：

name：名称/值对中的名称。author、description、keywords、generator、revised、others。把 content 属性关联到一个名称。
http-equiv：没有name时，会采用这个属性的值。content-type、expires、refresh、set-cookie。把content属性关联到http头部
content ：名称/值对中的值，可以是任何有效的字符串。始终要和 name 属性或 http-equiv 属性一起使用
scheme ：用于指定要用来翻译属性值的方案

iframe有哪些缺点？优点？

iframe标签是一个内联框架，说白了就是用来在当前 HTML 页面中嵌入另一个文档的。

且所有主流浏览器都支持iframe标签。

基本语法：<iframe src="文件路径"></iframe>

例如：<iframe src="iframe-content.html" width="400px" height="150px" frameborder="0"

scrolling="no"></iframe>

当页面中有大部分内容相同时，比如页面的头部和底部，我们就可以使用<iframe>标签将重复的部分嵌入页面中，这样可以减少代码的重复率，减轻代码量，但不足之处是页面url地址没有改变。

（1）缺点：

iframe阻塞页面加载，影响网页加载速度，iframe加载完毕后才会触发window.onload事件，阻塞主页面的onload加载。（通过JavaScript动态设置iframe的src属性可解决这个问题。）
加载了新页面，增加了css与js文件的请求，即额外增加了HTTP请求，增加了服务器负担。
有时iframe由于页面挤占空间的原因出现滚动条，造成布局混乱。
不利于SEO，搜索引擎的爬虫无法解读iframe的页面。
有些小型的移动设备如手机等无法完全显示框架，兼容性较差。
iframe与主页面是共享链接池的，但浏览器对相同域的连接有限制，如果iframe加载时用光了链接池，则会造成主页面加载阻塞

（2）优点：

可以跨域请求其他网站，并将网站完整展示出来
典型系统结构可以提高代码的复用性
创建一个全新的独立的宿主环境，可以隔离或者访问原生接口及对象
模块分离，若多个页面引用同一个iframe，则便于修改操作
实现广告展示的一个解决方案
若需要刷新iframe则只需要刷新框架内，不需要刷新整个页面

src和href的区别

src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
href是指网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

defer和async的区别

defer要等到整个页面在内存中正常渲染结束（DOM结构完全生成，以及其他脚本执行完成），才会执行。多个defer脚本会按照它们在页面出现的顺序加载。==“渲染完再执行”==
async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。多个async脚本是不能保证加载顺序的。==“下载完就执行”==

如何实现浏览器内多个标签页之间的通信？

方法一：调用localstorge

标签页1：

<input id="name">  
<input type="button" id="btn" value="提交">

<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
           var name=$("#name").val();    
            localStorage.setItem("name", name); //存储需要的信息 
        });     
   });    
</script>

标签页2：

$(function(){   
    window.addEventListener("storage", function(event){    
	   console.log(event.key + "=" + event.newValue);    
    });     //使用storage事件监听添加、修改、删除的动作  
});

方法二：使用cookie+setInterval

将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

标签页1：

$(function(){    
    $("#btn").click(function(){    
        var name=$("#name").val();    
        document.cookie="name="+name;    
    });    
});

标签页2：

 $(function(){   
	function getCookie(key) {    
	   return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
	}     
	setInterval(function(){    
	   console.log("name=" + getCookie("name"));    
	}, 10000);    
});

三、

.HTML、XML、XHTML的定义和区别？

前端页面有哪三层构成，分别是什么？作用是什么？

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

网页的结构层（structural layer）由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentation layer）由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>

页面重构怎么操作？网站为什么要进行重构？页面重构过程中需要哪些常见的前端优化方法？

（1）页面重构的过程：

经常有人问网站重构的流程是先写 DIV 还是先写 CSS ，对于这个问题本人的理解如下：先结构，后表现，再行为。通俗点就是先 HTML 构架，再 CSS 渲染，最后写入 Javascript

页面重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

（2）网站重构的好处：

使页面加载得更快速；
降低带宽带来的费用，节约成本；
让你在修改设计时更有效率而代价更低；
帮助你的整个站点保持视觉的一致性；
更利于搜索引擎的检索（符合SEO的规范）；
令站点更容易被各种浏览器和用户

（3）常用优化方法：

1. 对于传统的网站来说重构通常是

表格(table)布局改为DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
对于移动平台的优化
针对于SEO进行优化

2. 深层次的网站重构应该考虑的方面

减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如VB)
增强用户体验

3. 通常来说对于速度的优化也包含在重构中

压缩JS、CSS、image等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用CDN来加速资源加载
对于JS DOM的优化
HTTP服务器的文件缓存

SEO是什么意思？

搜索引擎优化。是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。

所谓“针对搜索引擎作最佳化的处理”，是指为了要让网站更容易被搜索引擎接受。

SEO是什么意思？

四、HTML5：

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

（1）HTML5现在已经不是SGML的子集，主要是关于图像、位置、存储、地理定位等功能的增加。新特性有：

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

（2）移除的元素包括：

纯表现的元素 basefont、big、center、font、 s、strike、tt、u；
对可用性产生负面影响的元素 frame、frameset、noframes。

（3）浏览器兼容问题解决方案：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式，当然最好的方式是直接使用成熟的框架：

   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]-->

（4）HTML5新增API

HTML5哪些标签可以做SEO优化？

title、meta、header、footer、nav、article、aside

HTML5的离线存储？

localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。

Phoebe_TANG

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML面试

HTML
复制链接

扫一扫

专栏目录