html你可能還不知道的一些知識點

時間 2019-11-18

標籤 html 可能還不知道一些知識欄目 HTML 简体版

原文原文鏈接

html你可能還不知道的一些知識點

1、標籤語義化

html標籤語義化是讓你們直觀的認識標籤和屬性的用途和做用，好處最主要的是對搜索引擎友好。javascript

Eg:css

一、若是你想在頁面中突出"奧巴馬"這三個字，讓搜索引擎重視它，若是你這麼寫：

<div> 奧巴馬</div>

對於搜索引擎來講，它也只是一個普通得不能再普通的三個字而已，儘管它是指代美國總統。html

那麼應該怎樣才能讓搜索引擎知道它的重要性呢？來看看語義化的寫法吧：前端

<h1>奧巴馬</h1>

奧巴馬看了後，樂了，哥原本就應該備受關注的！html5

二、若是文字要加粗顯示，<em> 是用做強調的，strong是用做重點強調的。

三、對於標籤<s>只是表示一個普通的刪除線，而<del>標籤更具語義化，它表示刪除一個內容，而且del還帶有cite和datetime來代表刪除的緣由以及刪除的時間。

......java

So，標籤語義化其實就是把你想要表達的東西更容易被搜索引擎理解和重視，讓你想表達的東西，to be girlfriend,not to be friend。web

2、HTML標籤補充

一、縮寫說明

<abbr title="Hyper text Markup Language">HTML</abbr>

二、定義列表（通常用於內容解釋）

<dl>  <dt>子曰：「巧言令色，鮮矣仁！」</dt>  <dd>孔子說：「花言巧語，裝出和顏悅色的樣子，這種人的仁心就不多了。」</dd>  <dt>季</dt>  <dd>一、兄弟排行次序最小的：季弟（小弟）.季父（小叔叔）</dd>  <dd>二、三個月爲一季,一年分春夏秋冬四季</dd> </dl>

三、預格式文本標籤

被包圍在 pre 元素中的文本一般會保留空格和換行符canvas

<pre> 一、這是一溝絕望的死水 二、清風吹不起半點漪淪 三、不如多扔些破銅爛鐵 四、爽性潑它的剩菜殘羹 </pre>

四、版權符

五、對html進行轉義

<body>

3、H5新增標籤

一、多媒體標籤：video、audio、canvas

1.1音頻標籤video

不一樣瀏覽器對於html5 audio標籤和音頻格式的兼容性（通常提供ogg和mp3格式，就能夠支持全部主流瀏覽器了。）瀏覽器

<audio src="1.mp3" controls="controls">

<audio controls="controls" autoplay loop> <source src="1.mp3" type="audio/mpeg"/> <source src="1.ogg" type="audio/ogg"/> </audio>

編解碼工具：FFmpeg（下載地址：www.ffmpeg.org）異步

mp4轉ogg方法同上。

1.2視頻標籤video

<video src="1.mp3" controls="controls" autoplay> <video controls="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.currentTime=0;//中止

1.3畫布標籤:Canvas （須要配合js來作效果，後續再總結）

二、主體結構標籤

2.1nav元素表明頁面的導航連接區域。用於定義頁面的主要導航部分。

<nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav>

2.2article元素展現網頁中獨立的一塊內容，譬如論壇的帖子、博客的文章、一篇用戶評論。

<article> <h1>一篇文章</h1> <p>文章內容..</p> <footer> <p><small>版權：html5jscss網所屬，做者：小北</small></p> </footer> </article>

<article>  <header>   <h1>一篇文章</h1>   <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>  </header>  <p>文章內容..</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>   </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.3section元素表明文檔中的「節」或「段」，「段」能夠是指一篇文章裏按照主題的分段；「節」能夠是指一個頁面裏的分組。

<article>  <h1>前端技術</h1>  <p>前端技術有那些</p>  <section>   <h2>CSS</h2>   <p>樣式..</p>  </section>  <section>   <h2>JS</h2>   <p>腳本</p>  </section> </article>

2.4aside 元素被包含在article元素中做爲主要內容的附屬信息部分，其中的內容能夠是與當前文章有關的相關資料、標籤、名次解釋等、

