HTML

约 808 字大约 3 分钟

2025-03-22

HTML（HyperText Markup Language）是网页的基础语言，用于构建网页的基本结构。

1. HTML 文档结构

一个基本的 HTML 文档结构

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

2. 常用标签

标题标签

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

段落和文本

<p>这是一个段落</p>
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
<strong>粗体文本</strong>
<em>斜体文本</em>
<u>下划线文本</u>
<del>删除线文本</del>

列表

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

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

链接和图片

<!-- 链接 -->
<a href="https://www.example.com">点击这里</a>
<a href="mailto:example@email.com">发送邮件</a>

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

表格

<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

表单

<form action="/submit" method="post">
    <!-- 文本输入 -->
    <input type="text" name="username" placeholder="用户名">
    
    <!-- 密码输入 -->
    <input type="password" name="password" placeholder="密码">
    
    <!-- 单选按钮 -->
    <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"> 运动
    
    <!-- 下拉选择 -->
    <select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
    </select>
    
    <!-- 文本区域 -->
    <textarea name="message" rows="4" cols="50"></textarea>
    
    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

div 和 span

<div>块级容器</div>
<span>内联容器</span>

3. HTML5 新特性

语义化标签

<header>页眉</header>
<nav>导航</nav>
<main>主要内容</main>
<article>文章</article>
<section>区块</section>
<aside>侧边栏</aside>
<footer>页脚</footer>

多媒体标签

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

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

4. 常用属性

class: 定义元素的类名
id: 定义元素的唯一标识符
style: 定义元素的行内样式
title: 定义元素的提示文本
data-*: 自定义数据属性

<div class="container" id="main" style="color: blue;" title="这是一个容器">
    内容
</div>

5. 注释

<!-- 这是 HTML 注释 -->

6. 实用技巧

始终声明文档类型
使用小写标签名
所有属性值使用双引号
图片始终添加 alt 属性
关闭所有 HTML 元素
使用语义化标签提高可读性
保持代码缩进整洁

7. 常见应用场景

导航栏

<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
        <li><a href="#contact">联系我们</a></li>
    </ul>
</nav>

文章结构

<article>
    <header>
        <h1>文章标题</h1>
        <p>发布日期：2024-03-22</p>
    </header>
    <section>
        <p>文章内容...</p>
    </section>
    <footer>
        <p>作者：张三</p>
    </footer>
</article>

页面布局

<div class="page">
    <header>
        <h1>网站标题</h1>
        <nav>导航菜单</nav>
    </header>
    
    <main>
        <article>主要内容</article>
        <aside>侧边栏</aside>
    </main>
    
    <footer>
        <p>版权信息 © 2024</p>
    </footer>
</div>