关于HTML的面试题

前言： 今天整理几道关于HTML的题目，HTML是最基础的三大件之一，虽然可能考察的几率较小，但是一旦遇到，我们还是需要了解的。

1. DOCTYPE 的作用是什么？

DOCTYPE是HTML5标准网页声明，且必须声明在HTML的第一行。用来告知浏览器的解析器用什么文档标准解析这个文档，不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析

文档的解析类型有：

• BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。（如果没有DOCTYPE，默认就是这个模式）
• CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面

（除此之外，在IE8中有一种介于以上两者之间的近乎标准的模式，但是基本被淘汰了）

那这三种模式的区别是什么呢？

• 标准模式：页面按照HTML与CSS的定义渲染
• 怪异模式：会模拟更旧的浏览器的行为
• 近乎标准模式：会实施一种表单元格尺寸的的怪异行为（与IE7之前的单元格布局方式一致），除此之外都符合标准定义。

2. HTML 、XHTML、XML有什么区别？

• HTML（超文本标记语言）：以一种语法较为松散、不严格的web语言
• XML（可扩展的标记语言）：主要用于存储数据和结构，可以扩展，和JSON的作用类似
• XHTML（可扩展的超文本标记语言）：基于XML，作用与HTML类似，是为了解决HTML的混乱问题而生，语法更加严格

3. 谈谈对HTML语义化理解？

语义化是指恰当语义的HTML标签，让页面具有更加良好的结构与含义。
语义化的优点主要有以下两点：

• 对开发者友好，使用语义类标签增强了可读性，开发者也能清晰的看出网页的结构，同时便于团队的开发与维护
• 对于机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录

对于知乎、CSDN这类的富文本类的应用来说，HTML语义化很重要，语义化对于网站的内容传播有很大的帮助。但是对于功能性的网站，就大大折扣了。

4. HTML5与HTML4有什么区别？

• ⽂件类型声明（）仅有⼀型：。
• 新的解析顺序：不再基于SGML。
• 新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。
• input元素的新类型：date, email, url等等。
• 新的属性：ping（⽤于a与area）, charset（⽤于meta）, async（⽤于script）。
• 全域属性：id, tabindex, repeat。
• 新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
• 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike

5. 常用的meta标签有哪些？

meta标签由name和content属性定义，用来描述一个网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

下面我们来看一下常用的几个meta标签：
（1）charset，用来描述HTML文档的编码类型

<meta charset="UTF-8" >

（2） keywords，页面关键词

<meta name="keywords" content="关键词" />

（3）description，页面描述

<meta name="description" content="想要描述的内容" />

（4）refresh，页面重定向和刷新

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，适配移动端，开发人员可以控制视口的大小和比例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中，content 参数有以下几种：

• width viewport ：宽度(数值/device-width)
• height viewport ：高度(数值/device-height)
• initial-scale ：初始缩放比例
• maximum-scale ：最大缩放比例
• minimum-scale ：最小缩放比例
• user-scalable ：是否允许用户缩放(yes/no）

（6）搜索引擎索引方式

<meta name="robots" content="index,follow" />

其中，content 参数有以下几种：

• all：文件将被检索，且页面上的链接可以被查询；
• none：文件将不被检索，且页面上的链接不可以被查询；
• index：文件将被检索；
• follow：页面上的链接可以被查询；
• noindex：文件将不被检索；
• nofollow：页面上的链接不可以被查询。

6. src和href有什么区别？

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