开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
什么是页面文档
你可以简单地理解为你打开的网页，整个网页就是一个页面文档。
元素
定义
元素是文档文件的组成内容，是文档的根基，每个元素都对文档的表现起一定作用。
类型
按内容特点分,分为置换元素与非置换元素 按元素显示方式,分为块级元素、行内元素与其他显示类型【块级和行内是最常见的】
置换元素与非置换元素
置换元素
定义
也被称为可替换元素
官方MDN上描述为
在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
通俗的来说就是元素的具体内容是获取其他地方的内容，不是由本元素直接描述。且这个内容我们是无法使用当前文档的css样式表去指定样式的。
举例说明
常见的置换元素就是img【图片】，该元素展现内容的方法是：指定img标签的src属性为一个要展示图片的url。
该元素就满足以下两个条件，所以被认为是一个置换元素：
- 内容不受本文档的css指定【你无法用当前文档的css直接改变当前img的图片中的某个像素点】
- 内容是外部的【img所展现的图片不是咱们现写代码规定的，是指定已有图片的url的】
置换元素举例
典型的可替换元素有：
<iframe><video><embed><img>- type类型为image的
<input> - 用 CSS 的
content属性插入的对象是匿名的可替换元素。因为它们并不存在于 HTML 标记中，所以是“匿名的”
有些元素仅在特定情况下被作为可替换元素处理，例如：
<option><audio><canvas><object><applet>
非置换元素
定义
除了置换元素之外，剩下的元素都是非置换元素。所以HTML标签中大部分的元素都是非置换元素。
非置换元素举例
- type属性不为image的
<input> <div>
块级元素与行内元素
块级元素
定义
css样式表中的display属性值为block
元素效果
该种元素会默认生成一个填满父级元素内容区域的宽度的盒子。这种元素在显示时，元素框的前后都会自动地进行换行。
无序列表和有序列表可以算是比较特殊的块级元素了，因为他会在元素前有一个标记。
行内元素
定义
css样式表中的display属性值为inline
元素效果
行内元素在一行文本内生成元素盒子，前后不会自动换行。
行内元素与块级元素的书写位置
HTML并不允许默认显示格式为行内的元素嵌套在默认显示格式为块级的元素中，但是允许块级元素中嵌套行内元素。
但是对于css来说行内元素可以被嵌套写在块级元素中，但是块级元素不应该放在行内元素中。【通过将display设置为block或是inline可以做到】
