1. 程式人生 > >HTML5新增標籤學習(筆記02)

HTML5新增標籤學習(筆記02)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<!--html表單:
				1.什麼是表單 ?使用者輸入或者操作,將資料進行提交的基本單位。
				2.什麼是表單域?使用者可以輸入或者可以操作的元素;
			form表單的中的action表示動作,常用跳轉連結或者方法
			method:表示提交方式,有post和get兩種
			get方式:將資料暴露(預設的提交方式)
			post方式:將請求封裝在post方法中,安全一點;
			
			input標籤的常用屬性:
				1.type設定內容的顯示方式:常用text(純文字)、password(密碼)、submit(提交資料)、rreset(重置資料)等;
				2.placeholder 設定文字框輸入的提示資訊,感覺像隱藏起來;
				3.value 儲存使用者輸入或者操作的資訊
			*4.name 表單域的名字,設定name的值就會提交資料;
			
			form表單的常用屬性:
				1.action 設定資料提交的位置(路徑)
				2.method 設定資料的互動方式,有get和post兩種,
					get:直接將資料暴露在位址列中,
						優點:速度快
						缺點:不安全,攜帶的資料較少,一般為8~16k
					post:不能在位址列中看到提交的引數以及相對應的數值。
						 優點:安全,攜帶的資料較多
						 缺點:速度慢
		-->
		<!--兩種提交方式的案例-->
		<h2>GET 提交表單的案例顯示</h2>
		<form method="get">
			請輸入賬號:<input type="text" name="id" placeholder="請輸入賬號" size="10" /><br /> 請輸入密碼:
			<input type="password" name="password" placeholder="請輸入密碼" size="10" /><br />
			<input type="submit" value="登入" />  
			<input type="reset" value="重置" /></form>
		<hr width="400px" align="left" />
		<h2>POST 提交表單的案例顯示</h2>
		<form method="post">
			請輸入賬號:<input type="text" name="id" placeholder="請輸入賬號" size="10" /><br /> 請輸入密碼:
			<input type="password" name="password" placeholder="請輸入密碼" size="10" /><br />
			<input type="submit" value="登入" />  
			<input type="reset" value="重置" /></form>

		<!--
        	input的常用type型別:
        		text:單行文字框
        		password:密碼框
        		radio:單選按鈕
        		CheckBox:複選框
        	   *hidden:隱藏域
        	   *file:檔案上傳
        	****checked:表示在顯示的時候,被選中。checked對應的值為布林值,true和false
        	****在單選按鈕就,要想顯示單選,需要新增name屬性用來區分,表示n箇中選擇一個
        	*name屬性用來在後臺原始碼中區分選擇項,可以賦值 
        -->
		<h2>input的常用type型別案例</h2> 
		當行文字框:
		<input type="text" size="4" placeholder="填寫提示字元" /><br /> 
		密碼框:
		<input type="password" size="4" /><br />
		單選按鈕:
		<input type="radio" name="1"/>選擇一 
		<input type="radio" name="1"/>選擇二 
		<input type="radio" />選擇三 <br />
		複選按鈕:
		<input type="checkbox" checked="checked" name="1"/>選擇一 
		<input type="checkbox" />選擇二 
		<input type="checkbox" />選擇三 
		<!--用hidden來隱藏,用來提交資料,一般用於資料傳輸-->
		<input type="hidden"  name="id" value="10"/><br />
		提交按鈕:
		<input type="submit" value="提交" /> <br />
		重置按鈕:
		<input type="reset"  value="重置"/> <br />
		自定義按鈕:
		<input type="button" value="一般按鈕" onclick="alert('新增自定義按鈕的點選動作!')"/> <br />
		上傳檔案:
		<input type="file"size="20"/><br />
		
		
		
		下拉列表:
		<select size="3">
			<option>武漢</option>
			<optgroup>
				<option>武昌</option>
				<option>漢口</option>
				<option>漢陽</option>
			</optgroup>
			<option>深圳</option>
			<option>上海</option>
			<option>大理</option>
		</select>
		<br />
		<!--
        	textarea 大文字
        	textarea:多行文字
        	label:標籤
        	fieldset:檔案組
        	關於style的內容,在後期都可以放在css中來測試;
        -->
        
        <textarea name="msg" rows="3" cols="20" placeholder="請輸入你的需要寫的內容在textarea大文字中"></textarea>
		<br />
		<fieldset style="width: 400px;">
			<legend align="center">登入資訊</legend>
			<label>請輸入賬號:</label><input /><br />
			<label>請輸入密碼:</label><input /><br />
		</fieldset>
		<br />
		<br />
		<!--
			required:表示文字框中必須填寫欄位;可簡寫為required;布林型別;
			readonly:表示文字框中的內容只能讀取,不可編輯,可簡寫為readonly;布林型別;
			checked;表示在單選或者複選框中,預設選中,可簡寫問 checked;布林型別;
		-->
		<!--必須填寫-->
		<input type="text" required="required" /><font color="red">*</font><br /><br />
		<!--不能修改-->
		<input type="text" readonly="readonly" value="2237221210" /><br /><br />
		<!--預設選中-->
		<input type="checkbox" checked="checked" />同意條款<br /><br />
		<!--預設選中"選擇三"-->
		<select>
			<option> 選擇一</option>
			<option>選擇二</option>
			<option selected="selected">選擇三</option>
			<option>選擇四</option>
		</select>
		<br />
		<!--
        	HTML5在基礎HTML標籤中新增的屬性;
        	date:
        	week:
        	url:
        	color:
        	search:    
        -->
                        可選擇日期:<input type="date" /><br /><br />
			可以選擇週期:<input type="week" /><br /><br />
			可以填寫郵箱地址:<input type="email" /><br /><br />
			可以填寫網路地址,http或者https協議<input type="url" /><br /><br />
			搜尋框:<input type="search" /><br />
			選擇顏色:<input type="color" /><br />
		
		<!--
        	html中標籤的分類:
        		I.塊級標籤(hx:設定字型大小 hr p table div tr):單獨佔據一行;
        			1.可以設定寬和高,沒有設定寬度,寬為整個網頁,沒有設定高度,高為內容的高度;
        			2.可以設定任意位置的margin和padding;
        			3.單獨佔一行,預設有換行效果;
        		II.內聯標籤(font i u del b span a td  input select textarea):不會換行;
        			1.不能設定寬和高,寬是內容的寬,高是內容的高;
        			2.只能設定左和右的margin和padding;
        			3.只佔據內容的實際大小,預設不換行;
        	margin:表示標籤的外間距;
        	padding:標籤的內間距;(margin和padding可以參考Android來理解;)
			display:設定標籤的呈現方式;
				1.block:顯示為塊級標籤;
				2.inline:顯示內聯標籤;
				3.inline-block:既不換行,又可以設定寬和高;
       -->
	</body>

