html5radio,html5radio標(biāo)簽

HTML5表單標(biāo)簽，與瀏覽器交互

1、form表單：網(wǎng)址與用戶交互，把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),類烏齊企業(yè)網(wǎng)站建設(shè),類烏齊品牌網(wǎng)站建設(shè),網(wǎng)站定制,類烏齊網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,類烏齊網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

語法： form method="傳送方式" action="服務(wù)器文件"

? ? ? form ： 標(biāo)簽是成對出現(xiàn)的，以開始，以/form結(jié)束。

? ? ? action ? ： 瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個PHP頁面(save.php)。

? ? ? method ? ： ?數(shù)據(jù)傳送的方式（get/post）。

2、文本輸入框、密碼輸入框

語法：

form

input type="text/password" name="名稱" value="文本" /

/form

type：

當(dāng)type=" text "時，輸入框為 文本 輸入框 ;

當(dāng)type=" password "時,?輸入框為 密碼輸入框。

name： 為文本框命名，以備后臺程序ASP 、PHP使用。

value： 為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)

3、占位符placeholder,屬性，有時候需要提示用戶輸入框需要輸入框的內(nèi)容

4、input標(biāo)簽中的數(shù)字框number類型

? ?input type="number"/? ：輸入框中只能輸入數(shù)字，輸入其他字符無效，輸入框右側(cè)會有加減符號，可以調(diào)整輸入數(shù)字的大小，瀏覽器不同表現(xiàn)不一致。

5、input標(biāo)簽中的網(wǎng)址框url類型

input type="url"/： 數(shù)字框的值需以http://或者h(yuǎn)ttps://開頭,且后面必須有內(nèi)容,否則表單提交的時候會報錯誤提示

6、input標(biāo)簽中的郵箱框的email類型

input type="email" / ： 表示該輸入框的類型為郵箱；數(shù)字框的值必須包含@；數(shù)字框的值@之后必須有內(nèi)容,否則會報錯誤提示。

7、textarea標(biāo)簽創(chuàng)建文本域

? 語法：? textarea rows=" 行數(shù)" cols=" 列數(shù)" 文本/textarea

8、label為input標(biāo)簽穿上衣服：如果你在 label 標(biāo)簽內(nèi)點擊文本，就會觸發(fā)此控件。就是說，當(dāng)用戶單擊選中該label標(biāo)簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動選中和該label標(biāo)簽相關(guān)連的表單控件上）

? ? 語法：label for="控件id名稱" （標(biāo)簽的?for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的?id 屬性值一定要相同。）

9、單選框、復(fù)選框

input type="radio/checkbox" value="值" name="名稱" checked="checked"/

type:? ? 當(dāng)? type="radio"? 時，控件為 單選框

當(dāng)? type="checkbox" ?時，控件為 復(fù)選框

value： 提交數(shù)據(jù)到服務(wù)器的值（后臺程序PHP使用）

name： 為控件命名，以備后臺程序 ASP、PHP 使用

checked： 當(dāng)設(shè)置 checked="checked" 時，該選項被默認(rèn)選中

? ? 注意： 同一組 的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

10、使用select option創(chuàng)建下拉菜單 （select標(biāo)簽里面只能放option標(biāo)簽，表示下拉列表的選項）

???設(shè)置selected="selected"屬性，則該選項就被默認(rèn)選中。

11、提交/重置 按鈕

? 語法：input?type="submit"value="提交"

? ??????????input? type="reset" ?value="重置"

html5新增的表單元素有哪些

html5新增的表單元素有以下幾種：

datalist，keygen，output三種無素。

1.datalist 元素

datalist 元素規(guī)定輸入域的選項列表。

列表是通過 datalist 內(nèi)的 option 元素創(chuàng)建的。

如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id。

2.keygen 元素

keygen 元素的作用是提供一種驗證用戶的可靠方法。

keygen 元素是密鑰對生成器（key-pair generator）。當(dāng)提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

私鑰（private key）存儲于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。

3.output 元素

output 元素用于不同類型的輸出，比如計算或腳本輸出。

