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' 來嵌套空白頁。

二、<a>標籤

HTML <a> 元素 (或錨元素) 能夠建立一個到其餘網頁、文件、同一頁面內的位置、電子郵件地址或任何其餘URL的超連接。

屬性

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

三、<form>標籤

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

屬性

• action 一個處理這個form信息的程序所在的URL。這個值能夠被 <button> 或者 <input> 元素中的 formaction 屬性重載（覆蓋）。
• method 瀏覽器使用這種 HTTP 方式來提交 form. 可能的值有:
  一、post: 指的是 HTTP POST 方法 ; 表單數據會包含在表單體內而後發送給服務器.
  二、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). 以下的關鍵字含有特別的含義:
  一、_self: 在當前HTML4或HTML5文檔頁面從新加載返回值。這個是默認值。譯註：也就是說若是這個文檔在一個frame中的話，self是在當前frame（document）中從新加載的，而不是整個頁面（window）。
  二、_blank: 以新的HTML4或HTML5文檔窗口加載返回值。
  三、_parent: 在父級的frame中以HTML4或HTML5文檔形式加載返回值，若是沒有父級的frame，行爲和_self一致。
  四、_top: 若是是HTML 4文檔: 清空當前文檔，加載返回內容；HTML5: 在當前文檔的最高級內加載返回值，若是沒有父級，和_self的行爲一致。
  五、iframename: 返回值在指定frame中加載。

四、<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
  一、button：完好省行爲按鈕。
  二、checkbox： 複選框。必須使用 value 屬性定義此控件被提交時的值。使用 checked 屬性指示控件是否被選擇。也可使用 indeterminate 指示覆選框在一種不肯定狀態（大多數平臺上，顯示爲一條穿過複選框的水平線）。
  三、password：一個值被遮蓋的單行文本字段。使用 maxlength 指定能夠輸入的值的最大長度 。
  四、radio：單選按鈕。必須使用 value 屬性定義此控件被提交時的值。使用checked 必須指示控件是否缺省被選擇。在同一個」單選按鈕組「中，全部單選按鈕的 name 屬性使用同一個值； 一個單選按鈕組中是，同一時間只有一個單選按鈕能夠被選擇。
  五、submit：用於提交表單的按鈕。
  六、text：單行字段；換行會將自動從輸入的值中移除。

五、<button>標籤

HTML <button> 元素表示一個可點擊的按鈕，能夠用在表單或文檔其它須要使用簡單標準按鈕的地方。 默認狀況下，HTML按鈕的顯示樣式接近於 user agent 所在的宿主系統平臺（用戶操做系統）的按鈕， 但你可使用 CSS 來改變按鈕的樣貌。

屬性

• name button的名稱，與表單數據一塊兒提交。
• value button的初始值。它定義的值與表單數據的提交按鈕相關聯。當表單中的數據被提交時，這個值便以參數的形式被遞送至服務器。
• type button的類型。可選值：
  一、submit: 此按鈕提交表單數據給服務器。未指定時，此值爲默認值，或者若是此屬性動態變爲空值或無效值。
  二、reset: 此按鈕重置全部組件爲初始值。
  三、button: 此按鈕沒有默認行爲。它能夠有與元素事件相關的客戶端腳本，當事件出現時可觸發。
  四、menu: 此按鈕打開一個由指定<menu>元素進行定義的彈出菜單。

六、<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 定義文本和單元格內容的對齊方式。

2、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只是定義這是一個什麼東西，而不是去管它是什麼樣子。