web前端：表单与表单元素、块级元素与内联元素、iframe嵌套框架、扩展：mvc模式

表单与表单元素

块级元素与内联元素

iframe嵌套框架

扩展：mvc模式

表单与表单元素

1. label for="id"对应一个表单元素

2. 下拉列表，默认选中<option selected="selected"><option>

3. 文本域，行数and每行字数

4. form action的属性值把当前表单中的数据提交到那个程序去处理 后端功能接口

5. method提交方式：GET、POST

   1. 指代不同

      • GET：向指定资源请求数据

      • POST：向指定资源传递要处理的数据

   2. 规则不同

      • GET:请求被缓存，请求保留在浏览器历史记录当中

      • POST:请求不被缓存，请求不会保留在浏览器历史记录当中，请求数据长度没有要求

   3. 数据要求不同

      • GET:数据缓存在浏览器，有长度限制2048字符，安全性差，发送数据时url一部分

      • POST:发送数据无限制，POST比GET安全，参数不会保存在浏览器历史and web服务器日志中

块级元素与内联元素

1. 块级元素（每个块级元素独占一行）

   • div、p、h1、ul、ol、br

2. 内联元素（多个内联元素占一行，当长度不够时，自动换行）

   • a、span、strong、b、em、i、img、input、select

iframe嵌套框架

1. 介绍：在页面中嵌套（引用）页面

2. 使用场景：大量重复使用的内容。例：引入公共头部 and 公共底部

3. 使用：

   • 使用src引入页面

   • 引入的页面默认自带边框 ，使用frameborder="0"去掉边框

   • 宽度高度自己设定，默认有宽高，不写也可以正常显示但效果很丑

   • scrolling=“no”去除滚动条

   • 不限数量，可以多个引用

4. 代码实现：

   • 准备两个页面。例header.html（公共头部页面）、index.html(首页页面)

   • 在index.html首页页面引入：书写标签<iframe src="header.html" width="100px" height="100px" frameborder="0"></iframe>

扩展：mvc模式

1. 介绍：是后端web程序的编程模式

2. Control控制器、Model模型层（数据）、View视图

3. 运行流程+生活案例辅助理解：

   1. 用户触发C——————小明去淘宝搜索框输入”充电宝“然后点击搜索

   2. 操作后拿到M—————后端拿到用户搜索词条”充电宝“，拿到数据库查找所有关于充电宝的数据

   3. 传递给V———————得到充电宝的数据，前端渲染到页面，呈现给用户