前文

可编辑表格在JavaScript中是比较经典的基础应用，涉及的知识内容就是最普遍的增删改查的设计思路。我在基础学习的过程中学学到的就是拿到你一个作业的时候，先分析需求，构思完结构代码之后再进行消详细的代码实现。

通过使用JavaScript，我们可以实现一个交互性强、用户友好的可编辑表格，使用户能够直接在表格中修改和更新数据，简化数据管理的过程。可编辑表格在数据输入、展示和编辑等方面具有广泛的应用。无论是构建一个在线表单、创建一个数据报表，还是设计一个动态的数据展示界面，掌握可编辑表格的概念和技术都是非常重要的。

在本篇博客中，我们将重点讨论使用JavaScript实现可编辑表格的基础知识和技术。我们将逐步介绍相关的概念，帮助您建立对可编辑表格的全面理解。首先，我们将了解如何使用JavaScript选取和操作表格元素。我们将学习如何通过DOM (Document Object Model)访问和修改表格的行、列、单元格，以及相关的属性和样式。接下来，我们将探讨如何实现表格的编辑功能。我们将学习如何捕获用户的输入事件，并将其应用到相应的表格单元格中。我在基础学习的过程中学学到的就是拿到你一个作业的时候，先分析需求，构思完结构代码之后再进行消详细的代码实现。

网页界面：

CODE

HTML详细代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>风灵月影宗</title><link rel="stylesheet" href="style.css" /></head><body><div id="errorAlter"><span>输错啦!请输入0到99999的值</span></div><div class="header"><h1>风灵月影</h1></div><div class="tableDiv"><table><thead><tr><th>编号</th><th>姓名</th><th>生命力</th><th>攻击力</th><th>防御力</th><th>耐力</th><th>移速</th><th>攻速</th><th>操作</th></tr></thead><tbody id="addNewTdArea"><tr><td><span class="item2" title="胆敢向神伸出爪牙?">0</span></td><td><span class="item2" title="胆敢向神伸出爪牙?">神</span></td><td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td><td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td><td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td><td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td><td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td><td><span class="item2" title="胆敢向神伸出爪牙?">99999</span></td><td>————</td><!--<td>0</td><td>神</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>————</td>--></tr><tr class="delPower"><td>114514</td><td>李田所</td><td name="upData">1919</td><td name="upData">8</td><td name="upData">10</td><td name="upData">20</td><td name="upData">33.5</td><td name="upData">20</td><td class="delTrBtn">踢出队伍</td></tr><tr class="delPower"><td>414</td><td>丘比</td><td name="upData">414</td><td name="upData">414</td><td name="upData">414</td><td name="upData">414</td><td name="upData">414</td><td name="upData">414</td><td class="delTrBtn">踢出队伍</td></tr></tbody></table></div><div id="setNewform"><h3>招募角色</h3><table><thead><tr><th>编号</th><th>姓名</th><th>生命力</th><th>攻击力</th><th>防御力</th><th>耐力</th><th>移速</th><th>攻速</th></tr></thead><tbody><tr><td class="inputContent"><input type="text" /></td><td class="inputContent"><input type="text" /></td><td class="inputContent"><input type="text" /></td><td class="inputContent"><input type="text" /></td><td class="inputContent"><input type="text" /></td><td class="inputContent"><input type="text" /></td><td class="inputContent"><input type="text" /></td><td class="inputContent"><input type="text" /></td></tr></tbody></table></div><input type="submit" value="确定招募" id="addTrBtn" /><div id="errorInputId"><h4>编号是不是有点问题捏?(1~999999的纯数字)</h4></div><div id="errorInputName"><h4>姓名是不是有点问题捏?(1到6位英文字符)</h4></div><div id="errorInputProperty"><h4>属性是不是有点问题捏？(1~999999的纯数字)</h4></div><div class="tips"><ul><li>本表格仅仅实现部分数值的修改，数值在0到99999之间</li><li>角色的添加和增加工作均开发完成</li><li>json尚未包装</li><li>后续开发工作有</li><li>属性报错的时候指出是哪个属性报错</li><li>在玩家设置编号的时候将编号设为唯一值，不可重复</li><li>开放姓名的可编辑性</li><li>更好的Css样式</li></ul></div></body><script src="script.js"></script>
</html>

CSS代码如下：

