search
HomeWeb Front-endHTML TutorialWhat are HTML structural elements? Summary of various structural elements in HTML (plain text)

In a web document, various elements will be displayed. Each element has its specific position. In order to standardize these elements, it needs to be determined by the structural elements in HTML.

Function Description: The tag specifies the default address or default target for all links on the page. Normally, the browser fills in the gaps in a relative URL by extracting the corresponding elements from the current document's URL.

Standard attributes: href, target

href: Set or get the URL that all links in the page link to when the mouse clicks

target: Set or get the target content to be displayed In which window or frame

_blank: Load the document in a new unnamed window

_self: Load the target document in the same frame or window

_parent : Load the document into the parent window or the frameset containing the hyperlink reference

_top: Load the document into the window containing the hyperlink, replacing any frame currently displayed in the window

……

Function description: Define the body of the HTML document. The body contains all the content of the HTML document.

Standard attributes: id (unique identification of the element), class (class name), title (text displayed in the tool tip), style (inline style definition), dir (set text direction), lang (set Language code), background (web page background image), bgcolor (background color), text (set text color), link (set link text color), alink (set link text color), vlink (set link text color) Color), leftmargin (left margin), topmargin (top margin), bgproperties (so that the background image does not scroll with the web page, it has only one parameter, fixed)

When the same properties appear in the future, they will not be explained anymore. Explain

……

Function description: Define a paragraph of a document

Standard attributes: align, id, class, title, style, dir, lang

Usage points: Use p to wrap lines and separate paragraphs. The p element is a block element and needs to be closed with the tag

……

Function Description: Used to combine inline elements in the document

Standard attributes: align, id, class, title, style, dir, lang

……

Function description: Define partitions or sections in the document

Standard attributes: align, id, class, title, style, dir, lang

Usage points: The p element is used to create HTML documents Provide structure and background elements for large blocks of content


Function description: Insert a newline character

Standard attributes: id, class, title, style

……

Function Description: Define a table title

Standard attributes: align (alignment, including left (left alignment), right (right alignment), top (top alignment), bottom (bottom alignment)), id, class, title, dir, lang

Usage points: caption The element should be a child object of the table element, and the caption tag must immediately follow the table tag. Only one title can be defined for a table, usually the title is centered above the table.

Function description: Define column attribute values ​​for the table. The defined object can include one or more columns in the table

Standard attributes: id, class, title, style, dir, lang

