Basic HTML collation

HTML

concept
- HTML is a hypertext markup language
- The browser parses the HTML structure according to certain syntax
- HTML can not only represent plain text, but also support some rich media resources. Such as pictures, videos, etc
Grammar specification
1. Keywords are wrapped in Angle brackets to form tags, most tags areIn pairsThe emergence of
  - The end tag has one more tag before the keyword than the start tagThe backslash】<></>
2. The content is placed between two Angle bracket tags, as in<p> I am a paragraph tag </p>
3. Single tags, also called empty tags, also exist, for exampleThe < img >, < input >
Semantic HTML tags
- There are specific tags in HTML to achieve a variety of different functions, according to the structure of the content (content semantics), choose the appropriate tag (code semantics) to facilitate developers to read and write more elegant code, while allowing browser crawlers and machines to parse well. So semantic HTML is all about using the right tags to do the right things, and putting tags in the right places, like p tags for paragraphs, H1-H6 tags for headings.
Relationships between labels
1. Contains the relationship
  - HTML and body
  - HTML and head
2. Parallel relationship
  - The head and body
3. Tags can be nested
Attributes in tags
- Those representing certain features and functions can be divided intoBuilt-in properties.Custom attributes
- A label can havemultipleattribute
- Properties betweenIn no order
- Between attributes andSpace at least one

The basic structure

There’s one on the top<! DOCTYPE html> [Document Declaration]

And then the outermost one<html></html>Label wrapped【 Main Part 】

The language can be declared in HTML tags<html lang="zh-CN">

<html></html>It is mainly divided into two parts

<head></head>[Page metadata Information and Styles]

    <! -- Metadata -- character set information -->
    <meta charset="UTF-8">
    <! -- Metadata -- keyword -- search for keywords to find our web page -->
    <meta name="keywords">
    <! -- Metadata -- Description -- page Description -->
    <meta name="description">
    <! -- Default browser version -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <! -- Mobile adaptation? -->
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0"> 
    <! -- title -->
    <title>I am heading</title>
    <! -- STYLE -->
    <style></style>
Copy the code

<body></body>[Structure and javascript]

    <body>
        <! -- Page structure -->
        <div></div>
        <! -... -->
        <! -- javascript -->
        <script></script>
    </body>
Copy the code

The overall structure

<! DOCTYPEhtml>
    <html lang="zh-CN"><! HTML tags are also called root element tags.
        <! -- HEAD -->
        <head>
            <! -- Meta is metadata, you can declare something in it that will not be rendered on the page, but will be read by the browser, such as character set information -->
            <meta charset="UTF-8">
            <! -- Meta metadata
            <meta name="keywords" content="Front end">
            <! -- Meta metadata -- page description -->
            <meta name="description" content="This page is about front-end development learning.">
             <! -- Default browser version -->
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <! -- Mobile adaptation? -->
            <meta name="viewport" content="Width = device - width, initial - scale = 1.0"> 
            <! -- [page title] -->
            <title></title>
        </head>

        <! -- BODY [viewable area] -->
        <body>
            <! -- Page structure -->
                <div></div>
                <! -... -->
                <! -- javascript -->
                <script></script>
        </body>
    </html>
Copy the code

Quickly generate HTML structure
- New HTML file.html 或 .htm
- !!!!! Generate vscode directly
HTML character entities special symbols to be rendered on a page
- Reserved characters in HTML must be replaced with character entities. 【 Special characters 】
- Two forms: can passThe name of the character 或 Character numberTo use the
  - Names have poor support for older browsers
  - Numbering has no compatibility problems
- Case discrimination
- They’re all special symbols, and they’re used very rarely, so you can just find them when you use them
- The sample
```
    <! - space -- -- >
    &nbsp;<! -- Character name -->
    The & # 160;<! -- Character number -->
Copy the code
```

Common label

The title tag<h1></h1>–<h6></h6>
- H $*6{content $is the part that needs to be replaced}
- Font size decreases layer by layer, with the same thickness and decreasing priority. A page is generally only used for logo and some important words [due to its large size, it is generally used once on a page]
```
        <h1>The title tag</h1>
        <h2>The title tag</h2>
        <h3>The title tag</h3>
        <h4>The title tag</h4>
        <h5>The title tag</h5>
        <h6>The title tag</h6>
Copy the code
```
Paragraph tag P
- <p></p>Use the P tag to separate paragraphs
```
        <p>The paragraph</p>
Copy the code
```
Image tag IMG
- <img></img>Single label, where attributes:
  - srcRepresents picture path
  - altThis is alternative text that can be read by the reader to help disabled people navigate the web.
  - titleText will follow when the mouse is over the picture.
