1. 程式人生 > >HTML常用行標籤和表單控制元件

HTML常用行標籤和表單控制元件

HTML常用的行級標籤

行內元素不獨佔一行

HTML連結 a標籤

href屬性是必須要的屬性,target指定連線以何種方式開啟,_blank用新視窗開啟,預設是self原視窗開啟。

<a href="連結" target="_blank">連結文字</a>

影象標籤 img(是一個單標籤,不需要閉合)

設定title屬性,當滑鼠指標放在圖片上時,會顯示title屬性的值
圖片標籤一般只設置高度或者寬度,另一個尺寸會等比例縮放,如果兩個尺寸都設定的話,圖片會變形

<img src="圖片地址(可以是網路地址,也可以是本體圖片的路徑)" alt="圖片載入失敗時顯示的資訊">

span 無語意的行級元素,一般配合CSS來使用

<span style="color:red">內容</span>

HTML中的的實體字元,當網頁不能正常大小於號等字元的時候,可以使用實體字元顯示

2&gt;1  		&gt;  是大於號

2>1

1&lt;2              &lt;  是小於號

1<2
還有其他的實體字元,具體在使用的時候可以查閱

1&nbsp;&nbsp;&nbsp;2        		&nbsp; 是空格

表單控制元件

常用的屬性:
disabled:禁用屬性
readonly:只讀
placeholder=“提示的內容”:指定輸入框中的提示資訊

action:指定表單資料的提交地址
method:指定資料傳輸的方式,預設為GET方式
	GET:通過URL地址傳輸資料,所有資料都會顯示在URL位址列中,相對來說不安全,而且也會有資料的大小限制
	POST:不通過URL地址傳參,相對來說安全,傳輸的資料沒有大小限制,一般表單指定使用POST方式來傳輸
enctype:如果有檔案上傳則必須新增這個屬性,屬性值 "multipart/form-data" 用於上傳的檔案轉碼	

<form action="#" method="GET" enctype="multipart/form-data">
	//表單控制元件必須要填寫name屬性,作為資料的鍵
	//value是設定表單內容的預設值,一般不設定,用來獲取使用者的輸入
	//type屬性指定表單的型別(普通文字,密碼框,複選單選框)
            使用者名稱:<input type="text" name="username">
            <br>
            密&nbsp;&nbsp;&nbsp;碼:<input type="password" name="password">    //password輸入內容不可見
            <br>
            
        //一組單選框的name值必須相同,且必須有name和value屬性,value作為傳送的具體值
            <input type="radio" name="gender" value="1"> 男
            <input type="radio" name="gender" value="0"> 女
            
	//多選框也必須指定name和value屬性,同上
	    <input type="checkbox" name="love[]" value="z"> 足球
	    <input type="checkbox" name="love[]" value="l"> 籃球
			
	//下拉框也要指定name和value屬性值,option標籤代表一個選項,必須配合使用
		<select name="xl">
	               <option value="1">小學</option>
	               <option value="2">高中</option>
	               <option value="3">大學</option>
		</select>
          	
       #### 提交按鈕
	   <input type="submit" value="確定">
	   <button>確定</button>	
       #### 重置按鈕,可以重置表單內輸入的內容重新輸入
	   <input type="reset">
       #### 隱藏域, 不顯示在頁面上的內容,但是隨表單一起提交到後代的資料
	   <input type="hidden" name="id" value="0">
</form>