HTML5 App應(yīng)用開發(fā)教程-第02章_第1頁(yè)
HTML5 App應(yīng)用開發(fā)教程-第02章_第2頁(yè)
HTML5 App應(yīng)用開發(fā)教程-第02章_第3頁(yè)
HTML5 App應(yīng)用開發(fā)教程-第02章_第4頁(yè)
HTML5 App應(yīng)用開發(fā)教程-第02章_第5頁(yè)
已閱讀5頁(yè)，還剩40頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

本章要點(diǎn)

了解HTML語(yǔ)言特性。掌握HTML5文檔的基本格式。熟練掌握HTML語(yǔ)言中的布局div標(biāo)簽、各種文本控制標(biāo)簽、圖像img標(biāo)簽、超鏈接a標(biāo)簽、列表標(biāo)簽、頁(yè)面交互性標(biāo)簽、表格table標(biāo)簽、表單form標(biāo)簽、各種input輸入標(biāo)簽、select標(biāo)簽等的使用。

HTML5頁(yè)面的擴(kuò)展名是.html或.htm，頁(yè)面上所展示的內(nèi)容就是由HTML（HyperTextMarkupLanguage超文本標(biāo)記語(yǔ)言)所構(gòu)建的。它是標(biāo)簽標(biāo)記式語(yǔ)言（uni-app的組件也是采用的這種設(shè)計(jì)方式），所以非常簡(jiǎn)單，易于掌握，最重要的是它與平臺(tái)無(wú)關(guān)。HTML簡(jiǎn)介HTML簡(jiǎn)介1.標(biāo)簽

標(biāo)簽是由一對(duì)尖括號(hào)包裹的單詞構(gòu)成的，推薦使用小寫字母。標(biāo)簽通常是成對(duì)出現(xiàn)的，分為開始標(biāo)簽和結(jié)束標(biāo)簽，在它們中間的是標(biāo)簽體：

<標(biāo)簽名>標(biāo)簽體</標(biāo)簽名>

自結(jié)束標(biāo)簽：

<標(biāo)簽名/>

標(biāo)簽是可以嵌套的，但是注意一定不要出現(xiàn)交叉嵌套HTML簡(jiǎn)介2.標(biāo)簽的屬性：<標(biāo)簽名屬性名=”屬性值”>標(biāo)簽體</標(biāo)簽名>或<標(biāo)簽名屬性名=”屬性值”/>3.注釋標(biāo)簽<!--注釋語(yǔ)句-->HTML5文檔基本格式

1.DTD聲明

<!DOCTYPEhtml>2.根標(biāo)簽<html></html>3.頭部標(biāo)簽

<head></head>

引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等<metacharset="UTF-8">

當(dāng)前頁(yè)面采用的編碼格式是“UTF-8”HTML5文檔基本格式

<title></title>

用來(lái)定義文檔的標(biāo)題4.主體標(biāo)簽<body></body>

用于定義HTML文檔所要顯示的內(nèi)容

一個(gè)容器，在這個(gè)容器中可以放置各種標(biāo)簽內(nèi)容，我們主要是通過<div>標(biāo)簽來(lái)實(shí)現(xiàn)各種各樣的布局效果：<div>內(nèi)容</div>默認(rèn)寬度與高度自適應(yīng)布局div標(biāo)簽1.標(biāo)題h標(biāo)簽文本控制標(biāo)簽<h1>1級(jí)標(biāo)題</h1><h2>2級(jí)標(biāo)題</h2><h3>3級(jí)標(biāo)題</h3><h4>4級(jí)標(biāo)題</h4><h5>5級(jí)標(biāo)題</h5><h6>6級(jí)標(biāo)題</h6>2.段落p標(biāo)簽文本控制標(biāo)簽<p>段落內(nèi)容</p>3.水平線hr標(biāo)簽4.換行br標(biāo)簽文本控制標(biāo)簽<hr/><br/>5.特殊字符標(biāo)記文本控制標(biāo)簽6.修飾span標(biāo)簽文本控制標(biāo)簽HTML中的<spanstyle="color:red">span標(biāo)簽</span>標(biāo)準(zhǔn)用途是什么?圖像標(biāo)簽

網(wǎng)絡(luò)路徑：

<imgsrc="cn/imgs/bd_logo.png"alt="百度的Logo"/>

本地路徑：<imgsrc="../img/baidu.png"alt="百度的Logo"/>圖片的base64編碼：<imgsrc="data:image/png;base64,圖片的base64編碼/>超鏈接a標(biāo)簽<!--普通的文字超鏈接-->

<ahref=""target="_blank">打開網(wǎng)易</a><ahref="example-2.4.html">打開上個(gè)例子</a><!--圖片超鏈接--><ahref=""><imgsrc="../img/163.png"/></a>

超鏈接a標(biāo)簽<!--撥打電話--><ahref="tel:10086">撥打電話</a><!--發(fā)送短信-->

<ahref="sms:10086">發(fā)送短信</a><!--發(fā)送Email--><ahref="mailto:mail@">發(fā)送郵件</a>

超鏈接a標(biāo)簽列表標(biāo)簽1.無(wú)序列表ul<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li><li>列表項(xiàng)4</li></ul>列表標(biāo)簽2.有序列表ol<oltype="項(xiàng)目符號(hào)類型值"start="項(xiàng)目符號(hào)開始的數(shù)值"> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> <li>列表項(xiàng)3</li> <li>列表項(xiàng)4</li></ol>語(yǔ)義化標(biāo)簽