```
        <img src="Address".alt="Alternate text".title="Mouse follow text">
Copy the code
```
Hyperlink tag A
- If you want to jump without js, you must specify an A tag
```
   <a href="Redirect address".target="In which window to open a new page"></a>
Copy the code
```
- The value of the href attribute in the a tag
  - <a href=" href=" ></a>Represents the hyperlink addressPage jump
  - <a href="#"></a> Jump to the top
  - <a href=""></a>" Refresh the page
  - <a href="javascript:;" ></a>" Disables jump and prevents the default behavior of the A tag
    - [Clicking the button does not do any operation, just like ordinary labels]
    - Usually used when a jump does not know the destination address, need to be obtained later.
  - Anchor point jump [used with box ID]
    - Make the href value of the A tag # box ID
Nested the page tag iframe within the page
- <iframe></iframe>Where the attributes are:
  - srcRepresents the hyperlink address
  - frameBorderA border
  - widthThe width of the
  - heighthighly
Formatting label
- <hr>Dividing line
- <b></b>bold
- <strong></strong>bold
- <i></i>italics
- <em></em>italics
- <del></del>Delete the line
- <s></s>Delete the line
- <ins></ins>The underline
- <u></u>The underline
- <big></big>Increase the size of the text
- <small></small>Reduce the size of the font

Preformatted label

<pre></pre>Preformatted label
Render according to your preset format

     <pre>$$$$$$$$$$33 33 | | | | = = | | = = = = = = = = = = = = = = = = = = = =</pre>
Copy the code

Box tag DIV
- <div></div>Big box label
  - Quickly generate shortcut keys Div * n content of {}
- <span></span>Small box label

List three

Ul or LI must be next to LI and must not be separated from other labels

Unordered list

ul
- li

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
Copy the code

An ordered list
- ol
  - li
```
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
Copy the code
```
- Regardless of the order, the style of the built-in list is not needed.
  - In these two lists, the dot and number are ugly, so they usually add a box to modify the style they need
  - [How to clear]Clear the default style (number or dot) in front of the list
```
    ul,li{
        list-style:none;
    }
Copy the code
```

Custom list

Usually at the bottom of the page
dl
- dt
- dd

    <dl>
        <dt>early</dt>
        <dd>Drink lots of water</dd>
        <dd>Go to work</dd>

        <dt>In the</dt>
        <dd>Have a meal</dd>
        <dd>rest</dd>

        <dt>On the evening of</dt>
        <dd>after work</dd>
        <dd>dinner</dd>
    </dl>
Copy the code

Rich text resource

Audio audio

    <audio src="Resource path" controls loop autoplay></audio>
Copy the code

Autoplay is disabled
The loop cycle
Controls the controller

Video video

    <video src="Resource path" controls></video>
Copy the code

The loop cycle
Controls the controller

form

tableform
tr 行
tdThe cell
th【 semantic 】
captionTable label
- On top of the table, you can also build your own with title tags
theadTable header [semantic]
- This tag is optional and will be parsed to the head of the table wherever it is placed in the table
tbodyTable contents [Semantic]
- This tag is optional, and will be parsed into the table wherever it is placed in the table
tfoot【 semantic 】
- This tag is optional and will be parsed to the end of any part of the table

The overall structure

        <! -- Overall structure -->
            <style>
                table{
                    margin:0 auto;
                }
            </style>
            <body>
                <table>
                    <caption>I am heading</caption>
                    <! -- table header -->
                    <thead>
                    <tr><! -- First line -->
                        <th>The early</th>
                        <th>A student</th>
                        <th>This night,</th>
                        <th>The night shift</th>
                    </tr>
                    </thead>
                    <! -- Table contents -->
                    <tbody>
                    <tr><! -- Second line -->
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    </tbody>
                    <! -- Table end -->
                    <tfoot>
                    <tr><! -- Third line -->
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    </tfoot>
                </thead>
            </body>
Copy the code

The attribute of the table

