1. 程式人生 > >HTML常用標籤和常用屬性(筆記)

HTML常用標籤和常用屬性(筆記)

HTML標籤:
<meta> 定義文件的字元編碼。
<cite> 定義參考文獻的引用。
<q> 用於簡短的行內引用。
<blockquote> 將從周圍內容分離出來比較長的部分。
<em> 標籤用於強調文字,其包含的文字預設顯示為斜體。
<strong> 標籤用於強調文字,但它強調的程度更強一些,其包含文字通常以粗體顯示。
<b> 定義粗體文字。
<mark> 標籤表示標註,突出顯示的文字。
<i> 定義斜體文字。
<big> 定義大號字型。
<small> 定義小號字型。
<sup>

定義上標文字 如:x的平方。
<sub> 定義下標文字。
<code> 表示程式碼字型,即顯示原始碼。
<pre> 表示預定義格式的原始碼,即保留原始碼顯示中的空格大小。
<tt> 表示印表機字型。
<kbd> 表示鍵盤字型。
<dfn> 表示定義的術語。
<var> 表示變數的字型。
<samp> 表示程式碼範例。
<abbr> 可以定義簡寫或者縮寫。
<acronym> 標籤可以定義首字母縮寫。
<ins> 標籤定義插入到文件中的文字。
<del> 標籤定義文件中已被刪除的文字。
<bdo dir="rtl">
標籤可以改變文字流的方向。
<a href=""> 超連結。
<map><area> 兩個標籤配合使用,map定義熱點區域 area定義影象中映像中的區域。
<iframe src="URL"> 定義框架連結。
<ul></ul> 標識無序序列。
<ol><ol> 標識有序序列。
<li></li> 標識列表專案。
<dl></dl> 標識定義列表。
<dt></dt> 標識詞條。
<dd></dd> 標識解釋。
<menu><command>
配合使用,定義一個命令,當單機該命令時,將彈出提示對話方塊。
<menu><menuitem> 配合使用,定義使用者可以從彈出選單呼叫的命令/選單專案。
<caption> 定義表格標題。
<thead> 定義表頭結構。
<tbody> 定義表格主體結構。
<tfoot> 定義表格的頁尾結構。
<col> 在表格中定義針對一個或多個列的屬性值。 只能在table和colgroup標籤中使用。
<colgroup> 定義表格列的分組。通過該標籤,可以對列進行格式化。
<img src="url" alt="替換文字">
<pre></pre> 該標籤顯示程式碼內容。
<a></a> 設計超連結文字。
<mark> 標籤定義帶有記號的文字,表示頁面中需要突出顯示或高亮顯示的資訊。
<progress> 標籤可以標識任務的進度(程序)但不適用於表示度量衡。
<meter max="" value=""> 定義已知範圍或分數值內的標量、進度。例如,磁碟用量。
<time datatime="" pubdate=""定義釋出日期> 標籤定義公曆的時間或日期,時間和時區偏移是可選的。
<address> 標籤定義文件或文章的作者、擁有者的聯絡資訊。
<bdi> 標籤允許設定一段文字,使其脫離父元素的文字方向設定。
<wbr> 標籤定義在文字中的何處適合新增換行符。
<ruby> 標籤可以定義ruby註釋,即中文註音或字元。<rt> <rp> 與其一同使用。
<article> 定義文章塊 元素用來表示文件、頁面中獨立的、完整的、可以獨自被外部引用的內容。
<section> 定義內容塊 用於對網站或應用程式中頁面上的內容進行分割槽。
<nav> 定義導航塊 可以用作頁面導航的連結組,其中的導航元素連結到其他頁面或當前頁面的其他部分。
<aside> 定義側邊欄 用來表示當前頁面或文章的附屬資訊部分。可以包含側邊欄、廣告、導航條等。
<main> 定義主要區域 網頁中的主要內容,指網頁標題或應用程式中本頁主要功能直接相關。
<header> 定義標題欄 是一種具有引導和導航作用的結構元素,通常用來放置整個頁面或頁面內的一個內容區塊的標題。
<hgroup> 定義標題組 可以為標題或者子標題進行分組,通常它與h1-h6元素組合使用,一個內容塊中的標題及其子標題可以通過hgroup元素組成一組。
<footer> 定義腳註欄 作為內容塊的註腳,如在父級內容塊中添加註釋,或者在網頁中新增版權資訊等。

HTML屬性:
lang: 定義元素的語言程式碼或編碼。
dir:定義文字方向,包括ltr和rtl,分別表示從左向右和從右向左。
accesskey:定義訪問某元素的鍵盤快捷鍵。
tabindex: 定義元素的Tab鍵索引編號。
alt:定義元素的替換文字。
title:定義元素的提示文字。


/*表格table屬性*/:
border:定義表格邊框,值為整數,單位為畫素。
Cellpadding: 定義資料表單元格的補白,功能類似於padding屬性,但是功能較弱。
cellspacing: 定義資料單元格的邊界。功能類似於margin屬性,但是功能比較弱。
width:定義資料表的寬度。
frame:設定資料表的外邊框線顯示。
void(不顯示任一邊框線)above(頂端邊框線)below(底部邊框線)
     hsides(頂部和底部邊框線)lhs(左邊框線)rhs(右邊框線)
