​.对前端HTML-CSS的了解与复习1HTML 1. 有 h1-h6 标签等级大小依次减小img 插入图片2.imgsrc/img// 用来放图片src里面放图片的地址%表示是相对于父类的imgsrcanimal/animal5/all.jpgwidth100%/img!-- 相对于body的宽度 --!-- 显式指定在本窗口打开推荐语义更清晰 --ahrefhttps://www.example.comtarget_self在本窗口打开链接/a!-- 不写 target 属性默认也是在本窗口打开 --ahrefhttps://www.example.com默认在本窗口打开链接/a2CSS 样式1.选择器分为元素选择器、类选择器和id选择器元素选择器 如 h1{}类选择器 如.content{} div class content/divid选择器 如#id{} div idmain-nav这是页面的主导航栏/div优先级id选择器 类选择器 元素选择器2.盒子模型 margin —外边距 padding —内边距divclassbox-card这是一个标准的盒子模型示例/divstyle.box-card{width:300px;/* 1. 内容区的宽度 (content) */height:150px;/* 1. 内容区的高度 (content) */padding:20px;/* 2. 内边距内容与边框之间的空间 */border:5px solid #333;/* 3. 边框包裹在内边距外面 */margin:30px;/* 4. 外边距盒子与其他元素之间的距离 */background-color:#f0f0f0;/* 背景色会延伸到 padding 区域 */}/stylemargin 和padding 支持简写按照上右下左的顺序依次填写flex布局style/* body ( margin: 0;*/#container{background-color:#f1eeee;width:500px;height:300px;display:flex;/* flex弹性布局 */flex-direction:row;/* 默认为row水平布局,设置主轴 *//* flex-start:从头开始排列*//*f1ex-end:从尾部开始排列 *//*center:在主轴上居中对齐 *//*space-around:平分剩余空间*//*space-between:先两边贴边再平分剩余空间*/justify-content:space-between;}.item{background-color:#0fe92c;border:1px solidrgb(255,0,0);width:100px;height:50px;}/style/headbodydividcontainerdivclassitem1/divdivclassitem2/divdivclassitem3/div/div/body表单!-- form表单: action:表单数据提交的ur1地址 method:提交方式 分为get 和post get:默认表单数据会出现在url后面,形式:/save?nameTomage18 特点: 1如果表单中包含了隐私数据get方式并不安全不推荐使用该方式。 2.在浏览器中get请求的大小是有限制的不适合提交大数据量的表单。 post:表单数据会在消息体/请求体中提交到服务器 特点: 1.安全. 2.请求大小没有限制 注意:表单项要想能够采集数据必须得设置name属性表示当前表单项的名字--formactionsubmit.phpmethodget!-- action 里面放地址 --姓名inputtypetextnamenameplaceholder请输入姓名年龄inputtypetextnameageplaceholder请输入年龄input typesubmit value提交/formlabel 标签用于扩大点击区域提升用户体验表单项input:表单项通过type属性控制输入形式。select:定义下拉列表定义列表项。textarea:文本域tableclassdata-table!-- 定义表格整体--!-- thead包裹整个表头行 --theadtr!-- 表示一行--th学生姓名/th!-- 表头的单元格数据默认加粗--thJava成绩/ththWeb前端成绩/th/tr/thead!-- tbody包裹数据主体 --tbodytrtd张三/td!-- 普通单元格数据--td95/tdtd90/td/trtrtd李四/tdtd88/tdtd92/td/tr/tbody/table学生姓名Java成绩Web前端成绩张三9590李四8892foot 标签 : 用来定义页脚区域!-- 页脚版权区域 --footerclassfooterp江苏传智播客教育科技股份有限公司/pp版权所有 copyright 2006-2024 All Rights Reserved/p/footer江苏传智播客教育科技股份有限公司版权所有 copyright 2006-2024 All Rights Reserved总结本文回顾了前端开发中的核心知识点主要包括HTML复习了标题标签h1-h6、图片标签img的用法、百分比单位的含义以及链接a的打开方式。CSS选择器介绍了元素选择器、类选择器和ID选择器并说明了它们的优先级规则ID 类 元素。盒子模型详细解释了内容区content、内边距padding、边框border和外边距margin的构成并提供了简写示例。Flex布局通过示例代码展示了如何使用display: flex、flex-direction和justify-content等属性实现灵活的页面布局。表单讲解了form标签的action和method属性对比了 GET 与 POST 提交方式的区别与适用场景并介绍了input、select、textarea等常用表单项。表格使用table、thead、tbody、tr、th、td等标签构建了数据表格并附上了渲染效果。页脚介绍了footer标签的用途并提供了典型的版权信息示例。掌握这些基础知识是构建现代Web页面的重要基石。建议通过实际编码练习来巩固理解并在此基础上学习更高级的布局技术如Grid和交互功能JavaScript。