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>
  <!-- 页面内容 -->
</body>
</html>

常用标签

文本标签

标签	用途	示例
`<h1>`-`<h6>`	标题	`<h1>主标题</h1>`
`<p>`	段落	`<p>段落文本</p>`
`<strong>`	重要文本	`<strong>重要</strong>`
`<em>`	强调文本	`<em>强调</em>`
`<small>`	附属细则	`<small>小字</small>`
`<mark>`	高亮文本	`<mark>高亮</mark>`
`<del>`	删除文本	`<del>删除</del>`
`<ins>`	插入文本	`<ins>插入</ins>`
`<sub>`	下标	`H<sub>2</sub>O`
`<sup>`	上标	`x<sup>2</sup>`

列表标签

标签	用途	示例
`<ul>`	无序列表	`<ul><li>项目</li></ul>`
`<ol>`	有序列表	`<ol><li>项目</li></ol>`
`<li>`	列表项	`<li>列表项</li>`
`<dl>`	定义列表	`<dl><dt>术语</dt><dd>定义</dd></dl>`
`<dt>`	定义术语	`<dt>术语</dt>`
`<dd>`	定义描述	`<dd>描述</dd>`

链接和媒体

标签	用途	示例
`<a>`	链接	`<a href="url">文本</a>`
`<img>`	图像	`<img src="url" alt="描述">`
`<audio>`	音频	`<audio src="url" controls>`
`<video>`	视频	`<video src="url" controls>`
`<source>`	媒体源	`<source src="url" type="type">`
`<track>`	媒体轨道	`<track src="url" kind="subtitles">`

表单标签

标签	用途	示例
`<form>`	表单容器	`<form action="url" method="post">`
`<input>`	输入控件	`<input type="text" name="name">`
`<textarea>`	多行文本	`<textarea name="msg"></textarea>`
`<select>`	下拉选择	`<select name="option">`
`<option>`	选项	`<option value="val">选项</option>`
`<label>`	标签	`<label for="id">标签</label>`
`<fieldset>`	表单分组	`<fieldset><legend>标题</legend>`
`<button>`	按钮	`<button type="submit">提交</button>`

常用属性

全局属性

属性	用途	示例
`id`	元素唯一标识	`id="unique-id"`
`class`	CSS类名	`class="class-name"`
`style`	内联样式	`style="color: red;"`
`title`	提示文本	`title="提示信息"`
`data-*`	自定义数据	`data-id="123"`
`hidden`	隐藏元素	`hidden`
`tabindex`	焦点顺序	`tabindex="1"`
`lang`	语言	`lang="zh-CN"`

表单属性

属性	用途	示例
`name`	表单控件名	`name="username"`
`value`	控件值	`value="default"`
`required`	必填	`required`
`disabled`	禁用	`disabled`
`readonly`	只读	`readonly`
`placeholder`	占位符	`placeholder="提示"`
`autocomplete`	自动完成	`autocomplete="on"`
`pattern`	验证模式	`pattern="[0-9]{3}"`

输入类型

类型	用途	示例
`text`	单行文本	`<input type="text">`
`email`	邮箱	`<input type="email">`
`password`	密码	`<input type="password">`
`number`	数字	`<input type="number">`
`tel`	电话	`<input type="tel">`
`url`	URL	`<input type="url">`
`date`	日期	`<input type="date">`
`time`	时间	`<input type="time">`
`color`	颜色	`<input type="color">`
`range`	滑块	`<input type="range">`
`file`	文件	`<input type="file">`
`checkbox`	复选框	`<input type="checkbox">`
`radio`	单选框	`<input type="radio">`
`search`	搜索	`<input type="search">`
`hidden`	隐藏	`<input type="hidden">`

语义化标签

标签	用途	示例
`<header>`	页面或章节头部	`<header>页头</header>`
`<nav>`	导航链接	`<nav>导航</nav>`
`<main>`	主要内容	`<main>内容</main>`
`<article>`	独立内容	`<article>文章</article>`
`<section>`	文档区段	`<section>区段</section>`
`<aside>`	侧边栏	`<aside>侧边栏</aside>`
`<footer>`	页面或章节底部	`<footer>页脚</footer>`
`<figure>`	媒体内容	`<figure><img><figcaption></figcaption></figure>`
`<figcaption>`	媒体标题	`<figcaption>标题</figcaption>`
`<time>`	时间	`<time datetime="2023">2023</time>`

常用实体字符

显示字符	实体	十进制	用途
`"`	`"`	`"`	双引号
`&`	`&`	`&`	和号
`'`	`'`	`'`	单引号
`<`	`<`	`<`	小于号
`>`	`>`	`>`	大于号
`©`	`©`	`©`	版权
`®`	`®`	`®`	注册商标
`™`	`™`	`™`	商标
`€`	`€`	`€`	欧元
`¥`	`¥`	`¥`	日元
`×`	`×`	`×`	乘号
`÷`	`÷`	`÷`	除号

常用meta标签

html

