《HYLI5教程課件》-《HYLI5教程課件》-第一章 HYLI5初識_第1頁
《HYLI5教程課件》-《HYLI5教程課件》-第一章 HYLI5初識_第2頁
《HYLI5教程課件》-《HYLI5教程課件》-第一章 HYLI5初識_第3頁
《HYLI5教程課件》-《HYLI5教程課件》-第一章 HYLI5初識_第4頁
《HYLI5教程課件》-《HYLI5教程課件》-第一章 HYLI5初識_第5頁
已閱讀5頁，還剩35頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

部門：XX匯報(bào)人：xx項(xiàng)目一初識HTML5“互聯(lián)網(wǎng)+”時(shí)代下，網(wǎng)絡(luò)技術(shù)飛速發(fā)展，其魅力是無處不顯，各行各業(yè)都離不開網(wǎng)絡(luò)，而不同類型的行業(yè)都創(chuàng)建了形式各樣的網(wǎng)站，既而各式各樣的網(wǎng)頁層出不窮，那么如何制作這些各式各樣的網(wǎng)頁，我們該從何入手呢？問題引入：03HTML5新特性02HTML基礎(chǔ)標(biāo)記與屬性01Web時(shí)代的遷移目錄CONTENTWeb時(shí)代的遷移011.1HTML5概述

在HTML5之前，由于各個(gè)瀏覽器之間的標(biāo)準(zhǔn)不統(tǒng)一，給網(wǎng)站開發(fā)人員帶來了很大的麻煩。統(tǒng)一的互聯(lián)網(wǎng)通用標(biāo)準(zhǔn)顯得尤為重要！1.1HTML5概述

HTML5視頻音頻圖像動(dòng)畫為標(biāo)準(zhǔn)化!!!1.1HTML5演變歷史HTML2.01995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布過時(shí)。超文本標(biāo)記語言（第一版）在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布。HTML3.21997年1月14日，W3C推薦標(biāo)準(zhǔn)。HTML4.01997年12月18日，W3C推薦標(biāo)準(zhǔn)。HTML4.011999年12月24日，W3C推薦標(biāo)準(zhǔn)。HTML5第一份正式草案已于2008年1月22日公布。2014年10月29日，萬維網(wǎng)聯(lián)盟宣布，HTML5標(biāo)準(zhǔn)規(guī)范終于制定完成?！究偨Y(jié)】HTML5將會(huì)逐漸取代HTML4.01、XHTML1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的同時(shí)，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求，為桌面和移動(dòng)平臺帶來無縫銜接的豐富內(nèi)容。1.1HTML5優(yōu)勢1解決了跨瀏覽器問題2新增了多個(gè)新特性3用戶優(yōu)先的原則4化繁為簡的優(yōu)勢1.1HTML5瀏覽器支持情況HTML基礎(chǔ)標(biāo)記與屬性021.2.1創(chuàng)建一個(gè)HTML5頁面1.2.2超鏈接標(biāo)記

傳智播客：傳智播客教育科技有限公司是一家專門致力于高素質(zhì)軟件開發(fā)人才培養(yǎng)的高科技公司。此致敬禮

傳智播客學(xué)員【結(jié)論】(1)href:用于指定鏈接目標(biāo)的url地址,當(dāng)為<a>標(biāo)記應(yīng)用href屬性時(shí),它就具有了超鏈接的功能。(2)target:用于指定鏈接頁面的打開方式,其取值有_self和_blank兩種,其中_self為默認(rèn)值,意為在原窗口中打開,_bank為在新窗口中打開。1.2.2超鏈接標(biāo)記【結(jié)論】(1)使用“<ahref="#id名">鏈接文本</a>”創(chuàng)建鏈接文本;(2)使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。1.2.3HTML5標(biāo)記圖像和設(shè)置動(dòng)畫<img/>標(biāo)記的屬性屬性屬性值描述srcURL圖像的路徑alt文本圖像不能顯示時(shí)的替換文本title文本鼠標(biāo)懸停時(shí)顯示的內(nèi)容width像素設(shè)置圖像的寬度height像素設(shè)置圖像的高度border文字設(shè)置圖像邊框的寬度vspace像素設(shè)置圖像頂部和底部的空白（垂直邊距）hspace像素設(shè)置圖像左側(cè)和右側(cè)的空白（水平邊距）alignleft將圖像對齊到左邊alignright將圖像對齊到右邊top將圖像的頂端和文本的第一行文字對齊，其他文字居圖像下方middle將圖像的水平中線和文本的第一行文字對齊，其他文字居圖像下方bottom將圖像的底部和文本的第一行文字對齊，其他文字居圖像下方1.2.3常用圖像格式GIFPNGJPGGIF最突出的地方就是它支持動(dòng)畫，同時(shí)GIF也是一種無損的圖像格式，也就是說修改圖片之后，圖片質(zhì)量幾乎沒有損失。再加上GIF支持透明（全透明或全不透明），因此很適合在互聯(lián)網(wǎng)上使用。GIF格式常常用于Logo、小圖標(biāo)及其他色彩相對單一的圖像。1.2.3常用圖像格式GIFPNGJPGPNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相對于GIF，PNG最大的優(yōu)勢是體積更小，支持alpha透明（全透明，半透明，全不透明），并且顏色過渡更平滑，但PNG不支持動(dòng)畫。IE6是可以支持PNG-8，但在處理PNG-24的透明時(shí)會(huì)顯示灰色。1.2.3常用圖像格式GIFPNGJPGJPG所能顯示的顏色比GIF和PNG要多的多，可以用來保存超過256種顏色的圖像，但是JPG是一種有損壓縮的圖像格式，這就意味著每修改一次圖片都會(huì)造成一些圖像數(shù)據(jù)的丟失。小圖片考慮GIF或PNG-8，半透明圖像考慮PNG-24，類似照片的圖像則考慮JPG。1.2.3屬性

