【零基礎入門前端系列】—語義化標簽、實體字符、視頻、音頻（八）

一、什么是HTML語義化標簽

語義化的標簽，旨在讓標簽有自己的含義

如上代碼：p標簽與span標簽的區(qū)別之一就是，p標簽的含義是段落而span標簽沒有獨特的含義。

二、語義化標簽的優(yōu)勢

• 代碼結構清晰，方便閱讀，有利于團隊合作開發(fā)。
• 方便其他設備解析以語義的方式來渲染網頁。
• 有利于搜索引擎優(yōu)化（SEO）。

三、無語義的布局標簽

• div：塊級元素，沒有任何意義的一個容器、盒子
• span：行內元素，無語義化。

四、實體字符

當HTML頁面不能識別一些特殊的字符時，可以使用實體字符來替代。

空格  
<  &lt;
> &gt;
版權 &copy;

五、HTML5新增布局標簽

在HTML5出現(xiàn)之前，我們一般采用div+css布局頁面。但這樣的布局方式不僅使我們的文檔結構不夠清晰，而且不利于搜索引擎爬蟲對我們頁面的爬取。為此，HTML5新增了很多語義化標簽。

六、視頻和音頻

🎈視頻
Video標簽定義視頻，比如看電影片段或其它視頻流。

    <video src="/images/v.mp4" controls="controls" autoplay>       
您的瀏覽器不支持 video 標簽。</video>

視頻常用的屬性如下：

🎈🎈音頻
audio標簽定義音頻，比如音樂或者其他的音頻流。支持格式：MP3、ogg、wav

音頻常用屬性：

• src:必須屬性，路徑
• autoplay：自動播放
• loop：循環(huán)播放
• controls 顯示控制面板
• muted 靜音

🎈🎈🎈source
<source>標簽為媒介元素，<source>標簽允許您規(guī)定的視頻/音頻文件供瀏覽器根據(jù)它對媒體類型或者編解碼器的支持進行選擇。