1. What is the meaning of commonly used tags in HTML

Structure of the label
  • HTML: Root tag.
  • Title: Defines the title of a document. It is usually used in the title bar or status bar of a browser window.
  • Head: Defines the header of the document, which is the container for all the header elements.
  • Body: Defines the body of the document and writes web content.
Based on label
  • P: Define paragraph.
  • H1-h6: Marks the title in the text. The larger the number used in the tag, the smaller the font.
  • Hr: Draw a horizontal line on the page.
  • Br: Generates a newline at the current position.
A list of tags
  • Ul: defines an unordered list without numbers. The list items are labeled li.
  • Ol: defines an ordered list with numbers. The li label should be marked at the beginning of each entry.
Container labels
  • Div: Divides the document into separate, distinct parts, defines areas or sections in the document, as block-level elements, can be wrapped automatically, can be set width height.
  • Span: as a text container, it can be used together with the CSS to set style attributes for the specified text. It is an inline element and cannot be wrapped automatically. The width and height cannot be set.
The form tag
  • Form: Defines a form framework that collects different types of user input.
  • Input: Displays a variety of form element styles depending on the value of the type attribute.
  • Label:, a text supplement to the input label element that generates focus for the corresponding form control when clicked.
  • Textarea: implements a multi-line textarea that allows text carriage return to wrap.
  • Select: create a single or multiple selection menu. The menu style can be displayed as a drop-down menu or a list box according to the different attribute values. The select element is used with several option tags to form a simple drop-down menu. If a large number of items need to be categorized, you can use the optGroup tag to define an option group.
  • Button: Generates a custom styled button on a web page.
  • Fieldset: Groups multiple form elements from the same form. When a group of form elements is placed between fieldSet tag groups, the browser creates a border effect to highlight the group and displays a separate title for each group area, which is used with the Legend tag.
Other tags
  • Img: Inserts an image into a web page.
  • A: Define hyperlinks that point anywhere else. It can be used to create navigation menus or lists on web pages, send emails or download files, etc.
  • Table: Defines a table that contains rows (represented by tr tags), each of which is divided into cells (represented by TD tags). Th tag – defines the first row of the table header, caption tag – adds a title to the table.

2. Common attributes of common HTML tags and their functions

Based on label
  • P: Common attributes: align — align (left, center, right).
  • Hr: Common attributes: size- the width of the horizontal line (pixels, e.g. 10px), width- the length of the horizontal line (pixels, percentages), color- the color of the horizontal line, align- the alignment of the horizontal line (left, center, right)
A list of tags
  • Ul: Common properties: type- Sets numbering styles (circle hollow circle, DISC solid circle (default), Square (black square)).
  • Ol: Common properties: type- Sets the number style (1, A, A, I, I (digits, letters, Roman digits)), start- Sets the start value of the number.
The form tag
  • The form:
  1. Action – Specifies the URL to submit the form data.
  2. Method – Specifies the submission mode of the form data, including GET and POST. The default submission mode is GET. The differences between the GET method and the POST method are as follows: GET method: converts the data name and value of the form component into parameters in the form of text, and directly adds them to the end of the original URL address. After clicking the submit button, you can directly see all the contents in the browser address bar, which is suitable for some data with low security requirements. Post method: The form data will be placed in the HTML table header and will not appear in the browser address bar. The user cannot see the parameter content directly. It is suitable for data with relatively high security level.
  • Input:
  1. Accept – Specifies the file type that can be selected by the file upload control< input type = "file" >Property value :MIME file type;
  2. Alt – Specifies the prompt text when the image cannot be displayed, only with< input type = "image" >The image button control is used with the property value: text content;
  3. Checked – Specifies that the page is checked by default< input type = "radio" >The radio button or> < input type = "checkbox"The check box is used with the property value: Checked;
  4. Disabled – Specifies that this element is disabled when loaded. Property value -disabled;
  5. Maxlength – Specifies the maximum length of characters in the input box;
  6. Name – Defines the name of the input tag. If the name attribute value is not filled in, the content of the form component cannot be submitted correctly. Attribute value – User-defined name;
  7. Readonly – Defines the text in the input tag as a non-editable read-only state, property value -readonly;
  8. Size – Defines the number of visible characters in the input box, attribute value – value;
  9. Type – Specifies the type of the input tag. Attribute values -text, password, radio, checkbook, submit, reset, button (usually click events need to be used with JavaScript), image, file, and hidden.
  10. Value – Specifies the value of the input tag. Attribute value- Text value.
  • Label: for- References the ID name of the corresponding form control.
  • Select:
  1. Multiple – allows multiple options to be selected at the same time. The -multiple attribute changes the display style from the default drop-down menu to a list box and allows multiple options to be selected at the same time.
  2. Name – Specifies the name of the list element.
    • Select subtags:
  1. Option, common properties: value- Sets the value of the option to be sent to the server when submitting the form, not to be displayed on the web page, selected-sets the current option to be selected when first loading.
  2. Optgroup, common attribute: label- Specifies the title of the option group.
  • The button:
  1. Type – specify the type of button, attribute value -button, reset, submit;
  2. Name – Specifies the name of the button, value- specifies the initial value of the button. If the button label button is used within a form, it must be assigned the Type attribute.
Other tags
  • A: href- the URL of the target content, target- how the target content is opened.
  • Img: SRC – Indicates where the image is stored (usually in the form of a URL), Alt – displays instead of text if the image cannot be found (this property can be omitted).
  • The table:
  1. Border – Sets the width of the border,
  2. Bordercolor – sets the bordercolor,
  3. Align – Sets the alignment,
  4. Cellspacing – sets cellspacing,
  5. Cellpadding – Sets cell and text spacing.
  6. Table sub tag TD, common attributes: colSPAN – sets the number of columns to be merged, rowSPAN – sets the number of rows to be merged.

3. Explain what inline and block-level elements are

  • Inline elements – Do not occupy a separate area, and are on the same line as adjacent inline elements. Attributes such as width, height, and alignment are generally not allowed. Inline elements can only contain plain text or other inline elements (except the A tag).
  • Block-level elements – Each block-level element usually has one or more rows to itself and can be individually set with attributes such as height, width, and alignment, and can hold inline elements and other block-level elements.