Web 前端基础：HTML 核心语法和常用标签

HTML 简介

HTML 是什么？

HTML（HyperText Markup Language）即超文本标记语言，它是构建网页的基石。通过不同的标签组合，浏览器能够解析并渲染出结构化的内容。

HTML 骨架

一个标准的 HTML5 文档包含以下基本结构：

<!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>
    <!-- 可见内容 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5，确保浏览器以标准模式渲染。
<html lang="zh-CN">：根元素，lang 属性指定页面语言，有助于 SEO 和屏幕阅读器。
<head>：存放配置信息（如编码、视口），不会直接显示在页面上。
- <meta charset="UTF-8">：设置字符集为 UTF-8，防止中文乱码。
- <meta name="viewport">：移动端适配关键，设置宽度等于设备宽度，默认缩放比例为 1。
<body>：包含所有用户可见的内容，如图片、文字、表单等。

HTML 标签语法

标签结构

HTML 标签通常成对出现，由开始标签和结束标签组成，中间包裹内容。单标签则单独存在。

双标签：如 <p></p>，段落标签。
单标签：如 <br>，换行标签。

VS Code 快捷技巧：输入 ! 后按 Tab 或 Enter 可快速生成 HTML 骨架。缩进使用 Tab，取消缩进使用 Shift + Tab。

标签嵌套关系

父子关系：子级标签应换行并缩进，体现层级结构。
兄弟关系：同级标签应换行并对齐，保持代码整洁。

注释与调试

注释：使用 ，用于解释代码逻辑，提高可读性。
调试：在浏览器中按 F12 打开开发者工具，可以查看 DOM 结构和实时调试样式。

文本排版标签

标题标签 h1~h6

标题标签用于定义页面的层级结构，字体随数字增大而减小，独占一行。

注意：一个页面中 h1 标签建议只使用一次，作为主标题；其他级别标题可根据内容层级多次使用。

<h1>主标题</h1>
<h2>副标题</h2>
<h3>小节标题</h3>

段落标签 p

<p> 标签定义段落，独占一行，段落间会有默认间距。适合大段文字内容的展示。

换行 br、水平线 hr

<br>：强制换行，常用于短文本的分隔。
<hr>：绘制一条水平分割线，视觉上区分不同板块。

文本格式化标签

标签	作用	语义说明
`<b>`	粗体	仅样式，无特殊语义
`<strong>`	重要文本	语义强调，利于 SEO
`<i>`	斜体	仅样式
`<em>`	强调文本	语义强调
`<mark>`	高亮	标记重点内容
`<del>`	删除线	表示内容已被删除
`<ins>`	下划线	表示插入内容
`<sub>` / `<sup>`	下标/上标	化学式或数学公式

提示：优先使用 <strong> 和 <em>，它们具有语义化价值，比单纯的 <b> 和 <i> 更利于搜索引擎优化和无障碍访问。

块级元素 div & 行内元素 span

<div>：块级元素，独占一行，用于布局容器。
<span>：行内元素，不独占一行，用于包裹文本片段进行样式控制。

图像与路径

相对路径与绝对路径

绝对路径：从根目录或完整 URL 开始，定位准确但移植性差。
相对路径：基于当前文件位置，灵活且易于维护。
- ./：当前文件夹
- ../：上一级文件夹
- 文件夹名/：子文件夹

图像标签 img

<img src="image.jpg" alt="图片描述" width="300" title="悬停提示">

src：图片地址，必填。
alt：图片加载失败时的替代文本，对 SEO 至关重要。
width/height：设置尺寸，避免布局抖动。

超链接

a 标签结构

<a href="https://example.com" target="_blank" rel="noopener noreferrer">链接文本</a>

href：目标地址。
target：打开方式。_blank 在新窗口打开，_self 在当前窗口（默认）。
rel：安全属性。当使用 target="_blank" 时，务必添加 rel="noopener noreferrer" 防止新页面通过 window.opener 操控原页面。

列表

无序列表 ul/li

用于不需要特定顺序的内容，默认显示圆点。

<ul>
    <li>项目一</li>
    <li>项目二</li>
</ul>

有序列表 ol/li

用于需要顺序的内容，默认显示数字。

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

定义列表 dl/dt/dd

用于术语及其定义的展示。

<dl>
    <dt>术语名称</dt>
    <dd>术语解释</dd>
</dl>

表格

基本结构

是容器，tr 定义行，td 定义单元格，th 定义表头。

语义化分组

<thead>：表头区域。
<tbody>：主体数据区域。
<tfoot>：汇总或底部区域。

合并单元格

colspan：横向合并列。
rowspan：纵向合并行。

注意：合并时需删除被占用的其他单元格，否则会导致布局错乱。

表单

input 标签类型

input 是最常用的表单控件，通过 type 属性决定表现形式。

type 值	说明
text	单行文本
password	密码框
radio	单选框
checkbox	复选框
submit	提交按钮
button	普通按钮
file	文件上传
email	邮箱校验

单选与多选

单选 (radio)：同组 name 必须相同，实现互斥选择。
多选 (checkbox)：同组 name 相同，支持同时选中多个。

下拉菜单 select

<select name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
</select>

name：后端接收数据的键名。
id：用于 JS 操作或 CSS 样式关联。

文本域 textarea

用于多行文本输入，如评论框。

label 标签与按钮

label：增强交互体验，点击文字即可聚焦对应控件。
- 隐式：<label><input></label>
- 显式：<label for="id">文字</label>
button：
- type="submit"：提交表单。
- type="reset"：重置表单。
- type="button"：自定义行为。

综合实践

结合上述知识点，我们可以从零搭建一个纯 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>
    <!-- 页面容器 -->
    <div>
        <!-- 头部区域 -->
        <div>
            <h1>我的个人博客</h1>
        </div>

        <!-- 导航菜单 -->
        <div>
            <strong>目录</strong><br>
            <a href="#profile">博主简介</a><br>
            <a href="#article">文章列表</a><br>
        </div>

        <!-- 主要内容区 -->
        <div>
            <!-- 博主简介 -->
            <h2 id="profile">博主简介</h2>
            <img src="avatar.jpg" alt="头像" width="200">
            <p>你好，我是一名前端开发者，正在探索技术的边界。</p>
            <hr>

            <!-- 文章占位 -->
            <h2 id="article">HTML 基础</h2>
            <p>这里是文章内容...</p>

            <!-- 留言板表单 -->
            <form>
                <h2>留言板</h2>
                <label>姓名：<input type="text"></label><br>
                <label>邮箱：<input type="email" placeholder="请输入邮箱"></label><br>
                <label for="msg">留言内容：</label>
                <textarea cols="50" rows="5" placeholder="请输入留言内容"></textarea><br>
                <label><input type="radio" name="rate">好评</label>
                <label><input type="radio" name="rate">差评</label><br>
                <button type="submit">提交</button>
                <button type="reset">重置</button>
            </form>
        </div>

        <!-- 底部版权 -->
        <div>
            <p>&copy; 2024 版权所有</p>
        </div>
    </div>
</body>
</html>

通过以上实践，你可以直观地理解各标签在实际场景中的应用。记住，良好的代码结构和语义化标签不仅能提升开发效率，还能让页面更易维护。