持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情。

行级、块级元素

块级容器 : 默认横向独占一行,左右不能有其他容器出现；宽高有效。
行级容器 : 默认横向排列；宽高无效，它的大小是受它内容的影响每个HTML容器，它的位置，至少受两个因素的影响。

自身的宽、高 - 相邻容器的宽、高
块级、行级容器的转换： display属性：
block 行级转换为块级显示 line 块级转换为行级显示
inline-block 以行级容器的规则，来显示块级容器

块级元素：div、p、ul、ol、li、h1~h6、from、table、dt、dd
行内元素：span、a、label、textarea、input、em、i、b、u、img、lable(表格标签)

页面结构

MVC结构： M，数据模型：model。 V，视图：view。目前阶段 C，控制： Ctrl 早期从Java来的，为了"表现和结构相分离"，被前端开发拿来使用。
在前端里：表现： CSS，外观 V 结构： HTML，网页是什么结构 M 在这个语境里，Ctrl就是 JavaScript C
网页的结构是这样的：

html CSS目录 rest.css
重置HTML base.css
大的HTML结构样式，不一定有 page.css
具体的页面CSS common.css
公共的CSS widget.css
页面的小部件CSS …更多 image目录 (也按上面的分目录)

交互事件的触发，不能由CSS来控制。因为CSS是 V 层， view视图层。它不是Ctrl控制层

iframe 标签

HTML 内联框架元素，标签定义了在框架中一个特定的窗口 (框架)。它能够将另一个 HTML 页面嵌入到当前页面中。

每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history)和DOM 树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。

<!-- height 规定 iframe  的高度 -->
    <iframe src="https://juejin.cn/" width="400" height="200" name="iframe1">
    </iframe>
    <!-- name 属性规定 iframe 的名称。name 元素的 name 属性用于在 JavaScript 中引用元素，或者作为 <a> 或 <form> 元素的 target 属性的值，或者作为 <input> 或 <button> 的 formtarget 属性的值。 -->
    <a href="http://www.taobao.com" target="iframe1">TaoBao</a>
    <!-- target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 -->

    <iframe src="./1-form.html" frameborder="0" sandbox></iframe>

    <!-- loading属性可以触发<iframe>网页的懒加载 -->
    <!-- auto：浏览器的默认行为，与不使用loading属性效果相同。
    lazy：<iframe>的懒加载，即将滚动进入视口时开始加载。
    eager：立即加载资源，无论在页面上的位置如何。 -->

sandbox

该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件 "" 空字符串会启用所有的限制 allow-top-navigation 嵌入的页面的上下文可以导航(加载)内容到顶级的浏览器上下文环境(browsing context)。如果未使用该关键字，这个操作将不可用 allow-forms 允许表单提交 allow-same-origin：不打开该项限制，将使得所有加载的网页都视为跨域。 allow-scripts：允许嵌入的网页运行脚本（但不创建弹出窗口）

form 表单

action 规定向何处提交表单的地址（URL）（提交页面）。

method 规定在提交表单时所用的 HTTP 方法（(get 或 post) 默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
target 规定 action 属性中地址的目标（默认：_self）。 -->

HTML学习笔记

行级、块级元素

页面结构

iframe 标签

sandbox

form 表单