第三章:文档头部
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>
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>
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>
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>
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>
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>