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方向的位置