width 宽

This item can also be set in CSS styles

    <body>
        <table width='100px'>
            <tr><! -- First line -->
            <th>The early</th>
            </tr>
            <tr><! -- Second line -->
            <td>1</td>
            </tr>
        </table>
    </body>
Copy the code

height 高

This item can also be set in CSS styles

    <body>
        <table height='100px'>
            <tr><! -- First line -->
            <th>The early</th>
            </tr>
            <tr><! -- Second line -->
            <td>1</td>
            </tr>
        </table>
    </body>
Copy the code

borderA border

All cells will have a border, if you set it in CSS style, it will only have a border on the big box

    <body>
        <table border='1px'>
            <tr><! -- First line -->
            <th>The early</th>
            </tr>
            <tr><! -- Second line -->
            <td>1</td>
            </tr>
        </table>
    </body>
Copy the code

cellpaddingThe distance from the content to the border

    <body>
        <table cellpadding='100px'>
            <tr><! -- First line -->
            <th>The early</th>
        </tr>
        <tr><! -- Second line -->
            <td>1</td>
        </tr>
    </table>
    </body>
Copy the code

cellspacingDistance from cell to cell

This property defaults to a few pixels, spaced, or, if set to 0, two borders next to each other that look like one, but are two pixels wide

    <body>
        <table cellspacing='100px'>
            <tr><! -- First line -->
            <th>The early</th>
            </tr>
            <tr><! -- Second line -->
            <td>1</td>
            </tr>
        </table>
    </body>
Copy the code

border-collapseMerge border lines, a 1px border

    <body>
        <table border='1px' border-collapse='100px'>
            <tr><! -- First line -->
                <th>The early</th>
            </tr>
            <tr><! -- Second line -->
                <td>1</td>
            </tr>
        </table>
    </body>
Copy the code

The style of the table
- table-layoutThe width of the split
  - The premise is to give the table a width, and then the width is divided equally by each column
```
    <style>
    table{
        table-layout:"fixed";
    }
    </style>
Copy the code
```

`td`Properties of a cell

Cells can span rows and columns at the same time
Delete excess cells after crossing rows and columns

colspanCross columns

     <body>
         <table cellpadding='100px'>
             <tr><! -- First line -->
             <th>The early</th>
             </tr>
             <tr><! -- Second line -->
             <! Merge two columns -->
             <td colspan="2">1</td>
             </tr>
         </table>
     </body>
Copy the code

rowspanCross-bank [merged line]

   <body>
       <table cellpadding='100px'>
           <tr><! -- First line -->
           <td>0</td>
           </tr>
           <tr><! -- Second line -->
           <! Merge two rows -->
           <td rowspan="2">1</td>
           </tr>
       </table>
   </body>
Copy the code

Across rows and columns

     <! -->
     <body>
         <table cellpadding='100px'>
             <tr><! -- First line -->
             <td colspan="2" rowspan="2">0</td>
             <! Delete extra column cells -->
             <! -- <td>0</td> -->
             </tr>
             <tr><! -- Second line -->
             <! Merge two rows -->
             <! Delete extra row cells -->
             <! -- <td rowspan="2">1</td> -->
             </tr>
         </table>
     </body>
Copy the code

The form

The form
- form

Form element tag`input`The properties of the

The value of the type attribute

The text text

Text box style in which text can be entered as plaintext

   <body>
       <form>
           <! -- Enter text -->
           <! -- Prompt text -->
           <! - field -- - >
           <! -- Non-null check -->
           <input type= "text" placeholder="Please enter user name" name="userName" required>
       </form>
   </body>
Copy the code

“Password,” password

Text box style in which text can be entered and the input information is changed to a hidden asterisk

    <body>
        <form>
            <! -- Enter password text -->
            <! -- Prompt text -->
            <! -- Get cursor automatically -->
            <! - field -- - >
            <! -- Non-null check -->
            <input type="password" placeholder="Please enter your password" autofocus name="password" required>
        </form>
    </body>
Copy the code

Submit to submit

Is a button that is clicked to submit the form content

    <body>
        <form>
            <input type="submit">
        <form>
    </body>
Copy the code

Reset to reset

Is a button style that clears the text box after clicking on it

    <body>
        <form>
            <! Reset - - - >
            <input type= "reset">
        </form>
    </body>
