HTML notes summary

Shortcut operation

1. In vscode, press "!" Press enter again and the html start is completed.
2. Press "Table +" enter to quickly generate the basic style of table

Chapter labels & & global properties

Chapter label

• h1~h6 title
• section
• p paragraph
• footer is often used for copyright notices; The format is:

<footer>&copy;copyright zxh</footer>

• Main main content: between header and footer
• Side content: used for navigation or reference
• div partition

Global properties

1. Class classification is used to mark a class

<div class="midddle">test</div>
<style>
.middle{
    background:black;
}
    </style>

1. Can contenteditable users edit

<div class="middle" contenteditable> 
    this div The contents of the package can be edited by the user
    </div>

1. Let style display and edit

<style contenteditable>
    style{
        display:block;
        border:1px solid red;
    }
    .middle{
        background:black;
    }
    </style>

1. hidden hide label
2. Do not use id when the id tag is less than 10000, because when the two IDs are the same, no error will be reported
3. Tabindex tab access order
   All interactive parts of the page can be accessed with the tab key, because sometimes there is no mouse
   tabindex=1
   tabindex=2
   tabindex=0 page last visited
   tabindex=-1 tab will never access here
4. title

Default style & & CSS Reset

html has its own style, but now it is very backward, so we reset it every time, called css reset

*{
    margin:0;
    padding:0
    box-sizing:border-box;
}
ol,ul{
    list-style:none;
}
a{
    text-decoration:none;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}

Common content labels

1. ol ordered list
2. ul unordered list
3. dl description list
4. pre its contents, spaces and enter will be retained
5. The font in code is of equal width and contains code
6. Hrhorizontal split line
7. br line feed
8. a super connection

<a href="http://qq.com" target="_blank">QQ</a>

1. em emphasis
2. strong itself is important
3. quote reference
4. blockquote newline reference

HTML important Tags

a

attribute

• href link, address
• target specifies that the window opens

href value

1. website
   http://google.com
   https://google.com
   //google.com
2. route
   /a/b/c
   index.html
   ./index.html
3. Pseudo protocol

<a href="javascript:alert(1);">javascript For agreement</a>
<a href="mailto:2459522339@qq.com">Mailbox pseudo protocol</a>
<a href="tel:19898078992">Call me up</a>

1. id

<div id="xxx">xx</div>
<a href="#xxx" target="_blank"></a>

target value of a

1. _ blank an empty new window opens
2. _ The top-level window opens
3. _ The parent window opens
4. _ self the current window opens

tableb label

<table>
   <thead>
       <tr>
       <th></th>
       </tr>
       </thead>
       <tbody>
           <tr>
               <th></th>
               <td></td>
           </tr>
           </tbody>
           <tfoot>

           </tfoot>
   </table>

img tag

effect

Issue a get request to display a picture

attribute

1. alt optional, instead of error display

<img src="dog.jpg" alt="A paparazzi" >

1. Height only writes the height, and the width will be adaptive
2. Ditto for width

event

1. onload successfully loaded
2. onerror failed to load

Responsive

<style>
img{
    max-width:100%;
}
</style>

Form label form

effect

Send a get or post request, and then refresh the page
action is used to control which page is requested
method controls whether to use get or post requests

<form action="/xxx" method="POST">
<input type="text"/>
<input type="submit"/>
</form>

Properties of form

1. autocomplete:off|on; Controls whether auto fill is possible
2. target="_blank" tells the browser which page to submit the form to

Properties of form

1. onsubmit
   Event triggered when the user clicks submit

<input type="submit" value="click"/>
<button type="submit">click</button>

What's the difference between input and button?
The difference is that other labels can be added to the button, and there must be a button with type=submit in the form, because only submit can submit the form

input tag

<input type="text| color| password| radio">

• The data entered by password will not be displayed, but will be replaced by * or small dots
• Radio control radio

<input name=gender type="radio"/>male
<input name=gender type="radio"/>female

• checkbox control multi selection

<input name=hobby type="checkbox"/>sing
<input name=hobby type="checkbox"/>jump
<input name=hobby type="checkbox"/>rap

• File select file

<input type="file" multiple />multiple Control multiple selection

textarea multiline text

<textarea style="resize:none;width:50%;height=300px;"></textarea>

select

<select >
    <option value="1">Monday</option>
      <option value="2">Tuesday</option>
        <option value="">-Please select-</option>default
</select>

Validator

When the user does not fill in the content, the form cannot be submitted

<input type="text" required>

be careful

• Generally, the click event of input is not monitored
• The input in the form must require name
• A type="submit" must be placed in the form to trigger the submit event
• Generally, a web page has only one h1
• Delete [1] [2] using regular expressions
  vscode Edit - > replace - > use regular expression (ALT + R) - > [\ D +] replace with empty
• Generally, the uploaded image cannot exceed 300k
• vscode entering meta:vp will automatically generate a response