First, HTML5 new tags

  1. New semantic tags for HTML5
  • header— Header label
  • nav— Navigation TAB
  • article— Content label
  • section– Block-level label
  • aside— Sidebar tag
  • footer— Tail tag

2. Attention to using semantic tags

  • Semantic tags are mainly for search engines
  • New tags can be used once or more
  • inIE9In browsers, semantic tags need to be converted into block-level elements
  • Semantic tags are more mobile friendly.

2. Multimedia audio labels

  1. There are two multimedia labels

    • Audio –audio
    • Video –video

  2. Audio Label Description

    • It can play audio files natively without using tags,
    • But: Playback formats are limited

  3. Audio Indicates the supported audio format

    • Audio currently supports three formats

  1. The parameters of the audio

  1. Audio code demo
<body>
  <! Note: Autoplay is disabled in Chrome -->
  <! -- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <! -- Since different browsers support different formats, the solution we adopted is to prepare multiple files for this audio -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>
Copy the code

Multimedia video labels

  1. Video Video Label

    • Currently, three formats are supported

  1. Syntax format
<video src="./media/video.mp4" controls="controls"></video>
Copy the code
  1. Video parameters

  1. Video code demo
<body>
  <! -- <video src="./media/video.mp4" controls="controls"></video> -->

  <! -- Google Browser disabled autoplay, reduced to a fraternal attribute -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>
Copy the code
  1. Summary of Multimedia Labels
  • Audio and video labels are basically the same
  • The compatibility of multimedia labels varies with browsers
  • Google Chrome disables auto-play for both audio and video tabs
  • Video conservation tabs added to Google’s Browser enable self-playback
  • Note: remember the usage method and auto play, other attributes can be found in the corresponding manual when using

4. Add input tags

5. Add form attributes

CSS3 attribute selector

  1. What is the range of

    • inCSS2Based on the extension, the new style

  2. CSS3 development status

    • Mobile support is better thanPC 端
    • CSS3Still draft at present, in the continuous improvement
    • CSS3The relativeH5The application is very wide

  3. Property selector list

  1. Property selector code demo
button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}

input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

Copy the code

Structure pseudo-class selector

  1. Property list

  1. Code demo
ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}
Copy the code

Nth-child nth-child

  1. NTH – child explanation

    • Note: You are essentially selecting the number of child elements

    • N can be a number, keyword, or formula

    • N If the value is a number, select the number

    • Common keywords are even, odd, odd

    • The common formula is as follows (starting from 0 if n is a formula)

    • But the 0th element or the number of elements beyond that is ignored

  1. Code demo
<style>
  / * even * /
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  An odd * / * /
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n is the formula, counting from 0 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  / * even * /
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  An odd * / * /
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* select 0, 5, 10, 15
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 = */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 the first five */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>
Copy the code

Nth-child and NT-of-type

  1. Code demo
<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>
Copy the code
  1. The difference between
  • nth-childSelect the number of children within the parent element, regardless of type
  • nt-of-typeSelects the element of the specified type

Pseudoelement selectors

  1. Pseudo class selector

  1. Pseudo class selector considerations

    • before 和 afterThere must becontentattribute
    • beforeBefore the content, after the content
    • before 和 afterYou create an element, but it’s 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 demo

<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: 'DE';
      background-color: lightskyblue;
    }

    div::before {
      content: 'the';
      background-color: mediumaquamarine;
    }
  </style>
Copy the code

11. The case of false 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;
}
Copy the code

12, 2D translation translate

  1. The 2 d transformation

    • A 2D transformation changes the position and shape of a label on a two-dimensional plane

    • Mobile: translate

    • Rotation: rotate

    • Zoom: scale

  2. Translate the grammar

    • X is the horizontal movement along the X-axis
    • Y is the horizontal movement on the y axis
x transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
Copy the code

  1. Key knowledge points

    • 2DThe movement mainly refers to the horizontal and vertical direction of the movement
    • translateThe biggest advantage is that it does not affect the position of other elements
    • translateThe 100% units are calculated relative to their width and height
    • Inline labels have no effect

  2. Code demo

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  / * translation * /
  /* Move 100px vertically and horizontally */
  /* transform: translate(100px, 100px); * /

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

  /* Move 100px vertically */
  /* transform: translate(0, 100px) */

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

  /* Move 100px vertically */
  transform: translateY(100px)}Copy the code

D transform rotate

  1. The rotate rotating

    • 2DRotation refers to rotating elements clockwise or counterclockwise in a two-dimensional plane

  2. Rotate the grammar

/* The unit is deg */
transform: rotate(degrees)Copy the code

  1. Key knowledge points

    • rotateIt has degrees in itdeg
    • If the Angle is positive, it goes clockwise; if the Angle is negative, it goes counterclockwise
    • The default rotation center is the center of the element

  2. Code demo

img:hover {
  transform: rotate(360deg)}Copy the code