HTML 学习笔记（二）

神魔皆以血饲
12 阅读2分钟

Web 网页元数据 <head>xxx</head>

里面的内容不会在浏览器页面中显示

 元素
  • 定义文档浏览器标签页标题（注意与页面内容的 <h1> 区分）
  • 作为添加书签的默认名称

 元素

为文档添加元数据。

1. 定义文档字符编码

<meta charset="utf-8" />

2. 定义作者和描述（参与 SEO）

<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications." />

⚠️ meta keywords 已失效，会引导错误搜索结果，不建议使用：

<meta name="keywords" content="fill, in, your, keywords, here">

3. 其他类型元数据（Open Graph、Twitter Card）

用于在社交媒体分享时显示预览信息。

<!-- Facebook/Open Graph -->
<meta
  property="og:image"
  content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
  property="og:description"
  content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML Apps." />
<meta property="og:title" content="Mozilla Developer Network" />

<!-- Twitter -->
<meta name="twitter:title" content="Mozilla Developer Network" />

自定义网站图标

图标会显示在浏览器标签页、收藏夹/书签中。

基本用法

<link rel="icon" href="favicon.ico" type="image/x-icon" />
  • 常用格式：.ico（16像素），大多数浏览器也支持 .png 或 .gif

根据屏幕大小加载图标

<link rel="icon" href="/favicon-48x48.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

<!-- 含有高分辨率 Retina 显示屏的 iPad Pro -->
<link
  rel="apple-touch-icon"
  sizes="167x167"
  href="/apple-touch-icon-167x167.png" />

<!-- 三倍分辨率的 iPhone -->
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/apple-touch-icon-180x180.png" />

<!-- 没有 Retina 的 iPad、iPad mini 等 -->
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="/apple-touch-icon-152x152.png" />

<!-- 二倍分辨率的 iPhone 和其他设备 -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />

<!-- 基本图标 -->
<link rel="icon" href="/favicon.ico" />

在 HTML 中添加 CSS 和 JavaScript

添加 CSS

<link rel="stylesheet" href="my-css-file.css" />
  • rel="stylesheet" 表明这是文档的样式表
  • href 指向 CSS 文件路径

添加 JavaScript

<script src="my-js-file.js" defer></script>

  • src 指向 JS 文件路径

  • defer 告诉浏览器解析完 HTML 再加载脚本，防止 JS 获取不到元素

  • <script> 不是空元素，必须闭合标签

  • 脚本也可以直接写在 <script> 标签中：

    <script>
  console.log('Hello!');
</script>

设置文档主语言

设置整个文档的语言

<html lang="zh-CN">
  …
</html>

为特定内容片段设置语言

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

💡 为什么重要？

  • 帮助搜索引擎正确索引内容
  • 帮助屏幕阅读器使用正确的发音
  • 帮助浏览器选择合适的标点符号和连字符规则

参考

developer.mozilla.org/zh-CN/docs/…

avatar
文章
阅读
粉丝