</html>

相關推薦

HTML5新增標籤學習筆記02

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body&g

經濟學人The Economist學習筆記詞彙Day3

材料均來自於微信公眾號“每日雙語經濟學人" 重難點詞彙: bestow [bɪ’sto]vt. 使用;授予;放置;留宿 ecosystem ['ɛko,sɪstəm]n. 生態系統 reassure [,riə’ʃʊr]vt. 使…安心,使消除疑慮 filed

經濟學人The Economist學習筆記詞彙Day4

材料均來自於微信公眾號“每日雙語經濟學人" 重難點詞彙: gloomy 英 ['gluːmɪ] 美 ['ɡlumi] adj. 黑暗的;沮喪的;陰鬱的 spectre 英 ['spektə] 美 n. 幽靈;妖怪;鬼性(等於specter) haunt 英

經濟學人The Economist學習筆記詞彙Day5

重點詞彙: contrarian英 [kən’treərɪən] 美 n. 做法與一般大眾想法相反的投資人(如買冷門股票);(與其他人)持相反意見者 allocate英 ['æləkeɪt] 美 ['æləket] vt. 分配;撥出;使坐落於vi. 分配;

springMVC學習筆記

springMVC執行流程 使用者訪問 簡單點,直接在body中寫一個連結 <body> <a href="index">點選測試</a> </body> web容器載入 使用者在頁面

Linux基礎命令學習筆記1

圖片 覆蓋 ces 技術分享 ado linux基礎命 RoCE .com 51cto echo :打印輸出內容搭配 > 重定向把內容指向文件裏,文件不存在會直接創建,如果存在會覆蓋裏面內容可以通過root用戶和普通用戶進行交流Linux基礎命令學習(筆記1)

