head中的标签不会展示在浏览器上,他会将页面的一些额外信息告诉服务器。head标签中包含如下标签:
<title>
:指定整个网页的标题,在浏览器最上方显示
<meta>
:提供有关页面的基本信息
<link>
:定义文档与外部资源的关系
<style>:定义内部样式表与网页的关系
1、title标签
告诉用户和搜索引擎这个网页的标题,让用户快速判断页面所要表达的主题。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 </head> 7 <body> 8 9 10 11 </body> 12 </html>
2、meta标签
meta标签有两个属性,分别是http-equiv和name属性,不同的属性对应不同的参数值,不同的参数值实现了不同的网页功能。
http-equiv属性:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流浪者</title> <!-- 重定向 --> <<meta http-equiv="refresh" content="3;URL=http://www.baidu.com" /> <!-- 指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- 告诉IE浏览器以最高模式渲染页面 --> <meta http-equiv="x-ua-compatible" content="IE-edge" /> </head> <body> </body> </html>
name属性:
主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流浪者</title> <!-- 关键字 --> <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" /> <!-- 网页描述信息 --> <meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
<!-- 支持移动端 -->
<meta name=viewport content="width=device-width, initial-scale=1">
</head> <body> </body> </html>
效果如下:
3、link标签
link标签用于链接外部资源,他可以设置网页标题上方所对应的icon图标,也可导入css代码。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <!-- 引入网页标题图标 --> 7 <link rel="shortcut icon" href="C:\Users\23694\Desktop\新建文件夹\会员 1.png"> 8 <!-- 引入css,修饰标签 --> 9 <link rel="stylesheet" type="text/css" href="C:\Users\23694\PycharmProjects\老男孩python全栈开发15期\1-40\s15day36\课上代码\day36\index.css"> 10 </head> 11 <body> 12 13 14 15 </body> 16 </html>
4、style标签
style标签是对HTML文档结构进行美化的。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 h2{ 8 color: blue; 9 } 10 </style> 11 </head> 12 <body> 13 14 15 16 </body> 17 </html>
作者:流浪者
日期:2019-08-30