HTML常用標籤的使用

樑廣銘發表於2019-02-16
HTML

一、常見標籤詳解

1、<iframe>標籤

HTML內聯框架元素 <iframe> 表示巢狀的瀏覽上下文，有效地將另一個HTML頁面嵌入到當前頁面中。在HTML 4.01中，文件可能包含頭部和正文，或頭部和框架集，但不能包含正文和框架集。但是，<iframe>可以在正常的文件主體中使用。每個瀏覽上下文都有自己的會話歷史記錄和活動文件。包含嵌入內容的瀏覽上下文稱為父瀏覽上下文。頂級瀏覽上下文（沒有父級）通常是瀏覽器視窗。

屬性

只詳細說明幾個重要的屬性

  • frameborder 取值為1時（預設值），告訴瀏覽器在當前iframe與其他iframe之間繪製邊框，取0時則無需繪製此邊框。
  • name 嵌入的瀏覽上下文（框架）的名稱。該名稱可以用作<a>標籤，<form>標籤的target屬性值，或<input> 標籤和 <button>標籤的formtaget屬性值。
  • height 以CSS畫素格式HTML5，或畫素格式HTML 4.01，或百分比格式指定frame的高度。
  • width 以CSS畫素格式HTML5，或以畫素格式HTML 4.01，或以百分比格式指定frame的寬度。
  • src 巢狀頁面的URL地址。使用遵守同源策略的 `about:blank` 來巢狀空白頁。

2、<a>標籤

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

屬性

  • download 此屬性指示瀏覽器下載URL而不是導航到URL，因此將提示使用者將其儲存為本地檔案。
  • href 這是一個必需屬性為錨定義一個超文字連結來源。這表示連結目標的URL或URL片段。URL片段是由一個hash符號（＃），它指定一個內部目標在當前文件中的位置（ID）開頭的名字。URL不限於網頁（HTTP）的檔案。URL可能使用瀏覽器所支援的任何協議。例如，檔案，FTP，大多數使用者代理mailto工作。PS:可以使用 href=”#top” 或者 href=”#” 連結返回到頁面頂部。除此之外href可以接：
    1、無協議的寫法，如：//qq.com
    2、連結到本頁某個部分#xxx 也可以是查詢語句?name=xxx 或者相對路徑./xxx.html
    3、偽協議javascript:alert(1); 點選不跳轉不重新整理javascript:;
  • target 該屬性指定在何處顯示連結的資源。 取值為標籤（tab），視窗（window），或框架（iframe）等瀏覽上下文的名稱或其他關鍵詞。以下關鍵字具有特殊的意義:
    _self: 當前頁面載入。此值是預設的，如果沒有指定屬性的話。
    _blank: 新視窗開啟。
    _parent: 載入響應到當前框架的父框架。如果沒有parent框架或者瀏覽上下文，此選項的行為方式相同_self。（巢狀一層iframe標籤，在上層開啟）
    _top: 載入響應進入頂層瀏覽（即，瀏覽上下文，它是當前的一個的祖先，並且沒有parent）。如果沒有parent框架或者瀏覽上下文，此選項的行為方式相同_self。（巢狀多層iframe標籤，最頂層開啟）

3、<form>標籤

HTML <form> 元素 表示了文件中的一個區域，這個區域包含有互動控制元件，用來向web伺服器提交資訊。

屬性

  • action 一個處理這個form資訊的程式所在的URL。這個值可以被 <button> 或者 <input> 元素中的 formaction 屬性過載（覆蓋）。
  • method 瀏覽器使用這種 HTTP 方式來提交 form. 可能的值有:
    1、post: 指的是 HTTP POST 方法 ; 表單資料會包含在表單體內然後傳送給伺服器.
    2、get: 指的是 HTTP GET 方法; 表單資料會附加在 action 屬性的URI中，並以 `?` 作為分隔符, 然後這樣得到的 URI 再傳送給伺服器. 當這樣做（資料暴露在URI裡面）沒什麼副作用，或者表單僅包含ASCII字元時，再使用這種方法吧。（如果是GET的話和a標籤功能一樣）
    這個值可以被 <button> 或者 <input> 元素中的 formmethod 屬性過載（覆蓋）。
  • name 這個form的名字。在HTML4中，這個用法不被推薦(作為替代，應該使用id). HTML5中，一個文件中的多個form當中，name必須唯一而不僅僅是一個空字串。
  • target 一個名字或者說關鍵字，用來指示在提交表單之後，在哪裡顯示收到的回覆. 在 HTML 4 裡, 這是一個用於 frame 的名字/關鍵字. 在 HTML5 裡, 這是一個用於 browsing context 瀏覽器上下文 的名字/關鍵字 (舉例來說, 標籤頁tab, 視窗window, or 或者行內 frame). 如下的關鍵字含有特別的含義:
    1、_self: 在當前HTML4或HTML5文件頁面重新載入返回值。這個是預設值。譯註：也就是說如果這個文件在一個frame中的話，self是在當前frame（document）中重新載入的，而不是整個頁面（window）。
    2、_blank: 以新的HTML4或HTML5文件視窗載入返回值。
    3、_parent: 在父級的frame中以HTML4或HTML5文件形式載入返回值，如果沒有父級的frame，行為和_self一致。
    4、_top: 如果是HTML 4文件: 清空當前文件，載入返回內容；HTML5: 在當前文件的最高階內載入返回值，如果沒有父級，和_self的行為一致。
    5、iframename: 返回值在指定frame中載入。

