【H2O2|全栈】更多关于HTML（1）HTML进阶（一）

目录

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标签

这个标签主要有下面三个作用：

1. 定义不同文档的标题
2. 显示在搜索引擎结果页面的标题
3. 添加书签时，默认的标题

所谓文档标题，就是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快速查看搜索界面网页源代码，可以看到这一段代码：

<title>CSDN - 专业开发者社区</title>

这里也就是我们说的网页标题。 

<meta name="keywords" content="CSDN博客,CSDN学院,CSDN论坛,CSDN直播">

content中的内容，就是我们得以搜索到CSDN网页的关键词。

下一段代码是：

<meta name="description" content="CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.">

content中的内容，就是我们此前看到的灰色小字，即网页内容的描述，类似简介。

下一段代码是：

<meta http-equiv="content-type" content="text/html;charset=utf-8">

 响应头里定义了网页的内容文本类型，并规定了对应的编码类型（utf-8）。

下一段代码是：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

像CSDN这里并没有指定宽和高，则initial-scale会让视图默认铺满屏幕，适应理想窗口大小。

关于理想窗口大小，这里就不拓展了，感兴趣的可以自己搜搜看。

最后的minimal-ui是一种UI设计的框架，暂时不做拓展。它是应用在移动端APP上的，让界面UI更加美观。

接着看下面一行代码：

<meta name="referrer" content="always">

比如，如果我们在博客里点击任意链接，那么设置了该字段的网站就会为服务器提示页面的地址信息等。

中间跳过一些JS的内容，来看到下面这行代码：

<link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico" type="image/x-icon">

还记得网页的标题吗？这里表示的是标题边上的小图标。

其他标签

以下标签暂时只做了解，对于其中的某些标签，在学习到对应阶段的时候会说的，目前不需要了解那么透彻。

base标签

该标签的作用是为页面上的所有链接规定的默认地址或默认目标。

一个HTML中最多使用一个<base>标签，当用多个<base>标签定义了超文本引用路径时，默认使用第一个base中的路径。

比如下面这个锚链接，实现打开我的头像的效果。常规的代码如下：

<a href="https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1">H2O2的头</a>

现在，有了base标签，base标签中指定的默认路径如下：

<base href="https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1">

那么，即使我们的锚链接的href中不指定url，也可以实现相同的打开效果。即下面这样：

<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代码：

<noscript>
        <h1>不弹窗了，弹不了一点</h1>
    </noscript>

然后就可以在浏览器中看到，原本的弹窗行为不见了，取而代之的是noscript中的内容：

*设置试完记得改回来！！！* 

预告和回顾

HTML入门阶段的博客点赞、收藏和阅读量都比较可观，这一点还是很不错的，这将是我不断更新的动力源泉。

不过HTML进阶篇的更新可能比较随性了，最近在更新CSS入门系列的博客。

对HTML基础掌握不熟悉的朋友，也可以看看我已经完结的HTML入门系列文章，希望能对你有所帮助：

专栏 | HTML入门http://t.csdnimg.cn/It2Ww

后话

在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

==期待与你在下一期博客中再次相遇==

——勉强还有点氧气的【H2O2】