CSS技术分享

HTML5常用标记：

1，<header></header>头部

  2      <section></section>内容区

  3      <nav></nav>导航栏

    4    <aside></aside>辅助信息

    5    <article></article>文章区

    6    <hgroup></hgroup>标题组

    7    <embed src=""></embed>媒体文件引入

    8    <footer></footer>尾部区域

    9    独立内容块：                   <figure>   

                                                 <figcaption>这是个胸大小动物<figcaption>

                                                <img src="xiongda.png"/>

                                                </figure>              (类似于di   dt  dd）

10，高亮显示文字：<mark></mark>

11,标题组：<hgroup></hgroup>

12,对话框：<dialog open>这是打开的对话窗口</dialog>

13,定义图形：<canvas></canvas>

                    Video视频文件

1，<video src(引入路径）=“xiongda.mp4"   controls(显示控件）=”controls“  autoplay（自动播放）=”autoplay“   preload（预备加载）=”auto“   loop（循环）=”loop“   poster（定义视频第一帧的图片）=”../xionger.jpg></video>

  语法：<video controls="controls"  autoplay="autoplay">

                        <source src="图片路径“  type="图片路径”</source>

                </video>

                                        Audio音频文件

1.autoplay:音频就绪后马上播放

2，controls：向用户显示控件，比如：播放按钮。

3，loop：每当音频结束时重新开始播放。

4，preload：音频在页面加载时进行加载，并预备播放

5，src----url    要播放的url

语法：<audio src="someadio.mpd3">你的浏览器不支持audio标签。</audio>

                                  文字阴影

文字阴影：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；}