Html

常用元素

学习 HTML 时，需要掌握一些常用的 HTML 元素，这些元素用于构建网页的基本结构和内容。以下是其中提到的知识点以及简单代码示例：

  1. 标题（Headings）

    使用<h1>到<h6>标签来定义页面中的标题，数字越小表示级别越高。

    1
    2
    <h1>This is a Heading level 1</h1>
    <h2>This is a Heading level 2</h2>

  2. 段落（Paragraphs）

    使用<p>标签来定义段落文本。

    1
    <p>This is a paragraph of text.</p>

  3. 链接（Anchor）

    使用<a>标签创建超链接，可以指向其他页面、文件或位置。

    1
    <a href="https://www.example.com">Visit our website</a>

  4. 图像（Image）

    使用<img>标签嵌入图像，通过src属性指定图像的路径。

    1
    <img src="image.jpg" alt="Description of the image">

  5. 列表（Lists）

    • 有序列表（Ordered List）使用<ol>标签，并在其中使用<li>标签表示每一个项目。

      1
      2
      3
      4
      5
      <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ol>

    • 无序列表（Unordered List）使用<ul>标签，并同样使用<li>标签表示每一个项目。

      1
      2
      3
      4
      5
      <ul>
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>
      </ul>

  6. 表格（Tables）

    使用<table>标签创建表格，<tr>表示表格行，<th>表示表头单元格，<td>表示数据单元格。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>John</td>
        <td>25</td>
      </tr>
    </table>

  7. 表单（Forms）

    使用<form>标签创建表单，包含输入框、按钮、下拉菜单等表单元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username">
      <br>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password">
      <br>
      <input type="submit" value="Submit">
    </form>

  8. 嵌入内容（Embedded Content）

    • 使用<iframe>标签可以嵌入另一个文档。

      1
      <iframe src="https://www.example.com"></iframe>

    • 使用<audio>和<video>标签可以嵌入音频和视频文件。

      1
      2
      <audio src="music.mp3" controls></audio>
      <video src="video.mp4" controls></video>

表单

  1. 输入框（Input）

    使用<input>标签来创建文本输入框。

    1
    2
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

  2. 下拉菜单（Select）

    使用<select>和<option>标签创建下拉菜单。

    1
    2
    3
    4
    5
    6
    <label for="country">Choose a country:</label>
    <select id="country" name="country">
      <option value="usa">USA</option>
      <option value="canada">Canada</option>
      <option value="uk">UK</option>
    </select>

  3. 单选按钮（Radio Buttons）

    使用<input>标签的type="radio"来创建单选按钮组。

    1
    2
    3
    4
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>

  4. 表单提交与验证

    • 表单提交使用<input type="submit">或<button type="submit">按钮。

      1
      <input type="submit" value="Submit">

    • 可以使用required属性进行简单的客户端验证，也可以使用 JavaScript 或后端技术进行更复杂的验证。

      1
      <input type="text" id="email" name="email" required>

语义化标记

  1. <header>标签

    <header>标签用于定义页面或者区块的页眉，通常包含导航、logo 或者标题等内容。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <header>
        <h1>Website Logo</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

  2. <footer>标签

    <footer>标签用于定义页面或者区块的页脚，通常包含版权信息、联系方式等内容。

    1
    2
    3
    <footer>
        <p>&copy; 2023 Your Website</p>
    </footer>

  3. <article>标签

    <article>标签用于定义独立的、完整的内容块，比如一篇新闻文章、博客帖子等。

    1
    2
    3
    4
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here...</p>
    </article>

  4. <section>标签

    <section>标签用于定义文档中的分节，通常代表一个主题相关的内容部分。

    1
    2
    3
    4
    <section>
        <h2>Section Title</h2>
        <p>Section content goes here...</p>
    </section>