HTML basics summary

<form action="http://www.baidu.com/s">
    <!-- required Required -->
    <!-- \d Regular expression, representing 0-9 Numbers,{1,}1 One or more numbers,{11}11 Digits,{1,10}1-10 Digit number -->
    <input type="text" name="wd" required pattern="\d{1,10}" id="wd">
    <button type="submit">Submit</button>
</form>

required attribute: make the input tag mandatory

pattern = "regular expression \ d"

\d regular expression {represents 0-9 digits {1,} 1 or more digits {11} 11 digits {1,10} 1-10 digits

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title> New Document </title>
</head> 
<body>
    <form>
        <input id="user" type="text" required pattern="^[a-zA-Z0-9]{6,12}$" placeholder="enter one user name"/>
        <input type="submit" value="Submit">
    </form>
</body>
<script>
var user=document.getElementById("user");
    user.onblur=function(){
        if(user.value){
            user.setCustomValidity("");//The prompt for input is now set to blank
        }else if(user.validity.valueMissing){
            user.setCustomValidity("User name cannot be empty");  // Modify prompt
        };
        if(user.validity.patternMismatch){ 
            user.setCustomValidity("The user name can only be in English or numbers, with a length of 6 to 12 digits"); // Modify prompt
        }
    };
</script>
</html>

action:

The address is submitted inside

<!-- ?The previous page address is followed by the search criteria (the fields passed to the back end) -->
<!-- keyword=Air conditioning key value pair =The front is the key =Followed by multiple key value pairs&Symbolic link -->
<form action="https://www.mi.com/search">
    <input type="text" name="keyword">
    <button type="submit">Submit</button>
</form>

keyword:

name will add the previous search condition wd=xxx (the content of the input box) after the path

<input type="text" name="wd">

button:

<!-- Function: modify form Form, jump and carry name To the back of the path -->
<button type="submit">Submit</button>
<!-- effect: reset Reset all items in the form -->
<button type="reset">Reset</button>
<!-- 1.And the two above button Same effect -->
<!-- 2.No value Default display reset style, plus value Cannot be empty. The style words in the browser box are displayed as value Words set in -->
<input type="submit">
<input type="reset" value="111">

Common block labels

div: Universal container, divider

p: Paragraph label

h1-h6: title label

hr: split line

list

ol, li: ordered list

ul, li: unordered list

form

tr: define rows

td: define column (th: header, font centered, bold) (both are used in tr label)

cellpadding the inner margin of a cell
Distance between cells
Border table border
align alignment (only three right, left and center)
The width height property is not a style
colspan merge columns
rowspan merge rows

Row element

Multiple labels are displayed in one line. The width, height, and upper and lower margins cannot be set. They can only be supported by the content (arranged horizontally, not exclusive to one line, and always arranged if there is a position on the right. The width and height cannot be set directly) display:inline;

Common row element labels

span: displays a small amount of text

b. strong: bold font

i. em: font tilt

u: Underline

sup\sub: superscript / subscript

s\del: delete line

a: Hyperlink label

External link: directly add the page path of jump in href
Internal link:/+ Another html
Empty link: if the href is empty, click to refresh the current page -- if there is only one # in the href, click to directly return to the top of the page without refreshing the page
Download link:/+ Downloaded content
Nest other elements: add links to them
Anchor link: set a unique identification id for the located target. The value of the id attribute cannot be repeated
```
<a href="#position">
<div id="position">
```
href - target: _ self jump to the current page and there will be a history (default)_ balnk opens a new page and jumps. There is no history.

Inline block element

Multiple intra row block labels can be displayed in one row, and the width and height can be directly set (the default is horizontal arrangement, and the line breaks only when the right position is not enough) display: inline block;

The default vertical alignment of inline block elements is baseline alignment
vertical-align: top; Top line alignment

img: import pictures

src: picture address
Relative path:/ Current directory.. // Upper level directory/ Parent directory / root directory and network address of the current project

Absolute path: starting from the drive letter (C:), not recommended
alt: when there is a problem with the picture display, the content in alt will replace the picture display. When there is a problem with the picture display, the content in alt will replace the picture display

Input: input box

Type: input box type

Text: text input box
maxlength = "" the maximum length that can be entered in the input box

autofocus ― automatically get the focus (refresh is in the inputable state by default)

disabled: disable the input box (the input content in the input box cannot be expected)
Number: number input box [only numbers can be entered]
min = "" enter the minimum number of digits

step: increase or decrease the value of each click
Password: password input box
data: date selection box
type is week: Week selector (week of the year)

type is month: month selector (XX month of XX year)
Data time local: local date and time selection box, type time: event selector
Color: color selector
checkbox: check box
Radio: radio box
Range: range slider
File: Upload File Box Multi file upload: < input type = "file" multiple > Folder upload: < input type = "file" WebKit Directory >
Image: image
Hidden: hidden

Input box content

placeholder is the prompt message displayed when there is no content in the input box, (unable to operate)

Contents in the value input box (operable)

Label: expand the selection area

The value of for corresponds to the value of id

<label for="username">full name:</label>
<input type="text" id="username">

For multiple IDS, only the first one will take effect [id is the unique id]

It can be used with radio and can be selected without adding name. Using the same name can not enable both at the same time to play the role of selection

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

textarea: multi line input box

cols = "" controls the number of columns in the input box (not accurate in different browsers)
Rows = "" controls the number of rows in the input box
If it is not set, the default is 2 rows and 11 columns. It is not recommended to use it. Set the width and height directly with the style

The contents of textarea will retain line breaks and spaces

maxlength controls the maximum character length that can be entered

<textarea cols="30" rows="10" placeholder="Please enter comments">Braised big carp in yellow sauce</textarea>
<textarea cols="30" rows="10" placeholder="Please enter comments">                            Braised big carp in yellow sauce</textarea>
<textarea cols="30" rows="10" placeholder="Please enter comments">braise in brown sauce    Big carp</textarea>

Button button

select: drop-down list

Option: list option ， selected changes the default selected item

optgroup: option group

<select>
        <!-- optgroup  Option group -->
        <optgroup label="meat or fish dishes">
            <option>Braised chicken in yellow sauce</option>
            <option>Stewed mushroom with chicken</option>
        </optgroup>
        <optgroup label="vegetable dish">
            <option selected>Seaweed and Egg Soup</option>
        </optgroup>
    </select>

Shared with js
The drop-down box submits the value attribute. If it is not set, the default submission is the selected content; If the value submitted is set to be the value

In addition:

Format label # pre: the default font is 13px, and the content indentation and line feed are reserved # Center: the content is displayed in the center of the parent element # br line feed

Semantic tags (what tags put what content ， conducive to SEO (tags with their own meaning are semantic tags) eg: h tags put Title ， p tags put paragraph text)

Topics: Front-end html

Programmer Think