html面试题

thewar196

已于 2022-03-18 10:01:02 修改

阅读量5.8k

点赞数 12

分类专栏：前端面试题大全 HTML面试题基础面试题文章标签： html 前端 xhtml

于 2022-01-14 15:31:53 首次发布

本文链接：https://blog.csdn.net/thewar196/article/details/122495612

版权

基础面试题同时被 3 个专栏收录

34 篇文章 2 订阅

订阅专栏

前端面试题大全

12 篇文章 19 订阅

订阅专栏

HTML面试题

1 篇文章 1 订阅

订阅专栏

HTML面试题

0:DOCTYPE的作用

Doctype声明位于文档中的最前面，处于标签之前。目的是告知浏览器的解析器，用什么文档类型规范来解析这个文档。Doctype声明也是用于区分html和html5的方法之一。

HTML声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　<html xmlns="http://www.w3.org/1999/xhtml">

HTML5声明：

<!Doctype html>

Doctype声明还能区分严格模式与混杂模式，详情可查看此链接：https://www.cnblogs.com/wuqiutong/p/5986191.html

其中DTD的全称是：Document Type Definition，即文档类型定义。

1：HTML 语义化的理解

html语义化的含义：根据内容的结构化，选择合适的标签便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
(基本上都是围绕着几个主要的标签，像标签H1~H6，li、强调(strong、em)等等)。
语义化的原因：在我的理解当中是：
①为了在没有CSS情况下，页面也能呈现出很好的内容结构、代码结构。(为了裸奔时候好看)。
②用户体验：例如title、alt用于解释名词或者解释图片信息、label标签dd的活用。
③有利于SEO（网络引擎搜索优化）：和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息(爬虫依赖于标签来确定上下文和各个关键字的权重)。
④方便其它设备解析(如屏幕阅读器，盲人阅读器，移动设备)以意义的方式来渲染网页。
⑤便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

2：行内元素、块级元素、行内块元素都有哪些及区别？

1）行内元素   不独占一行 不可以设置宽高

```html
<span>、<a>、<b>、<strong>、<em>、<del>
```

2）块级元素   独占一行 可以设置宽高

```html
<address>、<center>、<h1>~<h6>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>
```

3）行内块级元素  不独占一行 可以设置宽高

```html
<img>  <input>  <button></button>  <canvas></canvas>  <select></select>  <option></option> <textarea></textarea>
```

3：xhtml和html有什么区别

HTML与XHTML之间的差别，主要分为功能上的差别和书写习惯的差别两方面。

关于功能上的差别，主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。

由于XHTML的语法较为严谨，所以如果你是习惯松散结构的HTML编写者，那需要注意XHTML的规则。

下面列出了几条容易犯的错误，供理解。

1）所有标签都必须小写

在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。

2）标签必须成双成对

像是<p>...</p>、<a>...</a>、<div>...</div>标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样

3）标签顺序必须正确

标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。

4）所有属性都必须使用双引号

在XHTML 1.0中规定连单引号也不能使用，所以全程都得用双引号。

5）不允许使用target="_blank"

从XHTML 1.1开始全面禁止target属性，如果想要有开新窗口的功能，就必须改写为rel="external"，并搭配JavaScript实现此效果。

4：a标签中 active hover link visited 正确的设置顺序是什么?

按照 lvha 顺序排列 a:link a:visited a:hover a:active

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，
因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，
这段时间的长短跟网速，电脑速度都有关系。 解决方法：只要在<head>之间加入一个<link>或者<script>元素就可以了。

5：如何处理HTML5新标签的浏览器兼容性问题

方法一 :

1、使用静态资源的html5shiv包

<!--[if lt IE9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
2、载入后，初始化新标签的css

header, section, footer, aside, nav, main, article, figure { display: block; }

方法二：

IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签

6：HTML5的离线储存怎么使用，工作原理能不能解析一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

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

更新缓存：一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存
如何使用： 
1、页面头部像下面一样加入一个manifest的属性； 
2、在cache.manifest文件的编写离线存储的资源； 
3、在离线状态时，操作window.applicationCache进行需求实现。

7：标签上的 title属性与 alt属性的区别

1、含义不同
alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明
2、在浏览器中的表现不同
在firefox（火狐浏览器）和ie8中，当鼠标经过图片时title值会显示，而alt的值不会显示;只有在ie6中，
当鼠标经过图片时title和alt的值都会显示。
3、对于网站seo优化来说，title与alt还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，
也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。

8：input和textarea的区别

<input>是单行文本框，不会换行。通过size属性指定显示字符长度，注意：当使用css限定了宽高，
那么size属性就不再起作用了。有自己的value值，Maxlength属性指定文本框可以输入的最长长度。
可以通过width和height设置宽高，但是也不会增加行数。
<input type="text" value="你好" Maxlength="10">复制代码
<textarea>是多行文本输入框，文本区中可容纳无限数量的文本，无value属性，其中的文本默认字体
是等宽字体(通常是Courier)，可通过cols和rows属性来规定textarea的尺寸，不过更好的办法是
使用CSS的height和width属性。
<textarea cols="20" rows="30"></textarea>

9：用一个div模拟textarea的实现

<div id="textarea" contenteditable="true">
#textarea{
	width:300px;
	border:1px solid #ccc;
	min-height:150px;
	max-height:300px;
	overflow:auto;
	font-size:14px;
	outline:none;
}