根據(jù)具體問題類型，進行步驟拆解／原因原理分析／內(nèi)容拓展等。

具體步驟如下：／導(dǎo)致這種情況的原因主要是……

html5 單選按鈕為什么出現(xiàn)可以多選情況

需要給所有單選組設(shè)置同一個name，這樣一組內(nèi)的radio只能選一個，如

input?type="radio"?name="radio"/

input?type="radio"?name="radio"/

input?type="radio"?name="radio"/

html5常用標(biāo)記總結(jié)

一、文本標(biāo)簽

1.1 標(biāo)題標(biāo)記：hn align=”對齊方式”標(biāo)題文本/hn

注意：

1.標(biāo)題準(zhǔn)備了h1----h6的標(biāo)題，按照字號依次遞減(塊級元素)

2.align表示對齊方式，其值為left,center,right

1.2 字體標(biāo)記：font face=”字體名稱” size=”字號” color=”字體顏色” 文字/font

注意：中文網(wǎng)頁以黑體，宋體，3號字的效果顯示

1.3 段落標(biāo)記：p align=”對齊方式” 段落內(nèi)容/p

注意：p可以作為單標(biāo)記或雙標(biāo)記：

單標(biāo)記：段落與上文產(chǎn)生一個空行的間距。

雙標(biāo)記：段落與上下文之間產(chǎn)生一個空行的間距

1.4 換行標(biāo)記：

注意：br /表示換行，多次換行多次使用br /

1.5 預(yù)格式化標(biāo)記：pre...../pre

注意：預(yù)格式化標(biāo)記可將空格、制表符、回車符等忽略

1.6 轉(zhuǎn)義字符：轉(zhuǎn)義字符讓特殊字符顯示出來。

語法：實體名稱;

二、列表標(biāo)記

2.1 無序列表

ul type=”列表項的標(biāo)簽符”

li項目一/li

li項目二/li

li項目三/li

......

/ul

注意： type表示了項目符號：

disc(默認(rèn)) 實心圓

circle：空心圓

square：實心方塊

2.2 有序列表：

ol type=”列表項的標(biāo)記符” start=”起始值”

li項目一/li

li項目二/li

li項目三/li

......

/ol

注意：1. 1:1,2,3,.......

a:a,b,c,d,e.......

A:A,B,C,D,E.......

i:i,ii,iii,iv......

I:I,II,III,IV......

2.start表示起始值,從第幾個數(shù)開始計算

2.3 嵌套排列

ol type="1"

lih/li

lit/li

ul type="disc"

lim/li

lil/li

/ul

li5/li

/ol

2.4 分割線標(biāo)記：hr align=”對齊方式” size=”水平線高度” width=”水平線寬度”

color=”水平線顏色”

三、超鏈接標(biāo)記

3.1 文本鏈接：a href=”目標(biāo)URL” target=”目標(biāo)窗口”指針文本/a

注意： 1.href表示文本鏈接的目標(biāo)資源的URL

絕對地址和相對地址

絕對地址：在任何情況下都可以找到的地址（例如：網(wǎng)址）

相對地址：必須知道當(dāng)前所在，才能找到（../表示上一級目錄，/表示下級目錄）例子：../img/baidu.jpg 表示在當(dāng)前位置的上一層目錄下的img文件夾中的baidu.jpg 文件。

3.2 圖片標(biāo)記：img src=”圖片文件路徑” alt=”提示文本” height=”圖片高度” width=”圖片寬度”/

3.3 多媒體標(biāo)記

3.3.1 滾動字幕標(biāo)記：marquee可以實現(xiàn)文字或圖片的跑馬燈效果

marquee..../marquee

marquee的屬性：

behavior 指定了跑馬燈的效果：scroll(滾動)、slide(滑動)、alternate(交替)

bgcolor:跑馬燈的背景顏色

direction:跑馬燈的移動方向，left（左）、right(右)、up(上)、down(下)

scrolldelay:每次移動的延遲時間，單位毫秒

loop:跑馬燈運行次數(shù)，-1表示無限循環(huán)

