《HTML5程序設(shè)計(jì)及實(shí)踐》課件第2章 HTML5布局_第1頁
《HTML5程序設(shè)計(jì)及實(shí)踐》課件第2章 HTML5布局_第2頁
《HTML5程序設(shè)計(jì)及實(shí)踐》課件第2章 HTML5布局_第3頁
《HTML5程序設(shè)計(jì)及實(shí)踐》課件第2章 HTML5布局_第4頁
《HTML5程序設(shè)計(jì)及實(shí)踐》課件第2章 HTML5布局_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第2章HTML5布局目錄HTML5布局HTML5結(jié)構(gòu)元素HTML5樣式元素HTML5頁面布局HTML5頁面布局示例layout.html+style.css目錄HTML5布局HTML5結(jié)構(gòu)元素HTML5樣式元素文章結(jié)構(gòu)<body><article><header>

文章標(biāo)題

</header>

正文內(nèi)容

<footer>

文章尾注

</footer></article></body>內(nèi)容分段section、article和div有一些類似的地方，都可以用于區(qū)分網(wǎng)頁的不同區(qū)域，section、article和div有區(qū)別的。div主要用于頁面的大塊布局；article元素強(qiáng)調(diào)的是獨(dú)立性；section主要用于內(nèi)容的分段；article元素和section元素是可以相互嵌套的，當(dāng)一篇文章中有幾個(gè)并列的段落是，就可以用section分段，當(dāng)文章的其中一段具有獨(dú)立性時(shí)，可以用article標(biāo)識(shí)該段的獨(dú)立性。內(nèi)容分段<section> <h2>評(píng)論</h2> <article> <header> <h3>tom</h3> <p> <timedatetime="2015-1-413:20">2015年1月4日</time> </p> </header> <p>該活動(dòng)非常專業(yè)</p> </article> <article> </article></section>輔助信息aside元素用于顯示頁面或文章相關(guān)，但是又可以獨(dú)立的內(nèi)容，可以是廣告、引用、側(cè)邊欄等。示例：博客的網(wǎng)頁，在底部使用aside元素實(shí)現(xiàn)了相關(guān)博客文章的鏈接<aside><h2>博客鏈接</h2><ul><li><ahref="#">物聯(lián)網(wǎng)實(shí)訓(xùn)體系</a></li><li><ahref="#">金融財(cái)務(wù)外包實(shí)訓(xùn)體系</a></li><li><ahref="#">電商物流實(shí)訓(xùn)體系</a></li></ul></aside>導(dǎo)航信息nav元素包含一組用于頁面導(dǎo)航的鏈接，通過這些鏈接可以跳轉(zhuǎn)到其他頁面或者本頁面中的其他區(qū)塊。用nav元素實(shí)現(xiàn)站點(diǎn)導(dǎo)航是最典型的應(yīng)用。

<nav> <ahref="#">首頁</a>|<ahref="#">軟件外包</a>| <ahref="#">物聯(lián)網(wǎng)</a>|<ahref="#">金融財(cái)務(wù)</a>| <ahref="#">電商物流</a></nav>

顯示/隱藏內(nèi)容details元素和summary元素配合使用，可以方便的實(shí)現(xiàn)詳細(xì)信息的顯示和隱藏，在HTML4中必須用腳本才能實(shí)現(xiàn)該效果。<details><summary>JavaEE輕量級(jí)解決方案</summary><p>JavaEE技術(shù)經(jīng)過多年的發(fā)展已經(jīng)日趨成熟，成為當(dāng)今企業(yè)級(jí)應(yīng)用的最佳解決方案。在JavaEE技術(shù)中S2SH（Struts2+Spring+Hibernate）是目前最為流行的輕量級(jí)整合開發(fā)框架，得到了眾多軟件企業(yè)的認(rèn)可，在Java開發(fā)群體中也得到了廣泛的支持。本門課程集Struts2、Spring、Hibernate技術(shù)講解為一體，并有機(jī)的將其整合在一起，是一門綜合性強(qiáng)、應(yīng)用性強(qiáng)的技術(shù)課程。</p><p></p></details>對(duì)話框HTML4中，實(shí)現(xiàn)對(duì)話框需要比較復(fù)雜的腳本，在HTML5中新增了dialog元素，該元素讓開發(fā)人員非常方便的創(chuàng)建對(duì)話框，并顯示在web頁面中。<dialog> <form>評(píng)論：<inputtype="text"id=""/><br><inputtype="submit" id="btnaddcomment"> </form></dialog>圖文結(jié)構(gòu)figure元素規(guī)定獨(dú)立的流內(nèi)容（如圖像、圖表、照片、代碼等等）。figurecapiton元素用于定義figure的標(biāo)題，可以放置在figure元素開頭或者結(jié)尾。<figureclass="post-image"> <imgsrc="../img/JavaSE.jpg"/> <figcaption>圖1封面照片</figcaption></figure>目錄HTML5布局HTML5結(jié)構(gòu)元素HTML5樣式元素mark元素mark元素用于強(qiáng)調(diào)文檔中的一部分文檔，以高亮背景顯示<p> <mark>博弈論</mark>又被稱為對(duì)策論（GameTheory）既是現(xiàn)代數(shù)學(xué)的一個(gè)新分支，也是運(yùn)籌學(xué)的一個(gè)重要學(xué)科。</p>meter元素meter元素用于展示在數(shù)值范圍內(nèi)的測量值或是分?jǐn)?shù)值，典型的例子是硬盤空間使用量<metervalue="2"min="0"max="10">2</meter><br><metervalue="0.6">60%</meter>progress元素progress標(biāo)簽用于表示進(jìn)度，如任務(wù)完成的比例<progressvalue="40"max="100"></progress>wbr元素wbr元素可以實(shí)現(xiàn)英文單詞換行<p> AJAX技術(shù)的學(xué)習(xí)過程中，我們必須對(duì)<mark>XML<wbr>Http<wbr>Request</mark>對(duì)象非常熟悉。 <br><br> AJAX技術(shù)的學(xué)習(xí)過程中，我們必須對(duì)<mark>XMLHttpRequest</mark>對(duì)象非常熟悉。</p>time元素time元素明確的對(duì)機(jī)器的日期和時(shí)間進(jìn)行編碼，并且更易讀。pubd

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論