来看看这些基础知识中都蕴含着什么面试题8！
1.head标签中的内容
知识点前瞻
- 顾名思义 DOCTYPE 用于告知浏览器用什么文档标准解析这个文档
- head标签中的内容 （用户看不到的） （之前看过一篇面经问head标签中都有啥的）
- 定义文档字符编码
- 面向搜索引擎的关键字
- 页面描述
- CSS样式
其中meta标签可以做到上述的前三点
- 定义文档字符编码
- 面向搜索引擎的关键字
- 页面描述
可谓是功能强大~
下面 请听题
本部分内容参考了文章
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注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。
块元素特征：
-
设置宽高有效 默认宽度为其父级元素的 100%
-
margin和padding的上下左右均对其有效
-
可以自动换行 所以默认排列方式为从上至下
-
可以容纳其他内联元素或者其他块元素
行内块元素特征：
集合了以上两种元素的特征 下面会给出原因
- 设置宽高有效
- 不会自动进行换行 所以默认排列方式为从左到右
同样的 在H5中 程序员可以自定义语义化的标签
这些标签你想让它是什么元素就可以用display去设置
行内元素、块元素、行内块元素？都OK 想要什么特征 就怎么设置！
【3】那么img input这样所谓的“行内块元素”是行元素还是块元素啊？
参考了文章 img标签到底是行内元素还是块级元素
开门见山 img input标签都属于行内元素
面试官可能又会追问了 （我也想追问）“欸不对啊那凭啥这俩标签可以设置宽和高？”
呀 是哈 为啥呢？
来看看这篇 MDN文档中给出的权威内容 可替换元素
元素分为 不可替换元素 & 可替换元素
- 不可替换元素
(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端(例如浏览器)
如：<h1>我是标题</h1>
- 可替换元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容。同样的，设置元素的宽高啥的也不成问题~
浏览器会根据 <img> 标签的src属性的值来读取图片信息并显示出来
也会根据根据 <input> 标签的type属性来决定是显示输入框，还是单选按钮等
可见 img input都是行内可替换元素
总之 <img>、<input>属于行内替换元素。
可以设置宽高，height/width/padding/margin均可用。效果等于块元素
