1. HTML5

Meta tags

 <meta name="keywords" content="HTML 5, front-end, CSS 3">
 <meta name="description" content="This is a great site.">
  
Copy the code

Semantic tag

<! Title - the title tag: < h1 > level < / h1 > < h2 > secondary title < / h2 > < h3 > 3 title < / h3 > < h4 > level 4 title < / h4 > < h5 > 5 title < / h5 > < h6 > 6 title < / h6 > -- > <! Inline elements - Inline elements are used to wrap text <p></p> --> <! Layout tag (structured semantic tag) : Header represents the header of the page. Main represents the body of the page (there is only one main on a page). Footer represents the bottom of the page Div is the main layout element. For now, div is the span line element. It does not have any semantics, and is usually used to select text in web pages.Copy the code

Three HTML lists

1. Ordered list 2. Unordered list 3Copy the code
 <ul>
        <li>structure</li>
        <li>performance</li>
        <li>behavior</li>
    </ul>

    <ol>
        <li>structure</li>
        <li>performance</li>
        <li>behavior</li>
    </ol>

    <dl>
        <dt>structure</dt>
        <dd>Structure refers to the structure of the page, and structure is used to determine where the headings and paragraphs are in the page</dd>
    </dl>
Copy the code

Hyperlinks, images, inline frames, audio and video

     <a href="https://www.baidu.com">hyperlinks</a>
     <img src="./img/1.gif" alt="Squirrel">
    <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
<! SRC = "SRC" SRC = "source" SRC = "SRC" SRC = "source" SRC = "SRC" SRC = "source" SRC = "SRC" SRC = "source"
    <audio controls>
        <! Sorry, your browser does not support playback audio! Please upgrade your browser! -->
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>
Copy the code

Entities (escape characters)

& have spent Space & gt; > & lt; The < & copy; The copyright symbolCopy the code

2. CSS3

Use CSS to change the style of an element (3 ways) : 1. Inline styles (Note: never use inline styles when developing)Copy the code
 <p style="color:red; font-size: 60px;" "> < p style =" max-width: 100%; clear: both; min-height: 1emp>
Copy the code
2. Internal style sheetsCopy the code
<style>
    p{
      color: blue;
      font-size: 20px;
    }
  </style>
  <body>
  <p< p style = "max-width: 100%; clear: both; min-height: 1emp>
</body>
Copy the code
3. External stylesheets (best practice)Copy the code
  <link rel="stylesheet" href="./style.css">
Copy the code

The selector

Compound selector

Intersection selector: selector 1, selector 2, selector 3, selector n{} #b1.p1h1.red{} Union selector: selector 1, selector 2, selector 3, selector n{} #b1,.p1,h1,span,div. Red {}Copy the code

Relational selector

Child selector: Parent > child {} Descendant selector: ancestor descendant {} Select next sibling: previous + next sibling {} Select all siblings below: elder ~ younger {}Copy the code

Pseudo class selector A pseudo class

Nth-child () :nth-child(even){} :nth-child(odd){} : odd child :not() Link {} a:visited{} a:hover{} a:active{} clickCopy the code

Pseudo-element: a special element (special location) on a page that does not really exist

Pseudo-elements use ::before at the beginning of the element ::after at the end of the element - before and after must be used in conjunction with the content attributeCopy the code
        div::before{
            content: 'abc';
            color: red;
        }
Copy the code

The weight of the selector

Inline style 1,0,0,0 id selector 0,1,0,0 | # id name {} and pseudo class selector 0,0,1,0 |. The class selector {} element 0,0,0,1 | p {} h1 {} wildcard selector 0,0,0,0 | * {} the style of the inheritance No priority Can be added after a style! Important, this style will get the highest priority, even more than inline style, note: in the development of this thing must be careful! Class is a tag attribute, which is similar to ID, except that class can be reusedCopy the code

The length of the unit

Pixels -- screens (displays) are actually made up of little dots one by one -- pixel sizes vary from screen to screen, The effect of the screen display pixels, the smaller the clearer - so the same 200 px under different devices display effect is not the same Percentage - attribute value can be set to the percentage of the relative to the parent element properties can teach child elements with the parent element set percentage change with the change of the em - em is calculated relative to the element's font size -1em = 1font size-em ReM-REM is calculated relative to the font size of the root elementCopy the code