當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

菜鸟学前端之遍寻名师

發布時間：2025/3/21 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了菜鸟学前端之遍寻名师小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<abbr>:縮寫，與title連用?

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
<b>:字體加粗

<big>：大號

<small>：小號

<i>：斜體

<tt>:等寬

<bdi>:允許您設置一段文本，使其脫離其父元素的文本方向設置。在發布用戶評論或其他您無法完全控制的內容時，該標簽很有用。與dir一同使用

也就是說與dir的文本設置方向可以相反，進行單獨處理

<bdo>:bdo 元素可覆蓋默認的文本方向，與dir屬性一同使用

<blockquote> ：<blockquote>與 </blockquote> 之間的所有文本都會從常規文本中分離出來，經常會在左、右兩邊進行縮進（增加外邊距），而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間。與cite=“URL”屬性使用，指明來源

以下元素都是短語元素。雖然這些標簽定義的文本大多會呈現出特殊的樣式，但實際上，這些標簽都擁有確切的語義。

我們并不反對使用它們，但是如果您只是為了達到某種視覺效果而使用這些標簽的話，我們建議您使用樣式表，那么做會達到更加豐富的效果。

<em>	把文本定義為強調的內容。
<strong>	把文本定義為語氣更強的強調的內容。
<dfn>	定義一個定義項目。
<code>	定義計算機代碼文本。
<samp>	定義樣本文本。
<kbd>	定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與計算機相關的文檔或手冊中。
<var>	定義變量。您可以將此標簽與 <pre> 及 <code> 標簽配合使用。
<cite>	定義引用。可使用該標簽對參考文獻的引用進行定義，比如書籍或雜志的標題。

<del>：定義刪除文本，一般顯示為劃線，可與cite屬性（鏈接說明為什么刪除）和datatime屬性（說明何時刪除）

<ins>：定義新插入文本，一般顯示為下劃線，其余同上

<mark>：突出顯示文本，與上述不同，一般顯示為陰影填充

<meter>：

<meter value="3" min="0" max="10">十分之三</meter><meter value="0.6">60%</meter> <pre>： pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。

pre 元素中允許的文本可以包括物理樣式和基于內容的樣式變化，還有鏈接、圖像和水平分隔線。當把其他標簽（比如 <a> 標簽）放到 <pre> 塊中時，就像放在 HTML/XHTML 文檔的其他部分中一樣即可。請看下面的例子：

<pre> <html><head><script type="text/javascript" src="loadxmldoc.js"> </script> </head><body><script type="text/javascript">xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");document.write("xmlDoc is loaded, ready for use");</script></body></html> </pre>

在上面的代碼中，<pre> 標簽中的特殊符號被轉換為符號實體，比如 "<" 代表 "<"，">" 代表 ">"。另外，請注意藍色的代碼，我們在 <pre> 標簽中使用了鏈接，也就是 <a> 標簽。上面這段代碼的顯示效果如下：

<html><head><script type="text/javascript" src="loadxmldoc.js"> </script> </head><body><script type="text/javascript">xmlDoc=loadXMLDoc("books.xml");document.write("xmlDoc is loaded, ready for use");</script></body></html>

<input>：看名字就知道與客戶輸入有關，當然你看了<form>標簽

<form>：創建表單，表單就是表，可以這么理解

<form action="form_action.asp" method="get">First name: <input type="text" name="fname" />Last name: <input type="text" name="lname" /><input type="submit" value="Submit" /> </form>
當然，網頁一定有客戶輸入，所以其屬性還蠻多的：

屬性值描述

accept	mime_type	規定通過文件上傳來提交的文件的類型。
align	left right top middle bottom	不贊成使用。規定圖像輸入的對齊方式。
alt	text	定義圖像輸入的替代文本。
autocomplete	on off	規定是否使用輸入字段的自動完成功能。
autofocus	autofocus	規定輸入字段在頁面加載時是否獲得焦點。（不適用于 type="hidden"）
checked	checked	規定此 input 元素首次加載時應當被選中。
disabled	disabled	當 input 元素加載時禁用此元素。
form	formname	規定輸入字段所屬的一個或多個表單。
formaction	URL	覆蓋表單的 action 屬性。（適用于 type="submit" 和 type="image"）
formenctype	見注釋	覆蓋表單的 enctype 屬性。（適用于 type="submit" 和 type="image"）
formmethod	get post	覆蓋表單的 method 屬性。（適用于 type="submit" 和 type="image"）
formnovalidate	formnovalidate	覆蓋表單的 novalidate 屬性。如果使用該屬性，則提交表單時不進行驗證。
formtarget	_blank _self _parent _top framename	覆蓋表單的 target 屬性。（適用于 type="submit" 和 type="image"）
height	pixels %	定義 input 字段的高度。（適用于 type="image"）
list	datalist-id	引用包含輸入字段的預定義選項的 datalist 。
max	number date	規定輸入字段的最大值。請與 "min" 屬性配合使用，來創建合法值的范圍。
maxlength	number	規定輸入字段中的字符的最大長度。
min	number date	規定輸入字段的最小值。請與 "max" 屬性配合使用，來創建合法值的范圍。
multiple	multiple	如果使用該屬性，則允許一個以上的值。
name	field_name	定義 input 元素的名稱。
pattern	regexp_pattern	規定輸入字段的值的模式或格式。例如 pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。
placeholder	text	規定幫助用戶填寫輸入字段的提示。
readonly	readonly	規定輸入字段為只讀。
required	required	指示輸入字段的值是必需的。
size	number_of_char	定義輸入字段的寬度。
src	URL	定義以提交按鈕形式顯示的圖像的 URL。
step	number	規定輸入字的的合法數字間隔。
type	button checkbox file hidden image password radio reset submit text	規定 input 元素的類型。
value	value	規定 input 元素的值。
width	pixels %	定義 input 字段的寬度。（適用于 type="image"）

