其他分享
首页 > 其他分享> > H5新增加的标签

H5新增加的标签

作者：互联网

1.头部

<header></header>

2.尾部

<footer></footer>

3.导航

<nav></nav>

4.媒体文件引入

<embed src=“”></embed>

5.内容块

<section></section>

6.辅助信息

<aside></aside>

7.文章

<article></article>

8.独立内容块

<figure>  

<figcaption>这个是熊大小动物</figcaption>  

<img src="xiongda.png" />

</figure>

9.高亮显示文字

<mark></mark>

10.标题组

<hgroup></hgroup>

11.对话框

<dialog open>这是打开的对话窗口</dialog>

12.定义图形

<canvas> </canvas>

13.定义视频

<video src="video/dongbei.mp4" controls autoplay loop="loop" preload="auto" poster="img/企业站1_03.jpg"></video>

其中 ：controls 显示控件

autoplay自动播放，但是只能兼容IE浏览器

 loop循环播放

preload预备加载

 poster定义第一帧的图片

另外：video允许有多个source元素，source元素可以连接不同的视频文件，浏览器选择第一个可以识别的格式进行播放

<video>

<source src="1"></source>

<source src="2"></source>

<source src="3"></source>

</video>

14.定义音频

 <audio src="music/赵大格 - 我在人民广场吃炸鸡 (Live).mp3" controls loop preload="auto" autoplay></audio>

controls 显示控件

autoplay自动播放，但是只能兼容IE浏览器

 loop循环播放

preload预备加载

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        nav{
            width: 100%;
            height: 60px;
        }
        ul{
            width: 1200px;
            height: 60px;
            background-color: burlywood;
            margin: 0 auto;
        }
        li{
            width: 120px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: chartreuse;
            list-style: none;
            float: left;
        }
        section{
            width: 100%;
            height: 400px;
            background-color: rgb(218, 138, 138);
        }
        article{
            width: 1200px;
            height: 60px;
            line-height: 60px;
            margin: 0 auto;
            background-color: cadetblue;
        }
        aside{
            width: 200px;
            height: 60px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>文本</p>
    <p>文本</p>
    <p>文本</p>
    <p>文本
    <p>文本</p>
    <p>文本</p>
    <img src="img/section_two_4.jpg" alt="" width='400px'>

    <nav>
        <ul>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
        </ul>
    </nav>
    <section>
        <article>
            <h3>论谁最美</h3>
            我卡看机嗯咯SV叫哦我VB送我uwujnosvnowivhow我一窝窝我哥维护IQ偶爱从第河护卫队超声波v
            <aside>文章来源</aside>
        </article>
    </section>
    <hgroup><h1>标题啊</h1></hgroup>
    <figure>
        <figcaption>标题</figcaption>
        <img src="img/section_two_4.jpg" alt="">
    </figure>
    <mark>高亮显示</mark>
    <dialog open >显示对话框</dialog>
</body>
</html>

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; }

transition { /*优雅降级写法 从大到小*/          

transition: all .5s;      

 -o-transition: all .5s;    

 -moz-transition: all .5s;  

-webkit-transition: all .5s; }

文字阴影  text-shadow

text shadow:10px 10px 5px red;

第一个数值：水平阴影距离，可以取负值

第二个数值：垂直阴影距离，可以取负值

第三个数值：模糊度

第四个，颜色

盒子阴影 box-shadow

box-shadow:10px 10px 5px 3px red inset;

第一个数值：水平阴影距离，可以取负值

第二个数值：垂直阴影距离，可以取负值

第三个数值：模糊度

第四个数值：延伸半径

第五个：颜色

第六个：内阴影还是外阴影，默认内阴影

标签：浏览器,标签,transition,5s,H5,首页,增加,shadow,height
来源： https://blog.csdn.net/m0_48353529/article/details/119187653