contenteditable属性，值为Boolean值，true绑定元素可编辑，false(默认)元素不可编辑。

10：html5有哪些新特性？

语义化标签:
布局：
	头部：<header></header>
	尾部：<footer></footer>
	独立结构：<article></article>
	主要内容：<main></main>
	导航：<nav></nav>
	侧边栏：<aside></aside>
	节、段、分组：<section></section>
表单新增语义化标签：
	新增input属性
	input类型	number email ... 描述
	autofocus	页面加载时自动获取焦点
	required	规定输入域不能为空
	placeholder	提供一种提示（hint），输入域为空时显示，获得焦点时消失
	pattern	规定验证input域的模式（正则表达式）
	height、width	仅适用于image类型的input标签的图像高度和宽度
- (1)`Canvas绘图`
- (2)`SVG绘图`   矢量图
- (3)`audio  video`   音频  视频
- (4)`地理定位`   Geolocation（地理定位）
- (5)`Web Worker`
- `web worker` 是运行在后台的 JS，独立于其他脚本，不会影响页面的性能。
- (6)`Web Storage`
- 1.Cookie技术 （ 兼容性好,数据不能超4kb,操作复杂）
- 2.（兼容性差,数据8MB,操作简单）sessionStorage
- 3.localStorage
	localStorage.setItem("name",arr);//保存数据
	localStorage.getItem("name")//读取数据，也可以根据key值读取
	localStorage.removeItem(key)//删除单个数据
	localStorage.clear()//数据清空 
	
- (7)`Web Socket`
- WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

11：说说对canvas，svg，webgl的理解

1. Canvas 是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，
	可以不再依赖其他的API或组件而直接绘图，相当于2D的API。Canvas 适用于位图，高数据量高绘制
	频率（帧率）的场景，如动画、游戏；

2. SVG 是给数据就可以绘制点、线、图形的，基于 XML 的标记语言；SVG 适用于矢量图，低数据量
	低绘制频率的场景，如图形、图表；

3. WebGL（全写Web Graphics Library）是一种3D绘图标准，通俗说WebGL是canvas绘图中的3D版本。
	因为原生的WebGL很复杂，我们经常会使用一些三方的库，如three.js等，WebGL 主要用来做 3D 展示、
	动画、游戏

12：移动设备忽略将页面中的数字识别为电话号码的方法

标准的电话号码格式是这样子的：<a href="tel:1-408-555-555">1-408-555-555</a>，但是有时候不是电话号
码的数字也会被浏览器自动解析为电话号码，并把数字的颜色和样式都改了，如果忽略页面中的数字识别为
电话号码，只要把这个默认行为关闭即可，只要一行代码
<meta name="format-detection" content="telephone=no">复制代码
这个关闭不会影响真正电话号码的识别。

补充：format-detection属性和含义
format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于
meta的format-detection属性主要是有以下几个设置：
<meta name="format-detection" content="telephone=no">//禁止了把数字转化为拨号链接
<meta name="format-detection" content="email=no">//告诉设备不识别邮箱，点击之后不自动发送
<meta name="format-detection" content="adress=no">//禁止跳转至地图！
<meta name="format-detection" content="telephone=no,email=no,adress=no">//以上三者组合

13：什么是SPA？

单页面Web应用（single page web application,SPA）：SPA是一种特殊的web应用，是加载单个HTML页面
并在用户与应用程序交互时动态更新该页面。它将所有活动局限于一个web页面中，仅在该web页面初始化时
加载相应的HTML、JavaScript、css。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或
者跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互。
在SPA应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region(区域)中
的视图切换来展示内容。

**优点：**用户体验好 、良好的前后端分离。

14：常见的浏览器内核有哪些？

Trident内核：IE,360，傲游，搜狗，世界之窗，腾讯等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

15：介绍一下你对浏览器内核的理解？

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

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页
的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染
的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内
核。

JS引擎则：解析和执行javascript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，
后来JS引擎越来越独立，内核就倾向于只指渲染引擎。