HTML tags in hand

What should I write first in HTML?We can change the language to Chinese<html lang="ch-ZN">

Chapter tag

  • <h1~h6>– title
  • <section>– section
  • articleArticles –
  • <p>– paragraph
  • <header>– Content at the top of the page
  • <footer>– Content at the bottom of the page
  • <main>– Main Contents
  • <aside>– Collateral content
  • <div>– divided

© ©

Global properties: Properties that all tags have

View the DEFAULT HTML styles
  • You can do this through Chrome Developer Tools
  • Elements ->styles- > User agent stylesheet Views the default HTML style
Taobao home website style initialization

  • class– Mark code blocks with class= XXX
  • .XXX– Select all code blocks with class name XXX, or use [class=XXX], which is inconvenient because the class name must be exactly the same as XXX. XXX can match portions of the keyword separated by Spaces.
  • contenteditable– Elements with this tag can be edited by the user.
  • hidden– Hide tags
  • id– Similar to class, but in principle id is unique and class is not. Use class instead of id only if you have to. In addition, you can modify elements directly in JS using id namesh.style.border = "10px solid green";This is not recommended because it requires the id to be named parent, top, self, etc. Since there are many global properties defined in the window, they cannot have the same name as those properties.
  • style– HTML attribute, which has a higher priority than the tag, but JS is higher than the style.

JS > HTML style tag > CSS

1.#h{border:10px solid red;

– In the body header 3.h.style.border=”10px solid black”; – The final effect is black in JS.

  • tabindex– Controls the order in which TAB responses are used

1. A positive number, such as tabIndex = 1/2/3 /, indicates that 2 is accessed in sequence. Note that 0 is the last one, and 3.-1 is not selected here.

  • title– For ellipses that are needed beyond the page:
    • Used to display complete content
    • Application scenario: Change the length of text to ellipsis
    • Single line overflow:
  1. Adjust the CSS
  2. white-space: nowrap;Don’t break
  3. text-overflow: ellipsisFor overflow, use….
  4. overflow: hidden;Overflow part hidden

The content label

1. Ol +li – Ordered list ITen

  • Ol represents an ordered list and Li represents an item in the list

2. Ul + Li – Ynordered List + List item

  • Ul stands for an unordered list

3. Dl +dt+ DD – Description list + term +data

  • dlUsed to describe something,dtIt’s a description of who,ddWhat’s in there is the description

4. Pre – Leave the space, press Enter, Tab. Because in HTML, multiple consecutive whitespace shrinks to a single space, in the Pre tag, these whitespace remain. (abbreviation of preview) 5. Hr – split line 6. Br – enter (abbreviation of break)

  • brIt’s for line breaks

7.a abbreviation of anchor 8.em- Emphasis 9.strong- bold

  • emShow emphasis in tone
  • strongPresentation content itself is important

10. Code — Snippets of code

  • codeThe font inside is of equal width

11. Q-quote (abbreviation of quote)

  • Quote is an inline reference by default
  1. blockquote– Newline reference
  • Represents a reference in the structure