HTML網(wǎng)絡(luò)編程之時(shí)間格式

絡(luò)編程之時(shí)間格式。

同學(xué)們好，今天我們分享的是如何讓搜索引擎等程序更容易地提取網(wǎng)頁(yè)中的時(shí)間信息。我們將使用time標(biāo)簽來(lái)實(shí)現(xiàn)這一目標(biāo)。這個(gè)標(biāo)簽?zāi)銈兛赡芤呀?jīng)有所了解，但是現(xiàn)在不需要掌握太多細(xì)節(jié)，只需要知道它的作用即可。

現(xiàn)在來(lái)看看我們的示例頁(yè)面，可以看到頁(yè)面中包含了很多句不同時(shí)間格式的文字。這些文字并沒(méi)有什么特別之處，只是每一句都包含著時(shí)間信息。時(shí)間信息的格式比較復(fù)雜，但是這不影響我們的演示效果。

接下來(lái)，我們將介紹實(shí)現(xiàn)代碼。time標(biāo)簽用于定義公歷日期或時(shí)間、二十四小時(shí)制，時(shí)間和時(shí)區(qū)偏移是可選的。在所有瀏覽器中，time標(biāo)簽不會(huì)渲染任何特殊的效果。但是，它可以讓搜索引擎更容易地在網(wǎng)頁(yè)中找到對(duì)應(yīng)的時(shí)間信息。

使用time標(biāo)簽的另一個(gè)原因是，世界上有許多不同的日期格式，但是這些不同的格式不容易被電腦識(shí)別。如果我們想自動(dòng)抓取頁(yè)面上所有事件的日期并將它們插入到日歷中，time元素可以讓我們附上清晰的可被機(jī)器識(shí)別的時(shí)間或日期。因此，time標(biāo)簽并不是為了給用戶(hù)看的，而是為了方便搜索引擎更好地在網(wǎng)頁(yè)上找到對(duì)應(yīng)的時(shí)間。

在我們的示例中，時(shí)間和普通文字看上去沒(méi)有任何區(qū)別。除了搜索引擎，網(wǎng)頁(yè)同手機(jī)上的日歷、提醒等應(yīng)用程序交互時(shí)，time標(biāo)簽也可以提供很大的方便。

time標(biāo)簽非常簡(jiǎn)單，只包含一個(gè)屬性datatime，用于規(guī)定日期和時(shí)間。如果需要，我們還可以通過(guò)元素的內(nèi)容來(lái)指定日期和時(shí)間。time標(biāo)簽的值有很多種，只要是符合規(guī)范的時(shí)間寫(xiě)法格式，都可以被接受并轉(zhuǎn)化為第三方使用的格式。

總之，time標(biāo)簽的使用頻率并不高，不需要我們進(jìn)行太多的學(xué)習(xí)和理解。如果你們知道有這個(gè)東西并且知道它的大概意思，就可以了。

今天的分享就到這里，所有的案例和相關(guān)文檔都可以向我索取。

下期見(jiàn)，想學(xué)習(xí)編程的同學(xué)請(qǐng)關(guān)注我。

現(xiàn)代web開(kāi)發(fā)中，表單是用戶(hù)與網(wǎng)站互動(dòng)的重要方式之一。HTML5為表單提交提供了強(qiáng)大的功能和豐富的輸入類(lèi)型，讓收集和驗(yàn)證用戶(hù)輸入數(shù)據(jù)變得更加容易和安全。本文將詳細(xì)介紹HTML5表單的各個(gè)方面，包括基本結(jié)構(gòu)、輸入類(lèi)型、驗(yàn)證方法和提交過(guò)程。

基本結(jié)構(gòu)

HTML表單由<form>標(biāo)簽定義，它可以包含輸入字段、標(biāo)簽、按鈕等元素。一個(gè)基本的表單結(jié)構(gòu)如下所示：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">電子郵箱：</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="提交">
</form>

在這個(gè)例子中，表單有兩個(gè)輸入字段：姓名和電子郵箱。每個(gè)輸入字段都有一個(gè)<label>標(biāo)簽，這不僅有助于用戶(hù)理解輸入的內(nèi)容，也有助于屏幕閱讀器等輔助技術(shù)。<form>標(biāo)簽的action屬性定義了數(shù)據(jù)提交到服務(wù)器的URL，method屬性定義了提交數(shù)據(jù)的HTTP方法（通常是post或get）。

輸入類(lèi)型

HTML5提供了多種輸入類(lèi)型，以支持不同的數(shù)據(jù)格式和設(shè)備。

文本輸入

<!-- 單行文本 -->
<input type="text" name="username" placeholder="請(qǐng)輸入用戶(hù)名" required>

<!-- 密碼 -->
<input type="password" name="password" required minlength="8">

<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">

<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">

數(shù)值輸入

<!-- 數(shù)值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑動(dòng)條 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 電話(huà)號(hào)碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和時(shí)間輸入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 時(shí)間 -->
<input type="time" name="appointmenttime">

<!-- 日期和時(shí)間 -->
<input type="datetime-local" name="appointmentdatetime">

選擇輸入

<!-- 復(fù)選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂(lè)</label>

<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<!-- 下拉選擇 -->
<select name="country" required>
  <option value="china">中國(guó)</option>
  <option value="usa">美國(guó)</option>
</select>

特殊輸入

<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">

<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

驗(yàn)證方法

HTML5表單提供了內(nèi)置的驗(yàn)證功能，可以在數(shù)據(jù)提交到服務(wù)器之前進(jìn)行檢查。

