• Summary of common HTML tags
  • Hand to hand takes you to learn CSS

study hard and make progress every day

This article has included to my lot DayDayUP:github.com/RobodLee/DayDayUP warehouse, welcome Star

HTML5 new Tags

HTML5 has added some new tags, forms and form attributes to address previous shortcomings.

Semantic tag

Before doing the use of layout, use a lot of div, these div is no semantics, we can’t easily determine that a div is roughly what content, so adds semantic tags in HTML 5 to make up for the defects, now we can go to deduce its general content according to the tag name, convenient for the reading of the code, And using semantic tags can also improve the probability of being retrieved by search engines.

: header tag

Multimedia label

HTML5 natively supports playback of audio and video files, in which the use of audio tags and video tags is basically the same.

The < autdio > : audio

The

Grammar:<audio src="File Address" controls="controls"></audio>
Copy the code

attribute value describe
autoplay autoplay Indicates that the audio is played immediately after it is ready
controls controls Represents displaying a control to the user, such as a play button
loop loop Looping, that is, restarting each time the audio ends
src url The URL of the audio to play

< video > : video

The

Grammar:<video src="File Address" controls="controls"></video>
Copy the code

The

attribute value describe
autoplay autoplay Video ready autoplay (Google Browser does not autoplay, reduced attribute added to autoplay)
controls controls Displays the play control to the user
width Pixels (pixels) Set the player width
height Pixels (pixels) Setting the Player height
loop loop Insert whether to continue to play the video after playing, loop play
preload Auto (pre-loaded video)

None (does not load video)		 Specifies whether to preload the video (ignore this property if autoplay is available)
src url Video UR address
poster The url of the picture Load the waiting screen picture
muted muted Mute plug put

The input form

In HTML5, some new input types have been added to make the semantics more obvious.

Attribute values instructions
type=”email” Restrict user input to Email
type=”url” Restrict user input to URL type
type=”date” Restrict user input to a date type
type=”time” Restrict user input to time type
type=”month” Restricted user input must be a month type
type=”week” Restrict user input must be weekly
type=”number” Restrict user input to be numeric
type=”tel” Mobile phone number
type=”search” The search box
type=”color” Generate a color selection form

HTML5 has not only added some input types, but also some form attributes 👇

attribute value instructions
required required Having this property means that the form cannot be empty and must be filled in
placeholder Tooltip text The prompt message of the form will not be displayed if there is a default value
autofocus autofocus Autofocus property, which automatically focuses the page to the specified form after loading
autocomplete off / on When the user starts typing in the field, the browser should display the options to fill in the field based on the values you typed earlier. It is already open by default, such as autocomplete=”on”, close autocomplete=”off “, need to put in the form, add the name attribute, and submit successfully
multiple multiple You can select multiple file submissions

CSS3 added a selector

Property selector

The attribute selector selects an element based on an element-specific attribute without resorting to a class or ID selector, and has a weight of 10.

E[att] : Selects the E element with the ATT attribute

<! -- Change the text color of button 1 with value attribute to red, button 2 does not have value attribute, so the text color does not change -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        input[value] {
            color: red;
        }
    </style>
</head>
<body>
    <input type="button" value="Button 1">
    <input type="button">
</body>
Copy the code

E[att=”val”] : selects the element E that has the att attribute and the attribute value is equal to val

<! Change the color of the button whose value is "button 2" to blue -->
<head>
    <style>
        input[value="Button 2"] {
            color: blue;
        }
    </style>
</head>
<body>
    <input type="button" value="Button 1">
    <input type="button" value="Button 2">
</body>
Copy the code

E[att^=”val”] : matches the E element with the ATT attribute and the value starting with val. E[att$=”val”] : matches the E element with the ATT attribute and the value ending with val

Structure pseudo-class selector

Structure pseudo-class selectors select elements based on the structure of the document and are often used to select child elements based on their parent elements.

E: last-child: matches the last E element in the parent element E: last-child: matches the last E element in the parent element E: Nth-child (n) : matches the NTH child(E) of the parent element (even, odd, odd)