<!-- 基本meta标签 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词1, 关键词2">
<meta name="author" content="作者">

<!-- Open Graph -->
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="图片URL">
<meta property="og:url" content="页面URL">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">
<meta name="twitter:image" content="图片URL">

<!-- 其他meta标签 -->
<link rel="canonical" href="https://example.com/page">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

表单验证属性

属性	用途	示例
`required`	必填字段	`<input required>`
`minlength`	最小长度	`<input minlength="3">`
`maxlength`	最大长度	`<input maxlength="20">`
`min`	最小值	`<input type="number" min="0">`
`max`	最大值	`<input type="number" max="100">`
`step`	步长	`<input type="number" step="0.1">`
`pattern`	正则表达式验证	`<input pattern="[A-Za-z]{3,}">`

ARIA属性

属性	用途	示例
`role`	定义元素角色	`role="button"`
`aria-label`	无障碍标签	`aria-label="搜索"`
`aria-labelledby`	引用标签元素	`aria-labelledby="id"`
`aria-describedby`	引用描述元素	`aria-describedby="id"`
`aria-hidden`	隐藏于无障碍树	`aria-hidden="true"`
`aria-expanded`	展开状态	`aria-expanded="false"`
`aria-selected`	选中状态	`aria-selected="true"`
`aria-live`	活态区域	`aria-live="polite"`

性能优化技巧

资源加载优化

html

<!-- 预加载关键资源 -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero-font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 预连接外部域 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 异步加载CSS -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

<!-- 延迟加载JavaScript -->
<script src="app.js" defer></script>

图像优化

html

<!-- 响应式图像 -->
<picture>
  <source media="(min-width: 800px)" srcset="large.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="large.jpg" type="image/jpeg">
  <source srcset="small.webp" type="image/webp">
  <img src="small.jpg" alt="描述" loading="lazy">
</picture>

<!-- 现代格式备选 -->
<img src="image.webp" onerror="this.onerror=null;this.src='image.jpg'" alt="描述">

常见错误避免

标签不闭合

html

<!-- 错误 -->
<p>段落文本

<!-- 正确 -->
<p>段落文本</p>

属性值不加引号

html

<!-- 错误 -->
<img src=image.jpg alt=image>

<!-- 正确 -->
<img src="image.jpg" alt="image">

块级元素嵌套在行内元素中

html

<!-- 错误 -->
<span><div>块级元素</div></span>

<!-- 正确 -->
<div><span>行内元素</span></div>

跳过标题层级

html

<!-- 错误 -->
<h1>标题</h1>
<h3>子标题</h3> <!-- 跳过了h2 -->

<!-- 正确 -->
<h1>标题</h1>
<h2>子标题</h2>

HTML5新增API快速参考

本地存储

javascript

// localStorage
localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');

// sessionStorage
sessionStorage.setItem('key', 'value');
const value = sessionStorage.getItem('key');

地理定位

javascript

navigator.geolocation.getCurrentPosition(
  function(position) {
    console.log(position.coords.latitude, position.coords.longitude);
  },
  function(error) {
    console.error('获取位置失败:', error.message);
  }
);

拖放API

javascript

// 拖拽元素
draggableElement.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', e.target.id);
});

// 放置区域
dropZone.addEventListener('dragover', function(e) {
  e.preventDefault(); // 必须调用
});

dropZone.addEventListener('drop', function(e) {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  // 处理拖放数据
});

最佳实践清单

[ ] 使用语义化HTML标签
[ ] 为图像提供有意义的alt文本
[ ] 确保表单有适当的标签
[ ] 使用适当的标题层级
[ ] 确保键盘导航可用
[ ] 提供足够的颜色对比度
[ ] 使用相对单位而非固定像素
[ ] 压缩HTML、CSS和JavaScript
[ ] 优化图像大小和格式
[ ] 使用CDN加速静态资源
[ ] 实施适当的缓存策略
[ ] 使用HTTPS传输敏感数据
[ ] 防止XSS攻击
[ ] 实现适当的错误处理
[ ] 测试在不同设备和浏览器上

这份速查表提供了HTML开发中最常用的信息，可以作为日常开发的快速参考。

HTML速查表 #

基本文档结构 #

常用标签 #

文本标签 #

列表标签 #

链接和媒体 #

表单标签 #

常用属性 #

全局属性 #

表单属性 #

输入类型 #

语义化标签 #

常用实体字符 #

常用meta标签 #

表单验证属性 #

ARIA属性 #

性能优化技巧 #

资源加载优化 #

图像优化 #

常见错误避免 #

HTML5新增API快速参考 #

本地存储 #

地理定位 #

拖放API #

最佳实践清单 #

HTML速查表

基本文档结构

常用标签

文本标签

列表标签

链接和媒体

表单标签

常用属性

全局属性

表单属性

输入类型

语义化标签

常用实体字符

常用meta标签

表单验证属性

ARIA属性

性能优化技巧

资源加载优化

图像优化

常见错误避免

HTML5新增API快速参考

本地存储

地理定位

拖放API

最佳实践清单