目录
HTML进阶知识
前言
准备工作
标签的扩展（一）
本文中的标签在什么位置使用？
title标签
meta标签
name
viewport
referrer
http-equiv
charset
content
link标签
实际案例
可视部分
代码分析
其他标签
base标签
style标签
script标签
noscript
预告和回顾
后话
HTML进阶知识
前言
本系列博客是对入门专栏的HTML知识的补充，并伴随一些补充案例。
这一期主要介绍位置在HTML文档头部里的内容。
不是专业的科普博主，文笔不好，多多包涵（嘿嘿）。
准备工作
软件：【参考版本】Visual Studio Code
插件（扩展包）：Office Viewer(Markdown Editor)
浏览器版本：Chrome
系统版本： Win10/11/其他非Windows版本
*我的电脑是Win10的版本，仅供参考*
标签的扩展（一）
本文中的标签在什么位置使用？
本文中我们需要掌握的，是写在头部标签（head）中的各种标签。
title标签
这个标签主要有下面三个作用：
- 定义不同文档的标题
- 显示在搜索引擎结果页面的标题
- 添加书签时，默认的标题
所谓文档标题，就是HTML头部标签中的标题，也就是类似下面这一部分：
搜索引擎搜索后，出现的具体页面就是结果页面。结果页面标题的位置类似下面这样：
书签一般来说就是我们浏览器的默认收藏夹，在下面这个位置：
添加书签时，以添加示例网页为例，可以显示如下内容，其中的默认名称就是title的内容：
meta标签
meta标签描述了一些基本的元数据，为单标签。
元数据不显示在页面上，但会被浏览器解析，通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
meta标签常见的属性如下：
| 属性名 | 值 |
|---|---|
| name | 元数据类型 |
| http-equiv | 响应内容 |
| charset | 解析字符集类型 |
| content | 具体内容 |
下面将较为详细的介绍各个属性及其对应的值，说的不一定全，见谅。
name
用于设置一些预设的内容。这里主要介绍几个常见的name属性值，在下面这个表格里：
| 属性值 | 含义 |
|---|---|
| keywords | 搜索引擎关键词 |
| description | 定义网页描述内容 |
| author | 定义网页作者 |
| viewport | 窗口适配屏幕 |
| referrer | 指示链接来源 |
这些属性值我会在案例中讲到，这里需要提前知道下面的这些知识点：
viewport
当页面的宽度（默认布局窗口）超出了屏幕的窗口大小（理想视图窗口），我们需要将这个大小调节到适应我们屏幕的大小。
标准的viewport设置的属性值有六个，我们来分别解释一下每一个值的意思：
width：控制viewport的宽度。“device-width”，意思是设置视口宽度为设备宽度。
height：控制viewport的高度。“device-height”，意思是设置视口高度为设备高度。
initial-scale：定义初始缩放比例，即每次加载该页面时缩放的比例。一般值为1，即默认不缩放显示。
maximum-scale：允许用户缩放到的最大缩放比例。
minimum-scale：允许用户缩放到的最小缩放比例。
user-scaleable：是否允许用户缩放，可以传“yes”或“no” 。
referrer
用于指示当前请求的来源页面。当用户通过点击链接从一个网页跳转到另一个网页时，浏览器会在响应头中包含这个字段，告诉服务器该请求是从哪个页面链接过来的。
这个访问信息被记录，可以方便网站统计链接的浏览量数据、日志数据等，便于网站的维护和管理。
同时，对于外部链接联系服务器内部，referrer字段也会进行阻止或询问，提高了安全性。
http-equiv
又叫http响应头、http文件头。当浏览器请求某个文件时，首先会加载此响应头内的设置。
这里主要介绍几个常见的http-equiv属性值：
| 属性值 | 含义 |
|---|---|
| refresh | 网页刷新时间间隔 |
| content-type | 网页内容类型 |
charset
声明网页解析字符串类型。常见的网页类型如下：
| 属性值 | 含义 |
|---|---|
| utf-8 | 8位Unicode编码（常用，兼容性强） |
| GBK | 中文字符集编码（注意兼容性） |
content
定义对应meta数据的具体内容。
link标签
link标签为我们的网页引入一些资源，为单标签。
比如，我们的网页三层结构里的表现层（CSS），即样式表，如果我们的样式表被封装为一个单独的CSS文件，就需要用link标签，以资源的方式引入。
或者换一个更简单的例子（考虑到不一定学了CSS？），比如我们的网页标题边上，有一个小图标，它也是使用link标签引入的资源。
link标签常见的属性有下面这些：
| 属性名 | 值 |
|---|---|
| rel | 定义当前文档与被链接文档的关系 |
| href | 定义链接文档的位置 |
| type | 规定被链接文档的类型 |
关于rel，目前记住下面两个就差不多了：
| 值 | 含义 | 对应type值 |
|---|---|---|
| stylesheet | 引入外部样式表资源 | 可暂时不写 |
| shortcut icon | 网页小图标 | image/x-icon |
实际案例
可视部分
我们以CSDN的网站为例，先说我们可以看到的部分吧。
浏览器里搜索CSDN字样，在出现的搜索条目中，可以看见下面这个界面：
看到最上面的 CSDN - 专业开发者社区 的字样了吗？ 点进详情页，可以看到它与在浏览器上方的网页标题的内容是相同的。说明这个部分是网页的标题。
接下来是灰色的小字“CSDN是全球知名......”，这个部分就是网页的描述内容，即description的内容。
代码分析
接下来就要进入代码中查看了，使用快捷键F12快速查看搜索界面网页源代码，可以看到这一段代码：
html"><title>CSDN - 专业开发者社区</title>这里也就是我们说的网页标题。
html"><meta name="keywords" content="CSDN博客,CSDN学院,CSDN论坛,CSDN直播">content中的内容，就是我们得以搜索到CSDN网页的关键词。
下一段代码是：
html"><meta name="description" content="CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.">content中的内容，就是我们此前看到的灰色小字，即网页内容的描述，类似简介。
下一段代码是：
html"><meta http-equiv="content-type" content="text/html;charset=utf-8">响应头里定义了网页的内容文本类型，并规定了对应的编码类型（utf-8）。
下一段代码是：
html"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">像CSDN这里并没有指定宽和高，则initial-scale会让视图默认铺满屏幕，适应理想窗口大小。
关于理想窗口大小，这里就不拓展了，感兴趣的可以自己搜搜看。
最后的minimal-ui是一种UI设计的框架，暂时不做拓展。它是应用在移动端APP上的，让界面UI更加美观。
接着看下面一行代码：
html"><meta name="referrer" content="always">比如，如果我们在博客里点击任意链接，那么设置了该字段的网站就会为服务器提示页面的地址信息等。
中间跳过一些JS的内容，来看到下面这行代码：
html"><link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico" type="image/x-icon">还记得网页的标题吗？这里表示的是标题边上的小图标。
其他标签
以下标签暂时只做了解，对于其中的某些标签，在学习到对应阶段的时候会说的，目前不需要了解那么透彻。
base标签
该标签的作用是为页面上的所有链接规定的默认地址或默认目标。
一个HTML中最多使用一个<base>标签，当用多个<base>标签定义了超文本引用路径时，默认使用第一个base中的路径。
比如下面这个锚链接，实现打开我的头像的效果。常规的代码如下：
html"><a href="https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1">H2O2的头</a>现在，有了base标签，base标签中指定的默认路径如下：
html"><base href="https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1">那么，即使我们的锚链接的href中不指定url，也可以实现相同的打开效果。即下面这样：
html"><a href="">H2O2的头<a/>style标签
style标签用于定义网页的样式，即CSS样式。
CSS样式的定义方式有三种，分别是标签内定义的行内（内联）样式、link标签引入的CSS文件外部样式表和使用style标签在头部区域定义的内部样式表。
具体内容会在CSS入门系列中分享。
script标签
该标签通常用于定义客户端的脚本文件，即内部嵌入JavaScript（JS）代码。
js的内容也可以使用外部js文件，利用link标签引入，具体内容会在JS入门系列中分享。
noscript
noscript标签用于当浏览器不支持脚本语言时，替换的内容。
比如，现在我有这样一个弹窗文字代码：
<script>window.onload=function(){alert('示例弹窗');}</script>在示例网页中加载，效果如下：
由于我们使用的是Chrome浏览器，所以可以使用设置来禁用JavaScript。只需要在浏览器地址栏里输入下面的地址，就可以找到启用和禁用JS的选项：
chrome://settings/content/javascript
禁用后，首先添加下面的noscript代码：
html"><noscript><h1>不弹窗了，弹不了一点</h1></noscript>然后就可以在浏览器中看到，原本的弹窗行为不见了，取而代之的是noscript中的内容：
*设置试完记得改回来！！！*
预告和回顾
HTML入门阶段的博客点赞、收藏和阅读量都比较可观，这一点还是很不错的，这将是我不断更新的动力源泉。
不过HTML进阶篇的更新可能比较随性了，最近在更新CSS入门系列的博客。
对HTML基础掌握不熟悉的朋友，也可以看看我已经完结的HTML入门系列文章，希望能对你有所帮助：
专栏 | HTML入门html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83A" alt="icon-default.png?t=O83A" />http://t.csdnimg.cn/It2Ww
后话
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——勉强还有点氧气的【H2O2】
