HTML 基础（三）：div、span、iframe等

HTML 可以通过 <div> 和 <span>将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为 块级元素 或 内联元素 。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

<div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在 <div> 前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

（一）使用 DIV 布局 Demo

显示效果：

（二）使用 div 布局 Demo

显示效果：

HTML 表单

• <form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 “post”）。
• <label> 元素用于为表单元素添加标签，提高可访问性。
• <input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
• <select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

常用输入类型的标签

<input> 标签

<input> 标签，其输入类型是由 type 属性定义。

参：https://www.runoob.com/html/html-forms.html

iframe 用法

iframe – 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 “0” 移除iframe的边框:

使用 iFrame 的场景

1. 沙箱隔离。

2. 引用第三方内容。

3. 独立的带有交互的内容，比如幻灯片。

4. 需要保持独立焦点和历史管理的子窗口，如复杂的Web应用。

注：登录弹窗用 iframe 未必合适。HTML标准新增了dialog元素，可能更适合。

为什么不推荐使用 iFrame ？

iframe是全新的一个页面，所有资源消耗都会+1。

性能问题：
使用 <iframe> 会引入额外的页面渲染和加载过程，增加页面的复杂度和加载时间。每个 <iframe> 都需要独立加载和渲染，可能导致页面性能下降，尤其是在包含大量 <iframe> 的情况下。

无法保持网页状态：
<iframe> 是一种嵌套页面的方式，每个 <iframe> 都会创建一个独立的文档上下文。这意味着在主页面和 <iframe> 之间无法直接访问和操作彼此的 DOM 元素，也无法共享状态。这增加了跨页面通信和数据同步的复杂性。

SEO（搜索引擎优化）问题：
搜索引擎通常不会解析和索引 <iframe> 内部的内容，因此如果重要的内容被放在 <iframe> 中，可能会导致搜索引擎无法正确抓取和理解网页的内容。

安全风险：
由于 <iframe> 允许加载外部网页，存在着安全问题。恶意网站可以通过 <iframe> 注入恶意内容、进行点击劫持（clickjacking）等攻击。尤其是在加载不受信任的第三方网页时，需要格外谨慎。

响应式布局问题：
在移动设备上，特别是小屏幕上，<iframe> 的使用可能会导致布局问题和用户体验不佳。因为 <iframe> 的大小通常是固定的，不会自适应屏幕大小。

尽管 <iframe> 有一些特定的使用场景（如嵌入第三方内容），但在一般的前端开发中，应尽量避免过度使用 <iframe>。可以考虑使用其他替代方案，如 AJAX、组件化开发、动态加载内容等，以提高性能、可维护性和用户体验。

参：https://www.zhihu.com/question/23683645/answer/2672342843