在當(dāng)前HTML網(wǎng)頁文件所在的文件夾中放入文件名為img.jpg的圖像,并且通過src屬性插入圖像,通過alt屬性指定圖像不能顯示時(shí)的替代文本,效果如圖alt文本屬性1.2.3屬性

在當(dāng)前HTML網(wǎng)頁文件中的圖像不能正常顯示時(shí)，把鼠標(biāo)移動(dòng)到未正常顯示的圖像上，則會(huì)顯示title屬性值的內(nèi)容。其實(shí),title屬性除了用于圖像標(biāo)記<img/>外,還常常和超鏈接標(biāo)記<a>及表單元素一起使用,以提供輸入格式和鏈接目標(biāo)的信息,將在后續(xù)內(nèi)容詳細(xì)介紹。title屬性1.2.3屬性

本圖利用了圖像的寬度屬性width、高度屬性height、邊框?qū)傩詁order1.2.3屬性

使用hspace和vspace屬性為圖像設(shè)置了水平邊距和垂直邊距。為了使水平邊距和垂直邊距的顯示效果更加明顯,同時(shí)給圖像添加了1像素的邊框,并且使align=“l(fā)eft”使圖像左對齊。1.2.4HTML其他常用標(biāo)記

<hn>標(biāo)題文本</hn>●1eft：設(shè)置標(biāo)題文字左對齊(默認(rèn)值)。

●center：設(shè)置標(biāo)題文字居中對齊。

●right：設(shè)置標(biāo)題文字右對齊1.2.4HTML其他常用標(biāo)記

<palign=”對齊方式”>段落文本</p>該語法中align屬性為<p>標(biāo)記的可選屬性,同樣可以使用align屬性設(shè)置段落文本的對齊方式。此案例分別使用align="left"、align="center"和align="right"設(shè)置了段落左對齊、居中對齊和右對齊。1.2.4HTML其他常用標(biāo)記<hr屬性=“屬性值”>屬性名含義屬性值align設(shè)置水平線的對齊方式可選擇left、right、center、三種值，默認(rèn)為center,居中對齊size設(shè)置水平線的粗細(xì)以像素為單位，默認(rèn)為2像素color設(shè)置水平線的顏色可用顏色名稱、十六進(jìn)制#RGB、rgb(r,g,b)width設(shè)置水平線的寬度可以是確定的像素值，也可以是瀏覽器窗口的百分比，默認(rèn)為100%1.2.4HTML其他常用標(biāo)記換行標(biāo)記<br/>

在HTML中,一個(gè)段落中的文字會(huì)從左到右依次排列,直到瀏覽器窗口的右端,然后自動(dòng)換行。如果希望某段文本強(qiáng)制換行顯示,就需要使用換行標(biāo)記<br/>,這時(shí)如果還像在word中直接敲Enter鍵換行就不起作用了【技能拓展】特殊符號描述字符的代碼

空格符＆nbsp;<小于號＆Lt;>大于號＆gt;＆和號＆amp;￥人民幣＆yen;?版權(quán)＆copy;?注冊商標(biāo)＆reg;°攝氏度＆deg;±正負(fù)號＆plusmn;*乘號＆times;÷除號＆divide;2平方2（上標(biāo)2）＆Sup2;3立方3（上標(biāo)3）＆Sup3;HTML5特性031.3.1HTML5瀏覽器支持1.3.2HTML文檔基本格式對于升級后HTML5文檔相對于HTML4.0和XHTML而言，不需要像以前那樣進(jìn)行聲明，語言更為簡潔，只需在HTML5文檔第一行以<!DOCTYPEhtml>開頭進(jìn)行聲明。使用

HBuilderX軟件開發(fā)工具，新建一個(gè)HTML5頁面文檔時(shí)，系統(tǒng)會(huì)自帶一些源代碼,如下代碼所示。<!doctypehtm1><html><head><metacharset="utf-8">

