数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
服装研究
法律研究你应该知道的五大HTML技巧
HTML用于创建网页。在HTML的每个新版本中，开发人员都会进行一些更改并添加独特的特性。在这里，我们将讨论大多数开发人员未知的特性，这些特性可以帮助开发人员改进网页。
在这里，我们解释了五大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"> // content of the div element </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"> //Add options here </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>
在表格单元格之间添加空格
我们可以使用“border-spacing”CSS属性在HTML表格的表格单元格之间添加空格。在这里，我们将在表格的每一行和每一列之间添加自定义空格。
语法
用户可以按照以下语法在表格单元格之间添加空格。
table {
border-collapse: separate;
border-spacing: 20px;
}
在上面的语法中，我们使用了“border-spacing”CSS属性和“border-collaps”CSS属性。
示例
在下面的示例中，我们创建了表格并添加了3行和3列。在CSS中，我们使用了“border-spacing”属性在表格单元格之间添加空格。此外，用户始终需要将“border-collapse”CSS属性与“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>
在本教程中，我们已经通过示例解释了五大HTML技巧。第一个技巧是关于使用颜色选择器，第二个技巧是关于使用<progress>标签创建进度条。在第三个技巧中，我们使div可编辑；在第四个技巧中，我们建议输入文本。在最后一个技巧中，我们在表格单元格之间添加了空格。
1K+ 浏览量
