Class notes

Highlights of this class:

  • This paper briefly introduces HTML and some tags commonly used in HTML
  • Html5 added some semantic tags, etc.
  • Common CSS tags, such as text attributes, background colors, Flex layout, positioning, shadows, etc.
  • Some conceptual knowledge of the UI design thinking of the front end personnel.

Specific cases:

HTML:

Common HTML tags: P tag, H1 ~ H6 tag, DIV tag, OL /ul> Li tag, input tag, IMG tag, etc.

Notice You are advised to use only text on p tags and H1 to H6 tags.

  • P tags:
<p>Hello World</p> <! Output ==> Hello World -->Copy the code
  • H1 ~ h6 tags:
    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>
    <h4>Hello World</h4>
    <h5>Hello World</h5>
    <h6>Hello World</h6>
Copy the code

Note that the font size changes from H1 to H6. There can only be one H1 tag in an HTML document.

  • Div tags:

A DIV tag is a container that can hold a variety of tags and content.

<div style="background-color: wheat;">
        <h1>Hello World</h1>
        <h2>Hello World</h2>
        <h3>Hello World</h3>
        <h4>Hello World</h4>
        <h5>Hello World</h5>
        <h6>Hello World</h6>
    </div>
Copy the code

  • Ol/ul > li tags:

Lists are classified into ordered lists (OL/LI) and unordered lists (UL/LI).

Ordered list (OL/LI):

<ol style="background-color: coral;">
        <li>
            <h3>Hello World</h3>
        </li>
        <li>
            <h4>Hello World</h4>
        </li>
        <li>
            <h5>Hello World</h5>
        </li>
    </ol>
Copy the code

Unordered list (UL/LI):

 <ul style="background-color: #F4F1DE;">
        <li>
            <h3>Hello World</h3>
        </li>
        <li>
            <h4>Hello World</h4>
        </li>
        <li>
            <h5>Hello World</h5>
        </li>
    </ul>
Copy the code

Note that child elements of OL and UL tags can only be LI tags! However, the LI tag can contain any tag, and the parent element of the LI tag can only be UL or OL. 🤯

  • The input tags:

The input tag can be a button, a checkbox or a checkbox, a text box, etc. Without further ado, let’s go to code.

<div style="background-color: coral; padding: 15px; display: flex; justify-content: space-between;"<input type="button" value=" I am a button" > <input type="password" value=" I am a password" > <input type="email" value="[email protected]"> <input type="number" value="123456789"> <div> <input type="radio"> <span> I am a checkbox </span> </div> <div> <input type="checkbox"> <span> I am a checkbox </span> </div> </div>Copy the code

Pay attention toDifferent types of input tags have different requirements for what they input. For example, the number type can only enter numbers, but cannot enter letters or special symbols. Content of the email type must be in the email format.

  • Img tags:

The IMG tag is a way to introduce images.

<img src="Https://img0.baidu.com/it/u=2054543582, 3249423566 & FM = 26 & FMT = auto&gp = 0. JPG" alt="Image load failed">
Copy the code

src:Gets the address of the picture.

Alt: can be considered as a backup if the image address fails to be obtained

Note that the initial size of the IMG tag is determined by the size of the image, but you can resize the image by resizing the tag.

Of course, in the actual development, we use more than these tags, but if you are a beginner, to understand these common tags for later learning has twice the result with half the effort.

CSS:

Commonly used CSS properties: Elastic layout, location, pseudo-class, Location, shadow, etc

  • Flex:

The elastic layout is set by the parent element, and the child elements are affected. Often used for some navigation bars or modules that are not easy to lay out

The Flex container has two orientation axes by default: horizontal and vertical. By establishing the main axis of the container with the Flex-direction attribute, you can determine the orientation of Flex items in the container (Flex items are aligned along the main axis by default).

The flex – direction:

  • Row (default) : The main axis is horizontal and the starting point is on the left.
  • Row-reverse: The main axis is horizontal and the starting point is at the right end.
  • Column: The main axis is vertical and the starting point is at the upper end.
  • Column-reverse: the main axis is vertical and the starting point is at the bottom.

<div style="background-color: wheat; display: flex; justify-content: space-evenly; align-items: center;">
        <h1>Hello World</h1>
        <h2>Hello World</h2>
        <h3>Hello World</h3>
        <h4>Hello World</h4>
        <h5>Hello World</h5>
        <h6>Hello World</h6>
    </div>
Copy the code

Pay attention to

  • Context-content: Used to set or retrieve the alignment of elastic box elements along the main axis (horizontal axis).
  • Align-items: Property defines the alignment of flex child items along the lateral axis (vertical axis) of the current row in the Flex container.

  • Location:

