This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!

HTML

HTML (Hypertext Markup Language). Originally intended to display documents that could be intermixed and jump from one document to another.

With the development of the Internet, the function of web page gradually from “text information” to “software function” transition. Web pages are not so documented.

It’s much like we’re developing for a requirement (display document), something gets done, and the requirement changes (display software). Such changes are hard to predict, and in order to accommodate the old and meet the new needs, we cannot completely overturn the old. Therefore, we can also look at technology from a historical perspective to better understand it.

Because HTML deals with the need to display documents, some of its features make sense. For example, block-level elements are responsible for arranging elements vertically, inline elements are responsible for arranging elements horizontally, for quick typography, and for displaying the content of a document.

Classification of labels

HTML is a markup language, so let’s look at the classification of tags.

  1. Grouped by display mode: block-level elements, inline elements, inline block elements
  2. Classified by function: document label, typesetting label, text formatting label, image label, link label, list label, table label, form label

There are also closed characteristics of the classification into single-label elements (such as <br />) and double-label elements (most tags such as <div></div>). Sorted by replacement (<img />) and non-replaceable elements (most tags). These two categories are relatively simple.

Classification by display mode:

Block-level elements

Each element occupies a single line or more lines and is often used to build large layouts (large structures).

Common block elements are:

  • : Defines sections in the document.

  • : Define paragraph.

  • : The form that defines the HTML document.
  • : Defines a table.

  • : Define horizontal lines.

  • to

    : Defines the HTML title.
  • < DL >,
    , < DD > : Defines lists, items in lists, and descriptions of items in lists
  • < OL >,
      ,

    • : Defines ordered list, unordered list, list items

Inline elements

Does not occupy an independent area, by its own font size and image size to support the size, often used to control the style of the page text.

Features: The width, height, vertical padding and margin values are invalid, but the horizontal padding and margin values are valid.

Common inline elements are:

  • : Defines hypertext links.
  • : Defines bold text.
  • : Definition emphasizes text.
  • < I > : Define italics.
  • : Defines sections in a document.
  • : Defines emphasis text.

Inline block elements

Renders inline and can be arranged horizontally. Internal display block level, with wide height can be braced up. Common inline elements are:

  • : Defines the image.
  • : Defines the input control.

By function:

The document tag

Common document tag elements are:

  • : Defines the document type.
  • < HTML > : Defines an HTML document.
  • : Defines the header of the document.
  • : Defines the meta information that elements can provide about the page. The most common is setting viewport for mobile web pages.
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
Copy the code
  • : Defines the default address or target for all links on the page.
  • : Defines the document title.
  • : Defines the relationship between documents and external resources.
  • : Defines the body of the document.

Typesetting label

Common document tag elements are: <h1> to <h6>, < P >, <br>, <hr>, <div>, <span>

Text formatting tag elements

Common text formatting tag elements are: <b>, < I >, < S >, < U >, <strong>, <em>, <del>, <ins>, <blockquote>, <sub>, <sup>

Image tag element

Common image tag elements are: <img>

Link tag element

Common link tag elements are: <a>

List tag element

Common list tag elements are: <ul>, < OL >, <li>, < DL >, < DT >, < DD >, <menu>

Table tag element

Common list tag elements are: <table>, <tr>, < TD >, <thead>, <tbody>, <tfoot>, <col>, < colGroup >

Form tag element

Common form tag elements are: <form>, <input>, <textarea>, <button>, < SELECT >, <option>, <label>, <fieldset>, <datalist>

Semantematization of tags

HTML is used to express structure, semantically to better express structure (footer, header, nav).

Semantic tags are not necessary in daily development, we use CSS class selector to better express business, have more appropriate semantics.

Great use of semantic tags: “Use right” is better than “don’t”, “don’t” is better than “use wrong”.

HTML5 is new compared to HTML4

The new content is to accord with Internet development tide completely, the content that rolls out.

  • Supports video and audio elements. Multimedia playback.
  • Canvas painting. Draw images by script.
  • LocalStorage and sessionStorage. Build more powerful Web applications.
  • More semantic content elements, such as article, footer, header, nav, section
  • Form controls, Calendar, Date, time, email, URL, search
  • New technologies such as Geolocation. The map API

CSS

CSS (Cascading style sheets). It was originally created to also modify the style ‘document’. So CSS has the same history of problems as HTML. Before CSS3, for example, when a page needed to display ‘software functionality’, float (originally used for text and text intermixing) was needed for a multi-column layout.

Writing CSS is very different from writing JS. Write JS, pay attention to decoupling, a piece of code as far as possible a single responsibility, reusable, no side effects. CSS, however, is declarative, leveraging selectors, hierarchies, inheritance, and prioritization to affect page elements.

The three major characteristics

inheritance

The parent element sets some attributes, and the child element has some. Call it inheritance.

Purpose: To set some public information on the web page. Mainly for text, such as text color, font, size, etc.

Only properties starting with color/font-/text-/line- are inherited.

Cascading sex

CSS is called cascading style sheets, and cascading is a core feature of CSS. Cascading occurs when a label is selected by multiple selectors.

priority

The priority rule determines which selector styles take effect when cascading occurs.

