preface

HTML5 The new feature of is mainly aimed at the previous shortcomings , Added some new labels , New form and new form properties

But ! Most of these labels have compatibility problems , Basically IE9 Only the above versions are supported

Before we did the layout , They all use div, But without semantics    

one , Add block level label

1. Header label <header >
        <header > </header>
and div Same effect , But more semantic

2.  Navigation tab <nav>
   <nav> Navigation </nav>

3. Main content label <main>
        <main></main>
    characteristic :

      Higher browser compatibility

        main Can include other labels
         Can only appear once in the text , And can only be the parent element of others

4. Content label <article>
<article></article>
Article paragraph ,  And paragraphs p be similar

5.<section> Define an area of the document
<section>  section </section>

6.<aside> Sidebar label
        <aside> sidebar </aside>

7.<footer> Footnote label
        <footer> footnote    </footer> 

be careful :

* These semantic standards are mainly aimed at search engines
* Can be used multiple times
You can try the following cases

two , Add block level label 02

1.<details> About the appearance and hiding of view details
<details>         <summary> title </summary> </details>
  

Title can be added
            <summary> outline ( title )</summary>
        </details>

       2. <figure> Label specifies independent stream content ( image , Chart , Photo , Code, etc ).
  <figure>          <img src="img/01.jpg" >             <figcaption> Picture title   
         </figcaption>    </figure>
          figure The content of the element should not be related to the main content , But if it is deleted , Should not affect document flow .
           <img src="img/01.jpg" >
            <figcaption> </figcaption> Use the images illustrated in the composition file , With a title :
             Align left by default
             Consistent with the write position , Write it on the picture right on top , And vice versa

  two , New inline block element label

1. progress bar <progress>
<progress value="20" min="1" max="100"></progress>
value Indicates progress value
max Indicates the maximum progress value
min Represents the minimum progress value
Inline block element , Width and height can be defined
Double tag label
 ie browser 9 And the following do not recognize this label

 

 

      2.  Weights and measures <meter>
 <meter value="72" min="1" max="100" low="60" high="80"> </meter>
            low low Below this value value Same color
            high high Above this value value It's red
             Between these two values value It's yellow
             No color change
            Value If there are no numbers in the label , So the actual value of the scalar is 0

            IE I don't support this
             The contents of the label may not contain any numbers , At this time, the maximum value will be considered as 1;

      

 

three , Add in line label

1. <time> Label defines the time of the Gregorian calendar (24 Hour system ) Or date
Our morning <time>12:00</time> attend class;class begins This year's <time datetime="2022-2-14
00:00:00"> Valentine's Day </time> I was alone
    If it's not a specific time, add it datetime
            <time> Label defines the time of the Gregorian calendar (24 Hour system ) Or date , Time and time zone offsets are optional .
          
  This element encodes the date and time in a machine readable manner , such , For example , User agents can add birthday reminders or scheduled events to user schedules , Search engines can also generate more intelligent search results .

2. Tag label <mark>
This year's <time datetime="2022-2-14 00:00:00"> Valentine's Day </time> I am <mark> single </mark> too
Background color is yellow
Inline element ( Hardly )

Technology
©2019-2020 Toolsou All rights reserved,
evo Tool usage problems ——Degenerate covariance rank, Umeyama alignment is not possible Experiment 4 Automated test tools - software test mysql Export data sql sentence _mysql according to sql Query statement export data Create a thread ——— Javaweb (3) Data structure experiment ( three )—— Stacks and queues TS stay vue2 Writing in the project web Front end signature plug-in _signature_pad Plug in implements electronic signature function docker Where is the image stored Qt Getting Started tutorial 【 Basic controls 】QCalendarWidget calendar control springboot How to get reality in ip address