Cao Note

外观

HTML 元信息与最佳实践 ​

meta 标签 ​

html
<!-- 字符编码 -->
<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="作者名称">
<!-- 机器人指令 -->
<meta name="robots" content="index, follow">
<!-- 重定向 -->
<meta http-equiv="refresh" content="3; url=https://www.example.com">
<!-- IE 兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 字符编码 -->
<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="作者名称">
<!-- 机器人指令 -->
<meta name="robots" content="index, follow">
<!-- 重定向 -->
<meta http-equiv="refresh" content="3; url=https://www.example.com">
<!-- IE 兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
html
<!-- 外部样式表 -->
<link rel="stylesheet" href="style.css">
<!-- 网站图标 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- 预加载资源 -->
<link rel="preload" href="important.js" as="script">
<!-- 预获取资源 -->
<link rel="prefetch" href="/js/xx.js">
<!-- 规范链接 -->
<link rel="canonical" href="https://www.example.com/canonical-url">
<!-- 外部样式表 -->
<link rel="stylesheet" href="style.css">
<!-- 网站图标 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- 预加载资源 -->
<link rel="preload" href="important.js" as="script">
<!-- 预获取资源 -->
<link rel="prefetch" href="/js/xx.js">
<!-- 规范链接 -->
<link rel="canonical" href="https://www.example.com/canonical-url">

script 标签 ​

html
<!-- 外部脚本 -->
<script src="script.js"></script>
<!-- 内联脚本 -->
<script>console.log('Hello, World!');</script>
<!-- 延迟执行（文档解析完后执行） -->
<script src="script.js" defer></script>
<!-- 异步执行（加载完立即执行） -->
<script src="script.js" async></script>
<!-- 模块脚本 -->
<script type="module" src="module.js"></script>
<!-- 外部脚本 -->
<script src="script.js"></script>
<!-- 内联脚本 -->
<script>console.log('Hello, World!');</script>
<!-- 延迟执行（文档解析完后执行） -->
<script src="script.js" defer></script>
<!-- 异步执行（加载完立即执行） -->
<script src="script.js" async></script>
<!-- 模块脚本 -->
<script type="module" src="module.js"></script>

defer vs async：defer 在 HTML 解析完成后按顺序执行；async 加载完成后立即执行，不保证顺序。无属性时脚本会阻塞 HTML 解析。

样式表引入 ​

html
<!-- 外部样式表 -->
<link rel="stylesheet" href="style.css">
<!-- 内部样式表 -->
<style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
    h1 { color: blue; }
</style>
<!-- 内联样式 -->
<p style="color: red; font-size: 16px;">红色文本</p>
<!-- 外部样式表 -->
<link rel="stylesheet" href="style.css">
<!-- 内部样式表 -->
<style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
    h1 { color: blue; }
</style>
<!-- 内联样式 -->
<p style="color: red; font-size: 16px;">红色文本</p>

最佳实践 ​

语义化 HTML ​

  • 使用合适的标签描述内容，避免过度使用 <div> 和 <span>
  • 为图片添加有意义的 alt 属性

代码组织 ​

  • 使用缩进提高可读性，保持一致的代码风格
  • 使用小写标签和属性，关闭所有标签，使用双引号包围属性值

性能优化 ​

  • 压缩 HTML、CSS 和 JavaScript
  • 优化图片大小和格式，使用 CDN 加载常用库
  • 延迟加载非关键资源，减少 HTTP 请求

可访问性 ​

  • 确保所有内容都可以通过键盘访问
  • 为表单元素添加标签，使用 ARIA 属性增强可访问性
  • 确保足够的颜色对比度

响应式设计 ​

  • 使用 meta viewport 标签
  • 采用流动布局，使用媒体查询适配不同设备
  • 图片使用 max-width: 100%

工具和资源 ​

Copyright © 2024-present xiaocao