* {margin: 0;padding: 0;
}
.header {margin: 70px auto;text-align: center;
}
.tableDiv {margin: 10px;
}
table {border-collapse: collapse;width: 100%;margin-bottom: 20px;
}
table th {background-color: #f2f2f2;border: 1px solid #ddd;padding: 10px;text-align: left;font-weight: bold;
}
table td {position: relative;border: 1px solid #ddd;padding: 10px;text-align: left;
}
/*       table tr:nth-child(even) {background-color: #f2f2f2; }*/
table tr td:hover {background-color: #e6f7ff;
}
.tableDiv > table > tbody > tr > td > span {width: 90%;
}.tableDiv > table > tbody > tr > td > input {width: 100%;height: 100%;border: 2px solid red;padding-left: 10px;box-sizing: border-box;position: absolute;top: 0;left: 0;font-size: 16px;
}
.tips {border: 1px solid gray;width: 500px;padding: 20px;margin: 20px 50px;
}
.tips ul li {margin: 5px;
}/* newpart */
/* 萌娘百科黑幕  究极修订版*/
.item2 {color: transparent;background-color: black;transition: all 0.5s ease;padding: 5px;border-radius: 3px;position: relative;display: inline-block;z-index: 1;
}.item2:before {content: "";display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -1;background-image: inherit;filter: blur(10px);transform: scale(1.2);opacity: 0;transition: opacity 0.5s ease;
}.item2:hover:before {opacity: 1;
}.item2:hover {color: white;
}#setNewform {margin: 10px;
}#setNewform > h3 {margin: 30px auto;text-align: center;
}
#setNewform > table > tbody > tr > td > input {width: 100%;height: 200%;padding-left: 10px;box-sizing: border-box;position: absolute;top: 0;left: 0;font-size: 20px;
}
input[type="submit"] {display: block;margin: 20px auto;margin-top: 40px;padding: 10px 20px;background-color: #4caf50;color: #fff;border: none;border-radius: 5px;font-size: 16px;cursor: pointer;
}/* 用户修改报错 */
#errorAlter {position: fixed;top: -100px;left: 0;width: 100%;background-color: #ffcc00;color: #333;font-size: 18px;text-align: center;padding: 10px 0;transition: top 0.3s ease-in-out;
}#errorAlter.show {top: 0;
}/* 用户输入太离谱报错 */
#errorInputId {display: none;background-color: #ff9999;border: 2px solid #ff6666;color: #660000;padding: 10px;text-align: center;margin-top: 10px;animation: shake 0.3s ease-in-out;
}#errorInputId h4 {font-size: 16px;font-weight: bold;margin: 0;
}
#errorInputName {display: none;background-color: #ff9999;border: 2px solid #ff6666;color: #660000;padding: 10px;text-align: center;margin-top: 10px;animation: shake 0.3s ease-in-out;
}#errorInputName h4 {font-size: 16px;font-weight: bold;margin: 0;
}
#errorInputProperty {display: none;background-color: #ff9999;border: 2px solid #ff6666;color: #660000;padding: 10px;text-align: center;margin-top: 10px;animation: shake 0.3s ease-in-out;
}#errorInputProperty h4 {font-size: 16px;font-weight: bold;margin: 0;
}
/* 小抖一下 */
@keyframes shake {0% {transform: translateX(0);}10% {transform: translateX(-10px);}20% {transform: translateX(10px);}30% {transform: translateX(-10px);}40% {transform: translateX(10px);}50% {transform: translateX(-10px);}60% {transform: translateX(10px);}70% {transform: translateX(-10px);}80% {transform: translateX(10px);}90% {transform: translateX(-10px);}100% {transform: translateX(0);}
}

JS代码如下：