Positioning, like elastic layouts, is a common layout method used in development. Unlike elastic layouts, positioning is often used with floats.

The attribute value of the location

  • Static positioning
  • Relative (relative position)
  • Absolute (Absolute position)
  • 4. fixed
  • Sticky (sticky positioning)

Static positioning

The default value for positioning the element in the normal stream (ignoring top, bottom, left, right, or Z-index declarations)

Relative (relative position)

<div style="height: 200vh; background-color: wheat;">
        <p>Hello World</p>
        <div style="background-color:#3D405B; width: 200px; height: 200px; position: sticky; top: 0px;"></div>
        <p style="padding-left: 100px;">Hello World</p>
        <div style="background-color:transparent; border: 5px solid black; width: 200px; height: 200px; position: relative;" ></div>
    </div>
Copy the code

<div style="height: 200vh; background-color: wheat;">
        <p>Hello World</p>
        <div style="background-color:#3D405B; width: 200px; height: 200px; position: sticky; top: 0px;"></div>
        <p style="padding-left: 100px;">Hello World</p>
        <div style="background-color:transparent; border: 5px solid black; width: 200px; height: 200px; position: relative; top: -100px;" ></div>
    </div>
Copy the code

Absolute (Absolute position)

Elements that use absolute positioning are removed from the normal document flow, with no space reserved for the element, which is positioned relative to the origin of the coordinates in the upper left corner of the nearest non-static positioning ancestor element.

<div style="height: 500px; width: 500px; background-color: wheat; position: relative; margin: 0 auto; display: flex;">
        <div style="background-color:#3D405B; width: 100px; height: 100px;"></div>
        <div style="background-color:orange; width: 100px; height: 100px; position: absolute;"></div>
        <div style="background-color:teal; width: 100px; height: 100px;"></div>
    </div>
Copy the code

<div style="height: 500px; width: 500px; background-color: wheat; position: relative; margin: 0 auto; display: flex;">
        <div style="background-color:#3D405B; width: 100px; height: 100px;"></div>
        <div style="background-color:orange; width: 100px; height: 100px; position: absolute; left: 50px;"></div>
        <div style="background-color:teal; width: 100px; height: 100px;"></div>
    </div>
Copy the code

Note:

  • Absolute positioning makes the position of an element independent of the document flow and therefore does not take up space.
  • Absolute Positioned elements overlap with other elements.

4. fixed

The element is removed from the normal document flow. No space is reserved for the element, but it is offset by specifying the element as the origin of the coordinates relative to the upper-left corner of the screen viewport. The position of the element does not change as the screen scrolls. The fixed property creates a new cascading context.

<div style="height: 200vh; width: 500px; background-color: wheat; margin: 0 auto; ">
        <div style="height: 400px; width: 400px; background-color: gray; display: flex;">
            <div style="background-color:orange; width: 100px; height: 100px; position: fixed; top: 100px;"></div>
            <div style="background-color:#3D405B; width: 100px; height: 100px;"></div>
        </div>
    </div>
Copy the code

Try changing the orange background color to transparent and adding a border to the element to give it a better contrast.

Sticky (sticky positioning)

Sticky positioning moves an element around the browser’s visual window as a reference point. Adding one of the top, left, right, or bottom values will “stick” the element out of the document flow when it is away from the visual window. Note the position of the scroll bar and the position of “Hellow World” for example.

<div style="height: 200vh; background-color: wheat;">
   <p>Hello World</p>
   <div style="background-color:#3D405B; width: 200px; height: 200px; position: sticky; top: 0px;"></div>
</div>
Copy the code

  • Shadow:

Shadow is also widely used in development, mainly in the highlight of a module or theme can be used to shadow, shadow is text-shadow and box-shadow.

<div style="background-color: wheat; display: flex; justify-content: space-evenly; align-items: center; box-shadow: 0px 0px 10px green;">
        <h1 style="text-shadow: 0px 0px 10px black;">Hello World</h1>
        <h2>Hello World</h2>
        <h3>Hello World</h3>
        <h4>Hello World</h4>
        <h5>Hello World</h5>
        <h6>Hello World</h6>
    </div>
Copy the code

At the end

Ok, so with all that we’ve talked about, let’s end with a quick example of how these tags and attributes can be used.

Part of the code is as follows

<div> <ol style="list-style: none; display: flex;" > <li> <img src="" alt=""> <p></p> </li> <li> <img src="" alt=""> <p></p> </li> <li> <img src="" alt=""> <p></p> </li> <li> <img src="" alt=""> <p></p> </li> <li> <img src="" alt=""> <p></p> </li> </ol> </div>Copy the code
Any inadequacies in this article are welcome to be corrected. 😊