This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

The first chapter is hereFront 20,000 words graphic and blood summary (first)

Part two: Labels

  1. What is a label?
Consists of wrapping words in Angle brackets, such as:<html>, so the label cannot start with a number.Copy the code
  1. Labels are case insensitive, but lowercase is recommended.
  2. Tags can be nested, but not cross-nested.
  3. Tags are also called elements. For example, inline tags can also be inline elements.
Error: <a><b></a></b> Correct: <a><b></b></a>Copy the code

1. Use styles and attributes of labels

(1) Use style of labels:

  1. The start tag is also called an open tag <a> Tag body </a> The end tag is also called a closed tag or a closed tag
  2. Self-closing tags/single tags, such as <meta charset="UTF-8">, <br>, etc
There are two ways to write a single label: Writing method 1: Write only the open label<br>Writing method 2: Write a/at the end of the open tag, such as<br/>
Copy the code

(2) Label attributes:

  • <meta charset=" utF-8 "> <meta charset=" utF-8 "> <meta charset=" utF-8 ">
  • Attributes can only appear in opening and self-closing tags, but not in closing tags;
  • Attribute names are all lowercase and attribute values must be enclosed in single or double quotes.
  • If the attribute name and value are identical, write the attribute name directly. For example, “readonly” (input tag attribute)

(3) Block label

The first part of the knowledge – block label characteristics:

Features of block tags :(illustrated by paragraph tag p)

  1. Set width and height effective, as well as margins and margins can be controlled
  2. When the width is not set, the width is always the same as the parent label, regardless of the content. Is 100% of the parent tag container;
  3. Can monopolize a line, realize automatic wrapping. A paragraph tag takes up a line regardless of how much content there is
  4. When multiple block labels are written together, the default arrangement is top down
  5. Can hold inline elements and other block elements
<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"<p style= "box-sizing: border-box! Important; word-wrap: break-word! Important"width:100px; height:100px"</p> </body> </ HTML >Copy the code
1. Px is a pixel, a unit of length; 2. When viewing ELements on the web page, it shows width by height.

Part 2: Block labels

Note: The default size of the page is 1em (1em=16px)!

There are four:

  1. Title tag;

First: the title tag. H1 through H6 (usually placed in the title of the article) should be bold! H1 font is 2em–32px; H2 is 1.5em–24px; H3 font is 1.17em–18.72px; H4 font is 16px by default; H5 font is 0.83em–13.28px; The h6 size is 0.67em- the conversion should be 10.72px, but the page has a minimum size limit, so it will be 12px!

<h1 style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important;"Copy the code
  1. Paragraph tags;

Second: paragraph tags. The p tag has the same size as the level 4 title tag (which will split the HTML document into several paragraphs). The p tag has a default spacing of 16px before and after each paragraph. But paragraph tags don’t indent the first line!

<p> I am the paragraph tag </p>Copy the code
3. List label: It is divided into three categories: ordered list, unordered list and defined list. ```html <! -- Third: List tag --> <! -- (1) Ordered list --> <ol type="A" start="3"> <! -- OL is short for order list. This line is the start of the ordered list type has five choices -- 1: press 1,2,3,4... Display serial number (default); A: according to A, B, C, D.. Display serial number; A: according to a, b, c, d.. Display serial number; I: Press I,II,III,IV, V.. Display serial number (Roman numerals); I: according to the I, ii, iii, iv, v.. Displays the ordinal number (lower case Roman numerals). < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 13px! Important; word-break: inherit! Important;" -- (2) Unordered list --> <ul type="circle"> <! --ul is short for Unorder list. This line is the beginning of an unordered list. You can set styles such as None (empty),circle (hollow),square (solid), disc (solid circle) [default] --> <li> This is an unordered list 1</li> <! -- An LI represents a list item. -- > < li > this is unordered list 2 < / li > < li > this is unordered list 3 < / li > < li > this is unordered list 4 < / li > < / ul > <! --(3) Define the list --> <dl> <! -- This line is the beginning of the definition list --> <dt> Fruit </dt> <! -- represents a large column --> <dd> grape </dd> <! -- represents the explanation of the items listed above, namely subdivision. --> <dd> durian </dd> <! - dd have indentation, dt no indent - > < dt > vegetables < / dt > < dd > cauliflower < / dd > < dd > cabbage < / dd > < / dl >Copy the code
  1. Div tags.

The fourth div tag is used to divide the area by area (width and height; Div is a block element that is pure — pure means that it does not have any default style. Do not use too much. Div’s biggest advantage: the layout, as a container, holds other tags. Because div has no default style, it does not affect the display of the tags even though they are wrapped in div.

<div style="width:500px; height: 500px; background-color: #66a9fe;" > < div style = "text-align: center;Copy the code
Knowledge point supply station:

If the list tag is too troublesome, you can use the shortcut method :(n indicates the number of corresponding labels, directly enter the following statement Tab to generate!)

In depth: Emmet syntax ———— Quick tap code tips quick tap tag syntax!

  1. * is the function of multiplication, followed by a number, the number is a few, will generate a few tags!

    For example:



    Implementation:

  2. $can represent a number that starts at 1 and increases gradually, usually with *.

    For example:



    Implementation:

  3. {} is used to write the text content of the label.

    For example:



    Implementation:

  4. [] is used to write the attribute name and value (if no attribute value is added, create an empty attribute value)

    For example, (1) :



    For example, (2) :

    Implementation (1) :



    Implement (2) :

  5. > is used to indicate the next level of tags, which constitute the parent relationship (inclusion relationship)

    For example:

    Description:

  6. + generate a horizontal tag after the current tag (sibling)

    For example:



    Implementation:

  7. #a generates a div tag with id bit a

    For example:



    Implementation:

  8. Comprehensive use:

    For example, (1) :

    Implementation (1) :



    For example, (2) :



    Implement (2) :



    For example, (3) :



    Implement (3) :



    For example, (4) :



    Implementation (4) :



    For example, (5) :



    Implementation (5) :

(4) Inline label (inline label)

The characteristics of inline labels:

Features of inline tags (illustrated by the text tag SPAN)

  1. The width and height Settings are invalid, and margins and margins cannot be controlled
  2. The width is the width of the text or image
  3. There is no wrap, and a line is dropped only when it is full
  4. When multiple inline labels are written together, the default arrangement is left to right
  5. Inline elements can hold only text or other inline elements
<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"<span> <span style = "box-sizing: border-box; color: RGB (50, 50, 50); line-height: 22px; font-size: 13px! Important; white-space: inherit! Important;"Copy the code