来看看这些基础知识中都蕴含着什么面试题8！

1.head标签中的内容

知识点前瞻

顾名思义 DOCTYPE 用于告知浏览器用什么文档标准解析这个文档
head标签中的内容（用户看不到的）（之前看过一篇面经问head标签中都有啥的）
- 定义文档字符编码
- 面向搜索引擎的关键字
- 页面描述
- CSS样式

其中meta标签可以做到上述的前三点

定义文档字符编码
面向搜索引擎的关键字
页面描述

可谓是功能强大~

下面请听题

本部分内容参考了文章
Doctype作用？严格模式与混杂模式如何区分？它们有何差异？

Doctype作用？标准模式与兼容模式各有什么区别?

【1】Doctype作用？

<!DOCTYPE>声明叫做文件类型定义（DTD）必须位于HTML文档中的第一行，处于 <html> 标签之前。

答：

作用：【1】告知浏览器该文件的类型并让浏览器的解析器知道用哪个规范来解析这个文档。

【2】<!DOCTYPE html>还可以指定HTML版本为HTML5

【3】另外 DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

那么问题又来了——

【2】严格呈现（标准）模式与兼容模式各有什么区别?

答：

Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页

在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。简单说就是尽可能地将能显示的东西呈现给用户。

2.常用元素（HTML标签）

知识点前瞻

分为内联元素、块元素以及具有二者特点的行内块元素

页面布局时要尤其注意行内元素无法设置宽高，需要转一下块元素才能继续操作display: block;

下面来想想如果面试的时候面试官问你 “列举下行内元素、块级元素？”

【1】行内元素、块级元素有哪些？空（void）元素有哪些？

这种问题嘛就竟可能多答咯！

这里参考了一篇很全面的文章块元素、行内元素、行内块元素

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

答：

常用的行内元素有：

span 是比较常用的一个行内元素其他的行内元素标签都只在特定功能下使用~
a 锚点
b（设置粗体但是不推荐） i 修饰字体用
img input 没错~img 和 input拥有行内块元素的特性但是如果硬问它们是啥就是行内元素！下面会解释下
textarea 多行文本输入框
select 创建一组下拉列表其中的option定义了列表中的可用选项
strong 粗体强调

常用的块级元素有：

div 大家都很熟悉的代表性块状元素
ul ol li 有序、无序列表
dl dt dd 自定义列表——从dl标签开始，自定义列表项由dt标签开始 dd用于给列表项定义
h1 h2 h3 h4… 这个大家也很熟悉标题嘛肯定得独占一行
p 段落标签

这里要注意为了方便程序员们解读代码一般会使用特定的语义化标签来使得代码可读性强且便于查错

最后是很少听到的“空元素”的概念

顾名思义空元素是没有内容的它们都在开始标签直接关闭比如<input />

常见的空元素有：

<br> <hr> <img> <input> <link> <meta>

【2】可以说一下行内元素和块元素分别的特征嘛？行内块元素呢？

这个在开发过程中还是需要注意下的！

首先要明确使用display属性是是可以互相转换三者的

(1)display:inline;转换为行内元素

(2)display:block;转换为块状元素

(3)display:inline-block;转换为行内块状元素

行内元素特征：

设置宽高（可以通过设置line-height来设置）无效 与内容的宽高相同
对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
不会自动进行换行所以默认排列方式为从左到右
行内元素只能容纳文本或者其他行内元素

这里注意一个行内元素间距问题！

行内元素的间距问题：两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？

重设字体：将行内元素的直接父级设置font-size=0px;``再给行内元素设置字体大小就可以解决。

借助HTML注释在两个行内元素之间加入HTML注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。

块元素特征：