内容优化 / 方法解读

网页中 title 元素与 h1 元素在显示位置上的区别

网页中的 title 元素内容不会直接显示在页面可视区域,而 h1 元素内容会作为页面主标题显示在浏览器窗口。

区分显示位置与文档结构

网页中的 head 元素包含的内容在页面加载时不会直接显示在浏览器窗口的可视区域。head 的主要职责是包含关于文档的元数据信息,例如页面标题、CSS 样式表的链接、自定义图标链接以及其他元数据。浏览器使用 head 中包含的信息来正确渲染 HTML 文档。

网页中的 h1 元素是 body 元素的一部分,其内容会在页面加载时直接显示在浏览器窗口的可视区域。h1 元素通常用于标记页面内容的顶级标题,例如故事标题、新闻头条或适合您使用的任何内容标题。一个页面通常应该只使用一次 h1 元素来标记页面内容的标题。

title 元素作为元数据的作用

网页中的 title 元素是表示整个 HTML 文档标题的元数据。它不是文档内容的标题,而是文档本身的标题。title 元素的内容在页面加载时不会显示在页面上,而是用于其他目的,例如在浏览器标签页上显示标题。

网页中的 title 元素内容在搜索结果页面中也会被使用。当用户在搜索引擎中搜索特定内容时,搜索引擎会显示页面的 title 元素内容作为搜索结果的一部分。此外,当用户将页面添加到书签时,浏览器通常会建议使用 title 元素的内容作为书签名称。

设置文档字符编码与语言

网页中的 head 元素包含一个 meta 元素,用于指定文档的字符编码。字符编码是文档允许使用的字符集。utf-8 是一种通用字符集,几乎包含任何人类语言的字符。这意味着您的网页将能够很好地处理显示任何语言的内容,因此建议在创建的每个网页上都设置此编码。

网页中的 html 元素在打开标签上包含 lang 属性,用于设置文档的语言。设置文档语言对于辅助技术(如屏幕阅读器)和搜索引擎理解页面内容非常重要。正确设置语言有助于浏览器和搜索引擎正确解释和显示页面内容。

链接样式表与图标

网页中的 head 元素包含一个 link 元素,用于将样式表链接到 HTML 内容。link 元素应始终放在文档的 head 中。它包含两个属性:rel 属性设置为 stylesheet,表示它是文档的样式表,以及 href 属性,包含样式表文件的路径。

网页中的 head 元素还可以包含一个 link 元素,用于添加自定义图标的引用。这些图标将在特定上下文中显示。最常用的图标是 favicon,它用于浏览器标签页和书签面板中。favicon 通常是一个 16 像素的正方形图标。可以通过在 head 块中添加一个 link 元素来添加 favicon,该元素引用 favicon 文件的路径。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. What's in the head? Web page metadata - Learn web development | MDN ↗
← 更多内容优化文章返回顶部 ↑