html你可能還不知道的一些知識點總結(jié)

1、html你可能還不知道的一些知識點一、標簽語義化html標簽語義化是讓大家直觀的認識標簽和屬性的用途和作用，好處最主要的是對搜索引擎友好。Eg:1、如果你想在頁面中突出"奧巴馬"這三個字，讓搜索引擎重視它，如果你這么寫：<div> 奧巴馬</div>對于搜索引擎來說，它也只是一個普通得不能再普通的三個字而已，盡管它是指代美國總統(tǒng)。那么應(yīng)該怎樣才能讓搜索引擎知道它的重要性呢？來看看語義化的寫法吧：<h1>奧巴馬</h1>奧巴馬看了后，樂了，哥本來就應(yīng)該備受關(guān)注的！2、如果文字要加粗顯示，<em> 是用作強調(diào)的，str

2、ong是用作重點強調(diào)的。3、對于標簽<s>只是表示一個普通的刪除線，而<del>標簽更具語義化，它表示刪除一個內(nèi)容，并且del還帶有cite和datetime來表明刪除的原因以及刪除的時間。.So，標簽語義化其實就是把你想要表達的東西更容易被搜索引擎理解和重視，讓你想表達的東西，to be girlfriend,not to be friend。二、HTML標簽補充1、縮寫說明<abbr title="Hyper text Markup Language">HTML</abbr>2、定義列表（一般用于內(nèi)容解釋）<dl&g

3、t; <dt>子曰：“巧言令色，鮮矣仁！”</dt> <dd>孔子說：“花言巧語，裝出和顏悅色的樣子，這種人的仁心就很少了?！?lt;/dd> <dt>季</dt> <dd>1、兄弟排行次序最小的：季弟（小弟）.季父（小叔叔）</dd> <dd>2、三個月為一季,一年分春夏秋冬四季</dd></dl>3、預(yù)格式文本標簽被包圍在 pre 元素中的文本通常會保留空格和換行符<pre>1、這是一溝絕望的死水2、清風吹不起半點漪淪3、不如多扔些破銅爛鐵4、爽性潑它的

4、剩菜殘羹</pre>4、版權(quán)符&copy;5、對html進行轉(zhuǎn)義&lt;body&gt;三、H5新增標簽1、多媒體標簽：video、audio、canvas1.1 音頻標簽video不同瀏覽器對于html5 audio標簽和音頻格式的兼容性（一般提供ogg和mp3格式，就可以支持所有主流瀏覽器了。） <audio src="1.mp3" controls="controls"><audio controls="controls" autoplay loop>

5、; <source src="1.mp3" type="audio/mpeg"/> <source src="1.ogg" type="audio/ogg"/></audio>編解碼工具：FFmpeg（下載地址：）mp4轉(zhuǎn)ogg方法同上。1.2 視頻標簽video<video src="1.mp3" controls="controls" autoplay><video control

6、s="controls"> <source src="1.mp4" type="video/mpeg"/> <source src="1.mp4" type="video/ogg"/></video>音視頻播放、暫停、停止方法：var audio = document.getElementById('music1');audio.play();/播放audio.pause();/暫停audio.pause();audio.currentT

7、ime=0;/停止1.3 畫布標簽:Canvas （需要配合js來做效果，后續(xù)再總結(jié)）2、主體結(jié)構(gòu)標簽2.1 nav元素代表頁面的導(dǎo)航鏈接區(qū)域。用于定義頁面的主要導(dǎo)航部分。<nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul></nav>2.2 article元素展示網(wǎng)頁中獨立的一塊內(nèi)容，譬如論壇的帖子、博客的文章、一篇用戶評論。<article> <

8、h1>一篇文章</h1> <p>文章內(nèi)容.</p> <footer> <p><small>版權(quán)：html5jscss網(wǎng)所屬，作者：小北</small></p> </footer></article><article> <header> <h1>一篇文章</h1> <p><time pubdate datetime="2012-10-03">2012/10/03</time&

9、gt;</p> </header> <p>文章內(nèi)容.</p> <article> <h2>評論</h2> <article> <header> <h3>評論者: XXX</h3> <p><time pubdate datetime="2012-10-03T19:10-08:00">1 hour ago</time></p> </header> <p>哈哈哈</p>

10、; </article> <article> <header> <h3>評論者: XXX</h3> <p><time pubdate datetime="2012-10-03T19:10-08:00">1 hour ago</time></p> </header> <p>哈？哈？哈？</p> </article> </article></article>2.3 section元素代表文檔

