A, HTML

1. Default label

  • Meta tag: charset/name/http-equiv
<meta name='description' content='HTML Base '> <meta name='viewport' content='... '> The mobile definition screen displays the page area <meta "http-equiv"=' Expires' content='31 Dec 2021'> custom to provide information to a particular siteCopy the code
  • Title tag: The title of the page, which is displayed on the browser TAB
  • Style tag: CSS style
  • Link tag: link
  • Script tag: executable script (JS)
<script type="text/javascript" SRC ="javaxcript.js"> <script defer> Valid only for external scripts <script async> Download the script immediately and do not interfere with other operations. Valid only for external scriptsCopy the code

2. Common elements

  • Inline element (inline element) : Occupies only the space contained in the border, and cannot set the width or height
< a >, < span >, < br >, < I >, < em >, < strong >, < label >, < q >, < var >, < cite >, < code >Copy the code
  • Block-level element: Occupies the entire row of its parent element, always starting with a new row
The < div >, < p >, < h1 > - < h6 >, < ol >, < ul >, < dl >, < table >, < address >, < blockquote >, < form >Copy the code
  • Inline block elements: The elements are arranged within a row. The width and height can be set
<img>、<input>、<td>
Copy the code

3. Semantically – blocks

  • Header tag: Introductory or auxiliary navigation information such as title, logo, search box, author name, etc., cannot be placed in footer, address, or another header tag
  • Nav TAB: Provides navigation links, such as menus, directories, and indexes
  • Article tags: individual documents, pages, applications, sites, structures that can be independently assigned or reused, such as forum posts, news articles, blogs, user-submitted comments, interactive components, etc
  • Section tags: Groups content by topic. They usually appear in the outline of a document
  • Aside: A separate section, usually placed in a sidebar, used for advertising, tips, references, etc
  • Footer tag: represents the footer of the most recent chapter, usually containing information such as the author of the chapter, copyright data, or document links, and is not included in the outline

4. Semantic – grouping

  • Figure tag: Independently referenced contents of a package, ICONS, illustrations, codes, etc., usually with a title
  • Figcaption Tag: The caption/title of the diagram associated with it, usually first or last on the Figure tag
  • The blockquto tag: a block-level reference, with the cite attribute representing the URL of the source
<figure> <blockquto cite=" url "> <p> </p> </blockquto> </figure caption> </figure>Copy the code
  • Dl/DT/DD tag: describes a set of key-value pairs. It is usually used in metadata and term definition scenarios

5. Semantic – text

  • Cite tag: To cite the title of a work, including a paper, document, book or film
  • Time tag: machine-readable time and date. Datetime indicates the date and time associated with this element. If not specified, the element will not be resolved to a date
  • Address Label: contact information
  • The mark tag: Used in references to indicate that attention is needed
  • Code tag: code snippet
  • Small label: Disclaimer and notes

6. Multimedia elements

-img tag: SRC image embedding path, Alt image text description, decoding mode of Decoding, loading lazy. -picture tag: The element contains zero or more source elements and one IMG element to provide corresponding image version media attributes for different display device scenes: Similar to the media query type attribute: MIME type, rendering the corresponding image according to the browser support

  • Video/Audio tags: SRC Indicates the video embedding path, Controls indicates whether to display the browser controls, AutoPlay indicates whether to automatically play the video, and Source indicates alternative video resources

7. HTML parsing

DOM: A structured representation of nodes and defines a way for programs to access that structure, linking Web pages to scripting languages

  • Build the DOM cooked
  • Style calculation to build the CSSOM tree
  • Combine DOM and CSSOM into a Rebder tree
  • Layout calculation
  • draw

Three, CSS,

1. The selector

  • Universal selector: Selects all elements.
  • Element selector: All HTML elements of the specified type
  • ID selector: An element with a specific ID. Each ID attribute should be unique within a document.
  • Class selector: An element with a particular class, as givenclassAttribute, all matching elements are selected.
  • Attribute selector: Selects all matching elements for a given attribute