<head>
    <style>
        ul li:first-child {
            background-color: skyblue;
        }
        ul li:last-child {
            background-color: aquamarine;
        }
        ul li:nth-child(2) {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <ul>
        <li>Welcome to attention</li>
        <li>Wechat Official Account:</li>
        <li>Robod</li>
    </ul>
</body>
Copy the code

E: first-of-type: specifies the first of type E. E: last-of-type: specifies the last of type E. E: nth-of-type(n) : specifies the NTH of type E

Nth-child is used to sort all the children of the parent element, and then find the NTH child and see if it matches E. Nth-of-type sorts the child of the parent element by matching E and then finding the NTH child of the parent element.

<head>
    <style>
        ul li:nth-child(1) {
            /* Select * from ul where 1 = 1 */
            background-color: skyblue;
        }
        div li:nth-of-type(1) {
            /* Match the corresponding li element, sort the li element, and select the first li */
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <p>Wechat official account: Robod</p>     <! -- Serial number 1 -->
        <li>Welcome to attention</li>            <! -- Serial number 2 -->
        <li>Wechat Official Account:</li>
        <li>Robod</li>
    </ul>
    <div>
        <p>p</p>
        <li>li1</li>    <! -- Serial number 1 -->    
        <li>li2</li>    <! -- Serial number 2 -->  
    </div>
</body>
Copy the code

Pseudo element selector

Sometimes we just need a simple tag that would complicate the structure of the code if we did it in HTML. In this case, we can use the pseudo-element selector, which can help us create new tag elements using CSS to simplify the structure of the HTML. There are two pseudo-element selectors ::before (insert content before elements) and ::after (insert content after elements). Note that the elements they create are inline elements that are not found in the document tree. These two selectors must have the Content attribute (which can have no value). The pseudo-element selector has a weight of 1,

<! -- Syntax: element::before{} -->
<head>
    <style>
        div {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: aquamarine;
        }
        div::before {
            content: 'wechat Official Account';
        }
        div::after {
            position: absolute;
            font-size: 30px;
            content: "Robod";
            right: 10px;
        }
    </style>
</head>
<body>
    <div>
        :
    </div>
</body>
Copy the code

Range of new features

CSS 3 box model

The actual width of the box is not width. Both the padding and the border make the box larger, so the actual box width is width+padding+border. Box-sizing can now be used to specify the box model. The box-sizing attribute has two values.

Content-box: This is the default. The width of the box is width+padding+border

Border-box: The box size is the value of the width property

<head>
    <style>
        .box1 {
            width: 400px;
            height: 100px;
            border: 20px solid red;
            background-color: aqua;
            padding: 10px;
            box-sizing: content-box;
        }
        .box2 {
            width: 400px;
            height: 100px;
            border: 20px solid green;
            background-color: blanchedalmond;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1">Please give my article a thumbs up!</div>
    <div class="box2">Welcome to follow the wechat official account Robod</div>
</body>
Copy the code

CSS 3 filters filter

The filter attribute applies graphical effects such as blur or color offset to elements and is often used to adjust the rendering of images, backgrounds, and borders. Some commonly used functions are as follows:

This function is used to blur the image, the higher the value, the more blurred the image. Filter: contrast(200%) Grayscale (80%) Converts an image to a grayscale image, 100% to a grayscale image, and 0% to an unchanged image filter: hue-rotate(90deg) Applies hue rotation to an image

Others can be found at developer.mozilla.org/en-US/docs/…

Calc () function

The calc() function can perform some calculations when declaring CSS property values, such as:

width: calc(100% - 30px);		<! -- represents 30 pixels smaller than the parent box -->
Copy the code

CSS 3 transition

A transition animation is a gradual transition from one state to another, usually with hover.

/* Syntax: */
transition: Attributes to transition take time when the motion curve starts /* Parameter description */1Properties: You can change the width, height, background color, inside and outside margin of the CSS properties. If you want all properties to change the transition, write "all"2Take time in seconds (must be written in units) e.g0.5 s
3, motion curve: The default value iseaseSlowly, slowly, slowly, slowlylinear(Constant speed),ease-in(Speed up),ease-out(Slowing down),ease-in-out(Speed up and then slow down)4When to start: The unit is second (the unit must be written). You can set the delay time. The default value is0s(Can be omitted)Copy the code
<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: aqua;
            /* If you want to write multiple attributes, separate them with commas */
            /* transition: width 1s ease-in-out .5s,height 1s ease-in-out .5s; * /
            /* If all attributes are transited, write all */
            transition: all 1s ease-in-out .5s;
        }
        div:hover {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>Wechat official account: Robod</div>
</body>
Copy the code

The 2 d transformation

Mobile translation

2D movement is a feature within 2D transformations that changes the position of elements on the page, similar to positioning.

/* The first argument is the distance moved in the x direction, and the second argument is the distance moved in the y direction. It can be a percentage, and the value can be 0 but not without */
transform: translate(20px.0); 
/* Can also be written separately, one line of 👆 equals two lines of 👇 */
transfrom: translateX(20px);
transform: translateY(30px);
Copy the code

The advantage of translate is that it does not affect the position of other elements. If the unit is percentage instead of PX, it is the percentage of its own element, and this movement has no effect on inline tags.

<head>
    <style>
        div:first-child {
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translate(50%.20px);
        }
        div:last-child {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
Copy the code

Rotate the rotate

2D rotation refers to rotating elements clockwise or counterclockwise in a two-dimensional plane.

<! Rotate the unit of degrees is deg. Clockwise is positive and anticlockwise is negative.
<! -- transfrom: rotate(degree); -->
<head>
    <style>
        img {
            transition: all 1s;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
</body>
Copy the code

The rotation is now done at the center of the element, which is also the default rotation point, or can be changed via the transfrom-Origin property.

<! -- the two parameters are the position in the x direction and the position in the y direction, which can be a pixel or a direction noun -->
<! -- transfrom-origin: x y; -->
<head>
    <style>
        img {
            transform-origin: 50px bottom;
            transition: all 1s;
        }
        img:hover {
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
</body>
Copy the code

The zoom scale

Zooming means you can zoom in and out. You can use scale to zoom in and out, which has the advantage of not affecting other boxes. Like rotate, you can also change the zoom center by using the transform-origin property.

<! Transform: scale(m,n); transform: scale(m,n); scale(m,n); transform: scale(x); -->
<head>
    <style>
        img {
            transition: all 1s;
            transform-origin: right bottom;
        }
        img:hover {
            transform: scale(.5);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
    <p>Wechat official account: Robod</p>
</body>
Copy the code

These conversion methods can be used at the same time, separated by a space

transform: translate() rotate() scale()...

It is important to note that the writing order will affect the effect of the transformation. For example, rotation will change the direction of the coordinate axis, so when there is displacement and other attributes, the displacement should be first.

CSS 3 animation

Animation is one of the subversive features of CSS3. Multiple nodes can be set to accurately control one or a group of animations, which are often used to achieve complex animation effects. Compared with transition, animation can achieve more changes, more control, continuous automatic playback and other effects.

Basic use of animation

  • The animation sequence

    Before learning about animation, you should first understand the concept of animation sequence 👇

    • 0% is the beginning of the animation and **100% is the end of the animation (0%~100% represents different stages of the animation and can be set). Such rules are animation sequences.
    • in@keyframesTo specify a CSS style, you can create an animation that gradually changes from the current style to the new style.
    • Animation is the effect of gradually changing an element from one style to another. You can change as many styles as you want as many times.
    • Specify when the change occurred in percentage terms, or use the keywords “from” and “to”, equivalent to 0% and 100%.

  • 1. Use @keyframes to define animations

    @keyframesCustom animation name {0%{XXXXXX. }100%{XXXXXXX. }}Copy the code

  • 2. Animate elements

    Add animation-name and animation-duration to the elements that you want to animate.

    <head>
    <style>
        @keyframes robod_animation {
            0% {
                transform: rotate(0) scale(1);
            }
            to {
                transform: rotate(90deg) scale(0.5); }}img {
            animation-name: robod_animation;
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
</body>
Copy the code

Common animation properties

attribute describe
@keyframes Provisions of the animation
animation Short for all animation properties except animation-play-state
animation-name Specifies the name of the @KeyFrames animation (must)
animation-duration Specifies the number of seconds or milliseconds it takes for the animation to complete a cycle. Default is 0 (required)
animation-timing-funtion Specify the speed curve for the animation, default is “ease”
animation-delay Specifies when the animation starts. The default is 0
animation-iteration-count Specifies the number of times the animation is played, default is 1, and infinite.
animation-direction Specifies whether the animation is played in reverse in the next cycle. Default is “normal”, alternate reverse
animation-play-state Specifies whether the animation is running or paused, default is “running” and “paused”
animation-fill-mode Specify the state after animation, keep forward, back to start backwards

Animation properties can also be abbreviated:

Animation: the state of the animation name, duration, motion curve, when to start, or whether to start or end the animation in the opposite direction;

Note that the shorthand property does not contain animation-play-state

Speed curve

An animation-timing-funtion property is used to set the animation speed curve. There are 6 values of this property:

value describe
linear The speed of the animation is the same from beginning to end, uniform
ease By default, the animation starts at a low speed, then speeds up and slows down before ending
ease-in The animation starts at a low speed
ease-out The animation ends at a low speed
ease-in-out The animation starts and ends at low speed
steps() Specifies the number of intervals (steps) in the time function

The previous steps are easy to understand. The step length means how many steps the operation is divided into and then executed step by step. It is similar to the feeling of progress bar one by one, which can make some interesting animations.

<head>
    <style>
        @keyframes steeeep {
            from {
                width: 0;
            }
            to {
                width: 160px; }}div {
            width: 160px;
            overflow: hidden;
            white-space: nowrap;
            font-size: 10px;
            background-color: aqua;
            animation: steeeep 2s steps(15) backwards;
        }
    </style>
</head>
<body>
    <div>Welcome to follow the wechat official account Robod</div>
</body>
Copy the code

3 d conversion

Perspective perspective

First before understanding of 3 d converted to clear a concept – “perspective”, the computer screen is two-dimensional, we can’t see stereoscopic directly, if you want to see the change of the object on the Z axis, have to use perspective, perspective is also called the sights, is actually something 3 d projection in 2 d plane, the effect of image below d is perspective, when the object is constant, The bigger the perspective, the smaller you see on the screen, and the smaller the perspective, the bigger you see on the screen. The unit of perspective is PX.

3 d mobile translate3d

3D movement is similar to 2D movement, but with an extra Z axis.

/* These three parameters represent the distance to be moved in the XYZ axis, and the z axis is usually in px */
transform: translate3d(x , y , z);
/* can also be written separately */
translate: translateX(x);
translate: translateY(y);
translate: translateZ(z);
Copy the code

First add perspective to the parent element of the element that needs to be moved. In the case of fixed perspective, changing the size of the translateZ will change the size of the element on the screen.

<head>
    <style>
        body {
            perspective: 500px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 0 auto;
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
Copy the code

3 d rotation rotate3d

3D rotation refers to the ability to rotate an element in a three-dimensional plane along the x, y, z or custom axes.

transform: rotateX(45deg);	/* Rotate 45 degrees in the positive x direction */
transform: rotateY(45deg);	/* Rotate 45 degrees in the positive y direction */
transform: rotateZ(45deg);	/* Rotate 45 degrees in the positive z direction */
transform: rotate3d(1.1.0.45deg);	/* Rotate 45 degrees diagonally along the x and y axes */
Copy the code

So which direction is the positive rotation? Here is a trick, is the left hand rule, the left thumb pointing in the direction of an axis, the direction of the finger bending is the direction of rotation, vice versa is the opposite direction.

<head>
    <style>
        body {
            perspective: 500px;
        }
        img {
            transition: all 1s;
        }
        img:hover:first-child {
            transform: rotateX(45deg);
        }
        img:hover:nth-child(2) {
            transform: rotateY(45deg);
        }
        img:hover:nth-child(3) {
            transform: rotateZ(45deg);
        }
        img:hover:last-child {
            transform: rotate3d(1.1.0.45deg);
        }
    </style>
</head>
<body>
    <img src="./images/robod.png" alt="">
    <img src="./images/robod.png" alt="">
    <img src="./images/robod.png" alt="">
    <img src="./images/robod.png" alt="">
</body>
Copy the code

3 d rendering transform – style

The 3D rendering is used to control whether the child element enables the 3D environment. The default is transform-style: flat. If you want to enable the 3D environment, you can change it to transform-style: preserve-3D. Note: Code is written to the parent element, but affects the child element.

<head>
    <style>
        body {
            perspective: 500px;
        }
        .box1 {
            width: 200px;
            height: 200px;
            transition: all 2s;
            transform-style: preserve-3d; / * and transform - style: flat * /
        }
        .box2 {
            width: 100%;
            height: 100%;
            background-color: aqua;
            transform: rotateX(45deg);
        }
        .box1:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
Copy the code

Transform-style: flat

When the mouse moves over the top, the original 45 degree rotation of the x axis is converted to a normal plane graph, and then the plane graph is rotated around the y axis, which is obviously not the desired effect.

Transform-style: Preserve-3D 👇

So now we have a three-dimensional transformation, a rotation of 45 degrees about the x axis and then a rotation of 45 degrees about the y axis.

Browser private prefix

Browser private prefixes are compatible with older versions. Newer versions of browsers do not use references.

  • -moz-: indicates the private property of firefox
  • -ms-: indicates the private property of Internet Explorer
  • -webkit-: indicates safari and Chrome private properties
  • -o-: represents the Opera private property

For example, a rounded corner property could be written 👇

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Copy the code

conclusion

Ok, this is my this period of time to learn HTML5 and CSS3 summed up some knowledge points, on the one hand is afraid of my own future forget can be used to review, on the other hand is also hoping to help learning partners!

Code word is not easy, if you can, give me a like, favorites, follow

If you like my article, please follow the wechat official account “R o B O D”.

This article has included to my lot DayDayUP:github.com/RobodLee/DayDayUP warehouse, welcome Star