HTML 技术学习文档

Nash

• 4 min read

1. HTML 基础概述

HTML (HyperText Markup Language) 是构建网页的基础语言，用于定义网页的结构和内容。

1.1 基本文档结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

2. 基础标签详解

2.1 文本相关标签

<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- 到 h6 -->

<!-- 段落标签 -->
<p>这是一个段落</p>

<!-- 文本容器 -->
<div>块级容器</div>
<span>行内容器</span>

2.2 链接和图片

<!-- 链接 -->
<a href="https://www.example.com">点击这里</a>

<!-- 图片 -->
<img src="image.jpg" alt="图片描述">

3. 表单元素

3.1 基本表单结构

<form action="/submit" method="post">
    <!-- 文本输入 -->
    <input type="text" name="username" placeholder="用户名">
    
    <!-- 密码输入 -->
    <input type="password" name="password" placeholder="密码">
    
    <!-- 多行文本 -->
    <textarea name="message" rows="4" cols="50"></textarea>
    
    <!-- 下拉选择 -->
    <select name="country">
        <option value="cn">中国</option>
        <option value="us">美国</option>
    </select>
    
    <!-- 提交按钮 -->
    <button type="submit">提交</button>
</form>

3.2 常用输入类型

<!-- 单选框 -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

<!-- 复选框 -->
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动

<!-- 日期选择 -->
<input type="date" name="birthday">

<!-- 文件上传 -->
<input type="file" name="document">

4. 列表和表格

4.1 列表

<!-- 无序列表 -->
<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

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

4.2 表格

<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

5. HTML5 新特性

5.1 语义化标签

<header>
    <!-- 页面头部 -->
</header>

<nav>
    <!-- 导航栏 -->
</nav>

<main>
    <article>
        <!-- 文章内容 -->
        <section>
            <!-- 章节 -->
        </section>
    </article>
    
    <aside>
        <!-- 侧边栏 -->
    </aside>
</main>

<footer>
    <!-- 页面底部 -->
</footer>

5.2 多媒体标签

<!-- 视频播放 -->
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持视频标签
</video>

<!-- 音频播放 -->
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持音频标签
</audio>

5.3 其他新特性

<!-- 进度条 -->
<progress value="70" max="100"></progress>

<!-- 高亮文本 -->
<p>这是一段文本，其中<mark>这部分</mark>被高亮显示。</p>

6. 最佳实践

  1. 始终声明文档类型
  2. 使用语义化标签
  3. 保持代码整洁和缩进
  4. 使用小写标签名
  5. 为图片添加 alt 属性
  6. 正确使用表单标签
  7. 确保页面结构清晰

7. 兼容性考虑

  • 在使用 HTML5 新特性时，考虑浏览器兼容性
  • 必要时提供降级方案
  • 使用现代化的 DOCTYPE 声明
  • 考虑移动设备的适配

这份文档涵盖了 HTML 的主要特性和使用方法，可以作为快速参考指南。建议在实践中不断探索和深入学习各个特性的具体应用。

苏ICP备2025153828号