html你可能還不知道的一些知識(shí)點(diǎn)總結(jié)

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

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

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

4、剩菜殘羹</pre>4、版權(quán)符&copy;5、對(duì)html進(jìn)行轉(zhuǎn)義&lt;body&gt;三、H5新增標(biāo)簽1、多媒體標(biāo)簽：video、audio、canvas1.1 音頻標(biāo)簽video不同瀏覽器對(duì)于html5 audio標(biāo)簽和音頻格式的兼容性（一般提供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 視頻標(biāo)簽video<video src="1.mp3" controls="controls" autoplay><video controls="contro

6、ls"> <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.currentTime=0;/停止1.3&#

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

8、/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></p>

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

10、> <article> <header> <h3>評(píng)論者: 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元素代表文檔中的“節(jié)”或“段”，“段”可

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

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

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

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

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

16、roperty of W3School.</p></details>3.3 menu標(biāo)簽定義列表<menu> <li>home</li> <li>home</li> <li>home</li></menu>3.4 address地址標(biāo)簽<address>Written by <a href="mailto:webmaster">Donald Duck</a>.<br> Visit us a

17、t:<br>E<br>Box 564, Disneyland<br>USA</address>3.5 progress進(jìn)度條標(biāo)簽下載進(jìn)度：<progress></progress>3.6 mark高亮顯示<mark>中國(guó)</mark>人民最偉大3.7 <time> 標(biāo)簽定義日期或時(shí)間，或者兩者<p>我們?cè)诿刻煸缟?<time>9:00</time> 開(kāi)始營(yíng)業(yè)。</p>3.8 新增的表單元素<in

18、put 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" /><inp

19、ut type="search" /><input type="color" /><input type="date" /><input type="month" /><input type="week" /><input type="time" />3.9 新增的input屬性 用戶輸入自動(dòng)完成功能<form autocompelete="on"><i

20、nput type="text" list="citylist" /><datalist id="citylist"> <option>BeiJing</option> <option>QingDao</option> <option>QingZhou</option> <option>QingHai</option></datalist></form> 頁(yè)面加載的時(shí)候獲取焦點(diǎn)<in

21、put type="text" autofocus="autofocus" /> form外也可以做數(shù)據(jù)提交 <form action="" method="get" id="form1"></form><input type="text" name="address1" form="form1" />  form內(nèi)的內(nèi)容也可以改action地址<f

22、orm action="1.aspx"> <input type="submit" value="提交" formaction="2.aspx" /></form> file可以支持多文件上傳了<input type="file" name="img" multiple="multiple" /> 支持自定義驗(yàn)證功能了<form action="1.aspx">

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

24、put type="text" required="required" /> <input type="submit" /></form>3.10 新增全局屬性 contenteditable 屬性規(guī)定是否可編輯元素的內(nèi)容。<p contenteditable="true">這是一段可編輯的段落。請(qǐng)?jiān)囍庉嬙撐谋尽?lt;/p> hidden 屬性規(guī)定對(duì)元素進(jìn)行隱藏。<p hidden="hidden">這是一段隱藏的段落。</p><p>這是一段可見(jiàn)的段落。</p> tabindex 屬性規(guī)定當(dāng)使用 "tab" 鍵進(jìn)行導(dǎo)航時(shí)元素的順序。<a href=" tabindex="2">W3School</a><br /><a href=" tabindex="1">Google</a><br /><a href=" tabindex="3