HTML知识点详解教程

文章目录

HTML知识点详解教程
- [1. HTML基本语法](#1. HTML基本语法)
- [2. HTML标签详解](#2. HTML标签详解)
- - [2.1 分区标签 `<div>`](#2.1 分区标签 <div>)
  - [2.2 标题标签 `<h1>` ~ `<h6>`](#2.2 标题标签 <h1> ~ <h6>)
  - [2.3 段落标签 `<p>`](#2.3 段落标签 <p>)
  - [2.4 图片标签 `<img>`](#2.4 图片标签 <img>)
  - [2.5 列表标签 `<ul>` 和 `<ol>`](#2.5 列表标签 <ul> 和 <ol>)
  - - [无序列表 `<ul>`](#无序列表 <ul>)
    - [有序列表 `<ol>`](#有序列表 <ol>)
  - [2.6 超链接标签 `<a>`](#2.6 超链接标签 <a>)
  - [2.7 表单标签 `<form>`](#2.7 表单标签 <form>)
  - [2.8 表格标签 `<table>`](#2.8 表格标签 <table>)
  - [2.9 框架标签 `<iframe>`](#2.9 框架标签 <iframe>)
- 案例实践：个人简介网页

HTML知识点详解教程

1. HTML基本语法

HTML 是用来定义网页结构的标记语言。一个 HTML 文档的基本结构如下：

plain 复制代码

html


复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 基础</title>
</head>
<body>
  <h1>欢迎学习 HTML</h1>
  <p>这是一个简单的 HTML 文档示例。</p>
</body>
</html>

解析：

<!DOCTYPE html>：声明 HTML5 文档类型。
<html>：HTML 文档的根标签。
<head>：包含元信息（如标题、字符集）。
<body>：网页的主要内容部分。

2. HTML标签详解

以下列举图片中涉及的所有 HTML 标签，并附详细代码示例。

2.1 分区标签 `<div>`

<div> 是常用的分区标签，用于分隔内容块。

plain 复制代码

html


复制代码
<div style="background-color: lightblue; padding: 20px;">
  <h2>这是一个分区</h2>
  <p>分区中的段落文字。</p>
</div>

2.2 标题标签 `<h1>` ~ `<h6>`

HTML 提供了 6 级标题标签，表示从大到小的标题层级。

plain 复制代码

html


复制代码
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.3 段落标签 `<p>`

段落标签用于表示正文内容。

plain 复制代码

html


复制代码
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

2.4 图片标签 `<img>`

用于在网页中插入图片。

plain 复制代码

html


复制代码
<img src="https://via.placeholder.com/150" alt="示例图片" width="150" height="150">

属性解析：

src：图片的路径。
alt：图片的替代文本（用于无障碍访问）。
width 和 height：定义图片的宽高。

2.5 列表标签 `<ul>` 和 `<ol>`

无序列表 `<ul>`

plain 复制代码

html


复制代码
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

有序列表 `<ol>`

plain 复制代码

html


复制代码
<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

2.6 超链接标签 `<a>`

用于创建链接。

plain 复制代码

html


复制代码
<a href="https://www.csdn.net" target="_blank">访问CSDN</a>

属性解析：

href：目标链接。
target="_blank"：在新窗口中打开链接。

2.7 表单标签 `<form>`

表单用于用户输入数据并提交给服务器。

plain 复制代码

html


复制代码
<form action="/submit" method="post">
  <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>

2.8 表格标签 `<table>`

用于展示结构化数据。

plain 复制代码

html


复制代码
<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>程序员</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>设计师</td>
  </tr>
</table>

属性解析：

border：表格边框宽度。

2.9 框架标签 `<iframe>`

用于嵌套其他网页。

plain 复制代码

html


复制代码
<iframe src="https://www.example.com" width="600" height="400"></iframe>

属性解析：

src：嵌套网页的地址。
width 和 height：定义框架的宽高。

案例实践：个人简介网页

综合上述知识点，构建一个简单的个人简介页面：

plain 复制代码

html


复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人简介</title>
</head>
<body>
  <header>
    <h1>个人简介</h1>
  </header>
  <main>
    <div style="background-color: #f0f0f0; padding: 20px;">
      <h2>关于我</h2>
      <p>大家好，我是张三，一名热爱编程的前端开发工程师。</p>
    </div>
    <section>
      <h2>兴趣爱好</h2>
      <ul>
        <li>编程</li>
        <li>阅读</li>
        <li>旅行</li>
      </ul>
    </section>
    <section>
      <h2>联系我</h2>
      <p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
    </section>
  </main>
  <footer>
    <p>版权所有 © 2024 张三</p>
  </footer>
</body>
</html>

希望这份教程对您有所帮助！如果喜欢，欢迎点赞、收藏并分享！

HTML知识点详解教程

文章目录

HTML知识点详解教程

1. HTML基本语法

2. HTML标签详解

2.1 分区标签 <div>

2.2 标题标签 <h1> ~ <h6>

2.3 段落标签 <p>

2.4 图片标签 <img>

2.5 列表标签 <ul> 和 <ol>

无序列表 <ul>

有序列表 <ol>

2.6 超链接标签 <a>

2.7 表单标签 <form>

2.8 表格标签 <table>

2.9 框架标签 <iframe>

案例实践：个人简介网页

2.1 分区标签 `<div>`

2.2 标题标签 `<h1>` ~ `<h6>`

2.3 段落标签 `<p>`

2.4 图片标签 `<img>`

2.5 列表标签 `<ul>` 和 `<ol>`

无序列表 `<ul>`

有序列表 `<ol>`

2.6 超链接标签 `<a>`

2.7 表单标签 `<form>`

2.8 表格标签 `<table>`

2.9 框架标签 `<iframe>`