4、<input>標籤

HTML <input> 元素用於為基於Web的表單建立互動式控制元件，以便接受來自使用者的資料。

屬性

<input>標籤的屬性非常多，這裡我只寫幾種常用的屬性，更多可在MDN上查詢

  • name 控制元件的名稱，與表單資料一起提交。
  • value 控制元件的初始值. 此屬性是可選的，除非type 屬性是radio或checkbox。注意，當重新載入頁面時，如果在重新載入之前更改了值，Gecko和IE將忽略HTML原始碼中指定的值。
  • checked 如果該元素的type屬性的值為radio或者checkbox,則該布林屬性的存在與否表明了該控制元件是否是預設選擇狀態.
  • disabled 這個布林屬性表示此表單控制元件不可用。 特別是在禁用的控制元件中， click 事件 將不會被分發 。 並且，禁用的控制元件的值在提交表單時也不會被提交。如果 type 屬性為 hidden，此屬性將被忽略。
  • type 控制元件型別的顯示。如果這個屬性沒有指定，預設的型別是 text。可用的值包括：
    這裡只寫出幾個常用的型別，詳細可以檢視MDN
    1、button：無預設行為按鈕。
    2、checkbox： 核取方塊。必須使用 value 屬性定義此控制元件被提交時的值。使用 checked 屬性指示控制元件是否被選擇。也可以使用 indeterminate 指示覆選框在一種不確定狀態（大多數平臺上，顯示為一條穿過核取方塊的水平線）。
    3、password：一個值被遮蓋的單行文字欄位。使用 maxlength 指定可以輸入的值的最大長度 。
    4、radio：單選按鈕。必須使用 value 屬性定義此控制元件被提交時的值。使用checked 必須指示控制元件是否預設被選擇。在同一個”單選按鈕組“中，所有單選按鈕的 name 屬性使用同一個值； 一個單選按鈕組中是，同一時間只有一個單選按鈕可以被選擇。
    5、submit：用於提交表單的按鈕。
    6、text：單行欄位；換行會將自動從輸入的值中移除。

5、<button>標籤

HTML <button> 元素表示一個可點選的按鈕，可以用在表單或文件其它需要使用簡單標準按鈕的地方。 預設情況下，HTML按鈕的顯示樣式接近於 user agent 所在的宿主系統平臺（使用者作業系統）的按鈕， 但你可以使用 CSS 來改變按鈕的樣貌。

屬性

  • name button的名稱，與表單資料一起提交。
  • value button的初始值。它定義的值與表單資料的提交按鈕相關聯。當表單中的資料被提交時，這個值便以引數的形式被遞送至伺服器。
  • type button的型別。可選值：
    1、submit: 此按鈕提交表單資料給伺服器。未指定時，此值為預設值，或者如果此屬性動態變為空值或無效值。
    2、reset: 此按鈕重置所有元件為初始值。
    3、button: 此按鈕沒有預設行為。它可以有與元素事件相關的客戶端指令碼，當事件出現時可觸發。
    4、menu: 此按鈕開啟一個由指定<menu>元素進行定義的彈出選單。

6、<table>標籤

HTML的 table 元素表示表格資料 — 即通過二維資料表表示的資訊。

屬性

表格標籤支援 全域性屬性。所有屬性現在已經棄用（請使用CSS代替）。

相關

  • 其它表格相關的HTML元素: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>;
  • 可能特別有用的關於設定表格元素樣式的 CSS 屬性：
    width 控制表格的寬度；
    border, border-style, border-color, border-width, border-collapse, border-spacing 控制 單元格邊框，規則和框架方面；
    margin 和padding 設定特定的單元格內容樣式；
    text-align 和vertical-align 定義文字和單元格內容的對齊方式。

二、HTML標籤注意事項

HTML標籤是什麼

通過HTMl標籤是可以清晰的看出網頁的內部結構，簡單的來說就是通過標籤，我們可以來宣告這是個什麼東西，而不是用來決定這個東西是什麼樣子，例如：<strong>和<b>的預設CSS樣式是一樣的，為什麼還要有兩個標籤,這是因為strong是一個邏輯狀態，而bold是一個物理狀態。邏輯狀態分離內容和表現形式，使用邏輯狀態允許你用各種不同的方式來表達。比如你想把文字渲染成紅色，使用其它大小的字型、帶有下劃線或其他樣式，而不是加粗的樣式。必須要理解使用strong呈現出的表現形式不同於單純的加粗。 因為bold是一個物理狀態，他沒有區分表現形式和內容。如果讓bold做了加粗文字外的其它任何事情，都將會令人困惑而且也不符合邏輯。
很多人喜歡用<div>和<span>這樣的無含義標籤從頭用到尾，這樣是不對的，因為看起來會很費勁，都會要加上class，這樣就會降低程式碼可讀性，

關於塊級元素和內聯元素的區別

HTML標籤是沒有塊級元素和內聯元素的區別，什麼時候才有？只有在CSS裡面才有，例如，我們都以為<div>是塊級元素，但如果是下面這樣，還能說<div>是塊級元素嗎？

<style>
  div{
    display: inline;
  }
</style>

現在<div>就是內聯元素了，也就是說HTML無法控制一個元素是塊級元素還是內聯元素，也就是說HTML只是定義這是一個什麼東西，而不是去管它是什麼樣子。

相關文章