整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML頭部 <head>

          lt;title> - 定義了HTML文檔的標題

          使用 <title> 標簽定義HTML文檔的標題

          <base> - 定義了所有鏈接的URL

          使用 <base> 定義頁面中所有鏈接默認的鏈接目標地址。

          <meta> - 提供了HTML文檔的meta標記

          使用 <meta> 元素來描述HTML文檔的描述,關鍵詞,作者,字符集等。

          HTML <head> 元素

          <head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。

          可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

          HTML <title> 元素

          <title> 標簽定義了不同文檔的標題。

          <title> 在 HTML/XHTML 文檔中是必須的。

          <title> 元素:

          • 定義了瀏覽器工具欄的標題

          • 當網頁添加到收藏夾時,顯示在收藏夾中的標題

          • 顯示在搜索引擎結果頁面的標題

          一個簡單的 HTML 文檔:

          <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文檔標題</title></head><body>文檔內容......</body></html>

          HTML <base> 元素

          <base> 標簽描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

          <head>

          <base target="_blank">

          </head>

          HTML <link> 元素

          <link> 標簽定義了文檔與外部資源之間的關系。

          <link> 標簽通常用于鏈接到樣式表:

          <head>

          <link rel="stylesheet" type="text/css" href="mystyle.css">

          </head>

          HTML <style> 元素

          <style> 標簽定義了HTML文檔的樣式文件引用地址.

          在<style> 元素中你需要指定樣式文件來渲染HTML文檔:

          <head>

          <style type="text/css">

          body {background-color:yellow}

          p {color:blue}

          </style>

          </head>

          HTML <meta> 元素

          meta標簽描述了一些基本的元數據。

          <meta> 標簽提供了元數據.元數據也不顯示在頁面上,但會被瀏覽器解析。

          META元素通常用于指定網頁的描述,關鍵詞,文件的最后修改時間,作者,和其他元數據。

          元數據可以使用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他Web服務。

          <meta>一般放置于 <head>區域

          <meta> 標簽- 使用實例

          為搜索引擎定義關鍵詞:

          <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

          為網頁定義描述內容:

          <meta name="description" content="Free Web tutorials on HTML and CSS">

          定義網頁作者:

          <meta name="author" content="Hege Refsnes">

          每30秒中刷新當前頁面:

          <meta http-equiv="refresh" content="30">

          HTML <script> 元素

          <script>標簽用于加載腳本文件,如: JavaScript。

          <script> 元素在以下章節會詳細描述。

          HTML head 元素

          標簽描述
          <head>定義了文檔的信息
          <title>定義了文檔的標題
          <base>定義了頁面鏈接標簽的默認鏈接地址
          <link>定義了一個文檔和外部資源之間的關系
          <meta>定義了HTML文檔中的元數據
          <script>定義了客戶端的腳本文件
          <style>定義了HTML文檔的樣式文件

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          、定義

          <meta> 標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上,但是對于機器是可讀的。可用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。

          2、作用

          meta里的數據是供機器解讀的,告訴機器該如何解析這個頁面,還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容,例如我們為頁面中添加如下meta標簽:


          1. <meta http-equiv="charset" content="iso-8859-1">
          2. <meta http-equiv="expires" content="31 Dec 2008">

          瀏覽器的頭部就會包括這些:


          1. charset:iso-8859-1
          2. expires:31 Dec 2008

          只有瀏覽器可以接受這些附加的頭部字段,并能以適當的方式使用它們時,這些字段才有意義。

          3、meta的必需屬性和可選屬性

          meta的必需屬性是content,當然并不是說meta標簽里一定要有content,而是當有http-equiv或name屬性的時候,一定要有content屬性對其進行說明。例如:

          必需屬性

          <meta name="keywords" content="HTML,ASP,PHP,SQL">

          這里面content里的屬性就是對keywords進行的說明,所以呢也可以理解成一個鍵值對吧,就是{keywords:"HTML,ASP,PHP,SQL"}。

          可選屬性

          在W3school中,對于meta的可選屬性說到了三個,分別是http-equiv、name和scheme。考慮到scheme不是很常用,所以就只說下前兩個屬性吧。

          http-equiv

          http-equiv屬性是添加http頭部內容,對一些自定義的,或者需要額外添加的http頭部內容,需要發送到瀏覽器中,我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明,那么現在再舉個例子。例如我們不想使用js來重定向,用http頭部內容控制,那么就可以這樣控制:

          <meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />

          在頁面中加入這個后,5秒鐘后就會跳轉到指定頁面啦,效果可看W3school的例子

          name

          第二個可選屬性是name,這個屬性是供瀏覽器進行解析,對于一些瀏覽器兼容性問題,name屬性是最常用的,當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以,不然就是沒有意義的。還是舉個例子吧:

          <meta name="renderer" content="webkit">

          這個meta標簽的意思就是告訴瀏覽器,用webkit內核進行解析,當然前提是瀏覽器有webkit內核才可以,不然就是沒有意義的啦。當然看到這個你可能會有疑問,這個renderer是從哪里冒出來的,我要怎么知道呢?這個就是在對應的瀏覽器的開發文檔里就會有表明的,例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔

          常用meta標簽大總結

          接下來就是常用的meta標簽大總結啦,我會盡可能的做到全

          charset

          charset是聲明文檔使用的字符編碼,解決亂碼問題主要用的就是它,值得一提的是,這個charset一定要寫第一行,不然就可能會產生亂碼了。

          charset有兩種寫法


          1. <meta charset="utf-8">
          2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

          兩個都是等效的。

          百度禁止轉碼

          百度會自動對網頁進行轉碼,這個標簽是禁止百度的自動轉碼

          <meta http-equiv="Cache-Control" content="no-siteapp" />

          SEO 優化部分


          1. <!-- 頁面標題<title>標簽(head 頭部必須) -->
          2. <title>your title</title>
          3. <!-- 頁面關鍵詞 keywords -->
          4. <meta name="keywords" content="your keywords">
          5. <!-- 頁面描述內容 description -->
          6. <meta name="description" content="your description">
          7. <!-- 定義網頁作者 author -->
          8. <meta name="author" content="author,email address">
          9. <!-- 定義網頁搜索引擎索引方式,robotterms 是一組使用英文逗號「,」分割的值,通常有如下幾種取值:none,noindex,nofollow,all,index和follow。 -->
          10. <meta name="robots" content="index,follow">

          viewport

          viewport主要是影響移動端頁面布局的,例如:


          1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

          content 參數:

          • width viewport 寬度(數值/device-width)
          • height viewport 高度(數值/device-height)
          • initial-scale 初始縮放比例
          • maximum-scale 最大縮放比例
          • minimum-scale 最小縮放比例
          • user-scalable 是否允許用戶縮放(yes/no)

          各瀏覽器平臺

          Microsoft Internet Explorer


          1. <!-- 優先使用最新的ie版本 -->
          2. <meta http-equiv="x-ua-compatible" content="ie=edge">
          3. <!-- 是否開啟cleartype顯示效果 -->
          4. <meta http-equiv="cleartype" content="on">
          5. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
          6. <!-- Pinned Site -->
          7. <!-- IE 10 / Windows 8 -->
          8. <meta name="msapplication-TileImage" content="pinned-tile-144.png">
          9. <meta name="msapplication-TileColor" content="#009900">
          10. <!-- IE 11 / Windows 9.1 -->
          11. <meta name="msapplication-config" content="ieconfig.xml">

          Google Chrome


          1. <!-- 優先使用最新的chrome版本 -->
          2. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
          3. <!-- 禁止自動翻譯 -->
          4. <meta name="google" value="notranslate">

          360瀏覽器


          1. <!-- 選擇使用的瀏覽器解析內核 -->
          2. <meta name="renderer" content="webkit|ie-comp|ie-stand">

          UC手機瀏覽器

          UCBrowser_U3_API

          QQ手機瀏覽器


          1. <!-- 鎖定屏幕在特定方向 -->
          2. <meta name="x5-orientation" content="landscape/portrait">
          3. <!-- 全屏顯示 -->
          4. <meta name="x5-fullscreen" content="true">
          5. <!-- 頁面將以應用模式顯示 -->
          6. <meta name="x5-page-mode" content="app">

          Apple iOS


          1. <!-- Smart App Banner -->
          2. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
          3. <!-- 禁止自動探測并格式化手機號碼 -->
          4. <meta name="format-detection" content="telephone=no">
          5. <!-- Add to Home Screen添加到主屏 -->
          6. <!-- 是否啟用 WebApp 全屏模式 -->
          7. <meta name="apple-mobile-web-app-capable" content="yes">
          8. <!-- 設置狀態欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效 -->
          9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
          10. <!-- 添加到主屏后的標題 -->
          11. <meta name="apple-mobile-web-app-title" content="App Title">

          Google Android


          1. <meta name="theme-color" content="#E64545">
          2. <!-- 添加到主屏 -->
          3. <meta name="mobile-web-app-capable" content="yes">
          4. <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

          App Links


          1. <!-- iOS -->
          2. <meta property="al:ios:url" content="applinks://docs">
          3. <meta property="al:ios:app_store_id" content="12345">
          4. <meta property="al:ios:app_name" content="App Links">
          5. <!-- Android -->
          6. <meta property="al:android:url" content="applinks://docs">
          7. <meta property="al:android:app_name" content="App Links">
          8. <meta property="al:android:package" content="org.applinks">
          9. <!-- Web Fallback -->
          10. <meta property="al:web:url" content="http://applinks.org/documentation">
          11. <!-- More info: http://applinks.org/documentation/ -->

          最后——移動端常用的meta


          1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
          2. <meta name="apple-mobile-web-app-capable" content="yes" />
          3. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
          4. <meta name="format-detection"content="telephone=no, email=no" />
          5. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
          6. <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認的工具欄和菜單欄 -->
          7. <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設置蘋果工具欄顏色 -->
          8. <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別為電話,忽略email識別 -->
          9. <!-- 啟用360瀏覽器的極速模式(webkit) -->
          10. <meta name="renderer" content="webkit">
          11. <!-- 避免IE使用兼容模式 -->
          12. <meta http-equiv="X-UA-Compatible" content="IE=edge">
          13. <!-- 針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓 -->
          14. <meta name="HandheldFriendly" content="true">
          15. <!-- 微軟的老式瀏覽器 -->
          16. <meta name="MobileOptimized" content="320">
          17. <!-- uc強制豎屏 -->
          18. <meta name="screen-orientation" content="portrait">
          19. <!-- QQ強制豎屏 -->
          20. <meta name="x5-orientation" content="portrait">
          21. <!-- UC強制全屏 -->
          22. <meta name="full-screen" content="yes">
          23. <!-- QQ強制全屏 -->
          24. <meta name="x5-fullscreen" content="true">
          25. <!-- UC應用模式 -->
          26. <meta name="browsermode" content="application">
          27. <!-- QQ應用模式 -->
          28. <meta name="x5-page-mode" content="app">
          29. <!-- windows phone 點擊無高光 -->
          30. <meta name="msapplication-tap-highlight" content="no">
          31. <!-- 適應移動端end -->

          這里是云端源想IT,幫你輕松學IT”

          嗨~ 今天的你過得還好嗎?

          世界微塵里

          吾寧愛與憎


          - 2024.03.18 -

          在互聯網的世界中,表單是用戶與網站進行互動的重要橋梁。無論是注冊新賬號、提交反饋、還是在線購物,表單都扮演著至關重要的角色。在網頁中,我們需要跟用戶進行交互,收集用戶資料,此時就需要用到表單標簽。

          HTML提供了一系列的表單標簽,使得開發者能夠輕松地創建出功能豐富的表單。今天我們就來深入探討這些標簽,了解它們的作用以及如何使用它們來構建一個有效的用戶界面。



          一、表單的組成

          在HTML中,一個完整的表單通常由表單域、表單控件(表單元素)和提示信息三個部分構成。

          表單域

          • 表單域是一個包含表單元素的區域
          • 在HTML標簽中,<form>標簽用于定義表單域,以實現用戶信息的收集和傳遞
          • <form>會把它范圍內的表單元素信息提交給服務器


          表單控件

          這些是用戶與表單交云的各種元素,如<input>(用于創建不同類型的輸入字段)、<textarea>(用于多行文本輸入)、<button>(用于提交表單或執行其他操作)、<select>和<option>(用于創建下拉列表)等。



          提示信息

          這些信息通常通過<label>標簽提供,它為表單控件提供了描述性文本,有助于提高可訪問性。<label>標簽通常與<input>標簽一起使用,并且可以通過for屬性與<input>標簽的id屬性關聯起來。


          這三個部分共同構成了一個完整的HTML表單,使得用戶可以輸入數據,并通過點擊提交按鈕將這些數據發送到Web服務器進行處理。


          二、表單元素

          在表單域中可以定義各種表單元素,這些表單元素就是允許用戶在表單中輸入或者選擇的內容控件。下面就來介紹HTML中常用的表單元素。


          1、<form>標簽:基礎容器

          作用:定義一個表單區域,用戶可以在其中輸入數據進行提交。

          <form action="submit.php" method="post">

          其中action屬性指定了數據提交到的服務器端腳本地址,method屬性定義了數據提交的方式(通常為GET或POST)。


          2、<input>標簽:數據輸入

          <input>標簽是一個單標簽,用于收集用戶信息。允許用戶輸入文本、數字、密碼等。

          <input type="text" name="username" placeholder="請輸入用戶名">

          type屬性決定了輸入類型,name屬性定義了數據的鍵名,placeholder屬性提供了輸入框內的提示文本。


          <input>標簽的屬性

          下面舉個例子來說明:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          </head>
          
          <body>
          <form>
          用戶名:<input type="text" value="請輸入用戶名"><br>
          密碼:<input type="password"><br>
          性別:男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
          愛好:吃飯<input type="checkbox"> 睡覺<input type="checkbox"> 打豆豆<input type="checkbox"><br>
          <input type="submit" value="免費注冊">
          <input type="reset" value="重新填寫">
          <input type="button" value="獲取短信驗證碼"><br>
          上傳頭像:<input type="file">
          </form>
          </body>
          </html>


          3、<label>標簽:關聯說明

          它與輸入字段如文本框、單選按鈕、復選框等關聯起來,以改善網頁的可用性和可訪問性。<label>標簽有兩種常見的用法:


          1)包裹方式:

          在這種用法中,<label>標簽直接包裹住關聯的表單元素。例如:

          <label>用戶名:<input type="text" name="username"></label>

          這樣做的好處是用戶點擊標簽文本時,關聯的輸入字段會自動獲取焦點,從而提供更好的用戶體驗。



          2)使用for屬性關聯:

          在這種用法中,<label>標簽通過for屬性與目標表單元素建立關聯,for屬性的值應與目標元素的id屬性相匹配。例如:

          <label for="username">用戶名:</label><input type="text" id="username" name="username">

          這樣做的優勢是單擊標簽時,相關的表單元素會自動選中(獲取焦點),從而提高可用性和可訪問性。


          4、<select>和<option>標簽:下拉選擇

          在頁面中,如果有多個選項讓用戶選擇,并且想要節約頁面空間時,我們可以使用標簽控件定義下拉列表。


          注意點:

          • <select>中至少包含一對<option>
          • 在<option>中定義selected=“selected”時,當前項即為默認選中項
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          </head>
          <body>
          <form>
          籍貫:
          <select>
          <option>山東</option>
          <option>北京</option>
          <option>西安</option>
          <option selected="selected">火星</option>
          </select>
          </form>
          </body>
          </html>


          5、<textarea>標簽:多行文本輸入

          當用戶輸入內容較多的情況下,我們可以用表單元素標簽替代文本框標簽。

          • 允許用戶輸入多行文本。
          <textarea name="message" rows="5" cols="30">默認文本</textarea>

          rows和cols屬性分別定義了文本區域的行數和列數。


          代碼示例:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          </head>
          <body>
          <form>
          今日反饋:
          <textarea>請在此輸入內容</textarea>
          </form>
          </body>
          </html>



          6、<button>標簽:按鈕控件

          創建一個可點擊的按鈕,通常用于提交或重置表單。它允許用戶放置文本或其他內聯元素(如<i>、<b>、<strong>、<br>、<img>等),這使得它比普通的<input type="button">具有更豐富的內容和更強的功能。

          <button type="submit">提交</button>

          type屬性為submit時表示這是一個提交按鈕。


          7、<fieldset>和<legend>標簽:分組和標題

          通常用于在HTML表單中對相關元素進行分組,并提供一個標題來描述這個組的內容。



          <fieldset>標簽:該標簽用于在表單中創建一組相關的表單控件。它可以將表單元素邏輯分組,并且通常在視覺上通過圍繞這些元素繪制一個邊框來區分不同的組。這種分組有助于提高表單的可讀性和易用性。

          <legend>標簽:它總是與<fieldset>標簽一起使用。<legend>標簽定義了<fieldset>元素的標題,這個標題通常會出現在瀏覽器渲染的字段集的邊框上方。<legend>標簽使得用戶更容易理解每個分組的目的和內容。

          代碼示例:

          <form>
          <fieldset>
          <legend>個人信息</legend>
          <label for="name">姓名:</label>
          <input type="text" id="name" name="name"><br><br>
          <label for="email">郵箱:</label>
          <input type="email" id="email" name="email"><br><br>
          </fieldset>
          <fieldset>
          <legend>興趣愛好</legend>
          <input type="checkbox" id="hobby1" name="hobby1" value="music">
          <label for="hobby1">音樂</label><br>
          <input type="checkbox" id="hobby2" name="hobby2" value="sports">
          <label for="hobby2">運動</label><br>
          <input type="checkbox" id="hobby3" name="hobby3" value="reading">
          <label for="hobby3">閱讀</label><br>
          </fieldset>
          <input type="submit" value="提交">
          </form>

          在這個示例中,我們使用了兩個<fieldset>元素來組織表單的不同部分。第一個<fieldset>包含姓名和郵箱字段,而第二個<fieldset>包含三個復選框,用于選擇用戶的興趣愛好。每個<fieldset>都有一個<legend>元素,用于提供標題。這樣,用戶在填寫表單時可以更清晰地了解每個部分的內容。

          想要快速入門前端開發嗎?推薦一個前端開發基礎課程,這個老師講的特別好,零基礎學習無壓力,知識點結合代碼,邊學邊練,可以免費試看試學,還有各種輔助工具和資料,非常適合新手!點這里前往學習哦!云端源想

          8、<datalist>標簽:預定義選項列表

          <datalist>標簽是HTML5中引入的一個新元素,它允許開發者為輸入字段提供預定義的選項列表。當用戶在輸入字段中輸入時,瀏覽器會顯示一個下拉菜單,其中包含與用戶輸入匹配的預定義選項。


          使用<datalist>標簽可以提供更好的用戶體驗,因為它可以幫助用戶選擇正確的選項,而不必手動輸入整個選項。此外,<datalist>還可以與<input>元素的list屬性結合使用,以將預定義的選項列表與特定的輸入字段關聯起來。



          下面是一個使用<datalist>標簽的代碼示例:

          <form>
          <label for="color">選擇你喜歡的顏色:</label>
          <input type="text" id="color" name="color" list="colorOptions">
          <datalist id="colorOptions">
          <option value="紅色">
          <option value="藍色">
          <option value="綠色">
          <option value="黃色">
          <option value="紫色">
          </datalist>
          <input type="submit" value="提交">
          </form>


          9、<output>標簽:計算結果輸出

          <output>標簽是HTML5中引入的一個新元素,它用于顯示計算結果或輸出。該標簽通常與JavaScript代碼結合使用,通過將計算結果賦值給<output>元素的value屬性來顯示結果。


          <output>標簽可以用于各種類型的計算和輸出,例如數學運算、字符串處理、數組操作等。它可以與<input>元素一起使用,以實時更新計算結果。



          下面是一個使用<output>標簽的示例:

          <form>
          <label for="num1">數字1:</label>
          <input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
          <label for="num2">數字2:</label>
          <input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
          <label for="result">結果:</label>
          <output id="result"></output>
          </form>
          
          <script>
          function calculate() {
          var num1 = parseInt(document.getElementById("num1").value);
          var num2 = parseInt(document.getElementById("num2").value);
          var result = num1 + num2;
          document.getElementById("result").value = result;
          }
          </script>


          10、<progress>標簽:任務進度展示

          <progress>標簽是HTML5中用于表示任務完成進度的一個新元素。它通過value屬性和max屬性來表示進度,其中value表示當前完成的值,而max定義任務的總量或最大值。

          示例:

          <!DOCTYPE html>
          <html>
          <head>
          <title>Progress Example</title>
          </head>
          <body>
          <h1>File Download</h1>
          <progress id="fileDownload" value="0" max="100"></progress>
          <br>
          <button onclick="startDownload()">Start Download</button>
          
          <script>
          function startDownload() {
          var progress = document.getElementById("fileDownload");
          for (var i = 0; i <= 100; i++) {
          setTimeout(function() {
          progress.value = i;
          }, i * 10);
          }
          }
          </script>
          </body>
          </html>

          在上面的示例中,我們創建了一個名為"fileDownload"的<progress>元素,并設置了初始值為0,最大值為100。我們還添加了一個按鈕,當用戶點擊該按鈕時,會觸發名為"startDownload"的JavaScript函數。這個函數模擬了一個文件下載過程,通過循環逐步增加<progress>元素的value屬性值,從而顯示下載進度。


          11、<meter>標簽:度量衡指示器

          <meter>標簽在HTML中用于表示度量衡指示器,它定義了一個已知范圍內的標量測量值或分數值,通常用于顯示磁盤使用情況、查詢結果的相關性等。例如:

          <p>CPU 使用率: <meter value="0.6" min="0" max="1"></meter> 60%</p>
          <p>內存使用率: <meter value="0.4" min="0" max="1"></meter> 40%</p>

          在這個示例中,我們使用了兩個<meter>標簽來分別顯示CPU和內存的使用率。value屬性表示當前的測量值,min和max屬性分別定義了測量范圍的最小值和最大值。通過這些屬性,<meter>標簽能夠清晰地顯示出資源的使用情況。



          需要注意的是,<meter>標簽不應該用來表示進度條,對于進度條的表示,應該使用<progress>標簽。


          12、<details>和<summary>標簽:詳細信息展示

          <details>和<summary>標簽是HTML5中新增的兩個元素,用于創建可折疊的詳細信息區域。

          <details>標簽定義了一個可以展開或折疊的容器,其中包含一些額外的信息。它通常與<summary>標簽一起使用,<summary>標簽定義了<details>元素的標題,當用戶點擊該標題時,<details>元素的內容會展開或折疊。

          示例:

          <details>
          <summary>點擊查看詳細信息</summary>
          <p>這里是一些額外的信息,用戶可以點擊標題來展開或折疊這些信息。</p>
          </details>

          在這個示例中,我們使用了<details>標簽來創建一個可折疊的容器,并在其中添加了一個<summary>標簽作為標題。當用戶點擊這個標題時,容器的內容會展開或折疊。


          總結:

          HTML表單標簽是構建動態網頁的基石,它們使得用戶能夠與網站進行有效的交互。


          通過合理地使用這些標簽,開發者可以創建出既美觀又功能強大的表單,從而提升用戶體驗和網站的可用性。所以說,掌握這些標簽的使用,對于前端開發者來說是至關重要的。


          我們下期再見!


          END

          文案編輯|云端學長

          文案配圖|云端學長

          內容由:云端源想分享


          主站蜘蛛池模板: 精品视频一区二区三区四区 | 日韩精品一区二区三区老鸦窝| 国产一区二区精品久久凹凸| 国产免费伦精品一区二区三区| 福利国产微拍广场一区视频在线| 日本一区二区三区不卡视频中文字幕| 日韩精品一区二区三区影院 | 国产一区二区不卡在线播放| 国产亚洲日韩一区二区三区| 色欲精品国产一区二区三区AV| 99精品国产高清一区二区麻豆| 国产乱码精品一区二区三区| 美女福利视频一区二区| 久久精品国产一区二区| 国产精品伦一区二区三级视频 | 午夜影院一区二区| 国产综合视频在线观看一区| 香蕉视频一区二区| 亚洲AV成人一区二区三区在线看| 日韩精品一区二区午夜成人版| 亚洲无线码在线一区观看| 亚洲一区二区三区在线观看蜜桃| 国产乱子伦一区二区三区| 国产一区二区三区免费| 天海翼一区二区三区高清视频| 精品一区二区三区免费视频 | 日本一区二区三区在线观看视频| 亚洲中文字幕丝袜制服一区 | 精品成人av一区二区三区| 精品福利一区二区三区免费视频 | 美女免费视频一区二区三区| 亚洲日本一区二区三区| 国产福利一区视频| 久久久久人妻一区二区三区vr| 精品综合一区二区三区| 蜜臀AV一区二区| 中日韩一区二区三区| 精品国产一区二区三区在线| 色欲AV蜜臀一区二区三区| 国产精品污WWW一区二区三区| 亚洲AV日韩综合一区尤物|