时间戳

首页 > 技术文章 > 前端面试题集 -- HTML常见题目

前端面试题集 -- HTML常见题目

hefeifei 2019-10-14 14:53 原文

--HTML常见题目

参考链接：https://www.cnblogs.com/king18181753985/p/6510756.html

01、doctype 的作用？严格模式与混杂模式如何区分？它们有何意义？

DOCTYPE是document type (文档类型) 的缩写。 < !DOCTYPE > 声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。比如：loose.dtd

  • 严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面
  • 混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。

02、HTML5 为什么只需写< !DOCTYPE HTML> ?

HTML5不基于 SGML （标准通用标记语言），因此不需要对DTD（ DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。）进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

03、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

  • 行内：

<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<q>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<tt>、<var>

  • 块级：

<address>、<caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>

  • 空：

常见的：<br> <hr> <img> <input> <link> <meta>

鲜为人知的：<area> <base> <col> <command> <embed> <link> <meta><keygen> <param> <source> <track> <wbr>

04、页面导入样式时，使用link和@import有什么区别？

  • link属于XHTML标签，import是CSS提供的方式。link方式除了CSS，还可以定义RSS，定义rel连接属性等，而import只能加载CSS
  • link是页面加载时同时执行的，而import是在页面加载完之后，才会执行的
  • link支持使用Javascript控制DOM去改变样式；而@import不支持
  • link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本(IE5及以下)的浏览器不支持

05、介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。

渲染引擎：用于获取html、css和图片,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

JS引擎：解析和执行 javascript 来实现网页的动态效果。

06、常见的浏览器内核有哪些？

  • Trident：IE、360
  • Gecko：Firefox
  • Webkit：Safari、Chrome内核原型
  • Chromium/Blink：Chrome
  • Blink：opera

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

HTML5 现在已经不是SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

新特性：

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

移除的元素：

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

兼容问题：

  • IE6/IE7/IE8 支持通过 document.createElment 方法产生的标签，利用这一特性让这些浏览器支持 HTML5 新标签。浏览器支持新标签后，还需要添加标签默认的样式。
  • 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
 
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
 
<![endif]-->

08、如何区分 HTML 和 HTML5？

    1. 在文档类型声明上不同： HTML 是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。

    1. 在结构语义上不同：

      HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。

      HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>

09、简述一下你对HTML语义化的理解？

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

10、HTML5的离线储存怎么使用，工作原理能不能解释一下？

  • 使用：

    1.页面头部像下面一样加入一个manifest的属性

    <html manifest = "cache.manifest">

    2.在cache.manifest文件的编写离线存储的资源

    CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

  • 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现Html头部有manifest属性，它会请求manifest文件。

如果是第一次访问APP，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。

如果已经访问过APP并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

12、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

  • 存储大小

      cookie数据大小不能超过4k。
  sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

  • 有效时间

      sessionStorage和localStorage：虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  sessionStorage：数据在当前浏览器窗口关闭后自动删除。
  cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

  • 数据与服务器之间的交互方式

      cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端。
  sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

13、iframe有那些缺点？

  • 会产生很多页面，不容易管理。
  • 代码复杂，无法被一些搜索引擎解读。
  • 小型的移动设备无法完全显示框架，设备兼容性差。
  • 如果框架个数多的话，可能会出现上下、左右滚动条导致用户体验度差。
  • iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

14、Label的作用是什么？是怎么用的？（加 for 或 包裹）

  • label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上
<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/>
或者
<label>Date:<input type="text" name="B" /></label>

15、HTML5的form如何关闭自动完成功能？

给不想要的提示信息标签里设置：autocomplete为"on"或者"off"来开启或者关闭自动完成功能

16、如何实现浏览器内多个标签页之间的通信? (阿里)

方法1：使用localStorage

<!--在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；-->
<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>  


<!--在另一个标签页里面监听 storage 事件。
即可得到 localstorge 存储的值，实现不同标签页之间的通信。-->
<script type="text/javascript">  
    $(function(){   
        window.addEventListener("storage", function(event){    
            console.log(event.key + "=" + event.newValue);    
        });     
    });  
</script>

方法2：调用cookie+setInterval()

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

页面1：

将：
localStorage.setItem("name", name); 
改为：
document.cookie="name="+name;

页面2：

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

原文链接：https://blog.csdn.net/meijory/article/details/76358570

17、webSocket如何兼容低浏览器？(阿里)

  • Adobe Flash Socket
  • ActiveX HTMLFile (IE)
  • 基于 multipart 编码发送 XHR
  • 基于长轮询的 XHR

18、页面可见性（Page Visibility）API 可以有哪些用途？

  • 通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
  • 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

19、如何在页面上实现一个圆形的可点击区域？

  • 1.map+area或者svg
<img src="task6.jpg" width="1366" height="768" border="0" usemap="#Map" />  
<map name="Map" id="Map">  
 <area shape="circle" coords="100,100,50" href="https://www.baidu.com" target="_blank" />  
</map>
  • 2.border-radius
<style>  
 .disc{  
     width:100px;  
     height:100px;  
     background-color:dimgray;  
     border-radius: 50%;  
     cursor: pointer;  
     position: absolute;  
     left:50px;  
     top:50px;    
     line-height: 100px;  
     text-align: center;  
     color: white;  
 }  
</style>
<div class="disc">点击区域</div>
  • 3.纯js实现
<script>
        document.onclick = function(e){
            var r = 50;  //圆的半径
            var x1 = 100,  y1 = 100;  
            var x2 = e.clientX,
                y2 = e.clientY;
            var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));  
            if(len<=50){
                console.log("Inner");
            }else{
                console.log("Outer");
            }
        }
    </script>

参考链接：https://www.cnblogs.com/guorange/p/7155164.html

20、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

<div style="height:1px;overflow:hidden;background:red"></div>

21、网页验证码是干嘛的，是为了解决什么安全问题？

  • 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；
  • 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

22、title与h1的区别、b与strong的区别、i与em的区别？

  • title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响;
  • strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容。
  • i内容展示为斜体，em表示强调的文本；

推荐阅读