將每個(gè)區(qū)域語(yǔ)義化，讓頁(yè)面結(jié)構(gòu)更清晰，更利于SEO音視頻標(biāo)簽<audioid=”myaudio”><sourcesrc="song.ogg"type="audio/ogg"><sourcesrc="song.mp3"type="audio/mpeg">你的瀏覽器不支持audio標(biāo)簽</audio><videoid=”myvideo”><sourcesrc="song.ogg"type="video/ogg"><sourcesrc="song.mp4"type="video/mp4">你的瀏覽器不支持video標(biāo)簽</video>音視頻標(biāo)簽表格標(biāo)簽

<tableborder="1"> <tr> <td>一年</td> <td>1.75</td> </tr> <tr> <td>二年</td> <td>2.25</td> </tr>……</table>表格標(biāo)簽

使用thead、tfoot、tbody使用使用rowspan=“2”colspan=“2”表單的應(yīng)用表單是頁(yè)面的重要組成部分，它收集用戶的輸入信息，并將這些信息發(fā)送給服務(wù)端程序進(jìn)行處理。表單由表單form標(biāo)簽和各種輸入標(biāo)簽組成。form標(biāo)簽<formmethod="提交方式"action="服務(wù)端url"enctype="編碼方式">

</form>method屬性：用于規(guī)定如何發(fā)送表單的數(shù)據(jù)，數(shù)據(jù)會(huì)發(fā)送到action屬性所定義的服務(wù)端，它分為get和post兩種方式。get方式表單的應(yīng)用是默認(rèn)值，使用這種方法提交的數(shù)據(jù)將會(huì)附加在服務(wù)端url之后，以?與url分開。使用這種方式傳輸?shù)臄?shù)據(jù)量小，由于受到url長(zhǎng)度的限制，最多只能傳遞1KB。字母數(shù)字字符原樣發(fā)送，空格轉(zhuǎn)換為”+”，其它符號(hào)轉(zhuǎn)換為%XX,其中XX為該符號(hào)以16進(jìn)制表示的ASCII（或ISOLatin-1）值。例如：/?x=2&y=3post方式傳遞的數(shù)據(jù)量較大，它把數(shù)據(jù)作為http請(qǐng)求的內(nèi)容，數(shù)據(jù)不會(huì)附加在url之后。action屬性：指明表單數(shù)據(jù)要發(fā)送到的頁(yè)面或APIURL，如果這個(gè)屬性是空的或未寫，那么當(dāng)前的文檔URL將被使用。表單的應(yīng)用enctype屬性：可省略，規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼表單的應(yīng)用2.各種input輸入標(biāo)簽

（1）單行文本輸入框<inputtype="text"value="張三豐"/>

（2）密碼輸入框

<inputtype="password"value="12345"/>

表單的應(yīng)用（3）普通按鈕<inputtype="button"value="普通按鈕"/>

（4）單選框<inputtype="radio"checked/>男

（5）復(fù)選框<inputtype="checkbox"checked/>同意與否

表單的應(yīng)用（6）提交按鈕，與普通按鈕沒有什么區(qū)別，不同的是它會(huì)引起表單提交

<inputtype="submit"value="注冊(cè)"/>

（7）圖片提交按鈕<inputtype="image"src="../img/micky.jpg"/>

表單的應(yīng)用（8）重置按鈕，恢復(fù)表單的初始狀態(tài)，<inputtype="reset"value="取消"/>

（9）隱藏域,在界面上是不顯示的，主要用來(lái)在表單向服務(wù)器提交一些隱藏的數(shù)據(jù)

<inputtype="hidden"value="這是隱藏的值"/>

(10)文件上傳域

<inputtype="file"multiple/>

表單的應(yīng)用

（11）Email輸入文本框<inputtype="email"/>

（12）URL輸入文本框<inputtype="url"/>

(13)電話輸入文本框<inputtype="tel"/>

（14）關(guān)鍵詞搜索文本框

表單的應(yīng)用

<inputtype="search"/>（15）顏色設(shè)置文本框

<inputtype="color"/>表單的應(yīng)用（16）數(shù)字輸入框<inputtype="number"value="當(dāng)前值"min="最小值"max="最大值"step="值的間隔"/>

（17）滑動(dòng)條<inputtype="range"value="當(dāng)前值"min="最小值"max="最大值"step="值的間隔"/>

表單的應(yīng)用（18）日期和時(shí)間輸入框

<inputtype="date"/>

表單的應(yīng)用<inputtype="month"/>

表單的應(yīng)用<inputtype=“week”/>（iOS不支持）

表單的應(yīng)用<inputtype="time"/>

表單的應(yīng)用<inputtype="datetime-local"/>

表單的應(yīng)用3.input輸入標(biāo)簽的其他屬性

（1）placeholder

（2）required

（3）

pattern：正則表達(dá)式

（4）disabled

（5）autofocus

表單的應(yīng)用4.其他表單標(biāo)簽

（1）textarea

（2）select

<textarea>文字內(nèi)容在這里！</textarea>表單的應(yīng)用

<select> <optionvalue="item1">選項(xiàng)1</option> <optionvalue="item2"selected>

選項(xiàng)2</option> <optionvalue="item3">選項(xiàng)3</option> <optionvalue="item4">選項(xiàng)4</option></select>meta標(biāo)簽1.SEO輔助<metaname="keywords"content="視頻,視頻分享,視頻搜索,視頻播放"><metaname="description"content="視頻服務(wù)平臺(tái),提供視頻播放,視頻發(fā)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論