📌  相关文章
📜  创建页面 html (1)

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

创建页面 HTML

HTML是超文本标记语言的缩写，可以用来构建网页。在HTML中，各种标记可以被用来描述文本、图片、链接、表格等各种元素，从而实现网页内容的展示和交互。下面是HTML中常用的标记以及应用示例。

HTML基本结构

HTML文件通常以<!doctype html>开始，紧接着是标记，包括和两个部分。其中部分用来定义网页的元数据，如标题、描述等，而部分则包含了实际的页面内容。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Website</title>
  <meta name="description" content="Welcome to my website!">
</head>
<body>
  <h1>Welcome to my website!</h1>
  <p>This is my first HTML page.</p>
</body>
</html>
标题和段落

在HTML中，可以使用<h1>到<h6>标记来表示标题的级别。其中，<h1>最大，<h6>最小。另外，<p>标记表示一个段落。所有这些标记都可以用class和id属性来进一步定义样式和脚本逻辑。

<h1 class="title">Main Heading</h1>
<h2 class="subtitle">Sub Heading</h2>
<p>This is a paragraph.</p>
列表

HTML支持有序列表和无序列表。有序列表使用<ol>标记，每个列表项使用<li>标记。无序列表使用<ul>标记，其他和有序列表相同。另外，可以使用<dl>、<dt>和<dd>标记来创建定义列表。

<h3>Ordered list:</h3>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
<h3>Unordered list:</h3>
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<h3>Definition list:</h3>
<dl>
  <dt>Item 1:</dt>
  <dd>This is item 1.</dd>
  <dt>Item 2:</dt>
  <dd>This is item 2.</dd>
</dl>
图片和链接

使用<img>标记可以在网页中插入图片。其中，src属性表示图片的路径，alt属性为图片设置描述文本。另外，可以使用<a>标记来创建链接，href属性表示链接的目标。

<p>Here is an image:</p>
<img src="https://picsum.photos/200" alt="Random image">
<p>Here is a link:</p>
<a href="https://www.example.com/">Go to Example website</a>
表格

使用<table>、<thead>、<tbody>、<tfoot>、<tr>、<th>和<td>等标记可以创建表格，并设置表格的各个元素。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>32</td>
      <td>Female</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">End of table</td>
    </tr>
  </tfoot>
</table>

以上是HTML中常用的标记和应用示例。除此之外，HTML还支持很多其他元素和属性。更详细的内容可以参考相关的教程和文档。