Master the main block-level elements in HTML

<p>

<p>HTML block-level elements: To understand the main block-level elements in HTML, specific code examples are required

<p>HTML (HyperText Markup Language) is a markup language used to build web pages , which is composed of various elements, among which block-level elements play an important role in web page layout. This article will focus on the main block-level elements in HTML and provide specific code examples so that readers can have a deeper understanding of their usage and features. The

1. <div> element <p><code><div> element is one of the most commonly used block-level elements in HTML. One, it is usually used to organize the page structure or put multiple elements together for styling. Here is a basic example of a <code><div> element: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;div&gt; &lt;p&gt;这是一个段落。&lt;/p&gt; &lt;img src=&quot;image.jpg&quot; alt=&quot;图片&quot;&gt; &lt;/div&gt;</pre><div class="contentsignin">Copy after login</div></div><p>In the example above, the <code><div> element wraps a paragraph and an image , you can style the <div> element through CSS, such as adding borders, background colors, etc.
   2. <p> Element
   <p><p> element is used to represent paragraphs and is common in HTML One of the block-level elements. The following is an example of a <p> element:

   <p>这是一个段落。</p>

   Copy after login
   <p><p> The element usually contains text content and can be used to present articles, paragraphs, etc. content.
   3. ##<h1> to <h6>Elements
   ##<h1><p> The elements to <h6> are used to represent titles, where <h1> represents the highest-level title, and <h6> represents the lowest-level title. Here's an example: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;h1&gt;这是一个一级标题&lt;/h1&gt;</pre><div class="contentsignin">Copy after login</div></div>These heading elements are often used to organize document structure, and will appear in different font sizes and styles in the default style.
   <p>
   ##
   and
   4. elements
      and <p>
      are used to represent unordered lists and ordered lists respectively. They usually contain multiple
      1. elements inside to represent list items. Here is an example:

         <ul>
           <li>列表项1</li>
           <li>列表项2</li>
         </ul>

         Copy after login

         <ol>
           <li>列表项1</li>
           <li>列表项2</li>
         </ol>

         Copy after login
         These list elements are often used in web pages to display content such as navigation, menus, or item lists.
         <p>
         <table>
         Element
         <table>
         element is used to represent a table and contains ## inside it Sub-elements such as #<p> (table rows), <th> (header cells), and <td> (table data cells). The following is a simple table example: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;table&gt; &lt;tr&gt; &lt;th&gt;姓名&lt;/th&gt; &lt;th&gt;年龄&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;张三&lt;/td&gt; &lt;td&gt;25&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</pre><div class="contentsignin">Copy after login</div></div><table> The element is usually used to present the tabular structure of data, such as displaying statistics, rankings, etc.
         <p>

         Element

         element is used to represent a form, which contains a series of Elements used for input, such as text boxes, check boxes, drop-down menus, etc. The following is a simple form example:

         <form>
           <label for="username">用户名：</label>
           <input type="text" id="username">
           <label for="password">密码：</label>
           <input type="password" id="password">
           <input type="submit" value="提交">
         </form>

         Copy after login

         <p><form></form> element is often used in user input data, search and other scenarios, and is one of the very important elements in web page interaction.

         <p>Through the above code examples, readers can more intuitively understand the usage and characteristics of the main block-level elements in HTML. In actual web development, these block-level elements will be frequently used, and mastering their usage is crucial to building a reasonable web page structure and a good user experience. I hope this article can help readers better understand block-level elements in HTML and be able to use them flexibly in actual projects.