HTML 常用標簽

HTML 常用標簽

1. iframe 標簽

iframe 標簽主要用途是嵌套頁面,目前使用較少,只有一些遺留項目在用。具體可以參考<iframe>
例子:

<!DOCTYPE html>
<html>
    <head>
        <title>iframe</title>
        <style>
            iframe {
            width: 100%;
            height: 500px;
            }
        </style>
    </head>
    <body>
        <!-- frameborder 用來消除 iframe 的邊框 -->
        <iframe name="xxx" src="http://qq.com" frameborder="0"></iframe>
        <a target="xxx" >QQ</a>
        <a target="xxx" >baidu</a>
    </body>
</html>

2. a 標簽

a 標簽主要用途是跳轉(zhuǎn)頁面(HTTP GET 請求)。具體可以參考<a>

a 標簽的常用屬性:

  • target

    注意:使用target時,考慮添加 rel="noopener norefferrer" 以防止針對 window.opener API 的惡意行為。

    • _self:當前頁面加載(默認)
    • _blank:新窗口打開
    • _parent:響應(yīng)到當前框架的HTML4父框架或當前的HTML5瀏覽上下文的父瀏覽上下文。如果沒有,方式同_self。
    • _top:HTML4響應(yīng)到完整的、原來的窗口,HTML5響應(yīng)到頂層瀏覽上下文。如果沒有,方式同_self。
  • download

    這是HTML5出現(xiàn)的新屬性。此屬性指示瀏覽器下載URL而不是導(dǎo)航到它,因此將提示用戶將其保存為本地文件。如果屬性有一個值,那么它將在Save提示符中作為預(yù)填充的文件名使用(如果用戶需要,仍然可以更改文件名)。

  • href

    注意: 可以使用 href="#top" 或者 href="#" 鏈接返回到頁面頂部。這種行為是HTML5的特性。

    • 錨點,頁面內(nèi)跳轉(zhuǎn),只有它不發(fā)起請求。例子:href="#foo"
      其他的都會發(fā)起請求,比如href="?foo",點擊后也會發(fā)起一個帶上?fooGET請求。
    • 無協(xié)議絕對地址。例子:
    • 相對地址。例子:href="xxx.html"
    • JavaScript偽協(xié)議。例子:href="javascript: alert(123);"
      在實際場景中,如果你希望有個點擊它不要有任何跳轉(zhuǎn)的 a 標簽,可以這么使用:<a href="javascript: ;">hello</a>

3. form 標簽

form 標簽主要用途是跳轉(zhuǎn)頁面(一般是HTTP POST 請求)。具體可以參考<form>

注意點:

  • form 標簽中沒有提交按鈕則無法提交這個 form,除非你用 js
  • form 標簽主只支持 GET 請求和 POST 請求,但主要用來提交 POST 請求
  • 發(fā)送 POST 請求時,from 標簽中的 input 標簽的 name 屬性會被當做 HTTP 請求的第四部分(Form Data)的 key
    發(fā)送 GET 請求時,from 標簽中的 input 標簽的 name 屬性會被當做 url 的查詢參數(shù)
    (你可以通過修改 from 標簽的 action 來使得 POST 請求支持查詢參數(shù),但不能使得 GET 請求有第四部分。)
  • form 標簽也有 target 屬性,用法類似 a 標簽

4. input / button

input 標簽具體可以參考 <input>
button 標簽具體可以參考 <button>

注意點:

  • input / button 的區(qū)別:是否為「空標簽」(input 標簽沒有子元素)
  • 在 form 中:
    • <input type="button" value="button">沒有提交功能(只是普通按鈕)
    • <input type="submit" value="submit">有提交功能
    • <button type="submit">submit</button>有提交功能
    • <button>button</button>有提交功能(自動升級)
  • 用 label 標簽將 input 標簽包起來,可以直接產(chǎn)生類似<input type="checkbox" name="cb" id="cb"><label for="cb">checkbox</label>的關(guān)聯(lián)效果
  • input 標簽的 type 為radio,幾個 input 標簽的 name 一致時,才會有不被同時選中的效果

5. table 標簽

table 標簽主要用途是展示數(shù)據(jù)。具體可以參考<table>

注意點:

  • table 標簽內(nèi),直接的子標簽只能有 thead、tbody、tfoot、colgroup這4個
  • thead、tbody、tfoot這三個的順序無論怎么改變,都會被瀏覽器自動糾正為thead、tbody、tfoot
  • table 的 border 默認是有空隙的,可以在 CSS 中設(shè)置border-collapse: collapse;改為沒有空隙
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、常用標簽 1. iframe 標簽 嵌套頁面。需要新開一個窗口,速度比較慢。 iframe 直接使用 直接打開...
    養(yǎng)樂多__閱讀 697評論 0 5
  • iframe a form input select textarea table iframe iframe單獨...
    xyyojl閱讀 701評論 0 1
  • HTML(超文本標記語言——HyperText Markup Language)是構(gòu)成 Web 世界的一磚一瓦。它...
    長鯨向南閱讀 574評論 0 0
  • 對于新手來說,HTML的框架可以可以用IDE來解決,但是標簽的用法還是需要通過自己的理解記憶來靈活運用 <a>標簽...
    生命在流逝閱讀 757評論 0 0
  • HTML可以說是前端修煉中基礎(chǔ)中之基礎(chǔ),個人認為即使被很多人覺得是最為簡單的,也應(yīng)該盡可能的去了解吃透,此博客總結(jié)...
    Save_Onfir3閱讀 357評論 0 0

友情鏈接更多精彩內(nèi)容