【免费】2023.08.13培训练习后半资源-CSDN文库

共4个文件

html：4个

需积分: 0 178 浏览量更新于2023-08-13 收藏 5KB ZIP 举报

"2023.08.13培训练习后半" 暗示了这是一次针对IT技术的培训课程的一部分，重点可能是对前半部分学习内容的巩固和深化。日期提示我们这是在2023年8月13日进行的，可能是一个持续数天或数周的系列培训的阶段。 "2023.08.13培训练习后半" 提供的信息相对简单，仅表明这是一个培训的后期练习环节。通常在培训课程中，"后半"可能意味着学员已经掌握了基础理论，现在进入实践操作或更复杂的任务阶段，旨在提高他们的技能和应用能力。 "培训" 明确指出这是一次教育或专业发展活动，可能涉及软件开发、编程语言、网络技术、数据分析等IT领域的知识。标签通常用于分类和检索，方便学员或者相关人员快速识别内容主题。【压缩包子文件的文件名称列表】中的文件以"练习"命名，进一步证实了这是一个训练或学习过程，每个HTML文件可能代表一个独立的练习题或案例研究。HTML是超文本标记语言，通常用于创建网页。在这里，这些文件可能是学员需要完成的互动练习，或者包含讲解、代码示例和问题解答。结合以上信息，我们可以推测这次培训可能涵盖了以下IT知识点： 1. **HTML基础**：学员们可能已经学习了HTML的基本结构，如元素、属性和标签，以及如何创建和组织网页内容。 2. **CSS与页面布局**：如果HTML练习涉及样式和布局，那么可能已经讲解了CSS（层叠样式表）的概念，包括选择器、属性和值，以及如何美化和控制网页的视觉呈现。 3. **前端交互**：鉴于这些是练习文件，可能还包括了JavaScript的基础，用于实现网页的交互性，如按钮点击事件、表单验证或动态内容更新。 4. **网页响应式设计**：如果练习中包含了不同设备的显示效果，那么响应式设计原则和媒体查询可能也是教学内容之一，以确保网页在各种屏幕尺寸上都能良好展示。 5. **Web开发流程**：可能讲解了开发工作流，如版本控制（Git）、代码编辑器的使用、调试工具以及如何部署网页到服务器。 6. **Web标准与最佳实践**：强调遵循W3C标准和编写语义化HTML的重要性，以及提高网页性能和可访问性的最佳实践。 7. **实战项目**：练习6至练习7可能是逐步进阶的，从基础页面构建到更复杂的网页或功能实现，让学员将所学知识应用到实际情境中。通过这些练习，学员可以提升他们对HTML的理解，掌握网页设计和开发的基本技能，并为未来的Web开发项目打下坚实的基础。

收起资源包目录

培训练习.zip （4个子文件）

练习7.html 5KB

练习6.html 4KB

练习5.html 3KB

练习4.html 2KB

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table { border-collapse: collapse; width: 100%; } tr, th, td { border: 1px solid; } .toggle { width: 20px; height: 20px; background-color: lightgray; cursor: pointer; display: flex; justify-content: center; align-items: center; } .show-details { display: none; } </style> </head> <body> <table> <tr> <td colspan="2"> <table style="width: 98%;margin: 1%"> <tr style="background-color: bisque"> <th>班级</th> <th>学号</th> <th>姓名</th> <th>操作</th> </tr> <tr> <td><label><input value="" name="class"></label></td> <td><label><input value="" name="id"></label></td> <td><label><input value="" name="name"></label></td> <td> <button onclick="addStudent()">添加学生</button> </td> </tr> </table> </td> </tr> </table> </body> <script> let dataList = [ { class: '石家庄精英中学', students: [ {id: '20010307', name: '赵泽宇'} ] } ] function addStudent() { let input = document.querySelectorAll('input') let flag = true // 已经存在这个学校 for (let i = 0; i < dataList.length; i++) { if (input[0].value === dataList[i].class) { flag = false dataList[i].students.push({id: input[1].value, name: input[2].value}) let toggle = document.querySelectorAll('.toggle') // console.log(toggle[i]) let row = toggle[i].closest('tr') let detailsRow = row.nextElementSibling console.log(detailsRow) if (detailsRow && detailsRow.classList.contains('details-row')) { let table = detailsRow.querySelector('table') console.log(table) let row = table.insertRow() let idCell = row.insertCell() idCell.textContent = input[1].value let nameCell = row.insertCell() nameCell.textContent = input[2].value } break } } // 不存在这个学校 if (flag) { dataList.push({ class: input[0].value, students: [{id: input[1].value, name: input[2].value}] }) tableBody.appendChild(createItemRow(dataList[dataList.length - 1], dataList.length - 1)) } } let tableBody = document.querySelector('tbody') // 生成基础的班级表格 function createItemRow(item, index) { let row = document.createElement('tr') // 控制 + - 号 let toggleCell = row.insertCell() toggleCell.classList.add('flex') toggleCell.innerHTML = `<div class="toggle" onclick="toggleDetails(this)" data-index=${index}>+</div>` // 班级 let classCell = row.insertCell() classCell.textContent = item.class return row } function createDetailsRow(details) { let row = document.createElement('tr') row.classList.add('details-row') let cell = row.insertCell() cell.colSpan = 2 let detailsTable = document.createElement('table') detailsTable.style.width = '98%' detailsTable.style.margin = '1%' let objArr = Object.keys(details[0]) let detailRow = detailsTable.insertRow() detailRow.style.backgroundColor = 'bisque' objArr.forEach(item => { let cell = detailRow.insertCell() cell.textContent = item }) details.forEach(detail => { let detailRow = detailsTable.insertRow() let idCell = detailRow.insertCell() idCell.textContent = detail.id let nameCell = detailRow.insertCell() nameCell.textContent = detail.name }) cell.appendChild(detailsTable) return row } dataList.forEach((item, index) => { tableBody.appendChild(createItemRow(item, index)) }) function toggleDetails(element) { let row = element.closest('tr') let detailsRow = row.nextElementSibling // 不存在 if (!detailsRow || !detailsRow.classList.contains('details-row')) { let index = element.getAttribute('data-index') tableBody.insertBefore(createDetailsRow(dataList[index].students), row.nextElementSibling) element.textContent = '-' } else { // 存在 detailsRow.classList.toggle('show-details') element.textContent = detailsRow.classList.contains('show-details') ? '+' : '-' } } </script> </html>