JavaWeb从0到1-DAY1.3-HTML-CSS快速入门(iv)

JavaWeb 盒子模型之后学习笔记一、这一部分在讲什么这一部分开始内容从“基础标签认识”逐渐进入“页面布局和数据交互”。先学了 CSS 盒子模型理解网页中的元素为什么都能看成一个盒子然后学习了 Flex 布局知道父元素如何控制子元素排列。后面继续进入 HTML 表单和表格分别解决“采集数据”和“展示数据”这两个常见需求。也就是说这一部分已经从“会写标签”进阶到“会排版、会收集数据、会展示数据”。二、核心概念1. 盒子模型它是什么网页中的每一个元素都可以看成一个矩形盒子。有什么作用方便理解页面布局、元素之间的距离、边框和留白。它的原理浏览器在渲染元素时不只是看内容本身还会同时处理内容区、内边距、边框、外边距。初学者容易混淆的点看到页面上的字和图片时容易只关注内容本身忽略它其实外面还包着一层层“盒子结构”。2.content它是什么盒子最里面真正放内容的区域。有什么作用显示文字、图片、视频等实际内容。它的原理这是浏览器真正渲染内容的核心区域。初学者容易混淆的点不要把内容区和内边距区混在一起内容区是内容真正存在的位置。3.padding它是什么内边距也就是内容和边框之间的距离。有什么作用让内容不要紧贴边框看起来更舒服。它的原理在内容区外面增加一圈内部留白。初学者容易混淆的点padding是盒子内部的空白不是盒子和其他元素之间的距离。4.border它是什么边框区域。有什么作用给元素画出边界方便区分区域。它的原理浏览器会根据边框宽度、样式、颜色把盒子边界画出来。初学者容易混淆的点边框不是内容也不是外边距它是盒子本身的一部分。5.margin它是什么外边距也就是盒子和外部其他元素之间的距离。有什么作用控制元素和元素之间的间隔。它的原理在盒子外面再留出一圈空白区域。初学者容易混淆的点margin不属于盒子内部和padding正好相反。6.div和span它是什么两个很常见的布局标签。有什么作用div适合包一整块内容span适合包一小段文字。它的原理div通常按块级方式显示span通常按行内方式显示。初学者容易混淆的点div不是“专门显示某种内容”的标签它主要是一个大容器span也不是换行标签它只是一个小范围包裹文字的标签。7. Flex 布局它是什么一种弹性布局也是一种一维布局模型。有什么作用控制子元素怎么横着排、竖着排、居中排、平均分布。它的原理给父元素设置display: flex;后父元素就会按 flex 规则去管理子元素排列。初学者容易混淆的点Flex 相关属性大多加在父元素上不是先加在子元素上。8.flex-direction它是什么控制主轴方向的属性。有什么作用决定子元素是横向排还是纵向排。它的原理浏览器先根据主轴方向确定元素的排布基础方向。初学者容易混淆的点row是横向column是纵向不要记反。9.justify-content它是什么控制子元素在主轴上对齐方式的属性。有什么作用决定子元素是靠左、靠右、居中还是平均分开。它的原理浏览器会把主轴上的剩余空间按规则分配给子元素。初学者容易混淆的点它控制的是主轴方向不是随便哪个方向。10. 表单form它是什么网页中专门负责采集数据的标签。有什么作用把用户输入的信息统一收集并提交出去。它的原理表单内部的表单项在提交时会按照action和method规则被发送给服务器。初学者容易混淆的点表单不是单纯为了做几个输入框它最核心的目的是“采集并提交数据”。11.action和method它是什么表单最重要的两个属性。有什么作用action决定提交到哪里method决定怎么提交。它的原理浏览器提交表单时先看地址再看提交方式。初学者容易混淆的点action不是字段名method也不是输入类型。12. GET 和 POST它是什么表单最常见的两种提交方式。有什么作用决定表单数据如何发送给服务器。它的原理GET 一般把参数拼在 URL 后面POST 一般把数据放在请求体里。初学者容易混淆的点GET 不是“不能提交数据”而是不适合隐私数据和较大数据量提交。13.name属性它是什么表单项的名字。有什么作用告诉服务器当前输入的数据属于哪个字段。它的原理表单提交时数据通常按“name值”的形式发送。初学者容易混淆的点不写name用户虽然能输入但服务器很可能收不到这项数据。14. 表单项标签它是什么真正用来输入和选择数据的控件。有什么作用根据不同场景收集不同类型的数据。它的原理浏览器根据不同标签和不同type提供不同的输入方式。初学者容易混淆的点不是所有输入场景都只靠input typetext完成很多情况要用专门标签。15.input它是什么最常见的表单项标签。有什么作用通过type属性变成不同的输入控件。它的原理浏览器根据type渲染成文本框、密码框、单选框、按钮等。初学者容易混淆的点input最关键的是type同样的标签换一个type功能就完全不同。16.select和option它是什么下拉列表和列表项标签。有什么作用让用户从给定选项中进行选择。它的原理select是外层列表option是里面的每一项。初学者容易混淆的点option不能单独乱放它要写在select里面。17.textarea它是什么文本域标签。有什么作用输入多行文本。它的原理浏览器会渲染出一个支持多行输入的区域。初学者容易混淆的点它和input typetext不一样前者是多行后者是单行。18. 表格table它是什么展示结构化数据的标签。有什么作用把一条条数据按行和列展示出来。它的原理浏览器按表格结构把内容渲染成行列网格。初学者容易混淆的点表格适合展示数据不适合拿来代替整页布局。19.thead、tbody、tr、td、th它是什么表格中不同层级和不同作用的标签。有什么作用区分表头、表体、行、普通单元格、表头单元格。它的原理浏览器根据标签层级知道哪里是表格区域哪里是一行哪里是一个格子。初学者容易混淆的点tr是一行td和th是一格不要把“行”和“格子”弄混。三、重难点1. 盒子模型一定要按“从里到外”记结论盒子模型顺序是content → padding → border → margin。原因浏览器渲染盒子就是按这个层次理解的。通俗比喻或小例子像手机包装盒从里往外分别是手机、缓冲层、盒子外壳、盒子和其他物品之间的间隔。2.padding和margin最容易混结论padding是盒子内部留白margin是盒子外部留白。原因它们都表示“距离”但位置完全不同。通俗比喻或小例子字和相框之间的距离像padding相框和相框之间的距离像margin。3.div和span的区别要先建立直觉结论div更适合包大块内容span更适合包一小段文字。原因它们默认显示方式不同一个偏块级一个偏行内。通俗比喻或小例子div像一个收纳箱span像贴在物品上的小标签。4. Flex 先记住“父控子”结论Flex 最重要的是给父元素加display: flex;由父元素控制子元素排列。原因Flex 的核心思想就是容器管理项目。通俗比喻或小例子像老师安排学生站队老师是父元素学生是子元素。5.row和column不要背反结论row横着排column竖着排。原因它们决定主轴方向方向一错布局就全反了。通俗比喻或小例子row像一排座位column像一列电梯按钮。6.justify-content管的是主轴结论justify-content控制子元素在主轴上的对齐方式。原因Flex 布局中很多属性都围绕主轴来工作。通俗比喻或小例子如果桌子横着摆杯子justify-content就是控制杯子在这张桌子横向上的分布方式。7. 表单的本质是“采集并提交数据”结论表单不是只做样子而是为了收集用户输入并提交给服务器。原因登录、注册、留言、搜索本质上都是数据采集行为。通俗比喻或小例子像填一张报名表重点不是纸长什么样而是填完后要交出去。8.name属性不能忽略结论表单项要想被采集通常必须写name。原因服务器要靠字段名识别数据。通俗比喻或小例子像试卷上如果不写“姓名”这一栏的名字老师就不知道那一格代表什么。9.radio和checkbox非常容易混结论radio是单选checkbox是多选。原因它们虽然长得都像选择框但使用场景不同。通俗比喻或小例子radio像单选题checkbox像多选题。10. 表格要按“表 → 行 → 格子”去理解结论table是整张表tr是一行td/th是格子。原因表格结构本来就是层层嵌套的。通俗比喻或小例子像 Excel先有整张表再有每一行再有每个单元格。四、代码理解1. 盒子模型示例div{width:200px;height:100px;background-color:#05a5d2;padding:20px;border:20px solid #6bd5d7;margin:30px;}关键理解width、height设置内容区宽高。background-color背景颜色。padding: 20px;四个方向内边距都为 20px。border: 20px solid #6bd5d7;设置边框宽度、样式、颜色。margin: 30px;外边距四边都为 30px。语法规律写 4 个值上 右 下 左写 2 个值上下 左右写 1 个值四边一样单独设置一边padding-top、margin-left、border-right2. Flex 布局示例.box{display:flex;flex-direction:row;justify-content:space-between;}divclassboxdiv1/divdiv2/divdiv3/div/div关键理解display: flex;把.box变成弹性容器。flex-direction: row;子元素横向排列。justify-content: space-between;左右两端贴边中间平均分布。里面的 3 个子div是 flex item。3. 表单示例formaction/savemethodpost姓名inputtypetextnamename年龄inputtypetextnameageinputtypesubmitvalue提交/form关键理解form整个表单。action/save提交到/save。methodpost用 POST 方式提交。namename、nameage表示字段名。submit点击后提交表单。4. 常见表单项示例inputtypetextinputtypepasswordinputtyperadioinputtypecheckboxinputtypefileinputtypedateinputtypetimeinputtypedatetime-localinputtypehiddennameidvalue1inputtypesubmitvalue提交inputtyperesetvalue重置inputtypebuttonvalue普通按钮关键理解text单行文本框password密码框radio单选框checkbox复选框file上传文件hidden页面看不到但提交时会带上submit提交表单reset恢复初始状态button普通按钮5. 下拉列表和文本域示例selectnamecityoption北京/optionoption上海/optionoption广州/option/selecttextareanamedesc/textarea关键理解select下拉列表整体。option一个选项。textarea多行文本输入。6. 表格示例tabletheadtrth姓名/thth性别/th/tr/theadtbodytrtd张三/tdtd男/td/tr/tbody/table关键理解table整个表格。thead表头区域。tbody数据区域。tr一行。th表头单元格。td普通数据单元格。五、易错点把padding和margin当成同一个东西。写 4 个边距值时不记得顺序是“上右下左”。误以为div和span没区别。Flex 布局写到子元素上却忘了先给父元素加display: flex;。把row和column的方向记反。不知道justify-content控制的是主轴方向。表单项不写name导致数据采集不到。把 GET 和 POST 的特点混掉。把radio当成多选框把checkbox当成单选框。select和option关系写错。把tr、td、th的层级搞乱。以为表格是专门做页面布局的其实它主要是展示结构化数据。六、记忆口诀 / 通俗比喻盒子模型内容、内边距、边框、外边距。从里到外content → padding → border → margin。padding 盒内空margin 盒外空。div 装大块span 包小段。Flex 记一句父控子。row 横着排column 竖着排。表单采集数据表格展示数据。action 管地址method 管方式。GET 挂地址POST 放请求体。radio 单选checkbox 多选。table 是整表tr 是一行td/th 是格子。七、应用在实际开发中盒子模型和 Flex 布局几乎天天都要用。做一个登录页时要用盒子模型控制输入框和按钮之间的距离做导航栏时经常用 Flex 把菜单横向排开并控制居中或两端对齐。表单则负责收集用户输入比如登录、注册、搜索、留言表格则常用于后台管理系统中展示员工列表、订单列表、商品列表。所以这一部分内容虽然都是基础但已经非常贴近真实开发场景。八、最终总结从盒子模型开始学习重点就从“认识标签”逐渐进入“理解布局和交互”。盒子模型帮助我们理解元素的结构和间距Flex 布局帮助我们控制排列方式。表单解决数据采集问题表格解决数据展示问题。只要把这些知识点的职责分清楚后面做页面时就不会只会堆标签而是能真正开始搭结构、控布局、收数据、展示数据。