height、width

hspace:左右空白寬度

vspace:上下空白寬度

3.3.2 嵌入音樂文件

audio src=”文件地址” 提示文字/audio

3.3.3 嵌入視頻文件

video src=”視頻文件地址” controls=”controls”提示文字/video

四、表格

4.1 表格基本語法：

table

tr

......

td單元格內(nèi)容/td

......

/tr

/table

注意：

table:聲明一個表格對象

tr:聲明一行

td:聲明一個單元格

4.2 表格的基本屬性

1.align 對齊方式：left、center、right

2.border:表格邊框

3.bordercolor:邊框顏色

4.bgcolor:表格背景顏色

5.background:背景圖片

6.height、width

4.3 單元格合并

1.rowspan:所跨的行數(shù)

2.colspan:所跨的列數(shù)

五、表單

5.1 表單標(biāo)簽：form action=”URL” method=”get|post” target=”...”/form

注意：form：該標(biāo)記中包含的數(shù)據(jù)將被提交到服務(wù)器或者電子郵件中

action:指定服務(wù)器端處理提交表單信息的程序是什么。URL地址或電子郵件地址

method:get/post:數(shù)據(jù)傳輸?shù)椒?wù)器的傳遞方法

target:服務(wù)器返回文檔結(jié)果的顯示位置：_blank:在新的瀏覽器窗口中打開

_self:在當(dāng)前瀏覽器中顯示

5.2 表單標(biāo)記

5.2.1 input標(biāo)簽：input type=”類型” name=”服務(wù)器 獲取用戶輸入信息的名字” value=”初始值”

注意：1.type類型（輸入類型）:

1. text:單行文本框

2. password:密碼輸入框

3. radio:單選按鈕 checked表示默認(rèn)

4. checkbox:復(fù)選框 checked表示默認(rèn)

5. submit:提交按鈕

6. reset:重置按鈕

7. button:普通按鈕

2.maxlength：輸入的最大長度

5.2.2 select標(biāo)簽

select name=”” size=”” multiple

option value=”選項1” 選項1

.......

option value=”選項n” 選項n

/select

注意：name:服務(wù)器 獲取用戶輸入信息的名字

value ：初始值

option：下拉框的內(nèi)容

multiple:多選，若沒有multiple則是單選

selected:表示默認(rèn)選項

size:表示長度

5.2.3 textarea 標(biāo)簽：textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”

/textarea

注意: name：多行文本框的名稱

cols：一行可容納的字符數(shù)

rows：表示可顯示額的行數(shù)

wrap:virtual和phycal控制自動換行

簡述幾種html5的常用標(biāo)簽和新增屬性的含義

HTML5 新增常用元素

HTML5的聲明為：!DOCTYPE html

它不用再像之前的版本一樣在聲明中引用DTD。DTD(document type definition)定義合法的XML文檔構(gòu)建模塊，它使用一系列合法的元素來定義文檔的結(jié)構(gòu)。在HTML中，DTD規(guī)定了標(biāo)記語言的規(guī)則，使瀏覽器能正確地呈現(xiàn)內(nèi)容。而HTML5不基于SGML，所以不需要引用DTD。

文檔結(jié)構(gòu)元素

article: 定義可以獨立于內(nèi)容其余部分的完整獨立內(nèi)容塊。

header: 頁面頂部。

nav: 導(dǎo)航欄(邊導(dǎo)航,頁面導(dǎo),底部導(dǎo))標(biāo)簽。

hgroup: 定義多個標(biāo)題時。

section: 內(nèi)容分塊.可設(shè)置cite屬性。

aside: 側(cè)邊欄，定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。

figure: 代表一個和文檔有關(guān)的圖例。

figcaption: 代表一個圖例的說明（標(biāo)題）。

footer: 頁面底部。

dialog:定義對話框。

嵌入元素

video 代表一段視頻 及其視頻文件和字幕，并提供了播放視頻的用戶界面。屬性有：

src

autoplay（控制自動播放）

loop（播放完后是否重新播放）

controls（顯示用戶界面）

