关于html5:HTML5CSS31

HTML5

HTML5作为html的第五次重大批改，作为新的HTML语言，具备新的元素，新的属性及行为。

狭义的HTML5=HTML5自身+css+javascript HTML5具备兼容性，但具备发展趋势。

HTML5新增语义化标签

header:头部标签
nav:导航标签
article:内容标签
section:块级标签
aside:侧边栏标签
footer：脚部标签

注意事项

1.新增标签能够应用屡次

2.IE9以下的版本具备兼容性问题，须要转换成块级元素

<!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>
        header,
        nav,
        aside,
        article,
        section,
        footer {
            display:block;
            width: 100%;
            height: 100px;
            margin-top: 20px;
            color: #fff;
            background-color: purple;
            text-align: center;
            line-height: 100px;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <header>头部</header>
    <nav>导航</nav>
    <aside>侧边栏</aside>
    <article>内容</article>
    <section>块级</section>
    <footer>脚部</footer>
</body>

</html>

HTML5多媒体标签

audio 音频标签

<audio>音频标签常见属性

autoplay:自动播放
controls:控件
loop:有限次循环播放
src:播放的地址

<!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>
    <!-- 第一种办法 -->
    <audio src="./audio/Ngẫu_Hứng-Hoaprox-23817485.mp3" controls="controls" loop="loop" autoplay="autoplay"></audio>

    <!-- 第二种办法 -->
    <audio controls="controls" loop="loop" autoplay=“autoplay ">
        <source src="./audio/Ngẫu_Hứng-Hoaprox-23817485.mp3 ">
            你的浏览器 不反对播放音乐
    </audio>
</body>

</html>

video视频标签

<!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>
        video {
            width: 1000px;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <!-- 第一种办法 -->
    <!--   <video src="./video/mI.mp4" controls="controls" autoplay="autoplay" loop="loop"></video>    -->


    <!-- 第二种办法 -->
    <video muted="muted" autoplay="autoplay">
        <source src="./video/mI.mp4" type="video/mp4">
            <!-- 你的浏览器不反对播放视频 -->
    </video>
</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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        form {
            width: 400px;
            padding: 20px 15px;
            margin: 50px auto;
            background: url(./image/星空.jpg) no-repeat;
            background-size: cover;
        }
        
        li {
            list-style: none;
        }
        input {
            margin: 5px 0px;
        }
        
        .submit,
        .reset {
            float: left;
        }
        
        .reset {
            margin-left: 200px;
        }
        
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }
        
        span {
            font: normal normal 16px "楷体";
            color: white;
        }
    </style>
</head>

<body>
    <form action="ZiMo.php">
        <ul>
            <li><span>账号：</span><input type="text" name="username" autocomplete="on"></li>
            <li><span>邮箱：</span><input type="email" name="" id="" required="required" placeholder="请输出邮箱账号"></li>
            <li><span>网址：</span><input type="url" name="" id=""></li>
            <li><span>日期：</span><input type="date" name="" id=""></li>
            <li><span>工夫：</span><input type="time" name="" id=""></li>
            <li><span>月份：</span><input type="month" name="" id=""></li>
            <li><span>周：</span><input type="week" name="" id=""></li>
            <li><span>数值：</span><input type="number" name="" id=""></li>
            <li><span>手机号：</span><input type="tel" name="" id=""></li>
            <li><span>搜寻框：</span><input type="search" name="" id="" autofocus></li>
            <li><span>色彩</span><input type="color" name="" id=""></li>
            <li class="clearfix">
                <div class="submit"><input type="submit" value="提交"></div>
                <div class="reset"><input type="reset" value="重置"></div>
            </li>
        </ul>
    </form>
</body>

</html>

CSS3选择器

属性选择器

类选择器属性选择器伪类选择器的权值为10

<!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>
        div {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin :20px 50px;
        }
        button {
            background-color: red;
        }
        button[disabled="disabled"] {
            background-color: blue;
        }
        input[type='text'] {
        
            background-color: pink;
        }
        div[class^='box1']  {
            background-color: black;
        }
        div[class$='box1']{
            background-color: purple;
        }
        div[class*='box2'] {
            background-color: saddlebrown;
        }
    </style>
</head>
<body>
    <section>
        <button>按钮</button>
        <button>按钮</button>
        <button disabled="disabled">禁用按钮</button>
        <button disabled="disabled">禁用按钮</button>
    
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
    
        <input type="number" name="" id="">
        <input type="number" name="" id="">
        <input type="number" name="" id="">
    </section>
    

    <div class="box123"></div>
    <div class="box123"></div>
    <div class="box123"></div>

    <div class="123box1"></div>
    <div class="123box1"></div>
    <div class="123box1"></div>


    <div class="2020box2"></div>
    <div class="2020box2"></div>
    <div class="2020box2"></div>


</body>
</html>

构造伪类选择器

nth-chid(n):n能够为公式也能够为关键字 even(偶数) old(奇数)

<!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>
        ul li:first-child {
            background-color: saddlebrown;
        }
        ul li:last-child {
            background-color: salmon;
        }
        ul li:nth-child(4n) {
            background-color: yellow;
        }
      
    </style>
</head>

<body>
    
</body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</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>
        div a:last-of-type {
            background-color: red;
        }
        
        div p:first-of-type {
            background-color: purple;
        }
        
        div span:nth-of-type(2n) {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">百度</a>
        <a href="#">新浪</a>
        <a href="#">360</a>
        <a href="#">阿里巴巴</a>

        <span>span标签</span>
        <span>span标签</span>
        <span>span标签</span>
        <span>span标签</span>

        <p>p标签</p>
        <p>p标签</p>
        <p>p标签</p>
        <p>p标签</p>

    </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: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 100px auto;
        }
        
        div::before {
            display: inline-block;
            height: 200px;
            width: 200px;
            background-color: red;
            content: "我是";
        }
        
        div::after {
            display: inline-block;
            height: 200px;
            width: 200px;
            background-color: blue;
            content: "小可爱";
            
        }
    </style>
</head>

<body>
    <div>
        一个
    </div>
</body>

</html>

注意事项

::before和::after属于伪元素选择器，content属性必须要写
伪元素不存在dom构造
伪元素选择器为行内元素
权重为1

伪元素选择器制作字体图标

<!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>
        p {
        
            width: 600px;
            height: 600px;
            border: 1px solid red;
        }
        
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cv013x');
            src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        p::after {
            content: '\e9da';
            font-size: 50px;
            font-family: "icomoon";
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

留神：目录下必须要fonts文件

transition:过渡

简写

transition:过渡的属性过渡的工夫过渡的工夫曲线过渡成果何时开始

注意事项

过渡成果是一种成果从另一种成果的变动
过渡有多组属性之间用逗号相隔
all代表所有的属性
过渡的成果在本身元素上

<html>
    <head>
        <title>过渡</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                height: 600px;
                width: 600px;
                background-color: red;
                transition: all 2s linear 0s; 
            }
            .box:hover {
                width: 1000px;
                height: 1000px;
                background-color: #0000FF;
                
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

关于html5:HTML5CSS31

HTML5

HTML5新增语义化标签

HTML5多媒体标签

audio 音频标签

video视频标签

HTML5新增input表单及属性

CSS3选择器

属性选择器

构造伪类选择器

伪元素选择器

伪元素选择器制作字体图标

transition:过渡

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于html5:HTML5CSS31

HTML5

HTML5新增语义化标签

HTML5多媒体标签

audio 音频标签

video视频标签

HTML5新增input表单及属性

CSS3选择器

属性选择器

构造伪类选择器

伪元素选择器

伪元素选择器制作字体图标

transition:过渡

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复