ZG前端学习系统day12 2020-11-17

最新推荐文章于 2024-07-19 15:50:46 发布

短腿小萝卜

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量94

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_43707498/article/details/109749663

版权

对于H5新增加的语义化在Ie9及以下的不兼容问题的解决
第一种方法：引用外部的js文件（html5shiv.min.js)文件
第二种方法动态的创建html5的新标签 document.createElement（“header”）。。。。
然后使用css给这些标签动态的添加样式创建后的是行内块元素要用css转为块
视频和音频
视频video 可是设置的属性 src controls loop autoplay muted （自动播放必须配合静音一起使用） poster
音频需要掌握的属性 src 和controls
多设备使用的时候要配合source使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <video src="./file/movie.mp4" poster="./images/pic5.jpg" controls loop  autoplay muted></video>
    <!-- <video src="">
        <source>
    </video> -->
    <audio src="./file/zhoujie.mp3" controls></audio>
    <audio >
        <source src="zhoujie.ogg" type="audio/ogg">
        <source src="zhoujie.wav" type="audio/wav">
        <source src="zhoujie.mp3" type="audio/mpeg"> 
    </audio>
</body>
</html>

html5新增加的input标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        网页：<input type="url">
        邮箱: <input type="email">
        电话：<input type="tel">
        搜索：<input type="search">
        颜色：<input type="color">
        滑块  <input type="range">
        日期  <input type="date">
        日期时间 <input type="datetime-local">
        月 <input type="month">
        周 <input type="week">
        时间 <input type="time">
        <input type="text" list="url">
        <datalist id="url">
            <option value="s1">
            s1</option>
            <option value="s2">
            s2</option>
        </datalist>

    </form>
</body>
</html>

html5新增加的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="range" min="=5" max="10" stop="2">
        <input type="tel" autofocus placeholder="请输入手机号">
        <input type="text" required>
        <input type="search" autocomplete="off">
        <input type="file" multiple>
        <input type="submit">
    </form>
</body>
</html>

c3中新添加的选择器属性和结构伪类

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
            margin: 100px auto 0;
        }
        a{
            text-decoration: none;
        }
        li{
            height: 30px;
            width: 90px;
            border: 2px solid #000;
            float: left;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        ul li:first-child{
            background: red;
        }
        ul li:last-child{
            background: yellow;
        }

    </style>
</head>


<body>
    <ul class="clearfix">
        <li><a href=""></a><a href=""></a></li>
        <li><a href=""></a><a href=""></a></li>
        <li><a href=""></a><a href=""></a></li>
        <li><a href=""></a><a href=""></a></li>
        <li><a href=""></a><a href=""></a></li>
        <li><a href=""></a><a href=""></a></li>
    </ul>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        div[class = 'box1']{
            background: red;
        }
        div[class *= 'x' ]{
            font-size: 20px;
            text-align: center;
        }
        div[class $= '3']{
            background: pink;
        }
        div[class ^= 'bo']{
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div class="box1">
       1
    </div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

c3中刚添加的背景属性（多背景和背景的大小）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 500px;
            margin: 10px auto;
            background: url(./images/pic5.jpg) no-repeat;
             background-size:  contain;
            /* background: url(./images/pic5.jpg) no-repeat left top 100px 100px,url(./images/dog.png) no-repeat right bottom; */
            border: 4px solid #ff0;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

盒子阴影和文字阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            box-shadow: 5px 5px 5px 5px red ;
            background: pink;
            
        }
        p{
           
            text-shadow: 5px 5px 5px  blue;
        }
    </style>
</head>
<body>
    <div>
        <!-- 文字阴影 text-shadow :h-shadow v-shadow blur spread  color-->
       <p>
           这是一段文字阴影的测试
       </p> 
    </div>
</body>
</html>

短腿小萝卜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ZG前端学习系统day12 2020-11-17

对于H5新增加的语义化在Ie9及以下的不兼容问题的解决第一种方法：引用外部的js文件（html5shiv.min.js)文件第二种方法动态的创建html5的新标签 document.createElement（“header”）。。。。然后使用css给这些标签动态的添加样式创建后的是行内块元素要用css转为块视频和音频视频video 可是设置的属性 src controls loop autoplay muted （自动播放必须配合静音一起使用） poster音频需要掌握的属性 s
复制链接

扫一扫