HTML 技巧

说明

收集常用的 HTML 技巧、最佳实践以及一些容易被忽略的特性。

常用 Meta 标签

移动端视口设置

确保页面在移动设备上正确渲染。

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

SEO 相关

<!-- 页面描述 -->
<meta name="description" content="页面描述内容，建议 150 字以内" />

<!-- 关键词 -->
<meta name="keywords" content="关键词1,关键词2,关键词3" />

<!-- 作者 -->
<meta name="author" content="Author Name" />

其它常用设置

<!-- 强制 Chromium 内核，使用 Chrome 渲染 -->
<meta name="renderer" content="webkit" />

<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<!-- 禁止自动识别电话号码和邮箱 -->
<meta name="format-detection" content="telephone=no, email=no" />

语义化标签

使用语义化标签有助于 SEO 和无障碍访问（A11y）。

标签	描述	场景示例
<header>	头部区域	网站导航、Logo 区域
<nav>	导航链接	主菜单、面包屑
<main>	主要内容	页面核心内容（每个页面仅一个）
<article>	独立内容	博客文章、新闻报道
<section>	文档章节	文章的某一章节、功能区块
<aside>	侧边栏	广告、相关链接、目录
<footer>	底部区域	版权信息、备案号

常用 Input 类型

利用 HTML5 的 type 属性，可以在移动端唤起特定的键盘。

<!-- 唤起数字键盘 -->
<input type="number" />
<input type="tel" />

<!-- 唤起邮箱键盘 -->
<input type="email" />

<!-- 唤起搜索键盘（回车键变为搜索） -->
<input type="search" />

<!-- 唤起 URL 键盘 -->
<input type="url" />

图片懒加载

原生支持的图片懒加载，无需依赖 JS 库。

<img src="image.jpg" loading="lazy" alt="Description" />

链接安全性

使用 target="_blank" 打开新标签页时，建议添加 rel="noopener noreferrer" 以防止安全漏洞和性能问题。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">External Link</a>

禁用自动完成

对于敏感信息输入框（如验证码），可以禁用浏览器的自动完成和自动填充功能。

<input type="text" autocomplete="off" />