HTML5 + CSS3（1）

HTML5

HTML5は、htmlの5番目のメジャーリビジョンです。新しいHTML言語として、HTML5には新しい要素、新しい属性、および動作があります。

広い意味で、HTML5 = HTML5自体+ css + javascript HTML5は互換性がありますが、開発の傾向があります。

HTML5の新しいセマンティックタグ

ヘッダー：ヘッダータグ
nav：ナビゲーションラベル
記事：コンテンツタグ
セクション：ブロックレベルのラベル
脇：サイドバーラベル
フッター：フットラベル

ここに画像の説明を挿入予防

新しいラベルは複数回使用できます
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>

ここに画像の説明を挿入

HTMLマルチメディアタグ

オーディオオーディオタグ

ここに画像の説明を挿入

<audio>音频标签常见属性

自動再生：自動再生
コントロール：コントロール
ループ：再生を無期限にループします
src：再生するアドレス

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>audio标签</title>
</head>

<body>
    <audio src="./media/snow.mp3" controls='controls' loop='loop' autoplay='autoplay'></audio>

    <audio loop='loop' autoplay='autoplay' controls='controls'>
        <source src="./media/snow.mp3">
            <!-- 你的浏览器不支持播放音乐 -->
    </audio>
</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>
        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="./media/video.mp4" type="video/mp4">
            <!-- 你的浏览器不支持播放视频 -->
    </video>
</body>

</html>

ここに画像の説明を挿入

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;
        }
        
        form {
            width: 400px;
            padding: 20px 15px;
            margin: 50px auto;
            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: black;
        }
    </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は、（偶数）古い（奇数）でも数式またはキーワードにすることができます


<!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>
        * {
            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: '\e900';
            font-size: 50px;
            font-family: "icomoon";
        }
    </style>
</head>

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

</html>

ここに画像の説明を挿入
注：フォントファイルはルートディレクトリにある必要があります

トランジション：トランジション

ここに画像の説明を挿入
予防

遷移効果は、ある効果から別の効果への変化です。
トランジションには、コンマで区切られた複数の属性セットがあります
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

HTML5の新しいセマンティックタグ

HTMLマルチメディアタグ

オーディオオーディオタグ

ビデオビデオタグ

HTMLの新しいフォームとその属性

CSS3セレクター

属性セレクター

構造擬似クラスセレクター

疑似要素セレクター

フォントアイコンを作成するための疑似要素セレクター

トランジション：トランジション

おすすめ