Html5-css3 summary learning (I)

Time:2021-9-9

1、 What isHTML5

  1. HTML5Concept and definition of

    • definition:HTML5DefinedHTMLThe latest version of the standard is rightHTMLThe fifth major revision, known as the next generationHTML
    • Two concepts:
    • It’s a new versionHTMLLanguage that defines new labels, features, and attributes
    • Have a strong technology set, which refers to:HTML5CSS3javascript, this is also in a broad senseHTML5
  2. HTML5What has been expanded

    • Semantic label
    • Local storage
    • Compatibility characteristics
    • 2D3D
    • Animation, transition
    • CSS3characteristic
    • Performance and integration
  3. HTML5 Current situation of

    Most new properties have been supported by browsers, and the latest versions of browsers have begun to support the latest features,

    in general:HTML5It is the general trend

IIHTML5 New label

  1. What is semantics
  2. What semantic tags have been added

    • header—Head label
    • nav—Navigation tab
    • article—Content label
    • section—Block level label
    • aside—Sidebar label
    • footer—Tail label

Html5-css3 summary learning (I)

  1. Notes on using semantic tags

    • Semantic tags are mainly for search engines
    • New labels can be used once or more
    • stayIE9In the browser, semantic tags need to be converted into block level elements
    • Semantic tags are friendly on the mobile end,
    • In addition,HTML5A lot of semantic tags have been added. With the deepening of the course, other semantic tags will be learned

3、 Multimedia audio tag

  1. There are two multimedia tags, namely

    • Audio–audio
    • Video–video
  2. audioLabel description

    • It can also natively support the playback of audio format files without using labels,
    • However: the playback format is limited
  3. Audio supported audio formats

    • Audio currently supports three formats

Html5-css3 summary learning (I)

  1. Parameters of audio

Html5-css3 summary learning (I)

5. Audio code demonstration

<body>
  <!--  Note: the autoplay attribute -- > has been disabled in the Chrome browser
  <!-- <audio controls autoplay></audio> -->

  <!-- 
    Because different browsers support different formats, our solution is to prepare multiple files for this audio
   -->
  <audio controls>
    <source type="audio/mpeg" />
  </audio>
</body>

4、 Multimedia video tag

  1. Video tag

    • Three formats are currently supported

Html5-css3 summary learning (I)

  1. Syntax format

    <video controls="controls"></video>
  2. Video parameters

Html5-css3 summary learning (I)

  1. Video code demonstration

    <body>
      <!-- <video controls="controls"></video> -->
    
      <!--  Google browser has disabled the auto play function. If you want to play automatically, you need to add the muted attribute -- >
      <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
        <source type="video/mp4">
        <source type="video/ogg">
      </video>
    </body>
  2. Multimedia tag summary

    • Audio tags and video tags are basically the same
    • Multimedia tags are different in different browsers and have compatibility problems
    • Google Chrome has banned the automatic playback of audio and Video Tags
    • Add muted tag to the video in Google browser and you can play it yourself
    • Note: just remember the usage method and auto play. For other attributes, you can find the corresponding manual during use

5、 New input tag

Html5-css3 summary learning (I)

6、 Add form properties

Html5-css3 summary learning (I)

VIICSS3 Attribute selector (up)

  1. What is?CSS3

    • stayCSS2Expand and add new styles on the basis of
  2. CSS3Development status

    • Mobile support is better thanPCend
    • CSS3At present, the draft is still in progress
    • CSS3relativeH5, widely used
  3. Attribute selector list

Html5-css3 summary learning (I)

  1. Property selector code demonstration

    button {
      cursor: pointer;
    }
    button[disabled] {
      cursor: default
    }

VIIICSS3 Attribute selector (bottom)

  1. Code demonstration

    input[type=search] {
      color: skyblue;
    }
    
    span[class^=black] {
      color: lightgreen;
    }
    
    span[class$=black] {
      color: lightsalmon;
    }
    
    span[class*=black] {
      color: lightseagreen;
    }

9、 Structure pseudo class selector

  1. Attribute list

Html5-css3 summary learning (I)

  1. Code demonstration

    ul li:first-child {
      background-color: lightseagreen;
    }
    
    ul li:last-child {
      background-color: lightcoral;
    }
    
    ul li:nth-child(3) {
      background-color: aqua;
    }

Xnth-childDetailed explanation of parameters

  1. Detailed explanation of nth child

    • Note: it is essentially to select the child element
    • N can be a number, a keyword, or a formula
    • N if it is a number, select the number
    • Common keywords areevenEvenoddOdd number
    • Common formulas are as follows (if n is a formula, start from 0)
    • However, the 0 th element or the number exceeding the number of elements will be ignored