11、中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個頁面里的分組。<article> <h1>前端技術(shù)</h1> <p>前端技術(shù)有那些</p> <section> <h2>CSS</h2> <p>樣式.</p> </section> <section> <h2>JS</h2> <p>腳本</p> </section></article>2.4 a

12、side 元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當前文章有關(guān)的相關(guān)資料、標簽、名次解釋等、<article> <p>內(nèi)容</p> <aside> <h1>作者簡介</h1> <p>小北，前端一枚</p> </aside></article>2.5 header元素展示一個區(qū)域的頭部分2.6 footer元素展示一個區(qū)域的尾部分2.7 hgroup元素代表“網(wǎng)頁”或“section”的標題，當元素有

13、多個層級時，該元素可以將h1到h6元素放在其內(nèi)，譬如文章的主標題和副標題的組合<hgroup> <h1>這是一篇介紹HTML 5語義化標簽和更簡潔的結(jié)構(gòu)</h1> <h2>HTML 5</h2></hgroup>2.8 figure標簽規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。figure 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對文檔流產(chǎn)生影響。figcaption 標簽定義 figure 元素的標題（caption）。"figcaption" 元素應(yīng)該被置于 &qu

14、ot;figure" 元素的第一個或最后一個子元素的位置。<figure><figcaption>黃浦江上的的盧浦大橋</figcaption><img src="shanghai_lupu_bridge.jpg" width="350" height="234" /></figure> 3、非主體結(jié)構(gòu)標簽3.1 <datalist> 標簽定義選項列表。<input type="text" list=&quo

15、t;taglist" /><datalist id="taglist"><option>蘋果</option><option>橘子</option><option>西紅柿</option></datalist>3.2 details標簽定義文檔細節(jié)<details><summary>Copyright 2011.</summary><p>All pages and graphics on this web

16、site are the property of W3School.</p></details>3.3 menu標簽定義列表<menu> <li>home</li> <li>home</li> <li>home</li></menu>3.4 address地址標簽<address>Written by <a href="mailto:webmaster">Donald Duck</a>.<br&

17、gt; Visit us at:<br>E<br>Box 564, Disneyland<br>USA</address>3.5 progress進度條標簽下載進度：<progress></progress>3.6 mark高亮顯示<mark>中國</mark>人民最偉大3.7 <time> 標簽定義日期或時間，或者兩者<p>我們在每天早上 <time>9:00</time> 開始營業(yè)。</p>3.8 

18、;新增的表單元素<input type="email" /><input type="url" /><input type="tel" /><input type="number" min="1" max="20" step="4" /><input type="range" min="1" max="20" step="4"

19、; /><input type="search" /><input type="color" /><input type="date" /><input type="month" /><input type="week" /><input type="time" />3.9 新增的input屬性3.9.1 用戶輸入自動完成功能<form autocompelete=&quo

20、t;on"><input type="text" list="citylist" /><datalist id="citylist"> <option>BeiJing</option> <option>QingDao</option> <option>QingZhou</option> <option>QingHai</option></datalist></form>3.9.

21、2 頁面加載的時候獲取焦點<input type="text" autofocus="autofocus" />3.9.3 form外也可以做數(shù)據(jù)提交 <form action="" method="get" id="form1"></form><input type="text" name="address1" form="form1" /> 3.

22、9.4 form內(nèi)的內(nèi)容也可以改action地址<form action="1.aspx"> <input type="submit" value="提交" formaction="2.aspx" /></form>3.9.5 file可以支持多文件上傳了<input type="file" name="img" multiple="multiple" />3.9.6 支持自定義

23、驗證功能了<form action="1.aspx"> 請輸入郵政編碼：<input type="text" pattern="0-96" title="請輸入6位數(shù)的郵編" /> <input type="submit" /></form>3.9.4 新增默認內(nèi)容提示了<input type="text" placeholder="請輸入用戶名"/>3.9.5 新增不能為空屬

24、性<form action="1.aspx"> 請輸入郵政編碼：<input type="text" required="required" /> <input type="submit" /></form>3.10 新增全局屬性3.10.1 contenteditable 屬性規(guī)定是否可編輯元素的內(nèi)容。<p contenteditable="true">這是一段可編輯的段落。請試著編輯該文本。</p>3

25、.10.2 hidden 屬性規(guī)定對元素進行隱藏。<p hidden="hidden">這是一段隱藏的段落。</p><p>這是一段可見的段落。</p>3.10.3 tabindex 屬性規(guī)定當使用 "tab" 鍵進行導(dǎo)航時元素的順序。<a href=" tabindex="2">W3School</a><br /><a href=" tabindex="1">Google</a><br /><a href=" tabindex="3&quo