HTM: Windows 98 and older Linux only recognize 3 bits, not more than 3 bits (HTML)

  • XHTML: HTML writing specification and application specification
  • HTML5: Added some tags
  • HTML5 technology: added audio and video functions, DOM manipulation and other new functions (new API, HTML5 technology belongs to JavaScript technology)

DOCTYPE HTML: HTML5 declaration mode, CSS1Compat mode

Document.com patMode:

  • CSS1Compat: W3C’s standard compatibility mode
  • BackCompat: Weird compatibility mode for browsers

head

title

  • Home page: site name + key keywords/description of keywords
  • Details page: Details name + site name + Introduction
  • List page: category name + keyword + site name
  • Article page: title + category + site name

meta

  • keywords
    • 100 characters
    • Site name + category information + site name
 <meta name="keywords" content="" />   
Copy the code
  • description
    • Description information
    • 80-120 characters
    • Summary summary of title + keywords
 <meta name="descrition" content="" />   
Copy the code

Search engine recognition priority: title > description > keywords

Based on label

H tag

  • h1
    • Margin: 21.44
    • Font: 2 em
  • h2
    • Margin: 19.92
    • Font: 1.5 em
  • h3
    • Margin: 18.72
    • Font: 1.17 em
  • h4
    • Margin: 21.28
    • Font: 1 em
  • h5
    • Margin: 22.17
    • Font: 0.83 em
  • h6
    • Margin: 24.97
    • Font: 0.67 em

p

Margin: 16 pixels

  • The first line indentation
<p style="text-indent: 2em;">Example of indentation in the first line</p>
Copy the code

Strong, b

  • Bold tag

  • Strong: indicates the semantic label with strong tone

  • B: Physical label

Em, I

  • em: semantic label, strong tone
  • i: Physical label, not italic, used for icon label

del / ins

  • del: delete
    • Delete the line
    • Style =”text-decoration: line-through”
  • ins: insert
    • The underline
    • Style =” box-sizing: border-box! Important; word-wrap: break-word! Important;

address

  • Italic, semantically, address
  • Not commonly used

More labels

div

  • Block-level tags
  • Label the container

a

  • Hyperlink tag
  • Call (tel:18773803xxx)
  • Email (mailto:[email protected])
  • Anchor location (#box)
  • Protocol qualifier 
     <! -- Do not refresh the page -->
 <a href="javascript:;"></a>
 <a href="javascript:void(0)"></a>
 <! - the popup window - >
 <a href="Javascript: alert (' pop-up ');"></a>
Copy the code

sub / sup

  • sub: subscripted
  • sup: superscripted
  • Upper and lower corner labels
<div>The front-end development<sup><a href="http://www.baidu.com">[1]</a></sup></div>
<div>2<sup>3</sup></div>
<div>H<sub>2</sub></div>
Copy the code

span

  • There is no style tag
  • Low-key, quiet, most commonly used

Ol, ul

  • Ol Ordered List

    • type="a | A | i | I | 1"
      • A: In lower case
        • More than 26, the 27th is marked with AA, and so on
      • A: In capitals
      • 1: Arabic numerals
      • I: Small thank Roman numerals
      • I: Capital Roman numerals
    • start="1"
      • The starting value
      • Nothing but numbers
    • reversed="reversed"
      • Reverse order
      • Numbers less than zero in reverse order are sorted from -1

  • Ul Unordered List

    • type="disc | square | circle"
      • Disc: Little dots
      • -Penny: I have a square.
      • Circle: hollow circle

table

  • attribute

    • border="1": Cell border
    • cellpadding="10": Cell margin
    • cellspacing="10": Cell spacing

  • The child tag

    • <caption>: Title tag
    • <th>: Table Header cell Indicates the table header label
    • <tr>
      • Table ROW Label of a table row
      • rowspan="2"merger
    • <td>
      • Table Data Cell Cell label
      • colspan="2": Merge cells (excess parts are automatically ignored)
      • align="center": Centered (uniformly centered style Settings)
    • <thead><tbody><tfoot>
      • All three tags need to exist at the same time, even if tFoot has no content, it needs to place an empty tag
      • The header and footer are loaded first
      • Without these three tags, the table will not be rendered until the data is loaded
      • The order of these three labels can be arranged freely, but does not affect the final effect

iframe

# Iframe You Don’t Know

About labels you don’t use

  • <br>
    • The spacing of line breaks varies from browser to browser
  • <hr>
    • Each browser displays a different split line
  • <frameset>
    • The page loads slowly
    • Js interaction is not friendly
    • Not friendly to search engines
    • Cannot be placed inside the body tag
        <! -- Frameset layout example -->
    <frameset rows="10%, 90%,">
        <frame src="top.html" />
        <frameset cols="20%, 80%,">
            <frame src="left.html" />
            <frame name="mainFrame" src="http://baidu.com />  Copy the code

About the space

<! -- Normal line break -->
<div style="width:100px; height:100px; border: 1px solid #000">I'm a front-end engineer. I'm a front-end engineer</div>
Copy the code

Interpretation of the

  • Space newlines are text delimiters

On line

<! -- Normal line break -->
<div style="width:100px; height:100px; border: 1px solid #000">I'm a front-end engineer. I'm a front-end engineer</div>
<! -- no line break -->
<div style="width:100px; height:100px; border: 1px solid #000">
  asidjfisadfsadfiosadjfiosadjfsadof
</div>
<! -- Normal line break -->
<div style="width:100px; height:100px; border: 1px solid #000">
  I'm a front end engineer
</div>
Copy the code

Shih:

  • The browser does not recognize Chinese and defaults to a character wrap
  • The browser recognizes English words and wraps them. The second example counts as a word, so it cannot wrap

About the nested

  • Inline elements can nest inline elements
  • Block-level elements can nest any element