HTML详细教学前端

HTML 前端教学

一、引言

TML（假设您指的是 HTML）是构建网页的基础语言。在这篇教学中，我们将深入学习 HTML 的基础知识和常见应用。

二、HTML 基础

  1. 文档结构
    • <!DOCTYPE html> 声明文档类型为 HTML5。
    • <html> 标签包裹整个文档。
    • <head> 部分包含页面的元数据，如 <meta charset="UTF-8"> 定义字符编码，<title> 定义页面标题。
    • <body> 部分包含页面的实际内容。
  2. 常用标签
    • <h1> 到 <h6> 用于定义标题。
    • <p> 用于定义段落。
    • <img src="image.jpg" alt="图片描述"> 用于插入图片。
    • <a href="https://www.example.com">链接文本</a> 用于创建链接。

三、列表

  1. 无序列表
    • 使用 <ul> 标签，内部的列表项用 <li> 标签，例如： 
      1
      2
      3
      4
      <ul>
          <li>列表项 1</li>
          <li>列表项 2</li>
      </ul>
  2. 有序列表
    • 使用 <ol> 标签，列表项同样用 <li> 标签，例如： 
      1
      2
      3
      4
      <ol>
          <li>第一项</li>
          <li>第二项</li>
      </ol>

四、表单

  1. <form> 标签用于创建表单。
    • action 属性指定表单提交的目标地址。
    • method 属性指定提交方式（如 get 或 post ）。
  2. 常见的表单元素
    • <input type="text"> 用于输入文本。
    • <input type="password"> 用于输入密码。
    • <input type="submit"> 用于提交表单。
    • <textarea> 用于多行文本输入。
    • <select> 和 <option> 用于下拉列表。

五、表格

<table> 标签用于创建表格。

  1. <tr> 表示表格的行。
  2. <td> 表示表格的数据单元格。
  3. <th> 表示表格的表头单元格。

例如：

1
2
3
4
5
6
7
8
9
10
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>

六、多媒体

  1. 嵌入音频
    • 使用 <audio> 标签，如 <audio src="audio.mp3" controls></audio> 。
  2. 嵌入视频
    • 使用 <video> 标签，如 <video src="video.mp4" controls></video> 。

七、总结

通过以上学习，您已经对 HTML 有了基本的了解和掌握。不断实践和探索，您将能够创建出更加丰富和复杂的网页。

希望这篇 HTML 前端教学对您有所帮助！

[up主专用，视频内嵌代码贴在这]