Copy the code

The button button

useinputTag to build the button
Cooperate withvalueAdd text to the forward button

    <body>
        <form>
            <input type= "button" value="Button">
        </form>
    </body>
Copy the code

Single selection & multiple selection

radioThe radio

Single in the same groupinputAdd the same value of the name attribute to the tag, and it will be checked separately

    <body>
        <form>
            <! -- radio -- -- >
            <input type="radio" name="sex" id=""><span>male</span>
            <input type="radio" name="sex" id=""><span>female</span>
        </form>
    </body>
Copy the code

withlabelTag to wrap the text so thatforProperty value andinputtheidThe value is equal, you can click the text selected

    <body>
        <form>
            <! -- radio -- -- >
            <input type="radio" name="sex" id="men"><label for="men">male</label>
            <input type="radio" name="sex" id="women"><label for="women">female</label>
        </form>
    </body>
Copy the code

checkboxmulti-select

    <body>
        <form>
            <! - alternative - >
            <input type="checkbox" >
        </form>
    </body>
Copy the code

Placeholder prompt text

        <body>
            <form>
                <! -- Enter text -->
                <! -- Prompt text -->
                <! - field -- - >
                <! -- Non-null check -->
                <input type= "text" placeholder="Please enter user name" name="userName" required>
            </form>
        </body>
Copy the code

Checked by default

        <body>
            <form>
                <! -- radio -- -- >
                <input type="radio" name="sex" id="" checked><span>male</span>
                <input type="radio" name="sex" id=""><span>female</span>
            </form>
        </body>
Copy the code

Disabled Disable selection

        <body>
            <form>
                <! -- radio -- -- >
                <input type="radio" name="sex" id="" disable><span>male</span>
                <input type="radio" name="sex" id=""><span>female</span>
            </form>
        </body>
Copy the code

Autofocus automatically retrieves the cursor

        <body>
            <form>
                <input type= "text" placeholder="Please enter user name" name="userName" autofocus>
                <input type= "password" placeholder="Please enter your password" name="password" autofocus>
            </form>
        </body>
Copy the code

Name Field of the form element

        <body>
            <form>
                <input type= "text" placeholder="Id Number" name="id" >
            </form>
        </body>
Copy the code

Require non-null check

        <body>
            <form>
                <input type= "text" placeholder="Id Number" name="id" required>
            </form>
        </body>
Copy the code

Outline eliminates the surrounding blue baseline

This applies toinputandtextareaCan be placed in the initial elimination default style

        <body>
            <form>
                <! -- Text field -->
                <textarea name="" id="" cols="30" rows="10" style="outline:none"></textarea> 
                <! -- Input box -->
                <input type= "text" placeholder="Id Number" name="id" required style="outline:none">
            </form>
        </body>
Copy the code

buttonbutton
- In addition to usinginputTags can also be used directly in the form to build buttons using the Button tag
  - This button also has a form submission function by default. To disable it, add the type= “button” attribute to disable it
```
    <body>
        <form>
            <button>pay</button>
        <form>
    </body>
Copy the code
```

`select`A drop-down box

selectedDefault checked item

        <body>
            <form>
                <! -- Drop down box -->
                <select name="" id="" >
                    <option value="">The Beijing municipal</option>
                    <option value="" selected>Shanghai</option>
                    <option value="">hangzhou</option>
                </select>
            </form>
        </body>
Copy the code

disableBan on selected

        <body>
            <form>
                <! -- Drop down box -->
                <select name="" id="" >
                    <option value="">The Beijing municipal</option>
                    <option value="" selected>Shanghai</option>
                    <option value="" disable>hangzhou</option>
                </select>
            </form>
        </body>
Copy the code

`textarea`Text field

resizeDisallow resize
outlineEliminate the surrounding blue baseline
cols 宽

rows 高

        <body>
            <form>
                <! -- Text field -->
                <textarea name="" id="" cols="30" rows="10">
                </textarea> 
            </form>
        </body>
Copy the code

Pseudo elements

concept
- Fake elements can be understood as “fake elements”, although they can be used in CSSThe specified elementBefore and afterInsert additional elements
- But they don’t actually exist in the structure, nor can they be found in the structure’s source code.
The characteristics of
- In the style of the pseudo-elementcontentEven if there is no content, even if it is empty, it needs to be written.
use
- Selector: pseudo-element {}
  - Selector :: pseudo-elementThis is written for compatibility with older browsers

