常用
| 标签 | 用途 | 示例 |
|---|---|---|
<h1> ~ <h6> | 标题 | <h1>标题</h1> |
<p> | 段落 | <p>一段文字</p> |
<a> | 超链接 | <a href="https://example.com">点我</a> |
<img> | 图片 | <img src="img.jpg" alt="图片描述"> |
<ul> / <ol> / <li> | 列表 | <ul><li>项目</li></ul> |
<div> | 区块容器 | <div>内容</div> |
<span> | 行内元素 | <span>文字</span> |
<input> / <form> | 表单 | <input type="text"> |
<table> / <tr> / <td> | 表格 | <table><tr><td>单元格</td></tr></table> |
<button> | 按钮 | <button>点击</button> |
<br> / <hr> | 换行/分隔线 | <br> / <hr> |
语义化标签
| 标签 | 用途 | 示例 |
|---|---|---|
<header> | 页眉 | <header>页面头部</header> |
<footer> | 页脚 | <footer>页面底部</footer> |
<nav> | 导航 | <nav><a href="#">导航链接</a></nav> |
<main> | 主要内容 | <main>页面主要内容</main> |
<article> | 独立的内容单元 | <article>一篇文章</article> |
<section> | 内容区段 | <section>相关内容区块</section> |
<aside> | 侧边栏 | <aside>附加信息</aside> |
<figure> / <figcaption> | 图像/媒体及其标题 | <figure><img src="img.jpg"><figcaption>图片说明</figcaption></figure> |
表单元素
| 标签 | 用途 | 示例 |
|---|---|---|
<form> | 表单容器 | <form action="/submit" method="post">...</form> |
<input> | 输入框 | <input type="text" name="username" placeholder="用户名"> |
<textarea> | 多行文本输入 | <textarea rows="4" cols="50">默认文本</textarea> |
<select> / <option> | 下拉选择框 | <select><option value="1">选项1</option></select> |
<button> | 按钮 | <button type="submit">提交</button> |
<label> | 表单标签 | <label for="username">用户名：</label> |
<fieldset> / <legend> | 表单分组 | <fieldset><legend>个人信息</legend>...</fieldset> |
HTML5 新特性
| 标签/属性 | 用途 | 示例 |
|---|---|---|
<video> | 视频播放 | <video src="movie.mp4" controls></video> |
<audio> | 音频播放 | <audio src="sound.mp3" controls></audio> |
<canvas> | 绘图容器 | <canvas id="myCanvas" width="200" height="100"></canvas> |
<svg> | 矢量图形 | <svg width="100" height="100"><circle cx="50" cy="50" r="40" /></svg> |
<progress> | 进度条 | <progress value="70" max="100"></progress> |
<meter> | 度量计 | <meter value="0.6" min="0" max="1">60%</meter> |
data-* | 自定义数据属性 | <div data-user-id="123">用户信息</div> |
contenteditable | 可编辑内容 | <div contenteditable="true">可编辑文本</div> |
常用属性
| 属性 | 用途 | 示例 |
|---|---|---|
id | 唯一标识符 | <div id="unique-id">...</div> |
class | CSS类名 | <div class="container blue">...</div> |
style | 内联样式 | <p style="color: red; font-size: 16px;">红色文字</p> |
title | 提示文本 | <a title="点击查看详情" href="#">链接</a> |
href | 超链接地址 | <a href="https://example.com">链接</a> |
src | 资源地址 | <img src="image.jpg"> |
alt | 替代文本 | <img src="logo.png" alt="公司Logo"> |
target | 链接打开方式 | <a href="page.html" target="_blank">新窗口打开</a> |
placeholder | 输入框提示文本 | <input placeholder="请输入用户名"> |
disabled | 禁用元素 | <button disabled>不可点击</button> |
required | 必填字段 | <input required> |
autocomplete | 自动完成 | <input autocomplete="off"> |
SEO相关标签
| 标签/属性 | 用途 | 示例 |
|---|---|---|
<meta name="description"> | 页面描述 | <meta name="description" content="页面描述内容"> |
<meta name="keywords"> | 页面关键词 | <meta name="keywords" content="HTML,CSS,JavaScript"> |
<meta name="robots"> | 搜索引擎指令 | <meta name="robots" content="index, follow"> |
<link rel="canonical"> | 规范链接 | <link rel="canonical" href="https://example.com/page"> |
<title> | 页面标题 | <title>网页标题 - 网站名称</title> |
<h1> ~ <h6> | 标题层级（语义重要） | <h1>主标题</h1><h2>副标题</h2> |
<meta property="og:title"> | Open Graph标题 | <meta property="og:title" content="分享标题"> |
<meta property="og:image"> | Open Graph图片 | <meta property="og:image" content="https://example.com/image.jpg"> |