Pseudo-class selector:

  • pseudo-classes

  • False selectors enable the selection of elements based on state information that is not included in the document tree. Example: a:visited matches all elements that have been visited.

  • Pseudo elements

  • :: Pseudo-selectors are used to represent entities that cannot be expressed semantically in HTML. Example: p::first-line matches the first line of all

    elements.

2. The box model

  • Block boxes and Inline boxes

  • Margin: sets the margin

  • Border: sets the border

  • Padding: padding

  • Width&height; High content of wide

  • Box-sizing: Modify the width and height definition range

  • Display: Changes whether the box is block-level or inline

  • Display: flex;

A CSS box model optimized for user interface design is defined. In an elastic layout model, the child elements of an elastic container can be arranged in any direction and can “flex” their size, either by increasing their size to fill unused space or by shrinking their size to avoid overflows of the parent elements. The horizontal and vertical alignment of child elements is easy to manipulate. By nesting these boxes (horizontal boxes inside vertical boxes, or vertical boxes inside horizontal boxes), you can build a layout on two dimensions.

3. The positioning

  • Static positioningPosition: the static, the default location
  • Relative positioningPosition: relative, should occupy the original position
  • Absolute positioningPosition: absolute, relative to the parent element of a non-static location
  • Absolute positioningPosition: fixed, relative to the absolute positioning of the window
  • Positioning weightz-index, the smaller the value, the lower the level

4. The decoration

  • The texttext: Defines features related to text embellishments such as underscores, text shadows, and emphasis tags. Remove underscoretext-decoration:none
  • backgroundbackground: used to define various background attributes in one set, including color, image, Origin and size, repeat mode, and so on. You can define one or more attributes in a single declaration:Background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-siz E, background - attachment. For all shorthand properties, any value that is not specified is set to their initial value.
  • A borderborder: a shorthand property used to set various individual boundary properties.borderCan be used to set the value of one or more of the following properties:border-width, border-style, border-color.
  • shadowbox-shadow
  • Text shadowtext-shadow
  • The mouse stylecutsor
  • The transitiontransition: Defines different transitions for an element when switching between different states
  • animationanimation

5. Debugging

To select an element from the page, do the following:

  • Right-click on the element and select Inspect.
  • Select this element from the HTML tree to the left of DevTools
  • If you look at the Rules View bar to the right of the HTML, you can see the CSS properties and values of the element.

6. Extension

CSS preprocessor is a program that allows you to generate CSS using the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, and most add features that native CSS does not have, such as code mixing, nested selectors, and inheritance selectors. These features make the structure of CSS more readable and easy to maintain.

Here are some of the most popular CSS preprocessors:

  • Sass
  • LESS
  • Stylus
  • PostCSS

7. Innovation

Learn to arm CSS with the power of javascript

3. UI design

  • Background: The front end may be responsible for the shape the product eventually takes

  • Feature oriented: deliver features, design minimalism, start with simple pen and paper, start and iterate

  • Design principles: The page should have hierarchy and focus; Page layout, color, style design to coordinate, neat, the overall consistency

  • The Fourth edition of the Design Book for All four principles: Contrast, Repetition, intimacy, alignment

  • Design system: center layout; Keep the content at an appropriate width (usually 600-800px), maintain readability, and lay it out in multiple columns

  • Spacing: Maintain spacing between elements, provide standardized options for development, leave plenty of white space, express association relationships, and highlight intimacy through row height and list spacing

  • Text: Provides standard options to choose from, combine word weight and color to match design levels, alignment baseline, center of gravity alignment, line height inversely proportional to font size

  • Function colors: red warning, yellow warning, green pass

  • Color disc: dark foreground, light background

  • Don’t break the hierarchy balance

  • ICONS can be added to accommodate color-blind users

  • Layers on images: Add a layer of mask, or add a shadow to text to give emphasis

  • Self-study resources: MDN official website, cainiao tutorial, etc