HTML5學習09HTML5新增標籤

<ruby><rp>用於定義被標註的文字; <rt>用於標註拼音或者音標; 三個標籤需要配合使用。 <mark>定義帶有記號的文字; <time>用於定義公厲時間(24小時制)或者日期,有兩個重要屬性date

吳恩達機器學習課程筆記02——處理房價預測問題梯度下降演算法詳解

  建議記住的實用符號 符號 含義 m 樣本數目 x 輸入變數 y 輸出變數/目標變數

HTML學習筆記 AND 2018-11-1523:02

一、form表單 form表單:用於提交請求。 常用屬性: name:定義表單的名稱 action:規定提交表單向何處傳送表單資料。 method:灰頂提交方式,一般有兩種提交方式(Post)和(get)。 二、input標籤 例如: <form action="" name="

前端學習筆記day01 html5 新增標籤

1. header 標籤; nav標籤; article標籤; section標籤; aside標籤;footer標籤; <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"&

html5新增標籤canvas畫布基礎詳解及實操案例

如果文章有不對之處,還請大神們多多指點     canvas也是html中的一個元素,可以給這個元素新增一些html屬性,屬性width預設為300px,heigth預設為150px;     canvas是h5中新增的眾多元素中的一個,直譯過來叫做畫布,可以用來通過h5繪

《動手學深度學習李沐筆記1

break pre square scatter mage sgd 筆記 init .com 實現一個簡單的線性回歸(mxnet) from mxnet import ndarray as nd from mxnet import autograd import matp

python學習筆記

python自主學習記錄PATH設置安裝路徑 (環境) 同時安裝py2.0和py3.0分開執行命令python -m pip install (下載)python -m pip install --upgrade pip(下載安裝pip)————————————————————————————python3

強化學習RLAI讀書筆記第六章差分學習TD-learning

第六章:Temporal-Difference Learning TD-learning演算法是強化學習中一個獨具特色而又核心的想法,結合了蒙特卡洛演算法和動態規劃的想法。和MC一樣不需要環境模型直接從sample裡學習,也像DP一樣使用bootstrap通過別的狀態值的估計更新當前狀態值。首先

《機器學習》 周志華學習筆記第八章 整合學習課後習題python實現

  1.個體與整合 1.1同質整合 1.2異質整合 2.boosting:代表AdaBoost演算法 3.Bagging與隨機森林 3.1Bagging 是並行式整合學習方法最著名的代表(基於自主取樣法bootstrap sampling) 自己學習時編寫了

機器學習線性代數筆記

機器學習中的“向量”是指的只有一列的“矩陣”,這個矩陣有多少行就稱其為有多少維度 矩陣的加(減)法:兩個矩陣必須維度相同(行數列數相同)才可以加減,對應的元素相加減 矩陣的乘(除)法:     1、標量與矩陣的乘(除)法:標量與矩陣中的每個元素進行相乘(

學習Python第一天筆記22018年12月11號

存一波Python的33個保留字: and as assert break class continue def elif else except finally for from if import in is lambda not or pass raise return try whi

SpringBoot標籤學習

檢視層學習 controler [email protected] 寫在類名上方,表示這個類用於接收瀏覽器值或傳遞資料給瀏覽器。引用對應著import org.springframework.web.bind.annotation.RestContro

機器學習西瓜書學習筆記---------模型評估與選擇

1、經驗誤差與過擬合 經驗誤差:一般的,我們把學習器的實際預測輸出與樣本的真實輸出之間的差異稱為“誤差”,學習器在訓練集上的誤差稱為“訓練誤差”或“經驗誤差”,在新樣本上的誤差稱為“泛化誤差”;         通常我們想要的一個學習器是能夠通過訓練樣本的學習後能較準確的

機器學習西瓜書學習筆記---------神經網路

1. 神經元模型 神經網路/人工神經網路:由具有適應性的簡單單元組成的廣泛並行互連的網路。 神經網路學習:機器學習和神經網路兩個學科交叉的部分。 Neural Networks中的基本單元:神經元。 從電腦科學的角度,NN就是一個包含了大量引數的數學模型,該模型由若干個函式相互代入而