html语义化练习易牛课堂代码
生活随笔
收集整理的這篇文章主要介紹了
html语义化练习易牛课堂代码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
html
<body> <header> <!-- 導航 --> <nav> <a href="#">首頁</a> <a href="#">易牛課堂</a> <a href="#">易牛班級</a> <a href="#">易牛咨詢</a> <a href="#">話題小組</a> </nav> </header> <article> <!--? 文章標題 --> <header class="biaoti"> <div>Web前端--HTML5基礎知識</div> <div>瀏覽：316 評論：10 贊：101</div> </header> <!-- 簡述 --> <section class="box1"> <div>HTML5發(fā)展簡述</div> <div> HTML發(fā)展已久，而HTML5則是在這期間通過人們不斷改進HTML而來的。在1991年世界上第一個網頁誕生以來，HTML就是網站開發(fā)中最主要的語言之一，并且一直在不斷發(fā)展與進化。而現(xiàn)在，美觀、高速、多平臺，這些詞已經密切地和HTML5聯(lián)系起來。在HTML5的幫助下，傳統(tǒng)的網頁，已經帶給人們堪比桌面程序的用戶體驗。2012年12月 17日，W3C 發(fā)布了HTML5以及 Canvas 2D 兩個標準的完全定義版本，標志著 HTML5 的標準已經在趨向穩(wěn)定。隨著移動互聯(lián)網的高速發(fā)展，HTML5也將迎來前所未有的發(fā)展機會。越來越多的人涌入HTML5學習浪潮中。</div> </section> <!-- 新性能 --> <section class="box2"> <div>HTML5新性能</div> <div>HTML5 提供了有效的數(shù)據管理、繪圖、視頻和音頻工具。它簡化了面向 Web 和便攜式設備的跨瀏覽器應用程序的開發(fā)。HTML5是推動移動云計算服務的技術之一，因為它可以實現(xiàn)更高程度的靈活性，可以開發(fā)出激動人心的交互式網站。它還引入了新的標記和增強，包括一個優(yōu)雅的結構、表單控件、API、多媒體、數(shù)據庫支持，并極大地加快了處理速度。 </div> <div> Html5的優(yōu)點即是“一次性開發(fā)，多次分發(fā)”，使得一次設計適應不同終端成為可能。信息流架構應用化都是直接在WEB(或wap)端抓取數(shù)據，html5可以直接使用跨平臺數(shù)據面不使用后臺API，大大降低研發(fā)維護成本而且呈現(xiàn)的效果幾乎沒有什么區(qū)別。Html5最大的意義在于改變WEB文檔的結構方式，借助于header,foot,section,article，這些標配、標簽我們可以實現(xiàn)更具結構化語義化的WEB文檔，這樣，搜索引擎更容易索引到WEB站點，我們可以搜索到更快更準備的信息。 </div> <div> HTML5不僅僅局限于HTML語言本身，還包括了CSS3以及JavaScript語言里新增的函數(shù)和功能。HTML5能始終堅持不斷發(fā)展，并很快得到廣泛認可，與其在制定之初就確立的核心理念有很大的關系。這些核心理念就是我們今天在W3C站點上所看到的HTML5設計原理這份文檔，概括起來就是——兼容性、實用性、互操作性以及普遍可訪問性。 </div> </section> <!-- 兩大特點 --> <section class="box3"> <div>HTML5兩大特點</div> <div>HTML5有兩大特點：</div> <div>首先，<span> 它強化了Web網頁的表現(xiàn)性能。</span></div> <div>其次，<span>追加了本地數(shù)據庫等 Web 應用的功能。</span> </div> <div> 在語義上，HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數(shù)據與微格式等方面的支持，構建對程序、對用戶都更有價值的數(shù)據驅動的Web。而本地存儲特性使基于HTML5開發(fā)的網頁APP擁有更短的啟動時間，更快的聯(lián)網速度。這些全得益于HTML5 APP Cache，以及本地存儲功能。 </div> <div> 總的來說HTML5實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。雖然HTML5有CSS、JavaScript技術，但還是要單獨提出CSS3和JS來進行學習更好。如今HTML5是IT行業(yè)網站開發(fā)不可或缺的技術，也是web前端開發(fā)必備技能之一，是很值得大家學習的。 </div> </section> <!--? --> <footer> <div>文章來源：<span>易牛云課堂</span> </div> <a href="#">原文鏈接：http://www.16ketang.com/article/12</a> </footer></article> <!--? 咨詢內容 --> <div class="zixu"> <aside> <div>相關資訊</div> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a>
</aside> <aside> <div>熱門資訊</div> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a> <a href="#">Lorem ipsum dolor sit.</a>
</aside> </div> <footer class="jiaozhu"> <p>Powered by EduSoho v8.0.23 ©2014-2017 好知網 課程存檔</p> <p>課程內容版權均歸 易牛云課堂 所有 蜀ICP備16007351號 </p>
</footer> </body>
</html> css body { background-color: #f8f8f8; }
header { width: 100%; height: 32px; background-color: #373d41; }
a { text-decoration: none; }
li { list-style: none; }
nav { line-height: 32px; }
header>div { width: 1200px; height: 32px; margin: 0 auto; line-height: 32px; }
nav>img { width: 66px; float: left; padding-top: 10px; }
nav>a { float: right; color: white; margin-left: 30px; padding: 0 42px; }
nav>a:hover { background-color: #00c0dd; }
/* 導航欄實現(xiàn)代碼? */
.yunshichang { width: 100%; height: 128px; background-color: #fdfdfd; margin-top: 20px; }
/* 搜索欄 */
/*云市場上邊*/
.yunshichang-top { width: 1200px; height: 68px; margin: 0 auto; overflow: hidden; }
.input { width: 632xp; height: 31; }
.yunshichang-top>img { width: 100px; float: left; overflow: hidden; }
.fuwu { border: 1px solid gray; width: 634px; height: 28px; margin-left: 160px; float: left; overflow: hidden; }
.fuwu>p { color: gray; float: left; line-height: 28px; }
.fuwu>a { line-height: 28px; float: right; color: white; background-color: #00c0dd; }
.yunshichang-top span { font-weight: 800; float: right; color: #00c0dd; margin-right: 6px; border: 1px solid#00c0dd; }
.wangzhan>a { color: gray; margin-right: 20px; font-size: 14px; }
.wangzhan { float: left; margin-left: 168px; margin-bottom: 16px; margin-top: 10px; }
/* 導航欄 */
.yunshichang-bottom { background-color: cyan; width: 240px; height: 343px; justify-content:flex-start; } /* 云市場類藍色小分區(qū) */ .yunshichang2>img{ width:960px; height:299px; justify-content:space-between; } /* 找商品 */ .zhaoshangping{ width: 1200px; height: 164px; margin: 0 auto; background-color: #ffffff; } /* div{ display: flex; } */ .zhaoshangping{
display: flex; }
?
轉載于:https://www.cnblogs.com/zhuxinpeng-looking/p/10562444.html
總結
以上是生活随笔為你收集整理的html语义化练习易牛课堂代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Docker 在容器中部署静态网站
- 下一篇： 大数据常用工具类