极客教程掌握的五个 HTML 技巧
HTML 用于创建网页。在每个 HTML 的新版本中，开发人员会进行一些更改并添加独特的功能。在这里，我们将讨论大多数开发人员不知道的功能，这些功能可以帮助开发人员改善网页。
在这里，我们已经使用示例解释了前五个 HTML 技巧。
在 HTML 中使用颜色选择器
我们可以使用 <input> 标签在 HTML 中创建颜色选择器。它允许我们通过单击颜色或添加 RGB 值来选择任何颜色。
语法
用户可以使用以下语法创建使用 HTML 的颜色选择器。
<input type="color" value="#ff0000">
在上述语法中，我们使用 type= “color” 来在网页上显示颜色选择器。
示例
在下面的示例中，我们使用 HTML 添加了颜色选择器输入。之后，每当用户选择新颜色时，我们使用 JavaScript 更改网页的背景颜色。在输出中，用户可以观察到每当他们从颜色选择器中选择新颜色时，背景颜色相应更改。
<html>
<body>
<h2>使用 HTML 的<i> 颜色选择器 </i>选择颜色</h2>
<h3>选择任何颜色作为背景颜色。</h3>
<input type="color" id="colorpicker" name="colorpicker" value="#ff0000">
<script>
// 根据从颜色选择器中选择的颜色更改背景颜色。
var colorpicker = document.getElementById("colorpicker");
colorpicker.addEventListener("input", function () {
document.body.style.backgroundColor = colorpicker.value;
}, false);
</script>
</body>
</html>
使用 HTML 的 <progress> 标签
<progress> 标签允许用户在 HTML 中创建一个进度条。我们可以设置进度条的最大值和最小值，以及进度条中的当前值。
语法
用户可以使用以下语法使用 <progress> 标签在 HTML 中创建进度条。
<progress value="50" max="100"> 50% </progress>
在上述语法中，我们设置了进度条和当前值的最大值。
示例
在下面的示例中，我们使用 <progress> HTML 标签创建了两个不同的进度条。在第一个进度条中，我们设置了 50% 的进度；在第二个进度条中，最大值为 200，当前值为 75，用户可以在输出中观察到。此外，我们更改了第二个进度条的尺寸。
<html>
<head>
<style>
.progress {
width: 200px;
height: 40px;
}
</style>
</head>
<body>
<h2>使用 HTML 的<i> 进度</i> 标签显示进度条。</h2>
<progress value="50" max="100"> 50% </progress>
<br> <br>
<progress value="75" max="200" class="progress"> 75% </progress>
</body>
</html>
使 div 的内容可编辑
有时，我们需要使 div 的内容可编辑。因此，div 元素也应像输入元素一样工作。我们可以使用“contentEditale”属性来实现。
语法
用户可以按照下面的语法使设置div元素中的内容可编辑。
<div contenteditable="true">
// div元素的内容
</div>
例子
在下面的示例中，我们创建了div元素并添加了与Github相关的内容。还使用了’value’值为true的“contenteditable”属性，使div元素的内容可编辑。
在输出中，用户可以点击div元素的内容，并可以在用户点击的位置上观察到光标。
<html>
<head>
<style>
.content {
width: 400px;
height: auto;
border-radius: 12px;
border: 3px dotted green;
padding: 5px;
font-size: 1.3rem;
color: blue;
}
</style>
</head>
<body>
<h2>使用contentEditable属性使<div>元素的内容可编辑</h2>
<div class="content" contenteditable="true">
Github是一个基于Web的Git代码版本控制托管服务。它主要用于编写计算机代码。 它提供了Git分布式版本控制和源代码管理（SCM）功能以及添加了自己的功能。 它为每个项目提供访问控制和若干协作功能，例如错误跟踪，功能请求，任务管理和维基百科。 <br>
</div>
</body>
</html>
在输入框中建议文本值
使用input字段中的建议文本是一个好主意。在Google搜索中，当我们尝试搜索任何内容时，它根据输入框中键入的值进行建议文本。我们还可以使用HTML中的数据列表向用户提供输入建议。
语法
用户可以按照以下语法使用数据列表在输入框中建议文本值。
<input type="text" list="names">
<datalist id="names">
//在此添加选项
</datalist>
在上面的语法中，我们使用input元素的’list’属性来添加数据列表的选项以供建议。
例子
在下面的示例中，我们创建了文本输入框。此外，我们使用HTML的’datalist’标签创建了列表。 此外，我们在“datalist”元素中添加了不同的具有值的选项。
这里，“datalist”的id是我们在“input”标记中使用’list’属性的值“name”。
在输出中，用户可以尝试在输入框中编写文本，它将根据输入情况建议选项。
<html>
<body>
<h2>使用HTML标记中的<datalist>标记向输入框提供建议值</h2>
<input type = "text" list = "names">
<datalist id = "names">
<option value = "Shubham"></option>
<option value = "John"></option>
<option value = "Rahul"> </option>
<option value = "Raj"> </option>
<option value = "Jay"> </option>
<option value = "Mohit"> </option>
<option value = "Rohan"> </option>
<option value = "Jems"> </option>
<option value = "Rajesh"> </option>
<option value = "Mahesh"> </option>
<option value = "Ramesh"> </option>
<option value = "Manan"> </option>
</datalist>
</body>
</html>
在HTML表格中添加单元格之间的空格
我们可以使用 CSS 属性“border-spacing”在 HTML 表格中的单元格之间添加空格。在此，我们将在表格的每行和每列之间添加自定义空格。
语法
用户可以按照以下语法来添加表格单元格之间的空格。
table {
border-collapse: separate;
border-spacing: 20px;
}
在上述语法中，我们使用了“border-spacing”CSS 属性和“border-collapse”CSS 属性。
示例
在下面的示例中，我们创建了一个表格，并添加了 3 行和 3 列。在 CSS 中，我们使用“border-spacing”属性来添加单元格之间的空格。用户需要始终将“border-collapse” CSS 属性与“border-spacing”属性一起使用。
在输出中，用户可以观察到每个表格单元格之间的 20 像素的空间。
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 20px;
}
td {
border: 1px solid black;
padding: 5px 10px;
}
</style>
</head>
<body>
<h3>使用 border-space 属性添加表格单元格之间的空格</h3>
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 4 </td>
<td> 5 </td>
<td> 6 </td>
</tr>
<tr>
<td> 7 </td>
<td> 8 </td>
<td> 9 </td>
</tr>
</table>
</body>
</html>
在本教程中，我们提供了前 5 个 HTML 技巧及其示例。第一个技巧是使用取色器，第二个技巧是使用 <progress>标签创建进度条。在第三个技巧中，我们使 div 可编辑；在第四个技巧中，我们建议输入文本。在最后一个技巧中，我们添加了表格单元格之间的空格。