width

height

audio 代表一段聲音 ，或音頻流。 標(biāo)簽內(nèi)的文字會在標(biāo)簽不被支持時呈現(xiàn)。屬性有：

src

autoplay

loop（播放次數(shù)，為-1時循環(huán)播放）

controls

volume(音量)

source 為 video 或 audio 這類媒體元素指定媒體源。屬性有src\type（指定資源的MIME類型）。

track為 video 或 audio 這類媒體元素指定文本軌道（字幕） 。屬性有：

kind（數(shù)據(jù)類型）

src

srclang（track文本數(shù)據(jù)的語言）

label 當(dāng)列出可用的text tracks時，給瀏覽器使用的text track的標(biāo)題，這種標(biāo)題是用戶可讀的。

注意：一個media 元素的任意兩個 track 子元素不能有相同的 kind, srclang, 和 label屬性。

canvas 代表位圖區(qū)域，可以通過腳本在它上面實時呈現(xiàn)圖形，如圖表、游戲繪圖等。

embed 代表一個嵌入的外部資源，如應(yīng)用程序或交互內(nèi)容。屬性有：

width

height

src

type 用于選擇插件實例化的 MIME 類型。

表單元素

meter代表滑動條。顯示實時狀態(tài)。屬性有:

value 當(dāng)前數(shù)值，如果給定的值不在最小值和最大值之間，它的值就等于它最接近的一端的值。

min 值域的最小邊界值，默認(rèn)為0

max 值域的最大邊界值，默認(rèn)為1

low 定義了低值區(qū)間的上限值，當(dāng)數(shù)值處于low-min或high-max時就會呈現(xiàn)不同的樣式。

high 定義了高值區(qū)間的下限值。

optimum 最優(yōu)值

output代表計算值 。

for 其它影響計算結(jié)果的標(biāo)簽的ID，可以多個。

form 與當(dāng)前標(biāo)簽有關(guān)聯(lián)的form（從屬的表單）。該屬性的值必須是當(dāng)前文檔內(nèi)的表單元素的ID。如果未指明該屬性，output標(biāo)簽必須是一個form的后代標(biāo)簽。該屬性的用處在于可以讓output標(biāo)簽脫離form標(biāo)簽，存在于一個網(wǎng)頁文檔的任意位置。

name

form oninput="result.value=parseInt(a.value)+parseInt(b.value)"

input type="range" name="b" value="50" / +

input type="number" name="a" value="10" / =

output name="result"/output

/form

1

2

3

4

5

progress代表進度條，表示任務(wù)過程，屬性有max（任務(wù)總量）\value。

datalist為Input標(biāo)記定義一個下拉列表，配合option標(biāo)簽。

其他

details創(chuàng)建一個掛件，僅在被切換成展開狀態(tài)時，它才會顯示內(nèi)含的信息。

summary 是details 元素的子元素，表示其綜述或標(biāo)題 。

mark代表一段需要被高亮的引用文字。

ruby表示需要被ruby 注釋 標(biāo)記的文本，如中文漢字和它的拼音。

rt 表示ruby 注釋 ，如中文拼音。

rp 在ruby 注釋兩邊的額外插入文本 ，用于在不支持 ruby 注釋顯示的瀏覽器中提供友好的注釋顯示。

ruby夼rp(/rprtkuang/rtrp)/rp/ruby

1

順便一提，html5刪除了的元素：

純表現(xiàn)的：basefont\big\center\font\s\strike\tt\u

對可用性有負(fù)面影響的：frame\frameset\noframes

產(chǎn)生混淆的：acronym\applet\isindex\dir

同時HTML5也對某些元素進行了重定義，改變了它們的語言內(nèi)容但表現(xiàn)不變。如b標(biāo)簽、i標(biāo)簽，仍然表示為粗體、斜體，但代表了一段需要被關(guān)注的文字、一段不同性質(zhì)的文字，如技術(shù)術(shù)語、外文短語等。

HTML5屬性變化

新增類型

email \ url \ tel \ number

