HTML5新增常用的標記有哪些

今天小編給大家分享一下HTML5新增常用的標記有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　HTML5常用標記

　　含義 語法書寫

　　頭部 <header></header>

　　尾部 <footer></footer>

　　導航 <nav></nav>

　　媒體文件引入 <embed src=“”></embed>

　　內容塊 <section></section>

　　輔助信息 <aside></aside>

　　文章 <article></article>

　　獨立內容塊 <figure>

　　<figcaption>這個是熊大小動物</figcaption>

　　<img src="xiongda.png" />

　　</figure> 類似dl dt dd

　　高亮顯示文字 <mark></mark> 一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞

　　標題組 <hgroup></hgroup> <hgroup> 標簽被用來對標題元素進行分組

　　對話框 <dialog open>這是打開的對話窗口</dialog> 目前只有 Chrome 和 Safari 6 支持 <dialog> 標簽

　　定義圖形 <canvas> </canvas> 只是圖形容器，必須使用腳本來繪制圖形。

　　Video視頻文件

　　Video 定義視頻

　　<video src="xiongda.mp4"(引入路徑) controls="controls"（顯示控件） autoplay="autoplay"（自動播放） preload="auto"（預備加載）

　　loop="loop"（循環） poster="./xionger.jpg"（定義視頻第一幀的圖片）></video>

　　<video controls="controls" autoplay="autoplay">

　　<source src="myvideo.mp4" type="video/mp4"><source>

　　<source src="myvideo.ogg" type="video/ogg><source>

　　<source src="myvideo.webm" type="video/webm"><source>

　　</video>（video允許有多個source元素，source元素可以連接不同的視頻文件

　　瀏覽器將使用第一個可識別的格式進行播放）

　　Video的標簽支持的格式

　　一共支持三個格式：Ogg、MPEG4、WebM。但三種格式對于瀏覽器的兼容性

　　各不同

　　1格式 IE Firefox Opera Chrome Safari

　　2Ogg No 3.5+ 10.5+ 5.0+ No

　　3MPEG4 9.0+ No No 5.0+ 3.0+

　　4WebM No 4.0+ 10.6+ 6.0+ No

　　NO 代表不支持這款瀏覽器

　　X.0+ 表示支持這款及版本更高的瀏覽器

　　Auido音頻文件

　　<audio src="someaudio.mp3">您的瀏覽器不支持audio標簽</audio>

　　定義音頻，比如音樂或其他音頻流

　　提示：可以在開始標簽和結束標簽之間放置文本內容，這樣老的瀏覽器就可以顯示

　　出不支持該標簽的信息

　　CSS3瀏覽器前綴（了解）

　　-ms- -ms-box-shadow IE瀏覽器專屬的CSS屬性需添加-ms-前綴

　　-moz- -moz-box-shadow 所有基于Gecko引擎的瀏覽器（如Firefox）專屬的CSS屬性需添加-moz-前綴

　　-o- -o-box-shadow Opera瀏覽器專屬的CSS屬性需添加-o-前綴

　　-webkit- -webkit-box-shadow 所有基于Webkit引擎的瀏覽器（如Chrome、Safari）專屬的CSS需添加-webkit-前綴

　　CSS3優雅降級漸進增強

　　.transition { /*漸進增強寫法 從小到大*/

　　-webkit-transition: all .5s;

　　-moz-transition: all .5s;

　　-o-transition: all .5s;

　　transition: all .5s;

　　}

　　文字陰影 text-shadow

　　div{text-shadow:10px(水平陰影距離，可給負值) 10px（垂直陰影距離，可給負值） 5px （模糊度）red（陰影顏色）;}

　　p{text-shadow:10px 10px 5px red, 12px 12px 6px blue;}

　　（多個陰影間用逗號隔開）

　　盒子陰影 box-shadow

　　div{box-shadow:10px 10px 5px 3px（延伸半徑） red inset（內陰影）;}

　　p{box-shadow:10px 10px 5px red,12px 12px 6px blue；}

　　CSS中圓角的屬性

　　border-radius 設置圓角 border-radius ：20px/30px; 如果反斜杠符號“/”存在，“/”前面的值是設置元素圓角的水平方向半徑，“/”后面的值是設置元素圓角的垂直方向的半徑；

　　border-radius ：30px; 如果沒有“/”，則元素圓角的水平和垂直方向的半徑值相等

　　text-shadow

　　定義/作用:設置文本陰影的效果

　　語法:text-shadow:x方向的位置 y方向的位置【向下】模糊距離顏色[默認

　　跟文本的顏色一致]有兩個必須的屬性值:x方向的位置y方向的位置

以上就是“HTML5新增常用的標記有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。