vsides(左和右邊框線)box(所有四周的邊框線)border(所有四周的邊框線)。
summary:定義表格的摘要,沒有CSS的對應屬性。
rules:設定資料表內邊線顯示。
none(禁止顯示內邊框線) groups(僅顯示分組內邊線)rows(顯示每行的水平線)
cols(顯示每列的垂直線)all(顯示所有的行和列的內邊線)。

/*單元格標籤<td><th>屬性*/:
colspan:定義單元格可橫跨的列數。
rowspan:定義單元格可橫跨的行數。
scope: 定義將表頭資料與單元格資料相關聯的方法。
取值包括:col(列的表頭)colgroup(列組的表頭)
                  row(行的表頭)rowgroup(行組的表頭)。
headers: 屬性可以為單元格指定表頭,該屬性的值是一個表頭名稱的字串,這些名稱都是用id屬性定義       的不同表頭單元格的名稱。
abbr: 屬性可以為單元格中的內容定義縮寫版本。
abbr屬性不會在Web瀏覽器中產生任何視角效果方面的變化,主要為機器檢索服務。
axis:對單元格進行分類,取值為一個類名。
char:定義根據那個字元來進行內容的對齊。
charoff:定義對齊字元的偏移量。
contentEditable: 允許使用者可以線上編輯元素中的內容。
contextmenu:定義<div>元素的上下文選單。上下文選單在使用者右鍵單擊元素時出現。
data-*:可以自定義使用者資料。
draggable:屬性可以定義元素是否可以被拖動。true/false/auto
dropzone:定義在元素上拖動資料時,copy/move/link
hidden: 屬性定義段落文字隱藏或顯示。true/false
spellcheck:屬性定義是否對元素進行拼寫和語法檢查。
transate:屬性定義是否應該翻譯元素內容。yes/no

/*輸入型別*/:
email:元素是一種專門用輸入Email地址的文字框。
url:元素提供用於輸入URL地址這類特殊文字的文字框。
number:用於提供用於輸入數值的文字框。
range:提供用於輸入包含一定範圍內數字值的文字框。
date; month; week; time; datetime; datetime-local:提供日期選擇器控制元件。
search:提供用於輸入關鍵詞的文字框。
tel:提供專門用於輸入電話號碼的文字框。
color:提供專門用於輸入顏色的文字框。

/*輸入屬性*/:
autocomplete:on|off 可以幫助使用者在input型別的輸入框中實現自動完成內容輸入。
autofocus:它可以實現在頁面載入時,某表單控制元件自動獲得焦點。
form: 該表單元素屬於指定的表單。 通過id-from連線。
formaction: 使用該屬性,則可以通過重寫表單的action屬性,實現將表單提交到不同的頁面中。
height和width:屬性用於設定image型別的input標籤的影象高度和寬度。
list和datalist:可以實現資料列表的下拉效果並兩者配合使用(label)可以實現網址備註功能。
max:設定輸入框所允許的最大值。
min:設定輸入框所允許的最小值。
step:為輸入框設定合法的數字間隔,或稱為步長 例:step="4" 則合法的數值是-4 0 4 8等。
multiple: 該屬性支援一次性選擇多個檔案,並且該屬性同樣支援新增的email型別。
pattern:屬性用於驗證input型別輸入框中使用者輸入的內容是否自定義的正則表示式想匹配。    如:pattern="[0-9] {6}規定了必須輸入0-9這樣的數字和6位數"。
placeholder: 屬性用於為input型別的輸入框提供一種提示(hint)這些提示可以描述輸入框期待使用者輸入的任何內容,再輸入框為空時顯示出現,二當輸入框獲得焦點時則會消失。
required:屬性用於定義輸入框填寫的內容不能為空,否則不允許使用者提交表單。

/*HTML新增控制元件*/:
datalist:元素用於為輸入框提供一個可選的列表,使用者可以直接選擇列表中的某一預設的項,從而避免輸入的麻煩。
keygen:是祕鑰對生成器,能夠使得使用者驗證更為可靠。使用者提交表單時會生成兩個鍵,公鑰,私鑰。
output:元素用於在瀏覽器中顯示計算結果或指令碼輸出,包含完整的開始和結束標籤。

/*表單屬性*/:
novalidate:屬性用於在提交表單時取消整個表單的驗證,即關閉對錶單內所有元素的有效性檢查。
checkValidity(): 呼叫該方法,可以顯示地對錶單內所有元素內容或單個元素內容進行有效性驗證,並返回布林值,以提示是否驗證通過。

特殊:
@font-face: 能夠載入伺服器端的字型檔案,讓客戶端瀏覽器顯示客戶端所沒有安裝的字型。
&middot → ·
&lt; → <
&gt; → >
&quot; → "
&copy; → unicode字元編碼。