Datepickers:date \ month \ week（iphone不兼容） \ time \ datetime(UTC格式，安卓、i6+、PC端不兼容) \ datetime-local

針對PC端：range(水平桿，兩邊為min和max) \ search（有內(nèi)容時右邊出現(xiàn)×）\ color（顏色選擇框）

表單屬性

autocomplete屬性：自動完成功能，適用于標(biāo)簽，以及以下類型的input標(biāo)簽：text \ search \ url \ tel \ email \ password \ datepickers \ range \ color

form autocomplete="on" //on為打開，Off為關(guān)閉

/form

1

2

autofocus屬性：域自動地獲得焦點，適用于所有的標(biāo)簽的類型

input autofocus="autofocus"/

1

multiple屬性：規(guī)定輸入域中可選擇多個值，適用于email \ file類型的標(biāo)簽

input type="file" multiple="multiple" /

1

placeholder屬性：提供一種提示，描述輸入域所期待的值，適用于text \ search \ url \ tel \ email \ password 類型的標(biāo)簽

input type="text" placeholder="please input your name!"/

1

required屬性：規(guī)定必須在提交之前填寫輸入域，且必須按照相應(yīng)域的格式，如，email域必須要有@、郵件域。適用于text \ search \ url \ tel \ email \ password \ datepickers number \ checkbox \ radio \ file 類型的標(biāo)簽

input type="email" requried="required" /

1

鏈接屬性

sizes

link rel="icon" href="icon.gif" type="image/gif" sizes="16*16"

//網(wǎng)頁頭部標(biāo)題的logo，可根據(jù)不同分辨率引用不同的sizes

//type為該圖標(biāo)的類型，說明該圖標(biāo)格式為gif

1

2

3

target

base href="......" target="_blank"

1

base標(biāo)簽寫在head標(biāo)簽內(nèi)。target屬性控制整個頁面所有超鏈接的默認(rèn)打開方式（本來是_self），href指定頁面中所有相對鏈接的基準(zhǔn) URL；

超鏈接的屬性

media=“handheld”（表示對設(shè)備進行優(yōu)化，handheld對“手持”設(shè)備進行支持，tv對”電視“設(shè)備進行支持）；

hreflang=“zh”（設(shè)置語言，zh表示是簡體中文）

rel=“external”（設(shè)置超鏈接的引用，external表示其為外部鏈接）

其他屬性

script的屬性

defer：加載完腳本后并不執(zhí)行（延遲執(zhí)行），而是等整個頁面加載完之后再執(zhí)行，只有ie兼容

async：對腳本進行異步加載，加載完腳本后立刻執(zhí)行，而不用等整個頁面都加載完才能執(zhí)行。

如果 async=“async”：腳本相對于頁面的其余部分異步地執(zhí)行（當(dāng)頁面繼續(xù)進行解析時，腳本將被執(zhí)行）

如果不使用 async 且 defer=“defer”：腳本將在頁面完成解析時執(zhí)行

如果既不使用 async 也不使用defer：在瀏覽器繼續(xù)解析頁面之前，立即讀取并執(zhí)行腳本

ol的屬性

start：設(shè)置序號的起始值

reversed：倒敘排列 reversed=“reversed”

html的屬性：manifest

!DOCTYPE HTML

html manifest="demo.appcache"

...

/html

1

2

3

4

通過在頁面中設(shè)置manifest屬性或在manifest文件中加入頁面，可以將此頁面緩存，這樣我們就可以離線訪問，且獲得更快的速度，因為已緩存資源加載得更快。還可以減少服務(wù)器負(fù)載。

一旦文件被緩存，則瀏覽器會繼續(xù)展示已緩存的版本，即使修改了服務(wù)器上的文件。為了確保瀏覽器更新緩存，需要更新 manifest 文件。

style的屬性scoped：內(nèi)嵌CSS,可以寫在任何位置，而不止是head。不過這樣會違反我們低耦合的原則。

style scoped

...

style

文章標(biāo)題：html5radio,html5radio標(biāo)簽
文章分享：http://m.jiaotiyi.com/article/dssgooi.html