你应该知道的 5 大 HTML 技巧
HTML 用于创建网页。在每个新版本的 HTML 中，开发人员都会进行一些更改并添加独特的功能。在这里，我们将讨论大多数开发人员都不知道的功能，以帮助开发人员改进网页。
这里，我们通过示例讲解了 5 大 HTML 技巧。
HTML 中的颜色选择器
我们可以使用 <input> 标签在 HTML 中创建颜色选择器。它允许我们通过点击颜色或添加 RGB 值来选择任何颜色。
语法
用户可以按照以下语法使用 HTML 创建颜色选择器。
<input type="color" value="#ff0000">
在上面的语法中，我们使用 type="color" 来在网页上显示颜色选择器。
示例
在下面的示例中，我们使用 HTML 添加了颜色选择器输入。之后，每当用户选择一种新颜色时，我们都会使用 JavaScript 更改网页的背景颜色。在输出中，用户可以观察到，每当用户从颜色选择器中选择一种新颜色时，背景颜色都会相应地变化。
<html>
<body>
<h2>Using the <i> colorpicker of HTML </i> to select the color</h2>
<h3>Select any color to set for the background color.</h3>
<input type="color" id="colorpicker" name="colorpicker" value="#ff0000">
<script>
//Change the background color according to the selected color from the color picker.
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>Using the <i> progress tag of HTML </i> to show the progress bar.</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 相关的内容。此外，我们使用了值为 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>Making the <i> content of div editable </i> using the contentEditable attribute.</h2>
<div class="content" contenteditable="true">
Github is a web-based hosting service for version control using Git. It is mostly used for computer code. It
offers all of the distributed version control and source code management (SCM) functionality of Git as well as
adding its own features. It provides access control and several collaboration features such as bug tracking,
feature requests, task management, and wikis for every project. <br>
</div>
</body>
</html>
在输入框中建议输入值
在输入字段中建议文本是一个好主意。在 Google 搜索中，当我们尝试搜索任何内容时，它会根据输入框中输入的值来建议文本。我们也可以使用 HTML 中的数据列表向用户建议输入。
语法
用户可以按照以下语法使用数据列表在输入框中建议输入值。
<input type="text" list="names">
<datalist id="names">
//在此处添加选项
</datalist>
在上述语法中，我们在输入元素中使用了"list"属性，为建议添加了数据列表选项。
示例
在下面的示例中，我们创建了文本输入框。此外，我们还使用 HTML 的"datalist"标签创建了列表。此外，我们还在"datalist"元素中添加了带有值的不同选项。
这里，"datalist"的 id 就是我们在"input"标签中用作"list"属性值的"name"。
在输出中，用户可以尝试在输入框中输入文本，系统会相应地提供选项建议。
<html>
<body>
<h2>Suggesting the <i> value to the input box </i> using the datalist HTML tag</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>
添加表格单元格之间的间距
我们可以使用 CSS 属性"border-spacing"在 HTML 表格的单元格之间添加间距。这里，我们将在表格的每一行和每一列之间添加自定义间距。
语法
用户可以按照以下语法在表格单元格之间添加间距。
table {
border-collapse: separate;
border-spacing: 20px;
}
在上述语法中，我们将 CSS 属性"border-spacing"与 CSS 属性"border-collaps"结合使用。
示例
在下面的示例中，我们创建了一个表格并添加了 3 行 3 列。在 CSS 中，我们使用了"border-spacing"属性在表格单元格之间添加间距。此外，用户需要始终将 CSS 属性"border-collapse"与"border-spacing"一起使用。
在输出中，用户可以观察到每个表格单元格之间有 20px 的间距。
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 20px;
}
td {
border: 1px solid black;
padding: 5px 10px;
}
</style>
</head>
<body>
<h3>Adding the <i> space between the table cells </i> using the border-space property</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 可编辑;第四个技巧是建议输入文本。最后一个技巧是添加表格单元格之间的间距。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