必填字段

<input type="text" name="username" required>

正則表達(dá)式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請(qǐng)輸入5位數(shù)的郵政編碼">

數(shù)值范圍

<input type="number" name="age" min="18" max="99">

長(zhǎng)度限制

<input type="text" name="username" minlength="4" maxlength="8">

表單提交

當(dāng)用戶(hù)填寫(xiě)完表單并點(diǎn)擊提交按鈕時(shí)，瀏覽器會(huì)自動(dòng)檢查所有輸入字段的有效性。如果所有字段都滿(mǎn)足要求，表單數(shù)據(jù)將被發(fā)送到服務(wù)器。否則，瀏覽器會(huì)顯示錯(cuò)誤信息，并阻止表單提交。

<input type="submit" value="提交">

可以使用JavaScript來(lái)自定義驗(yàn)證或處理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 檢查表單數(shù)據(jù)
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表單提交
    // 自定義錯(cuò)誤處理
  }
  // 可以在這里添加額外的邏輯，比如發(fā)送數(shù)據(jù)到服務(wù)器的Ajax請(qǐng)求
});

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>

<!-- 表單定義 -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>

  <label for="email">電子郵件：</label>
  <input type="email" id="email" name="email">
  <br>

  <input type="button" value="提交" onclick="submitForm()">
</form>

<script>
// JavaScript函數(shù)，處理表單提交
function submitForm() {
  // 獲取表單元素
  var form = document.getElementById('myForm');
  
  // 創(chuàng)建一個(gè)FormData對(duì)象
  var formData = new FormData(form);
  
  // 創(chuàng)建一個(gè)空對(duì)象來(lái)存儲(chǔ)表單數(shù)據(jù)
  var formObject = {};
  
  // 將FormData轉(zhuǎn)換為普通對(duì)象
  formData.forEach(function(value, key){
    formObject[key] = value;
  });
  
  // 將對(duì)象轉(zhuǎn)換為JSON字符串
  var jsonString = JSON.stringify(formObject);
  
  // 彈出包含JSON字符串的對(duì)話(huà)框
  alert(jsonString);
  
  // 阻止表單的默認(rèn)提交行為
  return false;
}
</script>

</body>
</html>

在這個(gè)例子中：

我們定義了一個(gè)包含姓名和電子郵件輸入字段的表單，以及一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕時(shí)會(huì)調(diào)用submitForm函數(shù)。
在submitForm函數(shù)中，我們首先獲取表單元素并創(chuàng)建一個(gè)FormData對(duì)象。然后，我們遍歷FormData對(duì)象，將表單數(shù)據(jù)復(fù)制到一個(gè)普通的JavaScript對(duì)象formObject中。
接著，我們使用JSON.stringify方法將formObject轉(zhuǎn)換成JSON字符串。
最后，我們使用alert函數(shù)彈出一個(gè)包含JSON字符串的對(duì)話(huà)框。

注意，這個(gè)例子中我們使用了type="button"而不是type="submit"，因?yàn)槲覀儾幌Ｍ韱斡心J(rèn)的提交行為。我們的JavaScript函數(shù)submitForm會(huì)處理所有的邏輯，并且通過(guò)返回false來(lái)阻止默認(rèn)的表單提交。如果你想要使用type="submit"，你需要在<form>標(biāo)簽上添加一個(gè)onsubmit="return submitForm()"屬性來(lái)代替按鈕上的onclick事件。

結(jié)論

HTML5的表單功能為開(kāi)發(fā)者提供了強(qiáng)大的工具，以便創(chuàng)建功能豐富、用戶(hù)友好且安全的網(wǎng)站。通過(guò)使用HTML5的輸入類(lèi)型和驗(yàn)證方法，可以確保用戶(hù)輸入的數(shù)據(jù)是有效的，同時(shí)提高用戶(hù)體驗(yàn)。隨著技術(shù)的不斷進(jìn)步，HTML5表單和相關(guān)API將繼續(xù)發(fā)展，為前端工程師提供更多的可能性。

方便用戶(hù)使用敬業(yè)簽桌面便簽軟件和敬業(yè)簽網(wǎng)頁(yè)版便簽，在一些特殊的情況下不但要有效記錄便簽的內(nèi)容，還要跟上記錄的時(shí)間。怎么樣才能在敬業(yè)簽桌面便簽軟件和敬業(yè)簽網(wǎng)頁(yè)版便簽快速插入當(dāng)前時(shí)間，敬業(yè)簽官方提供了解決方案：利用輸入法快速查入時(shí)間。

一、拼音輸入法

在拼音輸入法中文狀態(tài)下，鍵盤(pán)輸入：sj,即會(huì)顯示時(shí)間（包含日期和時(shí)間）為當(dāng)前系統(tǒng)的時(shí)間。選中輸入的時(shí)間類(lèi)型即可完成時(shí)間插入。

二、五筆輸入法

在五筆輸入法中文狀態(tài)五，鍵盤(pán)輸入：time，即會(huì)顯示時(shí)間（包含日期和時(shí)間）為當(dāng)前系統(tǒng)的時(shí)間。選中輸入的時(shí)間類(lèi)型即可完成時(shí)間插入。

原文來(lái)源：https://www.jingyeqian.com/news-909.html

在線(xiàn)咨詢(xún)

上一篇：如何用一行代碼實(shí)現(xiàn)網(wǎng)頁(yè)變灰效果？
下一篇：關(guān)于html緩存的思考

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商