html之head标签

2018-06-24 02:16:04来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 


本文内容:

  • head标签
    • 介绍
    • 常用子标签
      • meta
      • title
      • link
      • style
      • script

 

 

首发时间:2018-02-12

修改:

  1. 2018-04-24:修改了标题名称,重新排版了内容,使得更结构清晰化

head:

  • head标签是html中的头部分,<head></head>这2个标记符分别表示头部信息的开始和结尾。
  • 头部中包含了页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果(类似于一个人的姓名并不影响他的样貌)
  • 头部中最常用的标记符是标题标记符和meta标记符,
    • 其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,网页标题可被浏览器用作书签和收藏清单。

 

常用子标签:

  • <meta />标签:

    • 功能:提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
    • 属性content:meta有一个必须的属性content,content负责与其他属性的配合
    • 属性:name
      • name可以等于一个值,比如keywords,当name=”keywords”时代表网页的关键字【关键字用于搜索引擎,便于搜索】,content中的内容会作为关键字内容
      • name可以等于的值常见的有: 【所以可以得知meta可以有多个】
        • author -- 用于定义网页作者 ,content中的内容会作为对应的作者内容
        • description --代表网站描述 ,content中的内容会作为对应的网站描述内容
          • image_thumb4
        • keywords --代表网页关键字,content中的内容会作为关键字内容
    • 属性charset:设置网页的字符集
      •   一般依据html的版本来生成,html5中是这样的

         

 

    • 属性:http-equiv
      • http-equiv可以等于一个值
      • 常见的值有以下几个:
        • refresh --刷新网页,content中的内容决定着刷新时间,或者跳转到另外一个网页 【使用例子可以参照下面的】image_thumb5

 

 

  • <title></title>: 设置文档的标题

    • image_thumb6image_thumb7

 

 

  • <link>: 标签

    • 功能:定义文档与外部资源的关系,我们可以利用link来导入其他地方的css或js
    • 属性rel:决定导入的文件的功能,
      • shorcut icon可以用来导入图标
      • stylesheet可以用来导入样式表
      • 。。。其他

image_thumb8

    • 属性href:决定导入的文件的路径
    • 属性type:决定导入文件的类型
      • 最常见的值是text/css

 

 

  • <style>: 标签

    • 功能:用于为 HTML 文档定义样式信息
    • type 属性指示 <style> 与 </style> 标签之间的内容。值 "text/css" 指示内容是标准的 CSS。
    • image

 

  • <script> 标签

    • 功能:用于定义客户端脚本,比如 JavaScript。
    • 属性type:它的值规定了外部脚本的类型
      • 常见的值有:text/javascript
    • 属性src:他的值规定了外部脚本的地址。
    • 属性charset:规定了在外部脚步中使用的字符编码
    • image

 

  • <base>标签:

    • 功能:同一设置链接的跳转方式(默认情况下打开超链接是以_self打开的,即在覆盖本窗口)

    • 属性target:设置链接的跳转方式

      • _self:在当前窗口打开

      • _blank:在新窗口打开

      • ...其他

    • 属性href:配置链接的基准url 【可选的属性】

      • image

 


标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:网页设计学习笔记(1)

下一篇:论overflow滚动的重要性