HTML总结全览 - 技术栈

HTML 基础知识

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它通过标签（tags）定义网页的结构和内容，如文本、图片、链接等。HTML 文档由一系列嵌套的标签组成，浏览器解析这些标签并渲染成可视化的网页。

基本结构

一个典型的 HTML 文档结构如下：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

<!DOCTYPE html> 声明文档类型为 HTML5。
<html> 是根元素，包含整个网页内容。
<head> 包含元数据，如标题、字符集、视口设置等。
<body> 包含网页的可见内容。

常用标签

文本标签：
- <h1> 到 <h6>：标题标签，数字越小字号越大。
- <p>：段落标签。
- <a>：超链接标签，通过 href 属性指定链接地址。
- <strong> 和 <em>：分别表示加粗和斜体文本。
列表标签：
- <ul>：无序列表。
- <ol>：有序列表。
- <li>：列表项。
多媒体标签：
- <img>：图片标签，通过 src 属性指定图片路径。
- <audio> 和 <video>：分别用于嵌入音频和视频。
表单标签：
- <form>：表单容器。
- <input>：输入框，类型由 type 属性指定（如 text、password、submit 等）。
- <textarea>：多行文本输入框。
- <button>：按钮。

语义化标签

HTML5 引入了语义化标签，使代码更易读且对搜索引擎更友好：

<header>：页眉或区块标题。
<nav>：导航栏。
<section>：文档的独立区块。
<article>：独立的内容块（如文章）。
<footer>：页脚或区块结尾。

属性

HTML 标签可以通过属性提供额外信息或功能。常见属性包括：

id：唯一标识符。
class：为元素指定一个或多个类名。
style：内联 CSS 样式。
src 和 href：分别指定资源路径和超链接地址。

注释

HTML 注释用于添加说明或临时禁用代码：

html 复制代码

<!-- 这是注释内容 -->

示例代码

以下是一个简单的 HTML 页面示例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </nav>
    <section>
        <p>这是一个示例段落。</p>
    </section>
</body>
</html>

注意事项

确保标签正确嵌套和闭合。
使用语义化标签提升可读性和 SEO 效果。
避免过度依赖内联样式，推荐使用外部 CSS 文件。