第三章:文档头部

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我要自学网</title>
 6     </head>
 7     
 8     <body>
 9         head:
10             1.文档头部中的内容看不见
11             2.标题,图标,元信息,文档样式,定义脚本...
12             3.文档头部作用于整篇文档
13         title:
14             定义浏览器标题栏里显示的文档标题
15             
16     </body>
17     
18 </html>
3-1 文档头部浅解
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我要自学网</title>
 6         <link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
 7     </head>
 8     <body>
 9         link:引入外部文件
10         rel :定义当前文档与被链接文档间的关系
11         type:定义被链接文档的mime类型
12         href:定义被链接文档的路径
13         
14         标题栏图标设置
15             1.网站根目录下放一个名称:favicon.ico图片文件。浏览器会自动显示在标题栏中。
16             2.使用ico图标作为标题栏图标
17             <!--<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>-->
18             
19             
20     </body>
21 </html>
3-2 标题栏图标1
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我要自学网</title>
 6         <!--<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>-->
 7         <!--<link rel="icon" type="image/jpeg" href="img/favicon.jpg"/>-->
 8         <!--<link rel="icon" type="image/png" href="img/favicon.png"/>-->
 9         <link rel="icon" type="image/jpg" href="img/favicon.jpg"/>
10     </head>
11     <body>
12         link:引入外部文件
13         rel :定义当前文档与被链接文档间的关系
14         type:定义被链接文档的mime类型
15         href:定义被链接文档的路径
16         
17         标题栏图标设置:16X16像素
18             1.网站根目录下放一个名称:favicon.ico图片文件。浏览器会自动显示在标题栏中。
19             2.使用ico图标作为标题栏图标
20             可以用工具生成ico图标
21             <!--<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>-->
22             3.使用jpg格式的图片作为标题栏图标
23             <!--<link rel="icon" type="image/jpeg" href="img/favicon.jpg"/>-->
24             4.使用png格式的图片作为标题栏图标
25             <link rel="icon" type="image/png" href="img/favicon.png"/>
26             5.使用gif格式的图片作为标题栏图标
27     </body>
28 </html>
3-3 标题栏图标2
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我要自学网</title>
 6         <meta name="keywords" content="我要自学网,自学HTML,自学CSS"/>
 7         <meta name="description" content="要设置的描述内容,建议不超过100字"/>
 8     </head>
 9     <body>
10         关键字和描述:
11             1.关键字和描述不是给人看,是用于供搜索引擎使用
12             2.关键字和描述是网页优化很重要的部分
13         
14         关键字设置:
15         meta标签
16         name="keywords"
17         content="要设置的关键字,可以使用多个,建议不超过5个。多个关键字用英文状态的“,”分隔。"
18         
19         描述设置:
20         meta标签
21         name="description"
22         content="要设置的描述内容,建议不超过100字"
23         
24     </body>
25 </html>
3-4 关键字和描述
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>页面跳转</title>
 6         <meta http-equiv="refresh" content="5;url=https://www.xxxx.xxx"/>
 7         <!--<meta http-equiv="refresh" content="2"/>-->
 8     </head>
 9     <body>
10         
11         5秒后执行跳转
12         <!--页面自动跳转语法:-->
13         <!--<meta http-equiv="refresh" content="多少秒后执行跳转;url=要跳转的地址"/>-->
14         
15         <!--页面自动刷新语法:-->
16         <!--<meta http-equiv="refresh" content="多少秒后执行跳转"/>-->
17     </body>
18 </html>
3-5 页面跳转
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>定义样式和引入样式</title>
 6         <style type="text/css">
 7             body{
 8                 font-size: 40px;
 9             }
10         </style>
11         <link rel="stylesheet" type="text/css" href="3-6.css"/>
12     </head>
13     <body>
14         
15         我要自学网
16         
17         <!--设置样式语法:-->
18         <!--<style type="text/css">
19             css样式内容
20         </style>-->
21         
22         <!--引入样式文件语法(用得最多):-->
23         <!--<link rel="stylesheet" type="text/css" href="文件路径"/>-->
24     </body>
25 </html>
3-6 定义样式和引入样式

 

posted @ 2020-08-06 06:41  菜逼学飞  阅读(76)  评论(0编辑  收藏  举报