//角色修改数值模块var upDatas = document.getElementsByName("upData");// 给角色的数值模块添加事件绑定
function setTdCilck() {for (let i = 0; i < upDatas.length; i++) {upDatas[i].onclick = function () {updateTd(this);};}
}
setTdCilck();//报错提示 升级版
const inputElement = document.getElementById("input-element");
const errorContainer = document.getElementById("errorAlter");
function showError() {errorContainer.classList.add("show");
}
function hideError() {errorContainer.classList.remove("show");
}// 角色修改数值函数
function updateTd(newContent) {if (document.getElementsByClassName("active-input").length == 0) {var oldhtml = newContent.innerHTML;newContent.innerHTML = "";var newInput = document.createElement("input");newInput.setAttribute("class", "active-input");newInput.value = oldhtml;const reg = /^[1-9][0-9]{0,4}$/;newInput.onblur = function () {if (reg.test(this.value)) {newContent.innerHTML = this.value;hideError();} else {showError();newContent.innerHTML = oldhtml;}};newContent.appendChild(newInput);} else {return;}
}//添加新角色模块var trs = document.getElementsByTagName("tr"); //获取所有的tr元素
var tds = document.querySelectorAll(".inputContent input"); // 获取所有的 input 元素
var addNewTdArea = document.getElementById("addNewTdArea"); //获取tbody标签，以方便在它的后面添加子队员（tr）
var addTrBtn = document.getElementById("addTrBtn"); //获取确定招募队友的btn
var errorInputId = document.getElementById("errorInputId"); //获取编号报错的Div
var errorInputName = document.getElementById("errorInputName"); //获取姓名报错的Div
var errorInputProperty = document.getElementById("errorInputProperty"); //获取属性报错的Div
//添加角色函数
function addTr(tds) {//给招募队友按钮绑定事件addTrBtn.onclick = function () {var userInputValue = []; //定义空数组，用于保存用户输入的input里的值for (let i = 0; i < tds.length; i++) {userInputValue[i] = tds[i].value; // 获取 input 元素的值}//给用户输入的数据做验证，不要太离谱//编号部分 编号限定在1到999999之间的数字,可以重复。const idTest = /^[1-9][0-9]{0,5}$/;if (idTest.test(userInputValue[0])) {//编号通过！errorInputId.setAttribute("style", "display:none"); //隐藏编号报错//姓名部分 姓名限定在1到6位的英文字符，可以重复const nameTest = /^[a-zA-Z]{1,6}$/;if (nameTest.test(userInputValue[1])) {//姓名通过！errorInputName.setAttribute("style", "display:none"); //隐藏姓名报错//数值部分，因为最好不要套太多if 所以就一起验证了算了（，数值限定在1到99999的数字，可以重复const propertyTest = /^[1-9][0-9]{0,4}$/;let allValid = true; //定义allValid用于判断属性是否通过的循环验证for (let i = 2; i < userInputValue.length; i++) {if (!propertyTest.test(userInputValue[i])) {allValid = false; //allValid为false说明属性数组里有不符合规则的值break; //直接退出！！！！}}if (allValid) {//数值通过！errorInputProperty.setAttribute("style", "display:none"); //隐藏属性报错//创建标签用于插入tbody的下面const row = `<tr> <td>${userInputValue[0]}</td><td>${userInputValue[1]}</td><td name="upData">${userInputValue[2]}</td><td name="upData">${userInputValue[3]}</td><td name="upData">${userInputValue[4]}</td><td name="upData">${userInputValue[5]}</td><td name="upData">${userInputValue[6]}</td><td name="upData">${userInputValue[7]}</td><td class="delTrBtn1">踢出队伍</td></tr>`;// 将新角色添加到队伍中var newRow = addNewTdArea.insertRow(); // 创建新行newRow.innerHTML = row;// 给新角色绑定修改功能setTdCilck();//给新角色绑定踢出功能var newDelTrBtn = newRow.querySelector(".delTrBtn1"); // 获取 "踢出队伍" 按钮newDelTrBtn.onclick = function () {// 给按钮添加点击事件监听器var confirmed = confirm("确定踢出这位角色吗？");if (confirmed) {// 如果用户点击了确定按 钮，则返回 alert("已踢出")addNewTdArea.deleteRow(newRow.rowIndex - 1); // 删除对应的行alert("已踢出");hideError();} else {// 如果用户点击了取消按钮，则返回 alert("这都不踢？")return alert("这都不踢？");}};//创建完角色后将用户输入置空 人性化设计for (var i = 0; i < tds.length; i++) {tds[i].value = "";}} else {errorInputProperty.setAttribute("style", "display:block"); //属性输入报错}} else {errorInputName.setAttribute("style", "display:block"); //姓名输入报错}} else {errorInputId.setAttribute("style", "display:block"); //编号输入报错}};
}
addTr(tds);//删除模块var trss = document.getElementsByClassName("delPower"); // 获取原始队伍里的两个角色的tr
var delTrBtn = document.getElementsByClassName("delTrBtn"); //获取原始队伍里的两个角色的踢出队伍操作
//给踢出队伍的tr绑定删除事件
function setTrDel() {for (let i = 0; i < delTrBtn.length; i++) {delTrBtn[i].onclick = function () {delTr(i);};}
}
setTrDel();
//删除函数本体
function delTr(i) {// 使用 confirm 函数弹出提示框var confirmed = confirm("确定踢出这位角色吗？");if (confirmed) {trss[i].remove(); //直接踢出当前点击的角色（移除它的tr）alert("已踢出");hideError();} else {alert("这都不踢？");}//重新绑定(这个地方搞半天了)setTrDel();
}

