HTML 基础语法与常用标签详解 | 极客日志

HTML / CSS大前端java

HTML 基础语法与常用标签详解

面向后端开发者，系统讲解 HTML 基础语法与常用标签。内容包括文档结构、标题段落、图片链接、表单控件及布局盒子。通过示例代码演示 h1-h6、p、br、img、a、table、form、input、select、textarea 等标签用法，并纠正常见笔误。旨在帮助后端人员快速掌握前端页面构建基础，为后续学习 CSS 与 JavaScript 做准备。

魔尊发布于 2026/4/6更新于 2026/5/2024 浏览

本文面向后端开发者，系统讲解 HTML 基础语法与常用标签。

1. HTML 基础

什么是 HTML？它是超文本标记语言。HTTP 是超文本传输协议，超文本能力远超纯文本，可包含图片、链接、音频等；标记语言即由标签构成的语言。

HTML 代码基本由标签组成：

<h1>我是一级标题</h1>

括号 <h1> 即为标签。通常使用开始和结束标签包裹内容，结束标签需加 /。开始标签可带属性，例如设置唯一标识符。

HTML 基本结构

文章配图

第一行无需关注。第二行 html 是整个文件的根标签。head 和 body 是兄弟关系，html 是父节点。head 中的 title 定义页面标题，body 中编写具体内容。

文章配图

可使用 VS Code 等编辑器编写代码，保存为 .html 文件后双击即可在浏览器预览。

点击浏览器开发者工具可查看当前界面代码。VS Code 支持 Emmet 快捷输入（如输入 ? 快速生成模板）。

2. HTML 常用标签

2.1 标题标签 h1-h6

序号越大标题越小。

<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <>四级标题
  五级标题
  六级标题

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

<p>第一段内容</p>
<p>第二段内容</p>

<p>第一段<br/>换行内容</p>

<img src="C:\\cctalk\\java 代码容易犯错的知识点\\QQ 截图 20240915161600.png">

<a href="URL">链接文字</a>

<table>
  <tr>
    <td>第一行 第一格</td>
    <td>第一行 第二格</td>
  </tr>
  <tr>
    <td>第二行 第一格</td>
    <td>第二行 第二格</td>
  </tr>
</table>

<form action="URL" method="get"></form>

文本框
```
<input type="text">
```
密码框
```
<input type="password">
```

单选框

<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女

注意：同一组单选框需相同 name 属性。

复选框

<input type="checkbox">爱好 1
<input type="checkbox">爱好 2

普通按钮
```
<input type="button" value="点我">
```
提交按钮
```
<input type="submit" value="提交">
```

<select>
  <option value="1">课程 A</option>
  <option value="2" selected>课程 B</option>
</select>

<textarea></textarea>

<div>
  <span>小盒子 1</span>
  <span>小盒子 2</span>
</div>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单练习</title>
</head>
<body>
  <form action="#">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    性别：
    <input type="radio" name="sex" value="1"><label for="sex1">男</label>
    <input type="radio" name="sex" value="2"><label for="sex2">女</label><br>
    兴趣：
    <input type="checkbox" name="hobby" value="1"><label for="hobby1">阅读</label>
    <input type="checkbox" name="hobby" value="2"><label for="hobby2">编程</label><br>
    专业：
    <select name="chose">
      <option value="1">人工智能</option>
      <option value="2" selected>网络工程</option>
    </select><br>
    简介：<textarea></textarea><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

HTML 基础语法与常用标签详解

1. HTML 基础

HTML 基本结构

2. HTML 常用标签

2.1 标题标签 h1-h6

更多推荐文章

相关免费在线工具

2.2 段落标签 p

2.3 换行标签 br

2.4 图片标签 img

2.5 超链接 a

2.6 表格标签 table

2.7 表单标签 form

2.8 表单 input 标签

2.9 下拉菜单 select

2.10 文本域 textarea

2.11 布局盒子 div span

综合练习

更多推荐文章

相关免费在线工具

HTML 基础语法与常用标签详解

1. HTML 基础

HTML 基本结构

2. HTML 常用标签

2.1 标题标签 h1-h6

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

2.2 段落标签 p

2.3 换行标签 br

2.4 图片标签 img

2.5 超链接 a

2.6 表格标签 table

2.7 表单标签 form

2.8 表单 input 标签

2.9 下拉菜单 select

2.10 文本域 textarea

2.11 布局盒子 div span

综合练习

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具