02-head标签

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

猜你喜欢

转载自www.cnblogs.com/897463196-a/p/11434285.html
今日推荐