day14-HTML的Head内标签

一、药引子

　　之前我们将HTML比作一个裸体人，有很多标签，有<head></head> ,<body></body>等等。。。在head标签里面除了titile之外，所有的标签都不能看到。下面来学习一下 head 里的一些标签

二、head内标签

2.1 Meta

作用：提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键字

2.1.1、页面编码(告诉浏览器是什么编码)

1
2
3
<meta charset="UTF-8">  #pycharm的写法，一般默认这个就可以了
 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> #第二种写法

2.1.2、刷新和跳转

1
2
<meta http-equiv="Refresh" Content="3">  #网站每3秒刷新一次
<meta http-equiv="Refresh" Content="3; Url=http://www.oldboyedu.com" /> #网站过三秒跳转到另外一个网页

2.1.3、关键字

 说明：在百度网上搜到什么关键字，做搜素引擎的，关键字搜索

1
<meta name="keywords" content="帅高，高先生，高sir，小高" >

2.1.4、描述

说明：描述你的网站是干嘛的

1
<meta name="description" content="此网站主要是宣传高哥哥是宇宙第一大帅哥。" />

2.1.5、X-UA-Compatible

微软的IE6是通过XP、win2003等操作系统发布出来，作为占统治地位的桌面系统，也使得IE占据了统治地位，许多网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码调整后，才能够正常运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准都抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在IE版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版的错误、文字重叠、显示不全等各种兼容性错误。

与任何早期浏览器版本相比，IE8对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，IE8 引入了文档兼容性的概念，从而允许您指定站点所有支持IE的版本。文档兼容性在IE8中添加新的模式，这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在IE8中无法中无法正确的显示，则可以更新改站点以支持最新的WEB的标准(首选方式)，也可以强制IE8按照就版本的浏览器中查看站点方式来显示内容。通过使用meta 元素将X-UA-Compatible 标头添加到网页中，可以实现这一点。

当IE8 遇到未包含X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示网页。如果该指令丢失或未指定基于标准的文档类型，则IE8将以IE5模式（Quicks模式）显示该网页。

1
<meta http-equiv="X-UA-COMPATIBLE" content="IE=IE9;IE=IE8" /> #按照这种方式先找IE9，再找IE8...

 

2.2、Title

网页的头部信息

1 <html>
2 <head lang="en">
3     <meta charset="UTF-8">
4     <title>我老牛逼啦</title>
5 </head>
6 <body>

 

　　

2.3、link

2.3.1 导入CSS 样式

作用：用于加载CSS样式，   CSS可以单独编写在一个文件中，方便多个html 文件引用，就像python 导入模块一样，link  类似 import

1 <link rel="stylesheet" herf="css路径" />

 

 

2.3.2  icon

作用：在标题前加图标，这边要强调的是，添加的图片的位置image文件夹要跟index.html在同一层目录下。

1 <link rel="shortcut icon" href="timg.jpg">

 

2.4 style

作用：编写CSS 样式，

例子：添加一个背景颜色

<head lang="en">
    <meta charset="UTF-8">
    <title>我老牛逼啦</title>
    <link rel="shortcut icon" href="timg.jpg">
    <style>
        .c1{
            background-color: aquamarine;
        }
    </style>
</head>

<body>

<!--标题字体由大到小，加大，加粗，-->
<h1 class="c1">niubi</h1>
</body>

 

 

2.5 script

2.5.1、引进js文件

1
<script type="text/javascript" src="http://www.baidu.com/tag/js/gpt.js"></script>

2.5.2、写js代码

1
<script type="text/javascript">....js代码</script>

 

 ps:一般会写在  <body>   </body> 里面的 尾部。这样当从网上导入javascript 代码时，当导入的代码，网址，路径有问题不会影响到页面显示。

 

posted @ 2018-05-16 13:29  东郭仔  阅读(105)  评论(0)    收藏  举报