The selector

Wildcard selector

*{
    margin:0;
    padding:0;
}
Copy the code

Element (tag) selector

p{
    color:red;
}
Copy the code

Class selectors

.warning{
    color:red;
}
Copy the code

The ID selector

#warning{
    color:red;
}
Copy the code

Property picker

<ul>
    <li foo>1</li>
    <li foo="abc">2</li>
    <li foo="abc efj">3</li>
    <li foo="abcefj">4</li>
    <li foo="efjabc">5</li>
    <li foo="ab">6</li>
</ul>

[foo]{
    background-color:red;
}

Copy the code

Intersection selector

p.important {color:red; }Copy the code

Intersection selector junction, which achieves the effect of ‘and’, both p and elements with.important are selected.

Union selector

.warning,.important {color:red; }Copy the code

Combine selectors to achieve the effect of ‘or’. Warning and. Important are selected at the same time.

Document structure selector

Sample document

<ul>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
</ul>
Copy the code

Descendant selector

Unlike the associative element selector, UI and Li are separated by Spaces. This is the time to choose offspring.

ul li{
    border: 1px solid red;
}
Copy the code

Child selectors

ul>li>p{
   border: 1px solid red;
}
Copy the code

Adjacent sibling selectors

The < div > < h1 > h1 < / h1 > < p > < / p > / / p1 the p will be selected to < p > p2 < / p > < p > p3 < / p > < / div > h1 + p {color: red; }Copy the code

General sibling selector

<div> <h1>h1</h1> <p> P1 </p> // this p will be selected <p> P2 </p> // this P will be selected </div> h1~p{border: 1px solid red; }Copy the code

Pseudo class selector

:root{ background-color:red; } // Document root pseudo-classCopy the code

There are also a lot of pseudo-class selectors, such as A: Link, a:active, A: Hover, a:visited, : Focus and so on. There are pseudo-class selectors for document structures such as Element :first-child (selecting the first child belonging to the parent element).

Pseudo element selector

Unlike pseudo-class selectors, pseudo-element selectors insert new content at document rendering time.

Element ::before // Inserts content before the content of each element. Element ::after // Inserts content after the content of each element. We're probably more likely to use it to clear floats or validate form prompts and so onCopy the code

Selector naming: semantic vs. atomic

There are two big trends in the naming of selectors. One is semantic, the most popular being BEM. The second is atomization, such as the TailwindCSS library

Semantic, BEM naming:

<div class="author-bio">
  <img class="author-bio__image" src="https://cdn-images-1.medium.com/max/1600/0*o3c1g40EXj65Fq9k." alt="">
  <div class="author-bio__content">
    <h2 class="author-bio__name">Adam Wathan</h2>
  </div>
</div>
Copy the code

Atomization, TailwindCSS library:

<button class="f6 br3 ph3 pv2 white bg-purple hover-bg-light-purple">
  Button Text
</button>
Copy the code

Each has its disadvantages. The advantage of semantics is to enhance readability, while the disadvantage is that CSS code will have a certain amount of redundancy, and many similar codes are not easy to reuse. Atomization has the benefit of maximum reuse, but lacks semantic expressivity.

Common properties

  • Text: font-size, font-weight, font-size, font-family
  • Text: text-align, text-decoration, text-indent, line-height
  • Color: color
  • Background: background-color, background-image, background-repeat, background-position
  • Box model: Margin, border, padding, content, box-sizing
  • Others: display, float, z-index

The box model

The W3C defines a standard box model where width and height represent the size of content. This is not quite the same as the width and height of everyday objects. When we get a shoe box, we must use the border as its width and height. W3C noticed something was wrong, too, so they created a box-sizing attribute that included border (box-sizing: border-box;). .

Document flow, floating flow, location flow

Document flow, also known as plain flow, is a product of history. The element boxes are laid out in the document stream one by one.

Floating Flow: When the element is set to float, it leaves the document flow, but not the text flow, so you can surround the floating element with text.

Positioning flow: divided into absolute positioning, relative positioning, fixed positioning. Such elements are completely out of the normal flow.

The box was placed into the three streams to complete the general layout.

Flex layout

Flex layout is more in line with modern web layout. Flex differs from other display attributes in that CSS for the first time supports attributes that determine the layout of child elements. The previous display property just decides how it should be laid out.

BFC

The reason why block-level formatting context is always mentioned is because it can solve margin collapse and clear float problems well. It is a knowledge point that falls under the visual formatting model.

Browsers have a relatively complex logic when it comes to layout elements. This logic involves generating a block-level formatting context, a separate rendered area, for what element boxes are encountered.

In addition to BFC, there is IFC (inline formatting Context) and Flex formatting context, commonly known as FFC. Are generated contexts during the layout process. FFC is a little bit easier to understand. When we encounter display: flex, we create an FFC context where the elements are laid out according to Flex’s rules.

Reference documentation

  • Type of HTML tags
  • CSS knowledge
  • CSS status and how to learn
  • Front-end layout must understand CSS selectors
  • HTML, CSS, JavaScript knowledge tree mind map
  • TailwindCSS Chinese website
  • Why won’t there be CSS4?