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標簽:
瀏覽器的頭部就會包括這些:
只有瀏覽器可以接受這些附加的頭部字段,并能以適當的方式使用它們時,這些字段才有意義。
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有兩種寫法
兩個都是等效的。
百度禁止轉碼
百度會自動對網頁進行轉碼,這個標簽是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優化部分
viewport
viewport主要是影響移動端頁面布局的,例如:
content 參數:
各瀏覽器平臺
Microsoft Internet Explorer
Google Chrome
360瀏覽器
UC手機瀏覽器
UCBrowser_U3_API
QQ手機瀏覽器
Apple iOS
Google Android
App Links
最后——移動端常用的meta
這里是云端源想IT,幫你輕松學IT”
嗨~ 今天的你過得還好嗎?
世界微塵里
吾寧愛與憎
- 2024.03.18 -
在互聯網的世界中,表單是用戶與網站進行互動的重要橋梁。無論是注冊新賬號、提交反饋、還是在線購物,表單都扮演著至關重要的角色。在網頁中,我們需要跟用戶進行交互,收集用戶資料,此時就需要用到表單標簽。
HTML提供了一系列的表單標簽,使得開發者能夠輕松地創建出功能豐富的表單。今天我們就來深入探討這些標簽,了解它們的作用以及如何使用它們來構建一個有效的用戶界面。
在HTML中,一個完整的表單通常由表單域、表單控件(表單元素)和提示信息三個部分構成。
表單域
表單控件
這些是用戶與表單交云的各種元素,如<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>標簽:下拉選擇
在頁面中,如果有多個選項讓用戶選擇,并且想要節約頁面空間時,我們可以使用標簽控件定義下拉列表。
注意點:
<!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
文案編輯|云端學長
文案配圖|云端學長
內容由:云端源想分享
*請認真填寫需求信息,我們會在24小時內與您取得聯系。