🤖 Assistant

🔖 HTML 零基础详细笔记

🌟 什么是 HTML？

  • HTML（HyperText Markup Language）：超文本标记语言
  • 用于构建网页结构和内容（类似盖房的“钢架结构”）
  • 由一系列的标签（tags）组成，如 <h1>, <p> 等
  • 必须用 .html 后缀保存（如 index.html）

🏗️ 基础文档结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>          <!-- 声明文档类型为 HTML5 -->
<html lang="zh-CN">      <!-- 根标签，lang定义语言 -->
  <head>                 <!-- 头：存放元数据（不显示在网页） -->
    <meta charset="UTF-8">           <!-- 字符编码方式 -->
    <title>第一个网页</title>      <!-- 网页标题（显示在标签页） -->
  </head>
  <body>                 <!-- 身体：显示内容区域 -->
    <!-- 内容写在这里 -->
  </body>
</html>

📌 常见 HTML 元素

1. 标题与段落

1
2
3
4
5
6
7
<h1>一级标题</h1>   <!-- 最大标题，重要程度逐级递减 -->
<h2>二级标题</h2>
<h3>三级标题</h3>
...
<h6>六级标题</h6>

<p>这是一个段落</p>    <!-- 段落文本 -->

2. 链接与图片

1
2
3
4
5
6
<a href="https://www.example.com">点我跳转</a> <!-- 超链接 -->
<img src="图片路径.jpg" alt="图片描述" width="200"> 
<!-- 
  src: 图片路径（本地或网络） 
  alt: 图片加载失败时显示的替代文本
-->

3. 列表

1
2
3
4
5
6
7
8
9
10
11
<!-- 无序列表（●符号列表） -->
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

<!-- 有序列表（数字序号） -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

4. 表格

1
2
3
4
5
6
7
8
9
10
<table border="1">   <!-- border: 表格边框 -->
  <tr>               <!-- 表格行 -->
    <th>姓名</th>    <!-- 表头单元格（加粗居中） -->
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>    <!-- 普通单元格 -->
    <td>25</td>
  </tr>
</table>

5. 表单（重点！）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form action="/submit" method="POST">
  <!-- 文本输入框 -->
  <label>用户名:</label>
  <input type="text" name="username" placeholder="请输入用户名">

  <!-- 密码框 -->
  <label>密码:</label>
  <input type="password" name="password">

  <!-- 单选按钮 -->
  <input type="radio" name="gender" value="male"> 男
  <input type="radio" name="gender" value="female"> 女

  <!-- 复选框 -->
  <input type="checkbox" name="hobby" value="reading"> 阅读
  <input type="checkbox" name="hobby" value="music"> 音乐

  <!-- 下拉选择框 -->
  <select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
  </select>

  <!-- 提交按钮 -->
  <input type="submit" value="提交">
</form>

🧩 HTML5 语义化标签（更清晰的页面结构）

1
2
3
4
5
6
<header>网页头部（包含LOGO和导航）</header>
<nav>导航栏</nav>
<section>页面中的独立区块</section>
<article>独立文章内容（如博客）</article>
<aside>侧边栏内容</aside>
<footer>网页脚部（版权信息）</footer>

🛠️ 常用属性

属性 作用 示例
class 定义元素的类（用于CSS样式） <div class="box">
id 唯一标识（常用于JavaScript操作） <div id="header">
style 内联样式（直接写CSS） <p style="color:red;">
href 指定链接的URL <a href="about.html">
src 资源路径（图片、视频等） <img src="cat.jpg">

🌈 综合案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>个人主页</title>
</head>
<body>
  <header>
    <h1>欢迎访问我的主页！👋</h1>
    <nav>
      <a href="#about">关于我</a> |
      <a href="#contact">联系方式</a>
    </nav>
  </header>

  <section id="about">
    <h2>自我介绍</h2>
    <p>我是小明，一个前端开发者</p>
    <img src="avatar.png" alt="我的头像" width="100">
  </section>

  <section id="contact">
    <h2>联系表单</h2>
    <form>
      <input type="email" placeholder="输入邮箱">
      <textarea placeholder="留言..."></textarea>
      <button type="submit">发送</button>
    </form>
  </section>

  <footer>
    <p>© 2023 小明的主页</p>
  </footer>
</body>
</html>

🚀 学习建议

  1. 多动手写代码，尝试修改案例中的各个部分
  2. 使用浏览器开发者工具（F12）查看其他网站的HTML结构
  3. 结合CSS学习美化页面
  4. 后续可过渡到JavaScript为网页添加交互功能

记住：HTML是网页的骨架，不要急于追求样式，先打好基础！✨
```