<tit1e>無標(biāo)題文檔</title></head><body></body></htm1>1.3.3HTML基本語法HTM5可以省略屬性值的屬性 屬性描述checked表示是否被選中狀態(tài)，省略屬性值后,等價(jià)于checked="checked"readonly表示是否為只讀模式，省略屬性值后,等價(jià)于readonly="readonly"defer表示腳本將在頁面完成解析時(shí)執(zhí)行，省略屬性值后,等價(jià)于defer="defer"ismap表示將圖像定義為服務(wù)器端圖像映射，省略屬性值后,等價(jià)于ismap="ismap"noshade表示水平線顏色呈現(xiàn)純色，無陰影效果，省略屬性值后,等價(jià)于noshade="noshade"nowrap表示內(nèi)容不換行，省略屬性值后,等價(jià)于nowrap=“nowrap”selected表示下拉列表項(xiàng)，省略屬性值后,等價(jià)于selected=“selected”multiple表示輸入字段可選擇多個(gè)值，省略屬性值后,等價(jià)于multiple=“multiple”noresize表示無法調(diào)整框架大小，省略屬性值后,等價(jià)于noresize=“noresize”【案列引入】標(biāo)題內(nèi)容請?zhí)鎿Q文字內(nèi)容，點(diǎn)擊添加相關(guān)標(biāo)題文字041234此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）點(diǎn)擊輸入標(biāo)題內(nèi)容關(guān)鍵詞關(guān)鍵詞關(guān)鍵詞標(biāo)題文本預(yù)設(shè)此部分內(nèi)容作為文字排版占位顯示，

建議使用主題字體，以保持全文檔文本格式的統(tǒng)一

此部分內(nèi)容作為文字排版占位顯示，

建議使用主題字體，以保持全文檔文本格式的統(tǒng)一

點(diǎn)擊輸入標(biāo)題內(nèi)容此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）標(biāo)題文本預(yù)設(shè)此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）標(biāo)題文本預(yù)設(shè)標(biāo)題文本預(yù)設(shè)此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）標(biāo)題文本預(yù)設(shè)點(diǎn)擊輸入標(biāo)題內(nèi)容標(biāo)題文本預(yù)設(shè)標(biāo)題文本預(yù)設(shè)標(biāo)題文本預(yù)設(shè)標(biāo)題文本預(yù)設(shè)標(biāo)題文本預(yù)設(shè)此部分內(nèi)容作為文字排版占位顯示

（建議使用主題字體）標(biāo)題文本預(yù)設(shè)此部分內(nèi)容作為文字排版占位顯示

（建議使用主題字體）標(biāo)題文本預(yù)設(shè)此部分內(nèi)容作為文字排版占位顯示

（建議使用主題字體）標(biāo)題文本預(yù)設(shè)此部分內(nèi)容作為文字排版占位顯示

（建議使用主題字體）點(diǎn)擊輸入標(biāo)題內(nèi)容01關(guān)鍵詞02關(guān)鍵詞05關(guān)鍵詞06關(guān)鍵詞03關(guān)鍵詞04關(guān)鍵詞07關(guān)鍵詞09關(guān)鍵詞08關(guān)鍵詞關(guān)鍵詞標(biāo)題文本預(yù)設(shè)關(guān)鍵詞標(biāo)題文本預(yù)設(shè)關(guān)鍵詞標(biāo)題文本預(yù)設(shè)點(diǎn)擊輸入標(biāo)題內(nèi)容標(biāo)題文本預(yù)設(shè)標(biāo)題文本預(yù)設(shè)1此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）如需更改請?jiān)冢ㄔO(shè)置形狀格式）菜單下（文本選項(xiàng)）中調(diào)整標(biāo)題文本預(yù)設(shè)2此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）如需更改請?jiān)冢ㄔO(shè)置形狀格式）菜單下（文本選項(xiàng)）中調(diào)整標(biāo)題文本預(yù)設(shè)3此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）如需更改請?jiān)冢ㄔO(shè)置形狀格式）菜單下（文本選項(xiàng)）中調(diào)整標(biāo)題文本預(yù)設(shè)4此部分內(nèi)容作為文字排版占位顯示（建議使用主題字體）如需更改請?jiān)冢ㄔO(shè)置形狀格式）菜單下（文本選項(xiàng)）中調(diào)整點(diǎn)擊輸入標(biāo)題內(nèi)容部門：XX匯報(bào)人：xx20XX演示完畢謝謝欣賞年終總結(jié)

新年計(jì)劃

述職報(bào)告工作匯報(bào)版權(quán)聲明感謝您支持原創(chuàng)設(shè)計(jì)事業(yè)，支持設(shè)計(jì)版權(quán)產(chǎn)品！感謝您下載千圖網(wǎng)原創(chuàng)PPT模板。為了您和千圖網(wǎng)以及原創(chuàng)作者的利益，請勿復(fù)制、傳播、銷售，否則將承擔(dān)法律責(zé)任！千圖網(wǎng)將對作品進(jìn)行維權(quán)，

溫馨提示

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

最新文檔

評論

0/150

提交評論