1.0 HTML skeleton

<! --> < HTML lang="en" "zh-cn"> <! -- Header tag --> <head> <! -- Title tag --> <title></title> </head> <! The body of the document --> <body> </body> </ HTML >Copy the code

1.1 EN The language is English. Zh-cn the language is Chinese

<html lang="en">
Copy the code
The role of lang
Set CSS styles or fonts for different languages according to the lang attribute
Tell the search engines to make an accurate identification
Let the grammar checker do the language recognition
Help translation tools do recognition
Help web page readers do recognition

2.0 HTML tags

Typesetting label
Title Tag H (H1 ~ H6)
The paragraph tag P splits an HTML document into paragraphs
Horizontal line label HR
Newline label BR
Div and SPAN tags: they have no semantics and are the two main boxes in our layout
The b and strong words are in bold
The I and em words are displayed in italics
The s and del words are displayed with a strikeout
U and INS text are underlined

3.0 the image

<img SRC ="cz.jpg" width="300" height="300" border="3" title="Copy the code
attribute describe
src image
alt The image cannot be displayed as a replacement
title Hover over the content displayed
width The width of the image
height Height of the image
broder The width of the image border

4.0 Hyperlink labels

<a href=" target "target="_self" > <a > target="_selfCopy the code

4.1: Use # to indicate an empty connection

4.2 Anchor link

1. Use the corresponding ID name to mark the location of the target. <h3 id="two">第2 期 </h3> 2. Use <a href="#two"> to create the link text (to be clicked)Copy the code

Table 5.0

<table> <tr> <th> </th> < TD >123</ TD >... </tr> ... </table>Copy the code

1:table, tr, TD, they are the basic tags for creating a table

2: th is usually located in the first row and column, indicating that it is centered and bold

6.0 list

6.1 Unordered List UL

< ul > < li > list item 1 < / li > < li > list item 2 < / li > < li > list item 3 < / li >... </ul>Copy the code

6.2 Ordered List OL

The < ol type = "A" > < li > list item 1 < / li > < li > list 2 < / li > < li > list three < / li > < / ol >Copy the code

1. The value of the type attribute in the OL label is the sequence number of the sorted list. If the type attribute is not added, the sorted list starts with the number 1 by default.

2. The commonly used type attribute values are 1, a, a, I, I respectively

3. The reversed property of OL reversed=”reversed” enables the reversed ordering of sequences in an ordered list.

4. The start attribute in OL start=”3″ is 3, and the first sequence number in the ordered list will be sorted from 3.

6.3 Custom list DL

< dl > < dt > noun 1 < / dt > < dd > noun explanation 1 < / dd > < dd > noun 1 < / dd > 2... <dt> noun 2</dt> <dd> noun 2解释1</dd> <dd> noun 2解释2</dd>... </dl>Copy the code

1. Defining lists are often used to explain and describe terms or nouns. There is no bullet before the list item.

7.0 the form

In HTML, a complete form usually consists of three parts: form controls (also known as form elements), prompts, and form fields. The purpose of the form is to collect user information.



Form controls:Contains specific form function items, such as single-line text entry box, password entry box, check box, submit button, reset button, etc.

Prompt message:A form also usually contains some descriptive text that prompts the user to fill in and do something about it.

Form fields:It is a container that holds all the form controls and prompts, defines the URL of the application that processes the form data, and how the data is submitted to the server. If you do not define a form field, the data in the form cannot be sent to the backend server.

7.1 input

<input type=" attribute value "value=" hello ">Copy the code

The tag sets different property values for the single tag type property to specify different control types. There are other properties besides the type property

User name: <input type="text" /> password: <input type="password" />Copy the code

7.2 the value attribute

<input type="text" name="username" value=" please enter username" >Copy the code

Value Indicates the default text value. Some forms want to display a few text by default when the page is opened.

7.3 name attribute

<input type="radio" name="sex" /> male <input type="radio" name="sex" /> femaleCopy the code

Name attribute: Name Is the name of the form, so that the background can find the form through the name attribute. There are many forms on the page, and the main purpose of name is to distinguish between different forms. The value after the name property is our own definition. Radio if it’s a group, we have to give them the same name name so we can pick one of them

7.4 checked property

It is selected by default. More commonly seen in radio buttons and check buttons.

Sex gender: <input type="radio" name="sex" value=" male "checked ="checked" /> male <input type="radio" name="sex" value=" female "/> femaleCopy the code

Input property summary

7.4 the label tag

The label tag defines the annotation (label) for the input element. Label The label is used to improve user experience. Improve the best service for users. What it does: Binds a form element that gets input focus when the label label is clicked. Binding elements: The first use is to use the label tag to directly contain the input form, suitable for a single form. The second use is the for attribute, which specifies which form element the label is bound to (by ID)

<label> User name: <input type="radio" name="usename" value=" Please input user name" > </label> name="sex" id="sex">Copy the code

7.5 Textarea control (Text Field)

<textarea > Text content </textarea>Copy the code

You can easily create a multi-line text input box with the Textarea control.