HTML5新增常用的標(biāo)記有哪些

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

　　HTML5常用標(biāo)記

　　含義 語(yǔ)法書寫

　　頭部 <header></header>

　　尾部 <footer></footer>

　　導(dǎo)航 <nav></nav>

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

　　內(nèi)容塊 <section></section>

　　輔助信息 <aside></aside>

　　文章 <article></article>

　　獨(dú)立內(nèi)容塊 <figure>

　　<figcaption>這個(gè)是熊大小動(dòng)物</figcaption>

　　<img src="xiongda.png" />

　　</figure> 類似dl dt dd

　　高亮顯示文字 <mark></mark> 一個(gè)比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞

　　標(biāo)題組 <hgroup></hgroup> <hgroup> 標(biāo)簽被用來對(duì)標(biāo)題元素進(jìn)行分組

　　對(duì)話框 <dialog open>這是打開的對(duì)話窗口</dialog> 目前只有 Chrome 和 Safari 6 支持 <dialog> 標(biāo)簽

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

　　Video視頻文件

　　Video 定義視頻

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

　　loop="loop"（循環(huán)） 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允許有多個(gè)source元素，source元素可以連接不同的視頻文件

　　瀏覽器將使用第一個(gè)可識(shí)別的格式進(jìn)行播放）

　　Video的標(biāo)簽支持的格式

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

　　各不同

　　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標(biāo)簽</audio>

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

　　提示：可以在開始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示

　　出不支持該標(biāo)簽的信息

　　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優(yōu)雅降級(jí)漸進(jìn)增強(qiáng)

　　.transition { /*漸進(jìn)增強(qiáng)寫法 從小到大*/

　　-webkit-transition: all .5s;

　　-moz-transition: all .5s;

　　-o-transition: all .5s;

　　transition: all .5s;

　　}

　　文字陰影 text-shadow

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

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

　?。ǘ鄠€(gè)陰影間用逗號(hào)隔開）

　　盒子陰影 box-shadow

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

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

　　CSS中圓角的屬性

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

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

　　text-shadow

　　定義/作用:設(shè)置文本陰影的效果

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

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

以上就是“HTML5新增常用的標(biāo)記有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。