HTML 教程 - Web技术教程

HTML 简介

HTML 是构建网页的基础，它定义了网页的结构和内容。HTML 文档由一系列元素组成，这些元素通过标签来标识。

提示：HTML 不是一种编程语言，而是一种标记语言，用于定义网页的结构。

基本 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>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

HTML 基础

HTML 文档由 HTML 元素组成，这些元素通过标签来标识。HTML 标签通常成对出现，例如 <p> 和 </p>。

HTML 标签分类

块级元素：独占一行空间的元素，如 div、h1-h6、p、ul、ol 等
行内元素：不会独占一行的元素，如 span、a、img、strong、em 等

常用 HTML 标签

<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

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

<!-- 链接标签 -->
<a href="https://www.example.com" target="_blank">访问示例网站</a>

<!-- 图像标签 -->
<img src="image.jpg" alt="图片描述" width="300" height="200">

<!-- 列表标签 -->
<ul>
    <li>无序列表项 1</li>
    <li>无序列表项 2</li>
</ul>

<ol>
    <li>有序列表项 1</li>
    <li>有序列表项 2</li>
</ol>

HTML 元素

HTML 元素是构成 HTML 文档的基本单位。每个元素通常由开始标签、内容和结束标签组成。

空元素

有些 HTML 元素没有内容，被称为空元素。例如 <br>、<img>、<input> 等。

HTML 属性

HTML 元素可以具有属性，属性提供了元素的额外信息。

<a href="https://www.example.com" target="_blank" title="示例网站">访问示例网站</a>
<img src="image.jpg" alt="图片描述" width="300" height="200">
<div class="container" id="main-content"></div>

常用属性

class：为元素指定一个或多个类名
id：为元素指定唯一标识符
src：指定资源的 URL
href：指定链接的目标 URL
alt：为图像提供替代文本
title：提供关于元素的额外信息

HTML 表单

HTML 表单用于收集用户输入的数据。表单元素允许用户输入文本、选择选项、上传文件等。

基本表单结构

<form action="/submit" method="post">
    <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>
    </div>
    
    <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div>
        <label for="message">留言：</label>
        <textarea id="message" name="message" rows="4"></textarea>
    </div>
    
    <div>
        <label>
            <input type="checkbox" name="subscribe"> 订阅新闻
        </label>
    </div>
    
    <button type="submit">提交</button>
</form>

常用表单元素

<input>：输入字段，有多种类型
<textarea>：多行文本输入
<select> 和 <option>：下拉列表
<button>：按钮
<label>：为表单元素提供标签

Input 类型

text：文本输入
password：密码输入
email：电子邮件输入
number：数字输入
date：日期选择
checkbox：复选框
radio：单选按钮
file：文件上传

HTML 语义化

HTML5 引入了许多语义化标签，这些标签提供了关于内容的更多信息，有助于搜索引擎理解网页结构。

常用语义化标签

<header>
    <!-- 网页头部，通常包含标题、导航等 -->
</header>

<nav>
    <!-- 导航区域 -->
</nav>

<main>
    <!-- 主要内容区域 -->
</main>

<section>
    <!-- 内容区块 -->
</section>

<article>
    <!-- 独立的内容，如博客文章、新闻等 -->
</article>

<aside>
    <!-- 侧边栏或补充内容 -->
</aside>

<footer>
    <!-- 页脚，通常包含版权信息等 -->
</footer>

提示：使用语义化标签可以提高代码的可读性和可维护性，同时对 SEO 也有帮助。

多媒体元素

HTML5 提供了多种多媒体元素，可以在网页中嵌入音频和视频。

音频元素

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频元素。
</audio>

视频元素

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频元素。
</video>

常见属性

controls：显示播放控件
autoplay：自动播放
loop：循环播放
muted：静音播放
poster：视频播放前显示的图像（仅视频元素）

HTML 表格

HTML 表格用于展示表格数据。表格由行和列组成。

基本表格结构

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>工程师</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
    </tbody>
</table>

表格相关标签

<table>：定义表格
<thead>：定义表头
<tbody>：定义表格主体
<tr>：定义行
<th>：定义表头单元格
<td>：定义数据单元格

合并单元格

<table border="1">
    <tr>
        <th colspan="2">合并列</th>
    </tr>
    <tr>
        <td rowspan="2">合并行</td>
        <td>单元格 1</td>
    </tr>
    <tr>
        <td>单元格 2</td>
    </tr>
</table>

HTML 最佳实践

编写高质量 HTML 的建议

使用语义化标签：选择合适的标签来描述内容
保持代码整洁：使用适当的缩进和注释
确保可访问性：添加 alt 属性、使用适当的标题层次结构等
优化图像：使用适当的格式和大小
使用最新标准：遵循 HTML5 规范
避免内联样式：尽量使用外部 CSS
使用响应式设计：确保在不同设备上都能正常显示

注意：始终确保您的 HTML 代码是有效的。可以使用 W3C 验证器来检查您的 HTML。