1. 程式人生 > >HTML常用標籤

HTML常用標籤

1、iframe標籤

iframe標籤用於在網頁內巢狀一個頁面
與a標籤配合使用:

<iframe name=xxx src="#"  frameborder="0"></iframe>

<a target=xxx href="http://qq.com"></a>

<a target=xxx href="http://baidu.com"></a>

src內容可以是相對路徑

2、a標籤

HTML a 元素 (或錨元素) 可以建立一個到其他網頁、檔案、同一頁面內的位置、電子郵件地址或任何其他URL的超連結。

(1)跳轉連結

<a href="http://qq.com" target="_blank">新建視窗</a>
<a href="http://qq.com" target="_self">當前視窗</a>
<a href="http://qq.com" target="_parent">父級視窗</a>
<a href="http://qq.com" target="_top">頂層視窗</a>
<a href="javascript:;"不做跳轉</a>

連結一般需要指定協議,否則預設為當前協議

(2)下載

<a href="http://qq.com" download>下載</a>

另:當一個響應的Content-type: application/octet-stream,瀏覽器也會以下載的形式接受請求。

(3)href的值

href後可以接:

  1. 連結
  2. 檔案的相對路徑
  3. 錨點
  4. javascript偽協議

只有錨點時不會發起請求

3、form標籤

form標籤會將使用者選中的內容全部提交至伺服器。
form標籤跳轉頁面時發起的是POST請求,a標籤跳轉頁面時發起的是GET請求。
如果form表單裡面沒有提交按鈕,則無法提交這個form,除非使用JS。

<form action="users" method="post">
	<input type="text" name="username">
	<input type="password" name="password">
	<input type="submit" value="提交">

Tips:
沒有使用https協議,則password是以明文形式傳輸。
form表單提交的中文會被轉換成UTF-8。
GET會把引數預設放在查詢引數的位置。

4、input/button標籤

input的屬性:input
button的屬性:button

input和label自動建立關聯:

<label><input type="check box" ></label>
<label><input type="text" name="xxx"><label>

select屬性常見用法:

<select name="group">
	<option value="">-</option>
	<option value="1">第一組</option>
	<option value="2">第二組</option>
	<option value="3" disabled>第三組</option>
	<option value="4" selected>第四組</option>

第三組無法被選中,預設選中第四組

如果一個form裡面只有一個button,則會自動升級為提交按鈕

table標籤

table裡面只能有三個標籤,標籤用法:

<table border=1>
	<colgroup>
		<col width=100>
		<col bgcolor=red>
	</colgroup>
	<thead>
		<tr>
		<th>1</th><th>2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		<td>1</td><td>2</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
		<td>1</td><td>2</td>
		</tr>
	</tfoot>