Ruan Yifeng HTML tutorial

Wangdoc.com/html/index….

Formatting code

Install the prettier

Set automatic formatting File -> Preference -> Settings -> Auto Save (search) -> onFocusChange -> format on Save (check)

HTML hands type

Emmet exclamation mark

DOCTYPE (Document type) lang (language) zh-CN (Chinese) charset=”UTF-8″

The default styles

  • What about default styles

Chrome Developer Tool (F12) Elements -> Styles -> User agent stylesheet

  • User Agent

CSS reset

<style> // Clear default style *{margin: 0;padding: 0;box-sizing: border-box; } *::after, *::before{box-sizing: border-box; }h1.h2.h3.h4.h5.h6{font-weight: normal; } // Modify the header stylea{color: inhert; text-decoration: none; } / / modifyaLabel styleul.ol {list-style: none; }table{border-collapse: collapse; border-spacing: 0; } </style> <style> // business styleh1{font-size: 48px; }h2{font-size: 36px; } </style>Copy the code

The content label

  • Ol + Li (OL: Ordered list; Li: List item)
  • Ul + Li (ul: Unordered List)
  • Dl-dt + dd (dl: description list; Dt: des~ term)
  • Pre (Restore input form)
  • Hr (dividing line)
  • Br (newline)
  • A (hyperlink)
  • Em (emphasis)
  • Strong (essential)
  • Code (equal width)
  • Quote (inline quote)
  • Blockquote (block level reference)