Optional attributes: align (horizontal alignment, including right (right alignment), left (left alignment), center (center), justify (Alignment at both ends)

SPAN (Definition & lt; color; MIDDLE (vertical center), BOTTOM (low -end alignment), baseline (baseline alignment))

completely #Function Description: Define the grouping of table columns

Standard attributes: id, class, title, style, dir, lang

fieldset

Function description: Group related elements in the form

Standard attributes: id, class, title, style, dir, lang

Usage points: A box is drawn outside the text and other elements contained in the field set

……

Function Description: A title can be defined for the fieldset

Standard attributes: id, class, title, style, dir, lang

Usage points: the legend element must be the first element in the fieldset. This element is an inline element and needs to be closed. Label

Function Description: Create an inline frame containing external documents

Standard attributes: id, class, title, style

Basic attributes: name (define the name of the content page), src (define the URL of the content page), frameborder (define the border of the content page, the value is 0/1, the default is 1, 0 is not displayed Border, 1 displays borders between each page), marginwidth (defines the width of the upper and lower borders displayed by the HTML file in the frame, the default value is determined by the browser), marginheight (defines the width of the left and right borders displayed by the HTML file in the frame, The default value is determined by the browser), scrolling (defines whether there is a scroll bar, the value is yes/no/auto, the default value is auto), align, height, width

Usage points: The role of the iframe element is equivalent to To embed a document within another document, or create an inline floating frame like a floating frame, in the iframe content source document, the background-color or bgcolor tag attribute of the body element must be set to transparent. This element is a block element and requires a closing tag

##
……

< ;/dl>

Function Description: dd defines the display style in the list

        dl defines the display style of the list

              dt defines the items in the list

Standard attributes: id, class, title, style, dir, lang

Usage points: dd is usually displayed indented in the list, the dd element is a block element, and the tag needs to be closed

          dl element It is a block element and needs to be closed with the tag

              dt The element is a block element and needs to be closed with the tag

h1...h6

...

Function description: Define the title of the article

Standard attributes: align, id, class, title, style, dir, lang

Usage points:

Define the largest Title,

defines the smallest title and needs to close the tag

……

Function Description: Declare that the document itself is An HTML document

Standard attributes: dir, lang

Basic attributes: common (general attributes), xmlns (represents xml namespace), dir

……

Function description: Define the text that has been inserted in the document

Standard attributes: id, class, title, style, dir, lang

Usage points: ins and del tags are used together to describe updates and corrections in the document

……

Function Description: Define deleted text in the document

Standard attributes: id, class, title, style, dir, lang

##
  • ……< ;/li>

    Function description: Define a list item

    Standard attributes: id, class, title, style, dir, lang

    Usage points: li Tags can be used in ordered lists

      and unordered lists
      1. ......

      Function Description : Define an ordered list

      Standard attributes: id, class, title, style, dir, lang

        ……

      Function Description: Define an unordered list

      Standard attributes: id, class, title, style, dir, lang

      ……
      > ;

      Function description: Define the relevant format of the table

      Standard attributes: align, id, class, title, style, dir, lang

      Usage points: use To display data, table is a block element and needs to be closed with a tag

      ……

      Function Description: Define the table within the table Header cell

      Standard attributes: id, class, title, style, dir, lang

      Basic attributes: common, abbr (abbreviation for table header), axis (concept for the cell) upper classification), colspan (one row spans multiple columns), headers (connects the data and headers of the table), rowspan (one column spans multiple rows), scope (defines the header of the row or column), align, valign

      Usage points: The text inside the th element is usually rendered in bold

      ……

      Function Description: In the table Define a row

      Standard attributes: id, class, title, style, dir, lang

      Basic attributes: common, align, valign

      … …

      Function Description: Define a cell in the table

      Standard attributes: id, class, title, style, dir, lang

      Basic attributes: common, abbr (abbreviation for table header), axis (conceptually classifying cells), colspan (one row spans multiple columns), headers (connecting the data and headers of the table), rowspan (one column) span multiple rows), scope (define the header of a row or column), align, valign

      tbody

      Function Description: Define the format of a table body

      Standard attributes: id, class, title, style, dir, lang

      Usage points: The table can be divided into a separate part, and one or several rows in the table can be combined into a group, but It is best not to have tbody tags in the table, and cannot cross from one tbody to another tbody

      tfoot

      Function Description: Define the format of table footnotes

      Standard attributes: id, class, title, style, dir, lang

      Usage points: The valid tags contained in the tfoot element are td, tr, th, and any given table object can only define one tfoot. This element requires a closing tag

      thead

      Function description: Define the format of the header

      Standard attributes: id, class, title, style, dir , lang

      Usage points: Thead must have a tr tag inside, and this element will not change the display. If you use thead, tfoot, and tbody elements, you must use all of them. The order of their appearance is thead, tfoot, tbody. These tags must be used inside the table element

      Related recommendations:

      Analysis of meta information meta tag attributes in HTML (with code)

      Introduction to how to dynamically generate html elements and add attributes to elements (with code)

      The above is the detailed content of What are HTML structural elements? Summary of various structural elements in HTML (plain text). For more information, please follow other related articles on the PHP Chinese website!

      Statement
      The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
      Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

      The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

      How do I use HTML5 form validation attributes to validate user input?How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

      The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

      How to efficiently add stroke effects to PNG images on web pages?How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

      This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

      What are the best practices for cross-browser compatibility in HTML5?What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

      Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

      What is the purpose of the <datalist> element?What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

      The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

      What is the purpose of the <progress> element?What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

      The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

      How do I use the HTML5 <time> element to represent dates and times semantically?How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

      This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

      What is the purpose of the <meter> element?What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

      The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

      See all articles

      Hot AI Tools

      Undresser.AI Undress

      Undresser.AI Undress

      AI-powered app for creating realistic nude photos

      AI Clothes Remover

      AI Clothes Remover

      Online AI tool for removing clothes from photos.

      Undress AI Tool

      Undress AI Tool

      Undress images for free

      Clothoff.io

      Clothoff.io

      AI clothes remover

      AI Hentai Generator

      AI Hentai Generator

      Generate AI Hentai for free.

      Hot Article

      R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
      2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
      Repo: How To Revive Teammates
      4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
      Hello Kitty Island Adventure: How To Get Giant Seeds
      3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

      Hot Tools

      WebStorm Mac version

      WebStorm Mac version

      Useful JavaScript development tools

      SublimeText3 Mac version

      SublimeText3 Mac version

      God-level code editing software (SublimeText3)

      SublimeText3 Chinese version

      SublimeText3 Chinese version

      Chinese version, very easy to use

      Safe Exam Browser

      Safe Exam Browser

      Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

      Dreamweaver Mac version

      Dreamweaver Mac version

      Visual web development tools