<article> <p>內容</p> <aside> <h1>做者簡介</h1> <p>小北，前端一枚</p> </aside> </article>

2.5header元素展現一個區域的頭部分

2.6footer元素展現一個區域的尾部分

2.7hgroup元素表明「網頁」或「section」的標題，當元素有多個層級時，該元素能夠將 `h1` 到 `h6` 元素放在其內，譬如文章的主標題和副標題的組合

<hgroup> <h1>這是一篇介紹HTML 5語義化標籤和更簡潔的結構</h1> <h2>HTML 5</h2> </hgroup>

2.8figure標籤規定獨立的流內容（圖像、圖表、照片、代碼等等）。figure 元素的內容應該與主內容相關，但若是被刪除，則不該對文檔流產生影響。figcaption 標籤訂義 figure 元素的標題（caption）。"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。

<figure> <figcaption>黃浦江上的的盧浦大橋</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

三、非主體結構標籤

3.1 <datalist> 標籤訂義選項列表。

<input type="text" list="taglist" /> <datalist id="taglist"> <option>蘋果</option> <option>橘子</option> <option>西紅柿</option> </datalist>

3.2details標籤訂義文檔細節

<details> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details>

3.3menu標籤訂義列表

<menu> <li>home</li> <li>home</li> <li>home</li> </menu>

3.4address地址標籤

<address> Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

3.5progress進度條標籤

下載進度：
<progress> </progress>

3.6 mark高亮顯示

<mark>中國</mark>人民最偉大

3.7<time> 標籤訂義日期或時間，或者二者

<p> 咱們在天天早上 <time>9:00</time> 開始營業。 </p>

3.8新增的表單元素

<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" /> <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="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.2頁面加載的時候獲取焦點

<input type="text" autofocus="autofocus" />

3.9.3form外也能夠作數據提交

<form action="" method="get" id="form1"> </form> <input type="text" name="address1" form="form1" />

3.9.4form內的內容也能夠改action地址

<form action="1.aspx"> <input type="submit" value="提交" formaction="2.aspx" /> </form>

3.9.5file能夠支持多文件上傳了

<input type="file" name="img" multiple="multiple" />

3.9.6支持自定義驗證功能了

<form action="1.aspx"> 請輸入郵政編碼：<input type="text" pattern="[0-9]{6}" title="請輸入6位數的郵編" /> <input type="submit" /> </form>

3.9.4新增默認內容提示了

<input type="text" placeholder="請輸入用戶名"/>

3.9.5新增不能爲空屬性

<form action="1.aspx"> 請輸入郵政編碼：<input type="text" required="required" /> <input type="submit" /> </form>

3.10新增全局屬性

3.10.1contenteditable 屬性規定是否可編輯元素的內容。

<p contenteditable="true">這是一段可編輯的段落。請試着編輯該文本。</p>

3.10.2 hidden 屬性規定對元素進行隱藏。

<p hidden="hidden">這是一段隱藏的段落。</p> <p>這是一段可見的段落。</p>

3.10.3 tabindex 屬性規定當使用 "tab" 鍵進行導航時元素的順序。

<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a><br /> <a href="http://www.google.com/" tabindex="1">Google</a><br /> <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

3.11其餘屬性

3.11.1ol的reversed屬性對列表順序進行降序

<ol reversed start="5" >  <li>SHUFFLE!/三界戀曲</li>  <li>撲殺天使</li>  <li>零之使魔</li>  <li>不要撒嬌哦/極樂天師/純情和尚俏尼姑</li>  <li>to love/出包王女</li> </ol>

3.11.2js的async 屬性規定一旦腳本可用，則會異步執行。

<p id="p1">Hello World!</p> <script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>

3.11.3 js的defer 屬性規定當頁面已完成加載後，纔會執行腳本。

<script type="text/javascript" src="/example/html5/demo_defer.js" defer="defer"></script> <p>上面的腳本從下面的段落請求信息。一般，這是不可能的，由於腳本在段落加載以前已經執行了。</p> <p id="p1">Hello World!</p> <p>不過，defer 屬性規定腳本稍後執行。這樣腳本就能夠從段落中請求信息了。</p>