前端开发知识汇总系列二（HTML初见）_web前端元素设置页面的标题显示在浏览器标签页上也作为收藏网页的描述文字-CSDN博客

本文链接：https://blog.csdn.net/Silence1515/article/details/112724251

1. 历史版本

HTML 2.0

HTML 2.0 是 1996 年由 Internet 工程工作小组的 HTML 工作组开发的。

HTML 2.0 是过时的 HTML 版本。目前在市场上可以找到的浏览器都依赖于更新版本的 HTML。对于一位 WEB 开发者而言，没有任何必要需要 HTML 2.0 标准。

HTML 3.2

HTML 3.2 作为 W3C 标准发布于 1997 年 1 月 14 日。HTML 3.2 向 HTML 2.0 标准添加了被广泛运用的特性，诸如字体、表格、applets、围绕图像的文本流，上标和下标。

这些被添加到 1997 年 HTML 3.2 标准的元素之一 - <font> 标签 - 为 HTML 内容和呈现的分离这个重要的任务带来了不必要的麻烦。

HTML 4.0

作为一项 W3C 推荐，HTML 4.0 被发布于 1997 年 12 月 18 日。而仅仅进行了一些编辑修正的第二个版本发布于 1998 年 4 月 24 日。

HTML 4.0 最重要的特性是引入了样式表（CSS）。

我们的 W3C CSS 章节总结了 W3C CSS 活动。

HTML 4.01

作为一项 W3C 推荐，HTML 4.01 发布于 1999 年 12 月 24 日。

HTML 4.01 是对 HTML 4.0 的一次较小的更新，对后者进行了修正和漏洞修复。

XHTML 1.0 (最新版本的HTML)

XHTML 1.0 使用 XML 对 HTML 4.01 进行了重新地表示。

作为一项 W3C 推荐，XHTML 1.0 发布于 2000 年 1 月 20 日。

我们的 W3C XHTML 章节总结了 W3C XHTML 活动。

HTML 5

W3C 于 2008 年 1 月 22 日发布 HTML 5 工作草案。

通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则，HTML 5 改进了互操作性，并减少了开发成本。

HTML 5 中的新特性包括了嵌入音频、视频和图形的功能，客户端数据存储，以及交互式文档。

HTML 5 还包含了新的元素，比如：<nav>, <header>, <footer> 以及 <figure> 等等。

HTML 5 工作组包括：AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, 以及数百个其他的供应商。

1. 定义

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本

HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

XHTML是什么?

XHTML 是更严谨更纯净的 HTML 版本，是HTML的一种变体，它使用可扩展标记语言XML的语法。XHTML具有与HTML变体相同的所有元素(用于段落等)，但语法略有不同。因为XHTML是一个XML应用程序，所以可以使用其他XML工具(比如XSLT，一种转换XML内容的语言)。

XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是作为一种 XML 应用被重新定义的 HTML。
XHTML 是一个 W3C 标准。
1. HTML 文档详解

单个元素如何彼此协同构成一个完整的 HTML 页面。创建 index.html 示例：

<!DOCTYPE html>

 <html>

    <head>

  <meta charset="utf-8">

  <title>测试页面</title>

    </head>

    <body>

  <img src="images/firefox-icon.png" alt="测试图片">

    </body>

</html>

<!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
<html></html> — <html> 元素。该元素包含整个页面的内容，也称作根元素。
<head></head> — <head> 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
<title></title> — <title> 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

文档类型

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的表现。

<!DOCTYPE html>

语言属性

为什么使用 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢? 请参考知乎上的讨论: 网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？

<!-- 中文 --> 
<html lang="zh-Hans">  
<!-- 简体中文 --> 
<html lang="zh-cmn-Hans">  
<!-- 繁体中文 --> 
<html lang="zh-cmn-Hant">  
<!-- English --> 
<html lang="en">

字符编码

以无 BOM 的 utf-8 编码作为文件格式;

指定字符编码的 meta 必须是 head 的第一个直接子元素；

<html>
   <head>
<meta charset="utf-8">
     ......
  </head>
  <body>
     ......
  </body>
</html>

IE 兼容模式

优先使用最新版本的IE 和 Chrome 内核

meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO 优化

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <!-- SEO -->     
 <title>Style Guide</title>     
 <meta name="keywords" content="your keywords">
 <meta name="description" content="your description">
 <meta name="author" content="author,email address"> 
</head>

viewport

viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
width: 浏览器宽度，输出设备中的页面可见区域宽度；
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
initial-scale: 初始缩放比例；
maximum-scale: 最大缩放比例；

为移动端设备优化，设置可见区域的宽度和初始缩放比例。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

iOS 图标

apple-touch-icon 图片自动处理成圆角和高光等效果;
apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图;

<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --> 
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> 
<!-- iPad，72x72 像素，可以没有，但推荐有 --> 
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">  
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">  
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 --> 
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

favicon

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：

在 Web Server 根目录放置 favicon.ico 文件；

使用 link 指定 favicon；

<link rel="shortcut icon" href="path/to/favicon.ico">

HEAD 模板

<!DOCTYPE html> 
<html lang="zh-cmn-Hans">
 <head>
<meta charset="utf-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<meta name="description" content="不超过150个字符">
<meta name="keywords" content=""> 
<meta name="author" content="name, email@gmail.com">  
<!-- 为移动设备添加 viewport -->  
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<!-- iOS 图标 -->  
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">  
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />