整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML5從入門到精通，兄弟連京修隨堂筆記（二）HTML的框架結(jié)構(gòu)，每日都有新內(nèi)容，訂閱走一波
HTML5的form標簽
問：網(wǎng)站怎樣與用戶進行交互? 答案:使用HTML表單(form).
表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端的程序(比如ASP,PHP)的HTML元素,服務(wù)器端程序可以處理表單傳過來的數(shù)據(jù),從而進行一些動作.比如,bbs,blog的登陸系統(tǒng),購物車系統(tǒng)等.
form 標簽 -- 代表HTML表單
form標簽是成對出現(xiàn)的,以<form>開始,以</form>結(jié)束
常用屬性.
action -- 瀏覽者輸入的數(shù)據(jù)被傳送到的地方,如一個PHP頁面(dofm.php)
method -- 數(shù)據(jù)傳送的方法
get -- 此方式傳遞數(shù)據(jù)量少,但是傳遞的信息顯示在網(wǎng)址上。
post --此方式傳送信息多,而且不會把傳遞信息顯示在網(wǎng)址上
enctype -- 表示將數(shù)據(jù)發(fā)送到服務(wù)器時瀏覽器使用的編碼類型
application/x-www-form-urlencoded -- 窗體數(shù)據(jù)被編碼為名稱/值對.這是標準的編碼格式.默認的。
multipart/form-data -- 窗體數(shù)據(jù)被編碼為一條消息,頁上的每個控件對應(yīng)消息中的一個部分.
text/plain -- 以純文本形式進行編碼,其中不含任何控件或格式字符
HTML5 input標簽
input 標簽 -- 代表HTML表單的單行輸入域
input標簽是單獨出現(xiàn)的,<input />
屬性.
type -- 代表一個輸入域的顯示方式(分為輸入型,選擇型,點擊型)
name – 此表單項名稱
value -- 輸入域的值
size -- 輸入域的長度
maxlength -- 輸入域最多可以輸入文字的長度
checked -- 如果是選擇型的輸入域,代表已經(jīng)被選擇，值為checked
readonly -- 輸入域可以選擇,但是無法修改 ，值為readonly
disabled -- 輸入域無法獲得焦點,無法選擇,以灰色顯示,在表單中不起任何作用。如：disabled="disabled"
accesskey -- 表單的快捷鍵訪問方式，如值為h即按Alt+h快捷鍵。
tabindex -- 輸入域的"tab"鍵遍歷順序
src -- 當使用圖片來表示按鈕時,代表圖片的位置(URI)
alt -- 用來替換提交按鈕的圖片(當在input的src屬性定義的圖片無法顯示時)提示信息。
type屬性 -- 代表HTML表單,單行輸入域(框)的表現(xiàn)方式
type屬性取值:
text -- 文字輸入域(輸入型)
password -- 也是文字輸入域,但是輸入的文字以密碼符號'*'顯示(輸入型)
file -- 可以輸入一個文件路徑(輸入型)
checkbox -- 復選框.可以選擇零個或多個(選擇型)
radio -- 單選框.只可以選擇一個而且必須選擇一個(選擇型)
hidden -- 代表隱藏域,可以傳送一些隱藏的信息到服務(wù)器
button -- 按鈕(點擊型)
image -- 使用圖片來顯示按鈕,使用src屬性指定圖像的位置(就像img標簽的src屬性)(點擊型)
submit -- 提交按鈕,表單填寫完畢可以提交,把信息傳送到服務(wù)器.可以使用value屬性來顯示按鈕上的文字(點擊型)
reset -- 重置按鈕,可以把表單中的信息清空(點擊型)
select 標簽 -- 選擇列表標簽
select標簽是成對出現(xiàn)的,以<select>開始,以</select>結(jié)束
此標簽中的每對option標簽代表一個選擇項
屬性:
name – 表單項名稱
size -- 選擇域的高度
multiple -- 可以有多個選擇
disabled -- 以灰色顯示,在表單中不起任何作用
tabindex -- 使用"tab"鍵的遍歷順序
嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變?yōu)閃eb前端高手哦！
志同道合的小伙伴跟我一起學習交流哦！
1 html5文檔類型和字符集
Html的發(fā)展歷程：
文檔類型設(shè)定
Document
HTML: sublime輸入html:4s
XHTML: sublime輸入html:xt
HTML5：sublime輸入html：5或者！顯示
2 查看手冊及其新增標簽
常用新標簽（需掌握）
W3c手冊中文官網(wǎng)：w3school
header：定義文檔的頁眉 頭部
nav：定義導航鏈接的部分
footer：定義文檔或節(jié)的頁腳 底部
article：定義文章。
section：定義文檔中的節(jié)（ section區(qū)段）
aside：定義其所處內(nèi)容之外的內(nèi)容 側(cè)邊
datalist：定義選項列表。與 input元素配合使用該元素
Fieldset：可將表單內(nèi)的相關(guān)元素分組，打包
3 datalist標簽
有提示的下拉菜單
4 fieldset元素
fieldset元素可將表單內(nèi)的相關(guān)元素分組、打包， 和legend搭配使用
5 HTML5新增 iInput表單（一）
6 HTML5新增 input表單（二）
7 新增占位符焦點多選屬性
8 autocomplete屬性
輸入內(nèi)容自動記錄，方便下次快速輸入
autocomplete必須滿足兩個條件才會起作用，一是必須有提交按鈕，二是必須給給他名字，名字是什么無所謂，例如上面“123”
9 內(nèi)容不能為空和獲得焦點屬性
required是提示輸入內(nèi)容不能為空
accesskey是一個快捷鍵屬性，如上字母“s”,意思是在頁面中按“ctrl+s”可以將光標移至此文本框
10 表單綜合案例學生檔案
顯示效果如下（馬賽克不算）：
11 embed引入網(wǎng)上視頻
多媒體標簽 embed：定義嵌入的內(nèi)容，embed可以用來插入各種多媒體，格式可以是Mid、Wav、AFF、AU、MP3等等。Url為音頻或視頻文件及其路徑，可以是相對路徑或絕對路徑
因為兼容性問題，我們這里只講解插入網(wǎng)絡(luò)視頻，后面H5會講解audio和video視頻多媒體。
12 播放音頻 audio
autoplay是自動播放，controls是顯示播放器，Loop是循環(huán)次數(shù)
每個瀏覽器的顯示樣式有所不同，每個瀏覽器支持的音頻格式有所不同
Source可以提供多個音頻格式，以便兼容各種瀏覽器。
13 播放視頻 video
跟音頻播放用法一樣
看不懂的小伙伴不要氣餒，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。
第一階段HTML5的所有章節(jié)都已結(jié)束，下篇文章將分享《第二階段 CSS3》小伙伴們不要錯過喲！
?
TML里面的role本質(zhì)上是增強語義性，當現(xiàn)有的HTML標簽不能充分表達語義性的時候，就可以借助role來說明。通常這種情況出現(xiàn)在一些自定義的組件上，這樣可增強組件的可訪問性、可用性和可交互性。role的作用是描述一個非標準的tag的實際作用。比如用div做button，那么設(shè)置div的role="button"，輔助工具就可以認出這實際上是個button。比如下面的代碼：
<div?role="checkbox"?aria-checked="checked"></div>
輔助工具就會知道，這個div實際上是個checkbox的角色，為選中狀態(tài)。
<header>元素定義文檔的組合頁面，通常是一些導航信息，在這個標簽中通常包含section的頭部信息，比如h1-h6標簽、導航（nav）、搜索等，但是這些都不是必需的，可以根據(jù)自己的需要來定義內(nèi)容，代碼如下：
<footer>元素用于定義文檔的尾部，一般包含相關(guān)鏈接、版權(quán)等信息。當然<footer>標簽內(nèi)不僅可以包含<p>標簽，還可以包含<nav>、<ul>、<div>等其他元素，這些都是可以根據(jù)自己需求來定義的，代碼如下：
<nav>標簽主要用于構(gòu)建導航，顯示導航鏈接。比如在<header>中添加導航鏈接，代碼如下：
HTML 5中article標簽用于表示文檔、頁面，用來顯示一塊獨立的文字信息內(nèi)容。article標簽是可以嵌套的，常用于網(wǎng)站新聞、博客等，代碼如下：
HTML 5中的section元素定義為文檔中的節(jié)，比如章節(jié)、頁面、頁腳或者文檔其他部分等，代碼如下：
當然，HTML 5中還有許多其他新標簽，比如：
hgroup：對網(wǎng)頁標題元素進行組合，一般情況是對h1-h6標簽的分組。
audio：定義音頻內(nèi)容。
canvas：定義一個畫布功能。
dialog：定義一個對話框。
video：定義一個視頻內(nèi)容。
HTML 5中新定義的標簽遠不止這些，作者主要介紹常用的html5常用標簽。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
