HTML head 标签

本页内容
上一节: HTML_Javascript 下一节: HTML_网页布局

<head> 元素是所有头部元素的容器。

<head> 元素必须包含文档的标题(title),可以包含脚本、样式、meta 信息 以及其他更多的信息。

下面我们看看head标签内的元素。

HTML <title> 元素

该<title>元素定义文档的标题。标题必须是纯文本的,并且显示在浏览器的标题栏或页面的选项卡中。

HTML 文档中需要该<title>元素!

页面标题的内容对于搜索引擎优化 (SEO) 非常重要!搜索引擎算法将页面的标题作为了结果排序相关性的主要影响因素。

  • 在浏览器工具栏中定义标题
  • 为页面添加到收藏夹时提供标题
  • 在搜索引擎结果中显示页面的标题


示例

<!DOCTYPE html>
<html>
<head>
  <title>有意义的页面标题</title>
</head>
<body>
文档的内容。。。。。。
</body>
</html>

HTML <style> 元素

<style>元素用于定义当前 HTML 页面的样式信息:


示例

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

HTML <link> 元素

<link>元素定义了当前文档和外部资源之间的关系。

<link> 标签最常用于链接到外部样式表:

示例

<link rel="stylesheet" href="/third/demo/mystyle.css">


HTML <meta> 元素

<meta>元素通常用于指定字符集、页面描述、关键字、文档作者和视口设置。

元数据不会显示在页面上,但会被浏览器(如何显示内容或重新加载页面)、搜索引擎(关键字)和其他 Web 服务等使用。

Meta 例子

示例

定义使用的字符集, 建议大家在HTML文件中都加上这一句:

<meta charset="UTF-8">

示例

为搜索引擎定义关键字:

<meta name="keywords" content="HTML, CSS, JavaScript">

示例

定义您的网页的描述:

<meta name="description" content="免费网络教程">

示例

定义页面的作者:

<meta name="author" content="xiaobai.wang">

示例

每 30 秒刷新一次文档:

<meta http-equiv="refresh" content="30">

示例

设置视口以使您的网站在所有设备上看起来都不错:

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


示例

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

设置 viewport

viewport 是网页的用户可见区域。它因设备而异在手机上会比在电脑屏幕上小。

您应该在所有网页<meta>中包含以下元素:

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

这为浏览器提供了有关如何控制页面尺寸和缩放的说明。

width=device-width部分设置页面的宽度以跟随设备的屏幕宽度(这将因设备而异)。

initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。

这是一个没有viewport meta标记的网页示例,以及具有视口元标记的同一网页:

上一节: HTML_Javascript 下一节: HTML_网页布局
此页面最后编辑于2022年8月13日 (星期六) 17:10。