Web前端入門級教程學習（四）_第1頁
Web前端入門級教程學習（四）_第2頁
Web前端入門級教程學習（四）_第3頁
Web前端入門級教程學習（四）_第4頁
Web前端入門級教程學習（四）_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

Web前端入門教學（四）HTML5簡介1、什么是HTML5HTML5不是一門新的語言，而是我們之前學習的HTML的第五次重大修改版本。2、HTML的發(fā)展歷史超文本標記語言（第一版，不叫HTML1.0）——在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（并非標準）；HTML2.0——1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布已經(jīng)過時HTML3.2——1997年1月14日，W3C推薦標準HTML4.0——1997年12月18日，W3C推薦標準HTML4.01（微小改進）——1999年12月24日，W3C推薦標準HTML5——2014年10月28日，W3C推薦標準3、HTML5的設計目的HTML5的設計目的是為了在移動設備上支持多媒體。之前網(wǎng)頁如果想嵌入視頻音頻，需要用到flash，但是蘋果設備是不支持flash的，所以為了改變這一現(xiàn)狀，html5應運而生。新的語法特征被引進以支持視頻音頻，如video、audio和canvas標記。HTML5還引進了新的功能，可以真正改變用戶與文檔的交互方式。比如增加了新特性：語義標簽，本地存儲，網(wǎng)頁多媒體等等，以及CSS3特性。相比之前的進步：取消了一些過時的HTML4標簽新的表單控件（比如date、time、email、url、search）語義化標簽（比如article、footer、header、nav、section）對本地離線存儲的更好的支持用于繪畫的canvas元素用于多媒體的video和audio元素二、語義化標簽1、什么是語義化標簽？類似于p，span，img等這樣的，看見標簽就知道里面應該保存的是什么內容的是語義化標簽。像div這樣的里面可以裝任意東西的就是非語義化標簽。以前我們要做下面這個結構可能會這么布局：<divclass="header"></div><divclass="nav"></div><divclass="main"><divclass="left"></div><divclass="right"></div></div><divclass="footer"></div>那么在html5下語義化標簽怎么做呢？<header></header><nav></nav><main><article></article><aside></aside></main><footer></footer>語義化的代碼結構更清晰、簡潔HTML5部分新增的標簽2.1、結構標簽header：一個區(qū)塊的頭部信息/標題；footer：一個區(qū)塊的底部信息；nav：導航欄區(qū)域；section：一個通用獨立章節(jié)或者區(qū)域。一般來說會包含一個標題。article：一塊獨立區(qū)塊，表示一塊相對比較獨立的內容；aside：表示一個和主體內容幾乎無關的部分，可以被單獨的拆分出來而不會使整體受影響。2.2、表單標簽email：郵件控件；url：地址控件；range：數(shù)字范圍控件；日期選擇器：date：選取日、月、年month：選取月、年week：選取周和年time：選取時間（小時和分鐘）datetime：選取時間、日、月、年（UTC時間）datetime-local：選取時間、日、月、年（本地時間）search：搜索控件；color：顏色控件綜合示例：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{padding:0;margin:0;}form{width:600px;margin:10pxauto;}form>fieldset{padding:10px10px;}form>fieldset>meter,form>fieldset>input{width:100%;height:30px;margin:8px0;border:none;border:1pxsolid#aaa;border-radius:4px;font-size:16px;padding-left:5px;box-sizing:border-box;/*避免padding+border的影響*/}form>fieldset>meter{padding:0;}</style></head><body><formaction=""><fieldset><legend>學生檔案</legend><labelfor="txt">姓名：</label><inputtype="text"name="userName"id="txt"placeholder="請輸入姓名"required><labelfor="phone">手機號碼：</label><inputtype="tel"name="phone"id="phone"requiredpattern="^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$"><labelfor="em">郵箱：</label><inputtype="email"name="myemail"id="em"required><labelfor="collage">學院：</label><inputtype="text"name="collage"id="collage"list="dl"required><datalistid="dl"><optionvalue="電氣與電子工程學院"></option><optionvalue="經(jīng)濟與管理學院"></option><optionvalue="外國語學院"></option><optionvalue="藝術與傳媒學院"></option></datalist><labelfor="num">入學成績：</label><inputtype="number"name="num"id="num"requiredmax="100"min="0"value="0"step="0.5"><labelfor="level">基礎水平：</label><meterid="level"max="100"min="0"high="90"low="59"></meter><labelfor="edt">入學日期：</label><inputtype="date"name="dt"id="edt"required><labelfor="ldt">畢業(yè)日期：</label><inputtype="date"name="dt"id="ldt"required><inputtype="submit"id="sub"></fieldset></form><script>document.getElementById("phone").oninvalid=function(){this.setCustomValidity("請輸入11位正確的手機號碼！");};document.getElementById("num").oninput=function(){document.getElementById("level").value=this.value;};</script></body></html>表單標簽新增的一些屬性：autofocus：自動獲取焦點required：不能為空disabled：禁用hidden：隱藏2.3、媒體標簽video：視頻；audio：音頻；embed：嵌入內容（包括各種媒體），Midi、Wav、AU、MP3、Flash、AIFF等。<body><!--audio:音頻--><!--src:播放文件的路徑controls:音頻播放器的控制器面板autoplay:自動播放loop:循環(huán)播放muted：靜音preload: auto默認加載音頻文件所有數(shù)據(jù)； metadata：僅加載多媒體文件元數(shù)據(jù)（文件屬性，比如文件時長，音質信息等） none:不加載任何內容。--><audiosrc="../mp3/aa.mp3"controls></audio><!--video：視頻--><!--src:播放文件的路徑controls:音頻播放器的控制器面板autoplay:自動播放loop:循環(huán)播放poster:指定視頻還沒有完全下載完畢，或者用戶沒有點擊播放前顯示的封面。默認顯示當前視頻文件的第一副圖像width:視頻的寬度height:視頻的高度--><!--注意事項：視頻始終會保持原始的寬高比。意味著如果你同時設置寬高，并不是真正的將視頻的畫面大小設置為指定的大小，而只是將視頻的占據(jù)區(qū)域設置為指定大小，除非你設置的寬高剛好就是原始的寬高比例。所以建議：在設置視頻寬高的時候，一般只會設置寬度或者高度，讓視頻文件自動縮放--><videosrc="../mp3/mp4.mp4"poster="../images/l1.jpg"controlsheight="600"></video><!--source:因為不同的瀏覽器所支持的視頻格式不一樣，為了保證用戶能夠看到視頻，我們可以提供多個視頻文件讓瀏覽器自動選擇--><videosrc="../mp3/flv.flv"controls></video><videocontrols><!--視頻源，可以有多個源--><sourcesrc="../mp3/flv.flv"type="video/flv"/><sourcesrc="../mp3/mp4.mp4"type="video/mp4"/></video></body>注意：Chrome在2018年4月份更新后關閉了audio、video媒體標簽的autoplay自動播放，這個改變是在GoogleChrome版本66開始的時候，不再自動開始播放音頻和視頻文件，阻止對廣告視頻和其他煩人的網(wǎng)頁元素進行自動播放，原因大概是為了提高用戶體驗，防止一進入網(wǎng)頁會自動播放聲音過大的音頻。在之后測試發(fā)現(xiàn)火狐瀏覽器也有類似情況發(fā)生。測試后發(fā)現(xiàn)，如果使用的是video標簽，可以添加muted屬性，這樣視頻可以自動播放，但是是為靜音模式。媒體標簽的方法：可以通過js控制音視頻的播放：(所有網(wǎng)頁音視頻的控制都應該使用js控制，播放的控件自己畫，這樣才能達到跨平臺界面相同。)獲取媒體標簽的dom元素（例如叫mdom）控制媒體的行為的方法和屬性和觸發(fā)事件。//方法mdom.play()//開始播放mdom.pause()//暫停播放mdom.load()//重新加載音視頻//屬性autoplay//設置或返回歌曲是否自動播放controls//設置或返回是否顯示原生播放控件currentSrc//獲取當前的播放地址paused//是否是暫停狀態(tài)currentTime：//獲取或者設置當前音視頻播放時長defaultMuted//設置或返回當前音頻視頻是否默認靜音muted//設置或返回當前音視頻是否靜音duration //返回當前音頻/視頻的長度（以秒計）。需要在媒體加載完成后獲取//一般使用mdom.addEventListener('durationchange',function(){//console.log(this.duration)//}defaultPlaybackRate//設置或返回默認的播放速度//正值為正向播放，負值為負向播放 //1為正常速度，<1慢速，>1加速playbackRate//設置或返回當前的播放速度，值同上ended//返回當前資源是否播放結束error//返回播放錯誤信息loop//設置或返回是否循環(huán)播放preload//設置加載機制（自動，metadata，none）readyState//返回當前音視頻是否準備完畢volume//設置或返回當前音量//事件canplay//當前資源可以被播放的時候durationchange//當播放總時長發(fā)送改變的時候pause//當前資源被暫停時play//當前資源被播放時playing//包含上面play時機，但是因網(wǎng)絡原因導致播放終止而后重新開始播放時只會觸發(fā)playingratechange//播放速度發(fā)生變化時觸發(fā)seeked//由用戶更改當前播放時長時觸發(fā)seeking//由用戶剛開始更改播放時長時觸發(fā)timeupdate//當播放位置發(fā)生變化時觸發(fā)（無論是否由用戶操作）volumecha

溫馨提示

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

評論

0/150

提交評論