Html5-css3 summary learning (I)

  1. Code demonstration

    <style>
     /*Even number*/
     ul li:nth-child(even) {
    background-color: aquamarine;
     }
    
     /*Odd number*/
     ul li:nth-child(odd) {
    background-color: blueviolet;
     }
    
     /*N is the formula, calculated from 0*/
     ul li:nth-child(n) {
    background-color: lightcoral;
     }
    
     /*Even number*/
     ul li:nth-child(2n) {
    background-color: lightskyblue;
     }
    
     /*Odd number*/
     ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
     }
    
     /*What should I do if I choose 0, 5, 10, 15*/
     ul li:nth-child(5n) {
    background-color: orangered;
     }
    
     /*N + 5 is to choose from the fifth one*/
     ul li:nth-child(n + 5) {
    background-color: peru;
     }
    
     /*- N + 5 first five*/
     ul li:nth-child(-n + 5) {
    background-color: tan;
     }
    </style>

Xinth-childandnt-of-typeDifferences between

  1. Code demonstration

    <style>
     div :nth-child(1) {
    background-color: lightblue;
     }
    
     div :nth-child(2) {
    background-color: lightpink;
     }
    
     div span:nth-of-type(2) {
    background-color: lightseagreen;
     }
    
     div span:nth-of-type(3) {
    background-color: #fff;
     }
    </style>
  1. difference

    • nth-childSelect the child element in the parent element, regardless of the type
    • nt-of-typeSelect an element of the specified type

12、 Pseudo element selector

  1. Pseudo class selector

Html5-css3 summary learning (I)

  1. Pseudo class selector considerations

    • beforeandafterMust havecontentattribute
    • beforeBefore the content, after after after the content
    • beforeandafterAn element is created, but it belongs to an inline element
    • The created element is inDomCannot be found in, so it is called a pseudo element
    • Pseudo elements, like label selectors, have a weight of 1
  2. Code demonstration

    <style>
        div {
          width: 100px;
          height: 100px;
          border: 1px solid lightcoral;
        }
    
        div::after,
        div::before {
          width: 20px;
          height: 50px;
          text-align: center;
          display: inline-block;
        }
        div::after {
          Content: 'virtue';
          background-color: lightskyblue;
        }
    
        div::before {
          Content: 'Tao';
          background-color: mediumaquamarine;
        }
      </style>

13、 Cases of pseudo elements

  1. Add Font Icon

    p {
       width: 220px;
       height: 22px;
       border: 1px solid lightseagreen;
       margin: 60px;
       position: relative;
    }
    p::after {
      content: '\ea50';
      font-family: 'icomoon';
      position: absolute;
      top: -1px;
      right: 10px;
    }

XIV2DConversiontranslate

  1. 2Dtransformation

    • 2DConversion is to change the position and shape of the label on the two-dimensional plane
    • Move:translate
    • Rotation:rotate
    • Zoom:scale
  2. translategrammar

    • X is the horizontal movement on the X axis
    • Y is the horizontal movement on the Y axis
    transform: translate(x, y)
    transform: translateX(n)
    transfrom: translateY(n)
  3. Key knowledge points

    • 2DThe movement of mainly refers to the movement in the horizontal and vertical directions
    • translateThe biggest advantage is that it does not affect the position of other elements
    • translateThe 100% unit in is calculated relative to its own width and height
    • Inline labels have no effect
  4. Code demonstration
div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /*Translation*/
  /*Horizontal and vertical movement 100px*/
  /* transform: translate(100px, 100px); */

  /*Horizontal movement 100px*/
  /* transform: translate(100px, 0) */

  /*Vertical movement 100px*/
  /* transform: translate(0, 100px) */

  /*Horizontal movement 100px*/
  /* transform: translateX(100px); */

  /*Vertical movement 100px*/
  transform: translateY(100px)
}

15、 Center a box horizontally and vertically

div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    /*1. The parameters in tranlate can use%*/
    /*2. If the parameter inside is%, the moving distance is compared with the width or height of the box itself*/
    /*50% here is 50px, because the width of the box is 100px*/
    /* transform: translateX(50%); */
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    /* margin-top: -100px;
    margin-left: -100px; */
    /*Translate (- 50%, - 50%) the box goes up half its height*/
    transform: translate(-50%, -50%);
}

span {
    /*Translate is not valid for inline elements*/
    transform: translate(300px, 300px);
}

XVI2D conversion rotate

  1. Rotate

    • 2DRotation refers to rotating an element clockwise or counterclockwise in a two-dimensional plane
  2. rotategrammar

    /*Unit: DEG*/
    Transform: rotate (degrees)
  3. Key knowledge points

    • rotateIt’s in degreesdeg
    • When the angle is positive, clockwise; when the angle is negative, counterclockwise
    • The default center point of rotation is the center point of the element
  4. Code demonstration

    img:hover {
      transform: rotate(360deg)
    }