Archived

This repository has been archived on 2026-05-19. You can view files and clone it. You cannot open issues or pull requests or push a commit.

Files

T

wonder f05be3890e vault backup: 2026-04-24 23:45:19

2026-04-24 23:45:19 +08:00

3.5 KiB

Raw Blame History

tags, create time

HTML 基础

概述

HTML（HyperText Markup Language）是构建网页的骨架。它不是一门编程语言，而是一种标记语言——用标签（tag）告诉浏览器"这里是一段标题"、"这里是一个按钮"、"这里是一张图片"。

思考题：为什么 HTML 被称为"标记语言"而不是"编程语言"？它有没有变量、循环或条件判断的能力？

正文

1. HTML 文档结构

一个标准的 HTML 文档包含以下核心部分：

<!DOCTYPE html>                          <!-- 文档类型声明：告诉浏览器这是 HTML5 -->
<html lang="zh-CN">                      <!-- 根元素，lang 指定语言 -->
<head>                                   <!-- 元信息容器：不直接显示 -->
    <meta charset="UTF-8">               <!-- 字符编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>               <!-- 浏览器标签页标题 -->
</head>
<body>                                   <!-- 可见内容容器 -->
    <h1>Hello World</h1>
    <p>这是一段文字</p>
</body>
</html>

2. 常用标签分类

标题与段落：

标签	用途
`<h1>` ~ `<h6>`	标题（h1 最大，h6 最小）
`<p>`	段落
`<br>`	换行
`<hr>`	水平线

文本格式化：

标签	用途
`<strong>`	加粗（语义：重要）
`<em>`	斜体（语义：强调）
`<code>`	代码
`<mark>`	高亮

链接与图片：

<a href="https://example.com" target="_blank">打开新窗口</a>    <!-- 外部链接 -->
<img src="photo.jpg" alt="描述文字">                            <!-- 图片（alt 必填） -->

提问： 为什么 <img> 标签的 alt 属性是必填的？它除了辅助功能外，还对 SEO（搜索引擎优化）有什么影响？

列表：

<!-- 无序列表 -->
<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
</ol>

3. 表单 — 用户交互的核心

<form action="/api/submit" method="POST">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>

    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" placeholder="example@mail.com">

    <label for="password">密码：</label>
    <input type="password" id="password" name="password">

    <label for="gender">性别：</label>
    <select id="gender" name="gender">
        <option value="">请选择</option>
        <option value="male">男</option>
        <option value="female">女</option>
    </select>

    <button type="submit">提交</button>
</form>

思考： GET 和 POST 方法有什么区别？为什么登录表单必须用 POST 而不是 GET？

4. 语义化标签 — HTML5 的新武器

<header>    <!-- 页眉 -->
<nav>       <!-- 导航栏 -->
<main>      <!-- 主要内容 -->
<section>   <!-- 独立章节 -->
<article>   <!-- 独立文章 -->
<aside>     <!-- 侧边栏 -->
<footer>    <!-- 页脚 -->

语义化的好处：

SEO 友好：搜索引擎更容易理解页面结构
无障碍访问：屏幕阅读器能更好地辅助视障用户
代码可读性：开发者一眼就能看懂结构

关联笔记

CSS 基础 — 接下来学习如何用 CSS 美化 HTML
JavaScript 基础 — 最后学习如何让页面动起来

3.5 KiB Raw Blame History Unescape Escape