1. 程式人生 > >HTML 常用的標簽

HTML 常用的標簽

元素 相對路徑 默認樣式 絕對路徑 rip mit name 嵌套 提交表單

1、iframe

常用於嵌套頁面

<iframe src="https://baidu.com" frameborder="0"></iframe>

常用屬性:

1)src,

iframe中打開的URL

2)frameborder

iframe默認樣式有邊框,可設置為0去除

3)name

iframe的名稱,可與a結合使用

2、a

常用於創建到其他網頁 \ 文件 \ 同一頁面內位置 \ 電子郵件 \ 任何其他URL的超鏈接。

<a href="https://baidu.com">跳去百度</a>

常用屬性:

1)href 為a的必須屬性,它可以設置為

- URL,

如href="https//baidu.com"(絕對路徑),或href="index.html"(相對路徑)

- 錨點,

如href="#",點擊後頁面會滾動到頂部,不發起請求

- mailto:郵箱地址,

如href="mailto:[email protected]",點擊可拉起郵箱寫郵件

- 查詢參數

如href="?abc=123",點擊後發起請求

- 偽協議,

如href="javascript: alert(1);" ,點擊後會有一個內容為1的彈窗

如href="javascript: ;" ,點擊後沒有任何反應

2)target,

指定在何處顯示鏈接的資源,它可以設置為

- _blank,新窗口打開

- _self,在自己當前頁面打開

- _parent,在父母的頁面打開,如沒有,則效果同_self

- _top,在祖宗頁面打開,如沒有,則效果同_self

- iframe name,在指定iframe窗口打開

<iframe src="https://baidu.com" frameborder="0" name="test"></iframe>
<a href="https://qq.com" target="test">在name為test的iframe裏打開新頁面</a>

3)download,

下載,建議使用download時,URL需有HTTP協議或HTTPS協議,如

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

如果不寫download,但http響應content-type為application/octet-stream,瀏覽器也會以下載的形式處理這個請求

3、form

表單

<form action="a.html" method="post">
    <input type="submit" value="submit"/>
</form>

form裏如果沒有提交按鈕且沒有js輔助,則需要有提交按鈕,才能進行提交

屬性:

1)action

處理這個form的程序所在的目標路徑

2)method

method默認是get,但一般會設置為post,用於提交表單內容

4、input

空標簽,一般與form搭配使用

<form action="a.html" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="submit"/>
</form>


屬性:

1)type

- button,按鈕

- checkbox,多選框

- text,文本框

- password,密碼輸入框

- submit,提交按鈕

- radio,單選框

2)name,定義元素名稱,必須添加,不然無法提交數據

5、button

按鈕

<button>按鈕</button>

屬性:

type,

- 默認為submit,可提交表單數據

- reset,重置所有組件為初始值

- button,沒有默認行為

6、table

<table style="border-collapse:collapse">
  <colgroup>
    <col width=200>
    <col width=200>
  </colgroup>
  <tr>
      <th>a</th>
      <th>b</th>
  </tr>
  <tr>
     <td>John</td> 
     <td>Doe</td>
  </tr> 
  <tr>
    <td>Jane</td>
    <td>Doe</td> 
  </tr>
</table>

1)colgroup,設定邊框長度

2) 樣式border-collapse:collapse可消除表格間距

3)如漏寫tbody,瀏覽器會自動補全

技術分享圖片

HTML 常用的標簽