📌  相关文章
📜  HTML构件块(1)

📅  最后修改于: 2023-12-03 14:41:59.739000             🧑  作者: Mango

HTML构件块

HTML构件块是网站开发中最为基础和重要的部分，每个网页都由 HTML 构件块组成。HTML 构件块指的是 HTML 文档中的结构块，它们被用于定义文档的主体、内容、结构和格式。HTML 构件块被组织为一个树状结构，从而方便浏览器解析 HTML，生成文档对象模型（Document Object Model，DOM）。

HTML 构件块的基本类型

HTML 构件块包括以下基本类型：

HTML 根元素

HTML 文档的根元素是 <!DOCTYPE html>，表示文档类型为 HTML5，是一种声明而非 HTML 构件块。它必须放在 HTML 文档的最开始处。

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>
HTML 文档元素

HTML 文档元素是指 HTML 文档的整个内容，在根元素和其他 HTML 构件块之间。HTML 文档元素使用 <html> 元素表示。

HTML 头部元素

HTML 头部元素包括文档信息、元数据和脚本，使用 <head> 元素表示。头部元素中的元素不会在页面上显示，而是提供给浏览器和搜索引擎一些额外的信息，例如文档的标题、字符编码等。以下是头部元素可以包含的元素：

  • <title>：表示文档的标题。
  • <meta>：表示 HTML 文档的元数据，包含字符编码、关键词等信息。
  • <link>：用于在文档和外部资源（例如 CSS 文件）之间建立链接。
  • <style>：表示页面的样式信息，可以用来添加 CSS 样式。
  • <script>：表示 JavaScript 代码，可以用来添加脚本。
<head>
  <title>Page Title</title>
  <meta charset="utf-8">
  <meta name="description" content="This is an example of a meta description">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
HTML 主体元素

HTML 主体元素是指 HTML 文档的主要内容，使用 <body> 元素表示。主体元素包含了页面上出现的所有内容，包括文字、图片、视频、链接等。常用的主体元素包括：

  • <h1>-<h6>：表示标题，数字越小，字体越大。
  • <p>：表示段落。
  • <a>：表示链接，可以跳转到其他页面或锚点。
  • <img>：表示图像，用于在页面上显示图像。
  • <video>：表示视频，用于在页面上播放视频。
  • <audio>：表示音频，用于在页面上播放音频。
  • <ul>：表示无序列表。
  • <ol>：表示有序列表。
  • <li>：表示列表项。
  • <table>：表示表格。
  • <form>：表示表单，用于向服务器提交用户数据。
  • <input>：表示表单中的输入框。
  • <button>：表示按钮，可以触发 JavaScript 代码。
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
  <a href="https://www.example.com">Click me!</a>
  <img src="example.jpg" alt="An example image">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </table>
  <form action="submit.php" method="POST">
    <input type="text" name="name">
    <button type="submit">Submit</button>
  </form>
</body>
HTML 元素属性

HTML 元素可以包含一个或多个属性，属性用于描述元素的附加信息。属性一般包括属性名和属性值两部分，属性名和属性值之间使用等号连接。属性值必须放在引号之间，单引号和双引号都可以。

<img src="example.jpg" alt="An example image" width="100" height="100">
总结

HTML 构件块是网页开发中最为基础和重要的部分，每个网页都由 HTML 构件块组成。常见的 HTML 构件块包括 HTML 根元素、HTML 文档元素、HTML 头部元素、HTML 主体元素和 HTML 元素属性。学习 HTML 构件块是学习网页开发的第一步。