資料結構
網路
關係資料庫管理系統(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+ 瀏覽量
