Home > Web Front-end > HTML Tutorial > Common HTML block-level elements: A brief introduction to commonly used block-level elements in HTML

Common HTML block-level elements: A brief introduction to commonly used block-level elements in HTML

WBOY
Release: 2023-12-23 11:57:14
Original
1234 people have browsed it

Common HTML block-level elements: A brief introduction to commonly used block-level elements in HTML

Common HTML block-level elements: A brief introduction to commonly used block-level elements in HTML, specific code examples are needed

HTML (Hypertext Markup Language) is a A markup language for creating the structure and content of web pages. It consists of various tags, of which block-level elements are a common type. Block-level elements refer to elements that occupy an entire line in an HTML document and are displayed in new lines.

There are many common HTML block-level elements. Below we will introduce several commonly used block-level elements and provide corresponding code examples.

  1. element: used to wrap a group of related elements, usually used for layout and style control.

    Code example:

    <div>
      <h1>这是一个标题</h1>
      <p>这是一个段落</p>
      <img src="image.jpg" alt="图片">
    </div>
    Copy after login
    1. element: used to represent paragraph text.

    Code example:

    <p>这是一个段落文本。</p>
    Copy after login
    1. to

      elements: used to represent titles, where

      represents the highest-level title, < ;h6> represents the lowest level heading.

    Code example:

    <h1>这是一个一级标题</h1>
    <h2>这是一个二级标题</h2>
    Copy after login
      • and
      • elements: used to create an unordered list.

    Code example:

    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
    Copy after login
      1. and
      2. elements: used to create an ordered list.

      Code example:

      <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
      </ol>
      Copy after login
      1. , and
        elements: used to create tables.

      Code example:

      <table>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
        </tr>
        <tr>
          <td>单元格3</td>
          <td>单元格4</td>
        </tr>
      </table>
      Copy after login
      1. element: used to create forms.

      Code example:

      <form>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name">
        <br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email">
        <br>
        <input type="submit" value="提交">
      </form>
      Copy after login

      Using these block-level elements in HTML can make the web page have better structure and readability. By using these elements appropriately, you can create a variety of beautiful web pages. It is recommended that you make full use of these block-level elements when writing HTML code to improve the maintainability and scalability of the code.

The above is the detailed content of Common HTML block-level elements: A brief introduction to commonly used block-level elements in HTML. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template