標籤:

常用的HTML標籤

常用的HTML標籤

HTML標籤是具有語義化的特徵的,通俗不嚴謹的解釋就是:明白標籤的意思大概就可以知道標籤的用途。

正經的解釋:選擇合適的標籤、使用合理的代碼結構,便於開發者和視覺障礙人士閱讀,同時讓瀏覽器的爬蟲和機器很好地解析。

以以下標籤為例:

1、a 標籤

a 標籤的全稱為anchor,錨的意思,可以指引固定一個方向。官方描述:

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

a 標籤的href屬性:

這是<a>標籤必需寫的一個屬性,為錨定義一個超文本鏈接來源,表示鏈接目標的URL或URL片段。URL不限於網頁(HTTP)的文件。URL可以是使用的瀏覽器所支持的任何協議。

幾種用法:

  1. qq.com 表示繼承當前頁面的協議
  2. #xxx 錨標記用法,不發送請求
  3. ?name=qqq 請求參數用法,發送請求
  4. ./xxx.html 相對路徑用法,發送請求
  5. javascript:alert(1); 和js一樣的效果
  6. javascript:; 不跳轉,什麼都不做。

5和6都屬於偽協議用法,來處理一些特殊的需求,比如,刷新頁面但是不發送請求,什麼都不變。

a 標籤的download屬性:

此屬性指示瀏覽器下載URL而不是導航到URL,因此將提示用戶將其保存為本地文件。

a 標籤的target屬性:

該屬性指定在何處顯示鏈接的資源。 取值為標籤(tab),窗口(window),或框架(iframe)等瀏覽上下文的名稱或其他關鍵詞。

  1. _self: 當前頁面載入,沒有指定屬性的話,此值是默認的。
  2. _blank: 新窗口打開,即到一個新的瀏覽器窗口瀏覽。
  3. _parent: 載入響應到當前框架的父框架瀏覽上下文。如果當前頁面沒有parent框架,此選項的行為方式相同_self。
  4. _top: HTML5中:載入響應進入頂層瀏覽上下文(即,瀏覽上下文,它是當前的一個的祖先,並且沒有parent)。如果沒有parent框架,此選項的行為方式相同_self。

2、iframe 標籤

<iframe>表示嵌套的瀏覽上下文,有效地將另一個HTML頁面嵌入到當前頁面中。

<iframe>經常是和<a>一起使用的,<iframe>的name屬性可以和<a>結合一起使用,比如:

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

<a target=「xxx」href=「qq.com」>QQ</a>

這兩句表示<a>中的鏈接是在名為xxx的<iframe>中打開。

3、form 標籤

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

form的常用屬性:

  • action: 表單提交的地址
  • method:提交保單的方法
  • target:在何處打開action

4、button 標籤

<button>元素表示一個可點擊的按鈕,可以用在表單或文檔其它需要使用簡單標準按鈕的地方

button的常用屬性:

name表示button的名稱,與表單數據一起提交。

type表示button的類型。可選值:

  • submit: 此按鈕提交表單數據給伺服器。未指定時,此值為默認值。
  • reset: 此按鈕重置所有組件為初始值。
  • button: 此按鈕沒有默認行為。它可以有與元素事件相關的客戶端腳本,當事件出現時可觸發,不會提交數據到web伺服器。
  • menu: 此按鈕打開一個由指定<menu>元素進行定義的彈出菜單。

value表示button的初始值。它定義的值與表單數據的提交按鈕相關聯。當表單中的數據被提交時,這個值便以參數的形式被遞送至伺服器。

常見的語義化標籤:

HTML標籤 英文全稱 中文釋義

a Anchor 錨

kbd Keyboard 鍵盤(文本)

samp Sample 示例(文本)

var Variable 變數(文本)

tt Teletype 印表機(文本)

code Code 源代碼(文本)

pre Preformatted 預定義格式(文本 )

strong Strong 加重(文本)

em Emphasized 加重(文本)

b Bold 粗體(文本)

i Italic 斜體(文本)

br Break 換行

center Centered 居中(文本)

font Font 字體

div Division 分隔

span Span 範圍

ol Ordered List 排序列表

ul Unordered List 不排序列表

li List Item 列表項目

dl Definition List 定義列表

dt Definition Term 列表的項

dd Definition Description 列表每一項的描述

p Paragraph 段落

hr Horizontal Rule 水平尺

href hypertext reference 超文本引用

alt alter 替用(一般是圖片顯示不出的提示)

src Source 源文件鏈接

tr table row 表格中的一行

th table header cell 表格中的表頭

td table data cell 表格中的一個單元格

以上僅供個人學習使用。


推薦閱讀:

區塊鏈真的是第三次科技浪潮嗎?
我們現在所生活的世界是否由人類到達奇點之後由超級AI所製造的,真正的我們不停的徘徊在這條時間線里?
一些關於國內腿足式機器人公司&研究所的信息分享
機器人秒還原魔方
2018上半年筆記本電腦推薦

TAG:HTML5 | 科技 |