html5 + css3 + jQuery + 響應式佈局設計
1. [代碼][HTML]代碼
<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>html5 - 新增屬性與技術總結 - by sole</title>
<meta name="keywords" content="html5教程，html5研究，html5技術門戶，html5權威指南，css3在線實列，html5與css3精髓，響應式佈局設計" />
<meta name="description" content="html5新增技術使用與總結，採用最流行的響應時不覺設計，最全最精的html5知識，html5+css3+jQuery實列教程" />
<meta name="viewport" content="width=device-width" />
<meta name="copyright" content="imsole.net" />
<meta name="designer" content="sole" />
<meta name="publisher" content="imsole.net" />
<meta name="author" content="sole" />
<meta name="robots" content="all" />
<meta name="distribution" content="global" />
<link rel="stylesheet" href="i_ui.css" />
<!--[if lt IE 9]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<section class="main">
<!-- 在線測試：http://mattkersley.com/responsive/ -->
<!-- header -->
<header>
<h1>html5新增屬性與技術總結</h1>
<!-- nav -->
<nav class="nav clear">
<a href="index.html" class="now">首頁</a>
<a href="ele.html">語義化標記</a>
<a href="form.html">表單加強功能</a>
<a href="media.html">視頻 / 音頻</a>
<a href="canvas.html">畫布</a>
<a href="contenteditable.html">可編輯內容</a>
<a href="drag.html">拖放</a>
<a href="localStorage.html">本地存儲</a>
<a href="other.html">Other</a>
</nav>
</header>
<!-- section -->
<section class="content clear">
<aside class="right">
<div class="sub_nav" id="sub_nav">
<div class="tags">
<a href="#index0">html5特性</a>
<a href="#index1">檢測瀏覽器支持</a>
<a href="#index2">html5 變動的標籤</a>
<a href="#index3">簡單代碼示例:</a>
</div>
<div class="weibo">
<iframe src="http://follow.v.t.qq.com/index.php?c=follow&a=quick&name=websole&style=4&t=1357281747315&f=1" marginwidth="0" marginheight="0" allowtransparency="true" frameborder="0" height="27" width="220" scrolling="auto"></iframe>
</div>http://www.huiyi8.com/gongzuozongjie/
</div>工做總結
</aside>
<article class="left">
<!-- 0 -->
<p class="t" id="index0"><strong>html5特性</strong></p>
<p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">官方詳細的文檔</a>是尋找 HTML5 特性的最好地方，固然你還能夠輕鬆經過 W3Schools 來學習<a href="http://www.w3schools.com/html5/html5_reference.asp">HTML5 標籤</a>。咱們將會在文章中涉及到如下的特性：</p>
<ol>
<li>語義化標記</li>
<li>Form 表單加強功能</li>
<li>視頻 / 音頻</li>
<li>畫布（Canvas）</li>
<li>可編輯內容</li>
<li>拖放</li>
<li>穩健的數據存儲</li>
</ol>
<!-- 1 -->
<p class="t" id="index1"><strong>檢測瀏覽器支持</strong></p>
<p>在你開始嘗試 HTML5以前，須要知道各主流瀏覽器的支持情況。這些有用的資源，將能夠幫助你向着正軌走：</p>
<ol>
<li><a href="http://caniuse.com/">什麼時候能用</a></li>
<li><a href="http://www.findmebyip.com/litmus">網頁設計師的瀏覽器支持列表</a></li>
<li><a href="http://html5test.com/">HTML5 測試</a></li>
<li><a href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)">佈局引擎對比</a></li>
</ol>
<p>其餘檢測</p>
<p>Javascript:<a href="http://diveintohtml5.org/everything.html">用Javascript 檢測瀏覽器特性</a></p>
<p>檢測 HTML5/CSS3 本地支持的 Javascript 庫<a target="_blank" href="http://www.modernizr.com/">Modernizr</a></p>
<p>若是你選擇用 Mootools可使用<a target="_blank" href="http://www.aryweb.nl/projects/mooModernizr/">MooModernizr</a></p>
<!-- 2 -->
<p class="t" id="index2"><strong>html5 變動的標籤</strong></p>
<ol>
<li><strong>簡潔的 DOCTYPE</strong> HTML5 只需一個簡潔的文檔類型：<!DOCTYPE html>。它有意不使用版本，所以文檔將會適用全部版本的HTML。</li>
<li><strong>簡單易記的語言標籤</strong> 你並不須要在 <html> 中使用 xmlns 或 xml:lang 標記。 <html lang=」en」> 將對 HTML5 有效。</li>
<li><strong>簡單易記的編碼類型</strong> 你如今能夠在 meta 標籤中使用 「charset」：<meta charset=」utf-8″ /></li>
<li><strong>不須要閉合標籤</strong> 在 HTML5 中，空標籤（如：br、img 和 input ）並不須要閉合標籤。</li>
<li><strong>新增標籤</strong> 新增的語義化標籤 <br />
header, hgroup, nav, section, article, details, figure, figcaption, aside, time, mark, audio, video, source, track, bdi, canvas, command, datalist, summary, embed, keygen, meter, output, progress, rp, rt, ruby,
</li>
<li><strong>廢棄的標籤</strong> 下面這些標籤並不被 HTML5 支持： <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>[刪除線]、<strike>[刪除線]、<mark title="tt標籤與 code 和 kbd 標籤同樣，<tt> 標籤和必需的 tt 結束標籤告訴瀏覽器，要把其中包含的文本顯示爲等寬字體。對於那些已經使用了等寬字體的瀏覽器來講，這個標籤在文本的顯示上就沒有什麼特殊效果了。"><tt>[定義打字機文本]</mark>、<u>[下劃線文本]; 和 <xmp>[和pre相似];</li>
<li><strong>新增屬性</strong> 在 HTML5 中，增長了不少form表單屬性，固然還有其餘屬性。 <br />
required, <mark title="小偷屬性">from</mark>, pattern, placeholder, email, range[min, max, step], url, date, time, datetime, datetime-local, month, week, tel, number, search, --, contentcontenteditableable, contextmenu, <mark title="自定義屬性，html5規定自定義屬性必須以 data- 開頭">data-yourvalue</mark>, draggable, item, itemprop, spellcheck, subject
</li>
</ol>
<!-- 3 -->
<p class="t" id="index3"><strong>簡單代碼示例:</strong></p>
<p>
<!doctype html> <br />
<html lang="en"><br />
<head><br />
<meta charset="utf-8" /><br />
<title>HTML5 Document</title><br />
</head><br />
<body><br />
<header> </header><br />
<section> </section><br />
<footer> </footer><br />
</body><br />
</html><br />
</p>
</article>
</section>
<!-- footer -->
<footer>
© 2012 2012/11/12 by <a href="http://www.imsole.net/">sole</a>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=20322657" charset="UTF-8"></script>
<script src="http://s96.cnzz.com/stat.php?id=4913803&web_id=4913803" language="JavaScript"></script>
</footer>
</section>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script src=custom.js></script>
</body>
</html>javascript
- 1. html5+css3+jquery完成響應式佈局
- 2. 響應式佈局（css3、html5）流程
- 3. 響應式佈局設計
- 4. html5/css3響應式佈局介紹及設計流程
- 5. html5 響應式佈局
- 6. HTML5+CSS3響應式設計（二）
- 7. css3響應式佈局
- 8. CSS3響應式佈局
- 9. CSS3 響應式佈局 @media
- 10. 理解響應式佈局設計
- 更多相關文章...
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • Web 創建設計 - 網站建設指南
- • IntelliJ IDEA代碼格式化設置
- • 再有人問你分佈式事務，把這篇扔給他
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
- 1. html5+css3+jquery完成響應式佈局
- 2. 響應式佈局（css3、html5）流程
- 3. 響應式佈局設計
- 4. html5/css3響應式佈局介紹及設計流程
- 5. html5 響應式佈局
- 6. HTML5+CSS3響應式設計（二）
- 7. css3響應式佈局
- 8. CSS3響應式佈局
- 9. CSS3 響應式佈局 @media
- 10. 理解響應式佈局設計