<form>的屬性：

屬性值描述

accept	MIME_type	HTML 5 中不支持。
accept-charset	charset_list	規定服務器可處理的表單數據字符集。
action	URL	規定當提交表單時向何處發送表單數據。
autocomplete	on off	規定是否啟用表單的自動完成功能。
enctype	見說明	規定在發送表單數據之前如何對其進行編碼。
method	get post	規定用于發送 form-data 的 HTTP 方法。
name	form_name	規定表單的名稱。
novalidate	novalidate	如果使用該屬性，則提交表單時不進行驗證。
target	_blank _self _parent _top framename	規定在何處打開 action URL。

<button>：定義一個按鈕，你可能說，我用<input>的type=button，不一樣的嘛。<button>標簽內可以定義好多東西，圖像也可以，比<input>強大

<button type="button">Click Me!</button> 屬性值描述

autofocus	autofocus	規定當頁面加載時按鈕應當自動地獲得焦點。
disabled	disabled	規定應該禁用該按鈕。
form	form_name	規定按鈕屬于一個或多個表單。
formaction	url	覆蓋 form 元素的 action 屬性。注釋：該屬性與 type="submit" 配合使用。
formenctype	見注釋	覆蓋 form 元素的 enctype 屬性。注釋：該屬性與 type="submit" 配合使用。
formmethod	get post	覆蓋 form 元素的 method 屬性。注釋：該屬性與 type="submit" 配合使用。
formnovalidate	formnovalidate	覆蓋 form 元素的 novalidate 屬性。注釋：該屬性與 type="submit" 配合使用。
formtarget	_blank _self _parent _top framename	覆蓋 form 元素的 target 屬性。注釋：該屬性與 type="submit" 配合使用。
name	button_name	規定按鈕的名稱。
type	button reset submit	規定按鈕的類型。
value	text	規定按鈕的初始值。可由腳本進行修改。

<selet>：創建多選項

<select><option value ="volvo">Volvo</option><option value ="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option> </select>
屬性值描述

autofocus	autofocus	規定在頁面加載后文本區域自動獲得焦點。
disabled	disabled	規定禁用該下拉列表。
form	form_id	規定文本區域所屬的一個或多個表單。
multiple	multiple	規定可選擇多個選項。
name	name	規定下拉列表的名稱。
required	required	規定文本區域是必填的。
size	number	規定下拉列表中可見選項的數目。

<option>：定義剛才下拉列表的一個選項的

disabled	disabled	規定此選項應在首次加載時被禁用。
label	text	定義當使用 <optgroup> 時所使用的標注。
selected	selected	規定選項（在首次顯示在列表中時）表現為選中狀態。
value	text	定義送往服務器的選項值。

<optgroup>：看名字就知道，是把<option>分類顯示

<select><optgroup label="Swedish Cars"><option value ="volvo">Volvo</option><option value ="saab">Saab</option></optgroup><optgroup label="German Cars"><option value ="mercedes">Mercedes</option><option value ="audi">Audi</option></optgroup> </select>

必需的屬性

屬性值描述

label	text	為選項組規定描述。

label

text

為選項組規定描述。

可選的屬性

屬性值描述

disabled	disabled	規定禁用該選項組。

disabled

規定禁用該選項組。

<label>：為<input>服務，相當給出一個標記，如果觸發就怎樣怎樣

<form><label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" /> </form>
屬性值描述

for	id	規定 label 綁定到哪個表單元素。
form	formid	規定 label 字段所屬的一個或多個表單。

<fieldset>：就是對<input>進行一個區域劃分

<form><fieldset><legend>health information</legend>height: <input type="text" />weight: <input type="text" /></fieldset> </form>
屬性值描述

disabled	disabled	規定應該禁用 fieldset。
form	form_id	規定 fieldset 所屬的一個或多個表單。
name	value	規定 fieldset 的名稱。

<legend>：就是<fieldset>的名字標簽

總結

以上是生活随笔為你收集整理的菜鸟学前端之遍寻名师的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：菜鸟学前端之遍寻名师之混乱的笔记
下一篇：信息安全之网络安全初体验（保密向）（一）