HTML 基础标签学习笔记

发布于：2025-04-16 ⋅ 阅读:(116) ⋅ 点赞:(0)

一、文档结构标签

1. <!DOCTYPE html>

  • 作用：声明文档为 HTML5 类型

  • 位置：文档最开头

<!DOCTYPE html>

运行 HTML

2. <html>

  • 作用：根元素，包裹整个页面内容

  • 结构：包含 <head> 和 <body>

<html>
  <!-- 页面内容 -->
</html>

运行 HTML

3. <head>

  • 作用：存放元数据（标题、字符集、CSS/JS 链接）

  • 常用子标签：
    <title>：页面标题
    <meta>：字符集声明（必须）
    <link>：引入 CSS
    <script>：引入 JS

<head>
  <meta charset="UTF-8">
  <title>我的网页</title>
  <link rel="stylesheet" href="style.css">
</head>

运行 HTML

4. <body>

  • 作用：存放所有可见内容

<body>
  <h1>欢迎！</h1>
  <p>这是我的第一个网页</p>
</body>

运行 HTML

二、文本内容标签

1. 标题 <h1>-<h6>

  • 层级：h1（最大）→ h6（最小）

<h1>主标题</h1>
<h2>子标题</h2>

运行 HTML

2. 段落 <p>

<p>这是一个段落。</p>

运行 HTML

3. 换行 <br>

  • 特点：单标签，无段落间距

第一行<br>
第二行

运行 HTML

4. 分隔线 <hr>

<p>第一部分</p>
<hr>
<p>第二部分</p>

运行 HTML

5. 强调文本

  • <strong>：加粗（语义更重）

  • <em>：斜体（语气强调）

<strong>警告！</strong> 这是<em>重要</em>内容。

运行 HTML

三、多媒体与链接

1. 图片 <img>

  • 属性：
    src：图片路径
    alt：替代文本（必写）

<img src="cat.jpg" alt="一只橘猫">

运行 HTML

2. 超链接 <a>

  • 属性：
    href：链接地址（支持邮件链接）
    target="_blank"：新窗口打开

<a href="https://example.com">示例网站</a>
<a href="mailto:contact@example.com">联系我们</a>

运行 HTML

四、列表

1. 无序列表 <ul>

<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

运行 HTML

2. 有序列表 <ol>

<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

运行 HTML

3. 描述列表 <dl>

<dl>
  <dt>HTML</dt>
  <dd>网页结构标记语言</dd>
</dl>

运行 HTML

五、表格

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

运行 HTML

  • <tr>：表格行

  • <th>：表头（自动加粗居中）

  • <td>：单元格

六、表单

1. 表单容器 <form>

<form action="/submit" method="post">
  <!-- 表单元素 -->
</form>

运行 HTML

2. 输入控件 <input>

类型 说明 代码示例
文本框 单行文本输入 <input type="text" name="user">
密码框 隐藏输入内容 <input type="password">
单选按钮 单选选项 <input type="radio" name="sex">
复选框 多选选项 <input type="checkbox">
提交按钮 提交表单 <input type="submit" value="提交">

3. 关联标签 <label>

  • 提升表单可访问性

<label for="email">邮箱：</label>
<input type="email" id="email">

运行 HTML

4. 按钮 <button>

<button type="submit">保存</button>

运行 HTML

七、学习建议

  1. 所有标签建议小写书写

  2. 必须闭合标签（如 <p>...</p>，单标签如<br>需写为<br>）

  3. 优先使用语义化标签（如用<strong>代替<b>）

  4. 通过实际写代码练习巩固记忆

示例完整页面结构： 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>学习笔记示例</title>
</head>
<body>
  <h1>HTML 练习</h1>
  <p>开始你的第一个网页吧！</p>
</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布