HTML与CSS代码作为基本网页结构代码就不做讲解。更多的重心应该在JS的实现上面。

角色修改数值模块

JS功能模块分析

修改数值模块：

var upDatas = document.getElementsByName("upData");// 给角色的数值模块添加事件绑定
function setTdCilck() {for (let i = 0; i < upDatas.length; i++) {upDatas[i].onclick = function () {updateTd(this);};}
}
setTdCilck();//报错提示 升级版
const inputElement = document.getElementById("input-element");
const errorContainer = document.getElementById("errorAlter");
function showError() {errorContainer.classList.add("show");
}
function hideError() {errorContainer.classList.remove("show");
}// 角色修改数值函数
function updateTd(newContent) {if (document.getElementsByClassName("active-input").length == 0) {var oldhtml = newContent.innerHTML;newContent.innerHTML = "";var newInput = document.createElement("input");newInput.setAttribute("class", "active-input");newInput.value = oldhtml;const reg = /^[1-9][0-9]{0,4}$/;newInput.onblur = function () {if (reg.test(this.value)) {newContent.innerHTML = this.value;hideError();} else {showError();newContent.innerHTML = oldhtml;}};newContent.appendChild(newInput);} else {return;}
}

在这段代码中，我们首先通过document.getElementsByName("upData")获取了所有具有name属性为"upData"的元素，这些元素对应可编辑的表格单元格。接着，我们使用setTdCilck()函数给这些表格单元格添加了点击事件监听器。也就是绑定点击修改事件

在点击事件处理函数updateTd()中，我们首先检查是否已经有其他表格单元格正在编辑状态，如果是，则直接返回，避免重复编辑。然后，我们获取被点击的表格单元格的内容，并将其替换为空。接下来，创建一个input元素，并设置其class为"active-input"，将之前的表格单元格内容赋值给input的value属性。然后，我们定义了一个正则表达式reg用于验证用户输入的数值是否符合规定格式。在input的blur事件中，我们进行数值的验证，如果通过验证，则将用户输入的数值赋值给表格单元格，并隐藏错误提示；如果验证不通过，则显示错误提示，并恢复表格单元格原本的内容。通过以上的代码，我们实现了在可编辑表格中修改数值的功能，并对用户输入进行了简单的格式验证和错误提示。

接下来，我们将继续探讨其他功能模块，如添加新角色和删除角色模块，以完善我们的可编辑表格应用程序。

添加角色模块：

