HTML头部

  HTML的文档首行需要标注文档定义声明,随后就是定义整个HTML文档的 <html> 标签,在 <html> 标签中包括了 <head> 和 <body> 两个元素。<body>  元素定义了HTML文档的主体,页面中所有的可见内容都是通过 <body> 中的其他元素来表现。<head> 中的内容对于用户来说并不总是可见,head主要用于定义文档的信息,便于其他的程序、爬虫等访问获取。

  头部具体的信息需要一些特殊的标签来描述:

  • title

  这里的title指的是 <title></title> 标签,最直观的是用于定义网页的标题,也就是显示的名称。如图:

  实质上title标签中的内容会应用于浏览器工具栏的标题(如上)、网页添加收藏加后显示的标题 以及 显示在搜索引擎结果页面的标题。

  严格规定的HTML文档必须包含有title,但是如果不写的话,浏览器将会显示html文件完整的文件名。

  • base

  base标签描述了基本的链接地址也就是说页面中所有请求的资源(表单、图片、脚本、CSS等)都会默认访问base标签中定义的地址。使用base标签必须配置href属性,target属性为可选属性。

<base href="www.luanqibazao.com/test/" target="_blank">
  • meta

  meta标签提供了一些基本的元数据(也就是描述数据信息的数据),元数据不会显示在页面上,但能够被浏览器解析。meta标签主要用于指定网页的描述,每条信息都必须使用单独的一条meta标签来表示,关键字,文件最后的修改时间,作者等。关于meta标签最眼熟的用法应该是:

<meta charset="UTF-8">  // 规定html文档的字符编码

  但实际上,在旧版本中字符编码的表达方式为:

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  //等同于上面的代码

  meta标签的属性包括:必需的 content ,可选的 name、http-equiv 和 scheme。content为name和http-equiv属性的详细元信息,具体用法如下。

  http-equiv 的属性值可以为:content-type、expires、refresh、set-cookie等,该属性的作用是将content属性关联到 HTTP 头部。

  content-type 设定页面使用的字符集。如上所示。

  expires设定网页的到期时间,网页到期就必须到服务器上重新传输(使用GTM时间格式)。

    <meta http-equiv="expires" content="Tue, 20 Feb 2018 18:18:18 GMT">

  pragma设定后可以禁止浏览器从本地计算机的缓存中访问页面内容。

<meta http-equiv="pragma" content="no-cache">  // 禁止

  refresh自动刷新并跳转页面,需要标明等待时间和跳转地址。

    <meta http-equiv="refresh" content="2;URL=http://www.luanqibazao.com">        //2秒后页面自动跳转到URL对应的地址

  set-cookie用于设置cookie,可以设置cookie的保存时间。

<meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Tue, 20 Feb 2018 18:18:18 GMT; path=/">    //分别设置cookie的内容,保存时间和路径

  window-target强制页面在当前的窗口以独立的页面显示,可以用于阻止他人在框架内调用本页面。

<meta http-equiv="window-target" content="_top">

   pics-label为网页的等级评定。

  page-enter 和 page-exit 用来设定进入和离开页面时的特殊效果。

 <meta http-equiv="page-enter" content="revealTrans(duration=1.0,transtion=0)">
  <meta http-equiv="page-exit" content="revealTrans(duration=1.0,transtion=0)">

  其中 duration 表示网页动态效果的过渡时间,transition就是过渡的效果,其值为0-23,分别代表:

  当然与 http 头部相关的设置还有许多,就不在一一例举。

  name也是meta常用到的属性,其属性值有author、description、keywords、generater、revised、others。这些属性对应的内容写在content中,并且根据需求自定义,如 keywords 属性对应的相关内容,就能够被搜索引擎抓取。

<meta name="keywords" content="html, css, javascript">

  scheme要与head标签中profile属性对应设置,指定翻译属性值的方案。

  • link 

  该标签定义了文档与外部资源的关系,比如通常应用于外部样式表:

  <link rel="stylesheet" href="./main.css">

  主要属性就为rel 和 href 。rel 指定了两个联系文档之间的关系,常用值就是stylesheet,表示样式表,而 href 属性指定关联文件的地址。

  • style

  定义HTML内部样式,属性有 type, 属性值为 text/css 。通过设置media规定媒体类型。

    <style type="text/css" media="screen">  //media的值还可以为print,tv 等
        
    </style>
  • script

  该标签用于定义脚本,如JavaScript,内容可以通过src指向外部,也可写在标签内。虽然该标签可写在head中,但是更加习惯的写法是将脚本在body 的结束标签之前引入。

   type的值可以有 text/javascript、application/ecmascript、text/vbscript等

    <script type="text/javascript">
        
    </script>
  • noscript

  noscript是在设备不支持脚本的时候可以显示的文本。将noscript标签写在注释中,如果 script 中的脚本无法执行,就算注释也会执行 noscript 中的文本。

<noscript>Your browser does not support JavaScript!</noscript>
原文地址:https://www.cnblogs.com/zzmiaow/p/8455980.html