HTML head 标签
<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标记的网页示例,以及具有视口元标记的同一网页: