Familiar with HTML and basic common tags

Time:2022-1-2

Familiar with HTML and basic common tags

HTML: (Hypertext Markup Language), (English):HyperText Markup Language, abbreviation:HTML), invented by Tim Berners Lee and Sir Lee around 1990, it is a markup language for creating web pages, similar to markdown.
Hypertext: is a kind of text that can be displayed on computer monitors or electronic devices. At present, hypertext generally exists in the form of electronic documents. The text contains hyperlinks that can be linked to other fields or documents, allowing direct switching from the current reading position to the text pointed to by the hyperlinks. Resources such as pictures, videos and audio can also be displayed on the web page.
Therefore, html is simply the basic language used to display a variety of information on Web pages. Html is the skeleton of web pages. Later, CSS and JavaScript language cooperate with HTML to form a modern beautiful and powerful web page.

1. Overview of HTML tags

  • <! DOCTYPE html>   <!--   The document type tells the browser to parse this document in HTML5 -- >
  • < tag attr = value > content < / tag > <-- Double label -- >
    • Note that the attribute value can be enclosed in double quotation marks and single quotation marks, even without special symbols (such as spaces)
  • < tag attr > content < / tag > <-- Some attributes are Boolean attributes. If they are written, they represent valid. Otherwise, they are invalid. For example, the checked attribute -- >
  • <tag attr=value>    <!--  Single label -- >

HTML tags are not case sensitive, but are generally lowercase

2. HTML starting type

  • <! DOCTYPE html>   <!--   Declare document type -- >
  • <html lang="en">    <!--   The language of the web page can be set to zh ch Chinese -- >
  • <meta charset="UTF-8">   <!--  The character code UTF-8 of web pages contains all human languages -- >
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Define document viewports to prevent web pages from zooming -- >
  • <meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- Use the latest IE kernel -- >
  • < title > Title < / Title > <-- Write the title of the page here -- >
  • HTML basic skeleton

    • <!DOCTYPE html>
        <html lang="en">
        <head>
            <!--  The content here is for browsers -- >
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <!--  All visible elements on the web page are placed here -- >
        </body>
        </html>

2. Chapter label

Used to indicate the level of the article

  1. Title H1 ~ H6
  2. Chapter section
  3. Article
  4. Paragraph p
  5. Header
  6. Foot footer
  7. Main contents
  8. Side branch
  9. Partition div
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    < header > this is the ad at the top < / header >
    <div>
        <main>
            <h1>Title of the article</h1>
            <section>
                <h2>Chapter I contents</h2>
                 <p>Today, I learned the basic HTML skeleton and the use of some common tags</p>
            </section>
            <section>
                <h2>Chapter II Contents</h2>
              <p>Today, I learned the basic HTML skeleton and the use of some common tags</p>
            </section>
            <section>
                <h2>Chapter III contents</h2>
               <p>Today, I learned the basic HTML skeleton and the use of some common tags</p>
                <section>
                    <h2>1.1</h2>
                    <p>Today, I learned the basic HTML skeleton and the use of some common tags</p>
                </section>
            </section>
        </main>
        <aside>
            Who did you refer to
        </aside>
    </div>
    < footer > footer content & copy; Copyright Xiaoou < / footer >
</body>
</html>

3. Label indicating content

  • The sequence number of OL + Li ordered list is 1 2 3 4 by default, Ol attribute: type specifies the form of sequence number. Five attribute values: 1 a a (common) I I

    • <ol type="A" start="3">      <!--  Ordered list sequence number type capital letters start with the third C -- >
                <li>Eat</li>
                <li>Sleep</li>
                <li>Beat beans</li>
                <li>Drink water</li>
            </ol>
  • UL + Li unordered list

    • <ul>    <!--  Unordered list -- >
            <li>Eat</li>
            <li>Sleep</li>
            <li>Beat beans</li>
            <li>Drink water</li>
         </ul>
  • DL + DT + DD description list

    • <dl>
               < DT > Xiao Ou < / dt > <-- Described term -- >
               < DD > handsome < / DD > <-- Description item -- >
               < DD > sing well < / DD >
               < DD > rich < / DD >
               < DD > well written code < / DD >
           </dl>
  • The space, carriage return and tab of pre package content can be retained on the page

    • <pre>
            This is a bunch of blank tabs  
            enter
        
        </pre>
  • Hrhorizontal divider

  • Br line feed label

  • A hyperlink to web site

    • <a href=" http://www.baidu.com " target="_ Blank "> Baidu</a>
  • EM subjective emphasis, italics

  • Strongimportant content

  • Code write code, where the code letters are equal in width

    •   <code>console.log("hello world!")</code>
      
  • Quote inline reference

  • Blockquote block level reference

4. Global attributes

All tags have properties

  • Class classifies elements. It is mostly used to set the same style of a class. There can be multiple

    •   <div></div>
      
  • ID gives the element a name, which is often used in conjunction with JS

  • Contenteditable enables elements to be edited

  • Hidden makes the element disappear, and the priority is higher than display none

  • The style of the style element

  • TabIndex controls the order of tab key switching elements. A special value of 0 means that the last one is selected and – 1 means that it will not be switched

  • The title of the title element is visible with the mouse hover

5. Several character entities commonly used in HTML

&lt;    Equivalent to<
&gt;    Equivalent to >
&nbsp;    Equivalent to an English space
&copy;   ©  Copyright symbol

6. Browser default style

The default style is that the browser will match its own style when we don’t write CSS. Of course, the style is ugly, so we need to reconstruct it

*{/ * refer to others' here. There is no fixed writing method. You can set it freely*/
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Recommended Today

Vue2 technology finishing 3 – Advanced chapter – update completed

3. Advanced chapter preface Links to basic chapters:https://www.cnblogs.com/xiegongzi/p/15782921.html Link to component development:https://www.cnblogs.com/xiegongzi/p/15823605.html 3.1. Custom events of components 3.1.1. Binding custom events There are two implementation methods here: one is to use v-on with vuecomponent$ Emit implementation [PS: this method is a little similar to passing from child to parent]; The other is to use ref […]