//添加新角色模块var trs = document.getElementsByTagName("tr"); //获取所有的tr元素
var tds = document.querySelectorAll(".inputContent input"); // 获取所有的 input 元素
var addNewTdArea = document.getElementById("addNewTdArea"); //获取tbody标签，以方便在它的后面添加子队员（tr）
var addTrBtn = document.getElementById("addTrBtn"); //获取确定招募队友的btn
var errorInputId = document.getElementById("errorInputId"); //获取编号报错的Div
var errorInputName = document.getElementById("errorInputName"); //获取姓名报错的Div
var errorInputProperty = document.getElementById("errorInputProperty"); //获取属性报错的Div
//添加角色函数
function addTr(tds) {//给招募队友按钮绑定事件addTrBtn.onclick = function () {var userInputValue = []; //定义空数组，用于保存用户输入的input里的值for (let i = 0; i < tds.length; i++) {userInputValue[i] = tds[i].value; // 获取 input 元素的值}//给用户输入的数据做验证，不要太离谱//编号部分 编号限定在1到999999之间的数字,可以重复。const idTest = /^[1-9][0-9]{0,5}$/;if (idTest.test(userInputValue[0])) {//编号通过！errorInputId.setAttribute("style", "display:none"); //隐藏编号报错//姓名部分 姓名限定在1到6位的英文字符，可以重复const nameTest = /^[a-zA-Z]{1,6}$/;if (nameTest.test(userInputValue[1])) {//姓名通过！errorInputName.setAttribute("style", "display:none"); //隐藏姓名报错//数值部分，因为最好不要套太多if 所以就一起验证了算了（，数值限定在1到99999的数字，可以重复const propertyTest = /^[1-9][0-9]{0,4}$/;let allValid = true; //定义allValid用于判断属性是否通过的循环验证for (let i = 2; i < userInputValue.length; i++) {if (!propertyTest.test(userInputValue[i])) {allValid = false; //allValid为false说明属性数组里有不符合规则的值break; //直接退出！！！！}}if (allValid) {//数值通过！errorInputProperty.setAttribute("style", "display:none"); //隐藏属性报错//创建标签用于插入tbody的下面const row = `<tr> <td>${userInputValue[0]}</td><td>${userInputValue[1]}</td><td name="upData">${userInputValue[2]}</td><td name="upData">${userInputValue[3]}</td><td name="upData">${userInputValue[4]}</td><td name="upData">${userInputValue[5]}</td><td name="upData">${userInputValue[6]}</td><td name="upData">${userInputValue[7]}</td><td class="delTrBtn1">踢出队伍</td></tr>`;// 将新角色添加到队伍中var newRow = addNewTdArea.insertRow(); // 创建新行newRow.innerHTML = row;// 给新角色绑定修改功能setTdCilck();//给新角色绑定踢出功能var newDelTrBtn = newRow.querySelector(".delTrBtn1"); // 获取 "踢出队伍" 按钮newDelTrBtn.onclick = function () {// 给按钮添加点击事件监听器var confirmed = confirm("确定踢出这位角色吗？");if (confirmed) {// 如果用户点击了确定按 钮，则返回 alert("已踢出")addNewTdArea.deleteRow(newRow.rowIndex - 1); // 删除对应的行alert("已踢出");hideError();} else {// 如果用户点击了取消按钮，则返回 alert("这都不踢？")return alert("这都不踢？");}};//创建完角色后将用户输入置空 人性化设计for (var i = 0; i < tds.length; i++) {tds[i].value = "";}} else {errorInputProperty.setAttribute("style", "display:block"); //属性输入报错}} else {errorInputName.setAttribute("style", "display:block"); //姓名输入报错}} else {errorInputId.setAttribute("style", "display:block"); //编号输入报错}};
}
addTr(tds);

添加角色模块的实现。这个模块允许用户输入角色的信息，并将其添加到表格中。

代码中的addTr函数是添加角色的核心函数。它通过监听"招募队友"按钮的点击事件来触发角色添加操作。当按钮被点击时，该函数会执行以下步骤：

从HTML页面中获取用户输入的角色信息，并保存在userInputValue数组中。
使用正则表达式进行数据验证，确保编号、姓名和属性值符合特定的格式要求。
如果验证通过，创建一个新的HTML字符串表示角色的表格行，并将其插入到表格中。
为新添加的角色行绑定事件处理程序，以实现修改和删除功能。
清空用户输入的文本框，为下一次输入做准备。
如果验证未通过，根据具体的验证错误显示相应的报错信息。

通过这个添加角色模块，用户可以逐步输入角色的编号、姓名和属性值，系统会根据输入的数据动态创建表格行，并为每个角色提供修改和删除功能。这样用户就可以方便地管理角色数据。

角色删除模块：

var trss = document.getElementsByClassName("delPower"); // 获取原始队伍里的两个角色的tr
var delTrBtn = document.getElementsByClassName("delTrBtn"); //获取原始队伍里的两个角色的踢出队伍操作
//给踢出队伍的tr绑定删除事件
function setTrDel() {for (let i = 0; i < delTrBtn.length; i++) {delTrBtn[i].onclick = function () {delTr(i);};}
}
setTrDel();
//删除函数本体
function delTr(i) {// 使用 confirm 函数弹出提示框var confirmed = confirm("确定踢出这位角色吗？");if (confirmed) {trss[i].remove(); //直接踢出当前点击的角色（移除它的tr）alert("已踢出");hideError();} else {alert("这都不踢？");}//重新绑定(这个地方搞半天了)setTrDel();
}

