current position：Home>[youth training camp] - different HTML

[youth training camp] - different HTML

2022-01-27 03:47:09 【hotpotliu】

Signed up for the first youth training camp , I learned it again on the first day HTML .

I used to think HTML Just those labels ,HTML It's the simplest of the three piece sets , But in fact, after listening to the youth training camp class , I found myself right HTML The understanding is not comprehensive , There are many things you don't know clearly ;

for instance <script> label , I knew what was inside JS It will block DOM Structure analysis , So put it in <body> At the back of , But I don't know it has properties (defer) It can make JS You can synchronize downloads and postpone execution ;

Then there are semantic tags , Although I know semantic tags , Semantic tags are good for adapting to all kinds of devices and SEO , But I've hardly used them ~~ , Maybe I'm too low , I haven't reached that level yet .

In order to deepen memory and promote learning , Taking notes must be essential , Since there is this activity of posting articles , Then I'll send out my notes , To encourage ~, You come on .


1、 Markup language and programming language

HTML Is the abbreviation of hypertext markup language ; Hypertext refers to text that contains links to other text ; It belongs to markup language ; By Bonas - Li proposed , And now by W3C maintain ;

  1. Markup language

    Assemble the text and other information related to the text , Show the document structure ;

    Examples of markup language ：HTML、XML、KML、Markdown;

  2. programing language

    A language with logical ability ;


2、HTML5

HTML5 stay 2015 Launched in 2013 ; It improves the previous document structure, which is too dependent on div The shortcomings of ;

  1. HTML5 The advantages of
    • Semantic tags , Easy to understand and conducive to SEO Optimize ;
    • Uniform standard , The compatibility problem between Rovers is solved ;
    • More API;

3、HTML elements of grammar

  1. <!DOCTYP html>

    <!DOCTYP> Used to declare the use of HTML edition ,<!DOCTYP html> Used to declare that HTML5.

  2. <meta> label

    Source data label , Data that describes data ;

    • Common properties
      • charset： Define the character encoding method ;
      • name： A brief description of the page information ; Common values are keywords、description、viewport（ It's mainly used in mobile terminal , Defines the area on the device screen where web pages are displayed ）;
      • http-equiv： to http Add some information to the header , Such as setting the expiration time of the web page 、 Set up cookie
      • Other customizations meta Information ;

  3. <title>

    The page title

  4. <link>

    • Common properties
      • shortcut icon： Specify... Next to the page title logo
      • stylesheet： Link to style sheet
      • alternate stylesheet： Replaceable style sheets , Not all browsers support （ If you use Firefox Experience it. ）

  5. <script>

    Used to import external script files ;

    • classification

      • <script>： Download script files now , Execute immediately after downloading , It will block dom analysis ;
      • <script defer>： Download script files now , This Boolean property is set to inform the browser that the script will be parsed after the document is parsed , Trigger DOMContentLoaded (en-US) Before the event .;
      • <script async>： For normal scripts , If there is async attribute , So normal scripts are requested in parallel , And analyze and execute as soon as possible . about Module script , If there is async attribute , Then the script and all its dependencies will be executed in the deferred queue , So they will be requested in parallel , And analyze and execute as soon as possible .
      image-20210817114838854

  1. Semantic tags

    The use of semantic tags is conducive to understanding and SEO Optimize ; Let people and machines understand you better ;

    Block semantic tags ：

    • <header>
    • <nav>
    • <article>
    • <section>
    • <aside>
    • <footer>

    Group class semantic label

    • <figure>： The content of the package that is independently referenced ： Chart 、 illustrations 、 Code etc.
    • <figcaption>： Corresponding <figure> Description of ;
    • <blockquote>： Block level reference elements ,cite Property specifies the source url;
    • <dl>、<dt>、<dd>： Used to describe a set of key value pairs , Usually used for metadata 、 Definition of terms and other scenarios ;

    Text semantic tags

    • <cite>： Usually used for the title of a work ;
    • <time>： Used to surround time 、 date , By designation datatime Property to set the time and date corresponding to the text ;
    • <address>： Contact information ;
    • <mark>： Use... In references , Indicates that attention needs to be paid to ;
    • <code>： code snippet ;
    • <small>： disclaimer 、 matters needing attention ;

  2. Multimedia tags

    • <img>
    • <picture>： By including 0 Or more <source> Label to provide corresponding image versions for different sizes of display screens ;
    • <video>

copyright notice
author[hotpotliu],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270347038385.html

The sidebar is recommended

guess what you like

Random recommended