掌握的五个 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>