PINK teacher HTML5+CSS3 Tutorial 9

Tip: after the article is written, the directory can be generated automatically. Please refer to the help document on the right for how to generate it

preface

Tip: Here you can add the general contents to be recorded in this article:

https://www.bilibili.com/video/BV14J4114768?p=274&spm_id_from=pageDriver

Tip: the following is the main content of this article. The following cases can be used for reference

1, New HTML5 features

Add some new tags, new forms and new form attributes IE9=

1. Add semantic tags

Header header label
nav navigation tab
article content label
section defines a large DIV in an area of the document
Side bar label
Tail tag
It is mainly used by search engines and can be reused. It needs to be converted into block level elements in IE9

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5 Add semantic tags</title>
    <style>
        header, nav {
            height: 120px;
            background-color: pink;
            border-radius: 15px;
            width: 800px;
            margin: 15px auto;
        }
        section {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <header>Head label</header>
    <nav>Navigation bar label</nav>
    <section>An area</section>
</body>
</html>

2. Add video tag

Try to use mp4 for video
video src = "file address" controls = "controls"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5 Add video tag</title>
    <style>
        video {
            width: 100%;
        }
    </style>
</head>
<body>
    <video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>
</body>
</html>

3. Add audio tag

audio MP3
audio src = "file address" controls = "controls"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5 Add audio tag</title>
</head>
<body>
    <audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
</body>
</html>

4. Add input tag

<body>
    <!-- When we verify, we must add form Form field -->
    <form action="">
        <ul>
            <li>mailbox: <input type="email" /></li>
            <li>website: <input type="url" /></li>
            <li>date: <input type="date" /></li>
            <li>time: <input type="time" /></li>
            <li>quantity: <input type="number" /></li>
            <li>phone number: <input type="tel" /></li>
            <li>search: <input type="search" /></li>
            <li>colour: <input type="color" /></li>
            <!-- When we click the submit button, we can verify the form -->
            <li> <input type="submit" value="Submit"></li>
        </ul>
    </form>
</body>

5. Add form attribute

placeholder default prompt
input::placeholder{color:pink}
Multiple multiple files

2, CSS3 new features

1. Add selector

Convenient and free selection of target elements

1. Attribute selector weight 10

Elements are selected according to their specific attributes, without the help of class or ID selectors

The weight of class selector and attribute selector and pseudo class selector is 10

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 New attribute selector</title>
    <style>
        /* Must be input but have the attribute value at the same time. Select this element [] */
        /* input[value] {
            color:pink;
        } */
        /* Select only the input of the type =text text text box */
        input[type=text] {
            color: pink;
        }
        /* Select these elements that are div first and then have class attribute, and the attribute value must start with icon */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* The weight of class selector and attribute selector and pseudo class selector is 10 */
    </style>
</head>
<body>
    <!-- 1. Using attribute selectors can eliminate the need for classes or id selector -->
    <!-- <input type="text" value="enter one user name">
    <input type="text"> -->
    <!-- 2. The attribute selector can also select attributes=Some key elements of value must be mastered -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. The attribute selector can select some elements at the beginning of the attribute value -->
    <div class="icon1">Small icon 1</div>
    <div class="icon2">Small icon 2</div>
    <div class="icon3">Small icon 3</div>
    <div class="icon4">Small icon 4</div>
    <div>none of my business</div>
    <!-- 4. The attribute selector can select certain elements at the end of the attribute value -->
    <section class="icon1-data">I'm Angela</section>
    <section class="icon2-data">I am Godzilla </section>
    <section class="icon3-ico">Who am I</section>

</body>

2. Structure pseudo class selector weight 10

Select the selector element based on the document structure

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 New structure pseudo class selector</title>
    <style>
        /* 1. li is the first child to choose */
        ul li:first-child {
            background-color: pink;
        }
        /* 2. Choose the last child in ul, little li */
        ul li:last-child {
            background-color: pink;
        }
         /* 3. Choose the second child in ul, li */
         ul li:nth-child(2) {
            background-color: skyblue;
        }
        ul li:nth-child(6) {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>I am the first child</li>
        <li>I'm the second child</li>
        <li>I'm the third child</li>
        <li>I'm the fourth child</li>
        <li>I'm the fifth child</li>
        <li>I'm the sixth child</li>
        <li>I'm the seventh child</li>
        <li>I'm the eighth child</li>
    </ul>
</body>

1. Nth child (n) select one or more specific child elements of a parent element

N can be numbers, keywords and formulas
Number is the first element
N can be keyword: even odd
N can be a formula, calculated from 0, for example, n 2n 2n+1

2. nth-of-type(n)

Different from nth child (n), Nth child will sort all boxes. When executing, first look at the serial number, and then go back to the front eg:div. if it doesn't meet, it can't be selected
Nth of type sort the boxes of the specified element eg:div, and then go to see which one to choose

3. Pseudo element selector (key) weight 1

Use CSS to create new tag elements and simplify HTML structure
::before
::after

before and after create an element, but they are inline elements
element::before{}
before and after must have content attribute
before put it in the front of the parent box
after is placed at the back of the parent box
Like the label selector, the weight is 1

Usage scene: cooperate with font icon and video mask

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pseudo element selector usage scenario 2-Display and hide mask case of imitation potato net</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';
            /* Hide mask layer */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* When we mouse over the potato box, we will show the before mask layer inside */
        .tudou:hover::before {
            /* Instead, display elements */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

Clear float
after pseudo element removal floating \ double pseudo element removal (upgraded version of additional labeling method)
A new box is generated through the pseudo element selector, which is at the end / front and back

2.3 CSS3 box model

Box sizing to specify the box model, which has two values: content box or border box
content-box width+border+padding
Border box width using padding border will not open

3. Image blur filter

filter blur or color offset
The larger the value of filter:blur(5px), the more blurred it is

4. Width calc function

width:calc(100% -80px)
You can add, subtract, multiply and divide + - * in parentheses/

5. Transition attributes

transition can be written without JS
Who makes the transition and adds to who
Often used with: hover
Transition: the attribute to transition takes time. When does the motion curve start

The code is as follows (example):

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Transition effect</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: When the changing attribute takes time and the motion curve starts; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* If you want to write multiple attributes, separate them with commas */
            /* transition: width .5s, height .5s; */
            /* If you want multiple attributes to change, write all for the attribute */
            /* transition: height .5s ease 1s; */
            /* Who makes the transition and adds to who */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>

summary

New layout and form labels in HTML5
CSS3 new features

Tags: css3 html5 html

Posted by theresandy on Wed, 25 May 2022 05:45:41 +0300