Common pseudoelement

`::after`

Can be used to insert some content after the element content.

        <style>
            .inner::after{
                content:"I'm hungry." ;
                font-size: 200px;
                display: block;

            }
        </style>
        <body>
            <div class="outer">
                <div class="inner">
                    <p>I'm not hungry</p>
                </div>
            </div>
        <body>` ` `Copy the code

`::befor`

Can be used to insert some content before the element content.

    <style>
        .inner::befor{
            content:"Have you eaten?" ;
            font-size: 200px;
            display: block;

        }
    </style>
    <body>
        <div class="outer">
            <div class="inner">
                <p>I didn't eat</p>
            </div>
        </div>
    <body>
Copy the code

Html5 new Tags
- Mobile [More semantic]
  - The header in the head
```
    <header></header>
Copy the code
```
  - At the bottom of the footer
```
    <footer></footer>
Copy the code
```
  - Nav navigation
```
    <nav></nav>
Copy the code
```
  - Section big box【 equivalent to div】
```
    <section></section>
Copy the code
```
  - The article articles
```
    <article></article>
Copy the code
```
  - Value the sidebar【 modify the subject matter, unimportant content 】
```
    <aside></aside>
Copy the code
```
  - Main Main content area
```
    <main></main>
Copy the code
```
  - Figure illustrated
    - Figure captionWrite it in the caption
```
    <figure>
        <img src="" alt="">
        <figcaption>I'm a caption</figcaption>
    </figure>
Copy the code
```
  - Video video
    - Preload preload
      - The resource starts loading as soon as the user opens the page
```
    <video></video>
Copy the code
```
  - Audio audio
    - Preload preload
      - The resource starts loading as soon as the user opens the page
    - The source tagResource address, compatibility issues, no browser supports multiple audio formats
      - Don’t worry about mobile, as long as it’s compatible with Chrome
```
    <audio>
        <source src="1.mp3">
        <source src="2.ogg">
        <source src="3.wav">
    </audio>
Copy the code
```
- The form
  - type="tel"Call function [mobile terminal]
  - type="number"Only Numbers
  - type="color"The color panel
  - type="range"Range (small slide)
  - type="file"Upload a file
  - type="date"Date selection
  - type="search"search
  - type="email"email

HTML

concept

Grammar specification

Semantic HTML tags

Relationships between labels

Contains the relationship

Parallel relationship

Tags can be nested

Attributes in tags

The basic structure

The overall structure

Quickly generate HTML structure

HTML character entities special symbols to be rendered on a page

Common label

The title tag<h1></h1>–<h6></h6>

Paragraph tag P

Image tag IMG

Hyperlink tag A

Nested the page tag iframe within the page

Formatting label

Preformatted label

Box tag DIV

List three

Unordered list

An ordered list

Custom list

Rich text resource

Audio audio

Video video

form

tableform

tr 行

tdThe cell

th【 semantic 】

captionTable label

theadTable header [semantic]

tbodyTable contents [Semantic]

tfoot【 semantic 】

The overall structure

The attribute of the table

The style of the table

tdProperties of a cell

The form

The form

Form element taginputThe properties of the

The value of the type attribute

Placeholder prompt text

Checked by default

Disabled Disable selection

Autofocus automatically retrieves the cursor

Name Field of the form element

Require non-null check

Outline eliminates the surrounding blue baseline

buttonbutton

selectA drop-down box

textareaText field

Pseudo elements

concept

The characteristics of

use

Selector: pseudo-element {}

Common pseudoelement

::after

::befor

Html5 new Tags

Mobile [More semantic]

The form

Related Posts

Sell good car front end monthly article issue 4

The Whistle Guide for efficient agent tools

Check and fill gaps in front interview –(10) Front authentication

The title tag`<h1></h1>`–`<h6></h6>`

`table`form

`tr` 行

`td`The cell

`th`【 semantic 】

`caption`Table label

`thead`Table header [semantic]

`tbody`Table contents [Semantic]

`tfoot`【 semantic 】

`td`Properties of a cell

Form element tag`input`The properties of the

`button`button

`select`A drop-down box

`textarea`Text field

`Selector: pseudo-element {}`

`::after`

`::befor`