“HTML head 标签”的版本间差异
(→例子) |
无编辑摘要 |
||
(未显示同一用户的4个中间版本) | |||
第1行: | 第1行: | ||
[[Category:HTML教程|33]] | |||
<nowiki><head></nowiki> 元素是所有头部元素的容器。 | <nowiki><head></nowiki> 元素是所有头部元素的容器。 | ||
第116行: | 第117行: | ||
</sample> | </sample> | ||
<nowiki><meta></nowiki> | <sample title="" desc="" run="meta"> | ||
<meta charset="UTF-8"> | |||
<meta name="description" content="Free Web tutorials"> | |||
<meta name="keywords" content="HTML, CSS, JavaScript"> | |||
<meta name="author" content="John Doe"> | |||
</sample> | |||
<run name="meta"> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<meta name="description" content="免费网络教程"> | |||
<meta name="keywords" content="HTML, CSS, JavaScript"> | |||
<meta name="author" content="xiaobai.wang"> | |||
</head> | |||
<body> | |||
<p>所有meta信息都在头部区域内.不会在页面展示</p> | |||
</body> | |||
</html> | |||
</run> | |||
== 设置 viewport == | |||
viewport 是网页的用户可见区域。它因设备而异在手机上会比在电脑屏幕上小。 | |||
您应该在所有网页<nowiki><meta></nowiki>中包含以下元素: | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
这为浏览器提供了有关如何控制页面尺寸和缩放的说明。 | |||
width=device-width部分设置页面的宽度以跟随设备的屏幕宽度(这将因设备而异)。 | |||
initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。 | |||
这是一个没有viewport meta标记的网页示例,以及具有视口元标记的同一网页: |
2022年8月13日 (六) 17:10的最新版本
<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标记的网页示例,以及具有视口元标记的同一网页: