《HTML5程序設計及實踐》課件第2章 HTML5布局_第1頁
《HTML5程序設計及實踐》課件第2章 HTML5布局_第2頁
《HTML5程序設計及實踐》課件第2章 HTML5布局_第3頁
《HTML5程序設計及實踐》課件第2章 HTML5布局_第4頁
《HTML5程序設計及實踐》課件第2章 HTML5布局_第5頁
已閱讀5頁，還剩15頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

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

文章標題

</header>

正文內容

<footer>

文章尾注

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

<nav> <ahref="#">首頁</a>|<ahref="#">軟件外包</a>| <ahref="#">物聯網</a>|<ahref="#">金融財務</a>| <ahref="#">電商物流</a></nav>

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

溫馨提示

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

評論

0/150

提交評論