代码中通过document.getElementsByClassName获取了原始队伍中的角色行和踢出队伍操作按钮的元素集合。接下来，定义了setTrDel函数用于绑定删除事件。setTrDel函数通过遍历delTrBtn元素集合，为每个踢出按钮绑定点击事件。当按钮被点击时，会调用delTr函数，并将相应的角色行的索引作为参数传递给它。

delTr函数是删除操作的核心函数。它执行以下操作：

使用confirm函数弹出确认对话框，询问用户是否确定删除该角色。
如果用户点击了确认按钮，将直接从表格中移除当前点击的角色行（使用remove()方法）。
显示一个提示框，告知用户角色已被成功移除。
调用hideError函数，隐藏可能存在的错误提示信息。
最后，重新绑定删除事件，以保证删除功能在表格中的角色行更新后仍然有效。

通过这个删除模块，用户可以选择要删除的角色，并在确认后将其从表格中移除。这样用户可以方便地管理队伍中的角色。

总结：

在本博客中，我们学习了基于Web技术的可编辑表格应用。通过使用JavaScript、HTML和CSS，我们成功实现了角色修改数值、添加新角色和删除角色的功能。

通过角色修改数值模块，用户可以点击数值单元格，将其转换为可编辑状态，并更新数值。我们还加入了输入验证功能，确保用户输入的数值符合规定的范围。

添加新角色模块允许用户输入角色的编号、姓名和数值，并将其添加到表格中。我们对用户输入进行了验证，以确保数据的准确性和合法性。

删除模块允许用户从表格中踢出不需要的角色。用户可以点击相应的删除按钮，并在确认后将角色从表格中移除。

通过这个完整的可编辑表格应用示例，我们深入了解了Web开发中的前端技术。JavaScript作为核心语言，驱动着应用的交互逻辑。HTML和CSS则负责呈现用户界面和样式效果。通过学习这个应用示例，我们掌握了一些基础的Web开发技巧，例如DOM操作、事件处理、输入验证和动态元素创建。这些技术对于构建更复杂的Web应用和提升用户体验非常重要。

希望本博客能够帮助你打下坚实的Web开发基础，启发你在实际项目中应用这些技术。如果你对这个应用有任何疑问或想进一步拓展它，欢迎留言讨论。感谢你的阅读。

Web学习基础应用-可编辑表格相关推荐

ExtJS4.2学习(七)EditorGrid可编辑表格(转)
鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ------------- ...
暑期沉淀web学习——php基础
web学习流程框架概念理解数据流向:从前端收集完数据之后,发送给中间件,将请求报文变成机器可以直接执行的一连串的代码,再交给后端语言处理程序,从数据库取出数据. PHP基础 PHP概况 PHP优势 ...
iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
零基础快速入门web学习路线（含视频教程）
下面小编专门为广大web学习爱好者汇总了一条完整的自学线路:零基础快速入门web学习路线(含视频教程)(绝对纯干货)适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利 ...
第一周前端web学习记录
第一周前端web学习记录 #什么是HTML.CSS? 如何写代码以及在哪里写 vs code 的基本使用方法浏览器网站开发 HTML 的结构基础和属性创建标签嵌套 HTML标签设置属性 HT ...
HTML与CSS学习基础总结
HTML与CSS学习基础总结先了解学习的知识点有哪些: HTML HTML指的是超文本标记语言(Hyper Text Markip Language),它不是一种编程语言而是一种标记语言,通过使用标 ...
Web技术基础之HTML
这篇文章是对Web前端三大核心技术之一的HTML技术学习的总结. 目录 1.HTML简介 2.HTML文档结构 3.HTML文档结构 1.HTML元素(elements) 2.文档分析 4.HTML文 ...
2018-2019-2 网络对抗技术 20165318 Exp 9 Web安全基础
2018-2019-2 网络对抗技术 20165318 Exp 9 Web安全基础基础问题回答实践过程记录 WebGoat安装 SQL注入攻击 1.命令注入(Command Injection) ...
20165306 Exp9 Web安全基础
Exp9 Web安全基础一.实验概述 0.WebGoat准备工作 (一)SQL注入攻击 1.命令注入(Command Injection) 2.数字型SQL注入(Numeric SQL Inject ...

Web学习基础应用-可编辑表格

前文