小白教程
所有教程
关于
Search
172.70.178.24
172.70.178.24
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML head 标签”的源代码
本页内容
上一节:
HTML_Javascript
下一节:
HTML_网页布局
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|33]] <nowiki><head></nowiki> 元素是所有头部元素的容器。 <nowiki><head></nowiki> 元素必须包含文档的标题(title),可以包含脚本、样式、meta 信息 以及其他更多的信息。 下面我们看看head标签内的元素。 == HTML <nowiki><title></nowiki> 元素 == 该<nowiki><title></nowiki>元素定义文档的标题。标题必须是纯文本的,并且显示在浏览器的标题栏或页面的选项卡中。 HTML 文档中需要该<nowiki><title></nowiki>元素! 页面标题的内容对于搜索引擎优化 (SEO) 非常重要!搜索引擎算法将页面的标题作为了结果排序相关性的主要影响因素。 * 在浏览器工具栏中定义标题 * 为页面添加到收藏夹时提供标题 * 在搜索引擎结果中显示页面的标题 <sample title="" desc=""> <!DOCTYPE html> <html> <head> <title>有意义的页面标题</title> </head> <body> 文档的内容。。。。。。 </body> </html> </sample> == HTML <nowiki><style></nowiki> 元素 == <nowiki><style></nowiki>元素用于定义当前 HTML 页面的样式信息: <sample title="" desc="" run="r1"> <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> </sample> <run name="r1"> <!DOCTYPE html> <html> <head> <title>页面标题</title> <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> </head> <body> <h1>这是一个标题</h1> <p>这是段落。</p> <p>主体元素的内容将显示在浏览器窗口中.</p> <p>标题元素的内容显示在浏览器选项卡、收藏夹和搜索引擎结果中。</p> </body> </html> </run> == HTML <nowiki><link></nowiki> 元素 == <nowiki><link></nowiki>元素定义了当前文档和外部资源之间的关系。 <nowiki><link></nowiki> 标签最常用于链接到外部样式表: <sample title="" desc="" run="link"> <link rel="stylesheet" href="/third/demo/mystyle.css"> </sample> <run name="link"> <!DOCTYPE html> <html> <head> <title>页面标题</title> <link rel="stylesheet" href="/third/demo/mystyle.css"> </head> <body> <h1>这是一个标题</h1> <p> 这是段落</p> </body> </html> </run> == HTML <nowiki><meta></nowiki> 元素 == <nowiki><meta></nowiki>元素通常用于指定字符集、页面描述、关键字、文档作者和视口设置。 元数据不会显示在页面上,但会被浏览器(如何显示内容或重新加载页面)、搜索引擎(关键字)和其他 Web 服务等使用。 === Meta 例子 === <sample title="" desc="定义使用的字符集, 建议大家在HTML文件中都加上这一句:"> <meta charset="UTF-8"> </sample> <sample title="" desc="为搜索引擎定义关键字:"> <meta name="keywords" content="HTML, CSS, JavaScript"> </sample> <sample title="" desc="定义您的网页的描述:" > <meta name="description" content="免费网络教程"> </sample> <sample title="" desc="定义页面的作者:"> <meta name="author" content="xiaobai.wang"> </sample> <sample title="" desc="每 30 秒刷新一次文档:" > <meta http-equiv="refresh" content="30"> </sample> <sample title="" desc="设置视口以使您的网站在所有设备上看起来都不错:"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </sample> <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标记的网页示例,以及具有视口元标记的同一网页:
返回至“
HTML head 标签
”。
上一节:
HTML_Javascript
下一节:
HTML_网页布局