理解HTML head头结构与优化技巧

122 浏览量更新于2024-08-31 收藏 107KB PDF 举报

"HTML中head头结构的详细解析与常用元素" 在HTML中，`head`部分是网页的元数据容器，它不直接显示在页面上，但对浏览器和搜索引擎至关重要。`head`中的标签和元素定义了网页的基本信息，如字符编码、页面描述、关键词、作者、以及对不同设备的渲染策略等。理解和正确使用这些元素对于优化用户体验和搜索引擎优化（SEO）都具有重要意义。 1. `<!DOCTYPE>`声明：这是文档类型声明，告诉浏览器文档遵循的HTML或XHTML规范。例如，`<!DOCTYPE HTML>`声明文档为HTML5标准。 2. `<html lang="zh-cmn-Hans">`：定义HTML根元素，并指定语言，这里是简体中文。 3. `<head>`：包含整个网页的元信息，如标题、字符集、元标签等。 4. `<meta charset="utf-8">`：设置字符编码为UTF-8，确保网页中特殊字符的正确显示。 5. `<meta name="viewport" content="width=device-width, user-scalable=yes">`：针对移动设备，设定视口宽度为设备宽度，允许用户缩放。 6. `<meta name="keywords" content="...">`：用于SEO，提供页面关键词，但现代搜索引擎已降低其权重。 7. `<meta name="description" content="...">`：页面描述，对搜索引擎和用户展示的摘要信息。 8. `<meta name="robots" content="index, follow">`：指示搜索引擎是否索引和跟踪页面链接。 9. `<meta name="author" content="...">`：声明页面作者。 10. `<meta name="renderer" content="webkit">`：对于国内双核浏览器，指定使用Webkit内核渲染。 11. `<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">`：使IE浏览器使用最高模式渲染，兼容Edge和Chrome。 12. `<meta http-equiv="Cache-Control" content="no-siteapp">`：防止被App缓存，保持网页最新状态。 13. `<title>`：定义网页的标题，显示在浏览器标签页上。 14. `<link rel="shortcut icon" type="image/x-icon" href="...">`：设置网页的favicon图标。 15. `<link rel="author" href="...">`：链接到作者的Google+个人资料，增强网页的权威性。理解并合理使用这些`head`元素，可以提升网页的专业性和可访问性，同时也有助于提升搜索引擎排名。需要注意的是，不同的浏览器可能对某些标签支持程度不同，因此在编写时应考虑跨浏览器兼容性。同时，随着技术的发展，新的`meta`标签也在不断出现，如`amp`（Accelerated Mobile Pages）相关的元标签，用于加速移动网页的加载。

HTML中中head头结构头结构

HTML head头部分的标签、元素有很多，涉及到浏览器对网页的渲染，搜索引擎SEO等等，而各个浏览器内核

以及各个国内浏览器厂商都有些自己的标签元素。了解每个标签的意义，写出满足自己需求的head标签，十分

重要。

下面介绍下常用的head头部结构，以及对各个标签、元素的意义以及使用场景一一介绍（本篇以一丝大神的文章为基础，进

行扩展总结）。

padding.me的head头结构

复制代码

代码如下:

<!DOCTYPE HTML>

<head>

师,HTML,CSS,JavaScript,HTML5,CSS3,git,Github">

href="https://plus.google.com/u/1/105241873904238310190/?

rel=author">https://plus.google.com/u/1/105241873904238310190/?rel=author</a>">

href="http://feeds.feedburner.com/paddingme">http://feeds.feedburner.com/paddingme</a>" />

</head>

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于html标签之前，此标签告知浏览器文档使用哪种HTML

或者XHTML规范。

DTD(Document Type Definition)声明以<!DOCTYPE>开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)

会使浏览器在IE下开启怪异模式(quirks mode)渲染网页。公共DTD，名称格式为“注册//组织//类型标签//语言”,“注册”指示组织

是否由国际标准化组织(ISO)注册，+表示是，-表示不是。“组织”即组织名称，如：W3C；“类型”一般是DTD，“标签”是指定公

开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后“语言”是DTD语言的ISO 639语言标识符，

如：EN表示英文，ZH表示中文。XHTML 1.0可声明三种DTD类型。分别表示严格版本，过渡版本，以及基于框架的HTML文

档。

•

HTML 4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

•

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

•

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

•

而最新HTML5 推出更加简洁的书写，它向前向后兼容，推荐使用。

<!doctype html>

HTML里的doctype有两个主要目的。

•对文档进行有效性验证。

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38733355

粉丝: 4
资源: 897

理解HTML head头结构与优化技巧

HTML head标签详解：构建完美头部结构

HTML head结构详解与常用元素解析

HTML HEAD元素详解：文档标题与结构

HTML head 头标签详细介绍

HTML5 HEAD标签详解：结构与关键元素

HTML5 HEAD标签详解：结构与元信息应用

HTML HEAD元素详解：基础结构与常用标记

HTML5 head元素详解：提升SEO与页面结构

HTML HEAD标签详解：元数据与文档结构

HTML5 HEAD标签与元素详解：结构与新特性

最新资源