下面是一篇适合新手入门、也可作为速查手册的文章，系统介绍 HTML 的基础概念及常用代码总结，可直接用于博客、教程或学习笔记。

HTML 介绍以及常用代码总结

一、什么是 HTML？

HTML（HyperText Markup Language），即超文本标记语言，是构建网页的基础语言，用来描述网页的结构和内容。

HTML 并不是编程语言，而是一种 标记语言，通过标签（Tag）告诉浏览器如何展示文本、图片、链接、视频等内容。

二、HTML 的基本结构

一个标准的 HTML5 页面结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML Demo</title>
</head>
<body>

    <h1>Hello HTML</h1>
    <p>This is my first web page.</p>

</body>
</html>

结构说明

  • <!DOCTYPE html>：声明 HTML5
  • <html>：页面根元素
  • <head>：页面信息（不直接显示）
  • <body>：页面内容（浏览器显示）

三、HTML 常用标签分类总结

1️⃣ 文本类标签

标签说明
<h1> - <h6>标题（从大到小）
<p>段落
<br>换行
<hr>分割线
<strong>加粗（语义）
<em>斜体（强调）
<span>行内容器
&lt;h1>Main Title&lt;/h1>
&lt;p>This is a &lt;strong>bold&lt;/strong> text.&lt;/p>

2️⃣ 链接与图片

超链接

&lt;a href="https://example.com" target="_blank">Visit Website&lt;/a>

图片

&lt;img src="image.jpg" alt="Image description" width="200">

3️⃣ 列表标签

无序列表

&lt;ul>
    &lt;li>Apple&lt;/li>
    &lt;li>Banana&lt;/li>
&lt;/ul>

有序列表

&lt;ol>
    &lt;li>Step One&lt;/li>
    &lt;li>Step Two&lt;/li>
&lt;/ol>

4️⃣ 表格标签

&lt;table border="1">
    &lt;tr>
        &lt;th>Name&lt;/th>
        &lt;th>Age&lt;/th>
    &lt;/tr>
    &lt;tr>
        &lt;td>Tom&lt;/td>
        &lt;td>20&lt;/td>
    &lt;/tr>
&lt;/table>

常用标签：

  • <table> 表格
  • <tr> 行
  • <th> 表头
  • <td> 单元格

5️⃣ 表单标签（非常重要）

&lt;form>
    &lt;input type="text" placeholder="Username">
    &lt;input type="password" placeholder="Password">
    &lt;input type="submit" value="Login">
&lt;/form>

常见 input 类型

类型说明
text文本框
password密码
radio单选
checkbox复选
submit提交
file上传文件

6️⃣ 语义化 HTML5 标签

标签用途
<header>页头
<nav>导航
<section>内容区
<article>文章
<aside>侧边栏
<footer>页脚
&lt;header>
    &lt;nav>Menu&lt;/nav>
&lt;/header>

7️⃣ 多媒体标签

视频

&lt;video src="video.mp4" controls width="300">&lt;/video>

音频

&lt;audio src="music.mp3" controls>&lt;/audio>

四、HTML 常用属性总结

属性说明
id唯一标识
class类名
style内联样式
src资源路径
href链接地址
alt图片说明
title悬浮提示

五、HTML 与 CSS、JS 的关系

&lt;!-- 引入 CSS -->
&lt;link rel="stylesheet" href="style.css">

&lt;!-- 引入 JavaScript -->
&lt;script src="main.js">&lt;/script>
  • HTML：结构
  • CSS：样式
  • JavaScript：交互

六、新手常见错误

❌ 忘记写 <!DOCTYPE html>
❌ 标签不闭合
❌ 使用大量 <br> 排版
❌ 不写 alt 属性

七、HTML 学习路线建议

1️⃣ HTML 基础标签
2️⃣ 表单与语义化
3️⃣ CSS 布局
4️⃣ JavaScript 基础
5️⃣ 响应式设计

八、总结

HTML 是网页的骨架，
CSS 是外衣，
JavaScript 是灵魂。

掌握 HTML 常用标签，是迈入前端开发的第一步。