HTML <head>元素

head 元素包含了 所有头部标签元素。

可以在头部标签添加的元素包括:<title>、<style>、<link>、<script>、<noscript>、<base>、<script>

 

HTML <title>元素

  title 标签定义了不同文档的标题

  title 标签的内容作为搜索结果的超链接上面的文字显示

  title 标签的作用:定义浏览器工具栏的标题;当网页添加到收藏夹时,显示在收藏夹中的标题;显示在搜索引擎结果。

注意:title 在HTML/XHTML 文档中是必须要求的。

<title> document </title>

 

HTML <meta> 元素

meta 标签主要用于设置网页中的一些元数据(元数据不是给用户看的,而是给浏览器看的)

元数据通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以用于浏览器(如何显示内容或尝新加载页面),搜索引擎(关键词),或是Web服务

  charset,即将对网页使用的字符集做出声明

  name,这是一个文档级元数据,将附着在整个页面上

  http-equiv,这是一个编译指令,即服务器提供的来指示页面应该如何加载

  itemprop,将定义一个用户自定义的元数据

meta 的属性

1、charset  指定网页字符集(但是该声明可以被任何一个元素的 lang特性的值覆盖)

文档编码一定要文件原本编码相同,否则就会出现乱码。鼓励使用UTF-8字符集

    <meta charset="UTF-8">

2、content  指定的数据的内容(这个属性包含http-equiv 或 name 属性的值,具体取决于所使用的值。)

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

3、name  指定数据的名称(全局属性)

  keywords【关键字】

表示网站的关键字,可以同时使用多个关键字,关键字之间使用逗号隔开;

<meta name='Keywords' content='网上购物,网上商城,手机,笔记本,电脑'>

  discription 【描述】

用于指定网站的描述,网站的描述会显示在搜索引擎的搜素结果中

<meta name='discription' content='京东JD.COM-专业的综合网上购物商城'>

  author【作者名】

<meta name="author" content="jojo">

  generator【标识符】

包含生成页面的软件的标识符

<meta name='copyright' content='nyw'>

referer【请求】所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容
    
4、http-equiv  这个枚举属性定义了能够改变服务器和用户引擎行为的编译。这个编译直接使用 content 来定义

  refresh【刷新】

【定时跳转】

  如果 content 只包含一个正整数,则是重新载入页面的时间间隔(秒)

<meta http-equiv='refresh' content='3'>

 【重定向】

    如果 content 包含一个正整数并且跟着一个字符串,则是重定向到指定的连接所用的时间间隔(秒)

<meta http-equiv='refresh' content='3;url=https://www.baidu.com'>

   Expires【缓存过期时间】

可以用于设定网页到期时间,一旦过期必须到服务器上重新调用。需要注意的是必须使用的是 GMT时间格式

<meta http-equiv="Expires" Content="0">
<meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800">

  pragma【禁止缓存】

用于禁止浏览器从本地机的缓存中查阅页面内容,用户脱机无法浏览

<meta http-equiv="Pragma" Content="No-cach">

  windows-Target【独立页面】

强制页面在当前页面以独立页面显示,可以防止自己的页面被当别人当做一个 frame页调用

<meta http-equiv="windows-Target" content="_top">

  robots【机器人】

为搜索引擎抓取机器人准备一些信息,禁止搜索引擎缓存和跟踪网页

<meta name="robots" content="noindex,nofollow">
<!-- name定义的是机器人,内容部分表示不要被搜索引擎缓存,也不要被搜索引擎跟踪 -->

default-style:指定了在页面上使用的首选样式表。content 属性必须包含 <link> 元素的标题,href属性链接到CSS样式或是包含CSS样式表的<style>元素的标题

HTML base元素

base:指定网页跳转基准URL,如果不指定的话默认为当前网站的当前路径。

写法:<base href="http://www.aaa.zzz/">

base属性值:

  • href  指定网页跳转到基准URL,如果不指定的话则默认为当前网站的当前路径。
<base href="http://baidu.com/"> 
<!-- 这是将页面跳转到百度的网站打开 -->
  • target  指定链接的跳转帧如果不指定的话,则是在当前页面中跳转。
<base target="_blank"> 
<!-- 网页中的链接都应该在新的窗口中打开 -->

terget属性值:(指定页面跳转的位置)

  • _blank  在新窗口中打开被链接的文档
  • _self   默认值,在相同框架中打开被链接的文档
  • _parent   在父框架集中
  • _top   在整个窗口中打开被链接文档·
  • framename   在指定框架中打开被链接文档

 

HTML link 标签

link标记:链接外部文件时使用的标记,可以把外部文件的内容引入到当前文件中来,使当前网页实现更多的功能。

具有属性  href、rel、media、hreflang、type和sizes。

【 href 】指定链接外部路径的路径和文件名,要设置全路径并且带文件名(绝对URL)

【 rel 】引用文件,引用资源的类型定义。我们在使用 linkb标签引用外部文件时,外部文件的类型是多种多样的

tag   创建应用于当前文档的标签

help  帮助文件的链接

prev   如果是连续网页

next  如果是连续网页的时候,指定下一个网页

icon  网页的图标,新的size属性和这属性相结合使用,指定链接图片的宽高

author   网页的作者

search   链接到可以用于搜索当前页面和相关页面的资源

license   链接到当前文档的版权声明

sidebar   链接到可以作为附属上下文的文档

prefetch   把链接外部资源时提前缓存起来,需要链接的目标文件。

alternate   代替文档(种子,其他语言版本,其他格式等等)

pingback   处理当前文档被引用情况的服务器地址

stylesheet   引入样式表

【media】链接文件或是资源属于哪一种资源

tv   电视

all   所有

tty   终端

print   打印的页面

aural   语音合成器

braille  盲文设备

screen   计算机屏幕

handheld   手持设备

projection  投影仪

【hreflang链接文件的语言种类

【type】链接文件的mi/me类型(比如说,图片图标文本)

【sizes】根据 link链接文件的类型,来指定文件的大小

链接网页图标:

网站的图标指定,可以显示在浏览器的图标栏,也可以被手机读取作为网站的图标存入收藏夹
1 <!-- 网站的图标指定,可以显示在浏览器的图标栏,也可以被手机读取作为网站的图标存入收藏夹 -->
2     <link rel="icon">
3     <!-- 示例 -->
4     <link rel="icon" href="img/favicon.png" type="image/png">
5     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
6     <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">

注意:后面的href和前面type标注的类型要一致,这样既可以显示在浏览器,又可以显示在手机上

链接外部样式单

1 <link rel="stylesheet">
2     <link rel="stylesheet" href="style1.css" media="screen">
3     <link rel="stylesheet" href="style2.css" title="主题样式文件">
4     <link rel=" alternate stylesheet" href="style3.css" title="可选样式单">

说明:

alternate 会在浏览器中会弹出一个对话框,供用户可以进行选择

media  表示媒体类型为屏幕,可以是手机,但不包括打印机和投影仪

title  对这个link进行简单的说明

网站RSS种子指定

<!-- 网站RSS种子指定 -->
    <link rel="alternate" type="application/rss+xml">

为搜索引擎的准备的网页的URL

<!-- 为搜索引擎的准备的网页的URL -->
    <link rel="canonical">
    <link rel="canonical" href="http://www.aaa.zzz/help.html">

告诉搜索引擎代替URL是哪里。

 

HTML style 标签

style 标签定义 HTML 文档的样式信息

如果要使用外部样式表需要使用 link 标签

开始和结束 style 标签中的样式称为 文档样式表(document style sheet) ,还可以使用@import指令 包含多个外部样式表链接

style 元素属性:

【type】

该属性以MIME类型(不应该指定字符集)定义样式语言。如果该属性未指定,则默认为 text/css

<style type="text/css"></style>

【media】

规定该样式适用于哪个媒体,默认值是all

【title】

指定可选的样式表。

【scoped】范围

如果该属性存在,则样式应用于其父元素;如果不存在,则应用于整个文档

实例:

<article>
    <div>scoped属性允许您在文档中间包含样式元素。内部规则仅适用于父元素。</div>
    <p>此文本应为黑色。如果它是红色的,则表示浏览器不支持作用域属性。</p>
    <section>
          <style scoped>
            p { color: red; }
          </style>
        <p>这里应该是红色</p>
    </section>
</article>

 

HTML script 标签

使用<script> 元素在HTML元素中插入JavaScript。

在HTML5 中 <script>定义了六个属性

【async】异步

  可选,表示应该立即下载脚本,但是不应该妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本,只对外部脚本文件有用。

<script type="text/javascript" src="demo.js" defer='defer'></script>

【charset】字符集

  可选,表示通过 src 属性指定的代码的字符集。

【defer】延迟

  可选,表示脚本可以延迟到文档完全解析和显示之后再执行。只对外部脚本文件有效

注意:在H5中 defer 属性只适用于外部脚本文件

<script type="text/javascript" src="demo.js" defer='defer'></script>

【src】

  可选,表示包含要执行代码的外部文件

<script type="text/javascript" src="demo.js">  </script>

【type】

  必选,表示编写代码使用的脚本语言的内容类型(type=‘text/javascript’)

【ecmascript】

  目前 type 属性值依旧还是 text/javascript

 

HTML <noscript> 标签

<noscript> 标签是为了处理当浏览器不支持JavaScript 时如何让页面平稳的退化。

使用 <noscript> 用以在不支持 JavaScript 的浏览器中显示替代的内容。

这个元素可以包含能够出现在文档 body 中的任何HTML 元素(script 元素除外)

包含在 noscript 中的内容只有在以下情况之下才会显示:

  1、浏览器不支持脚本;

  2、浏览器支持脚本但是脚本被禁用;

 


 

参考资料:

https://www.cnblogs.com/nyw1983/p/11485899.html

https://www.cnblogs.com/xiaohuochai/p/6214015.html

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style

 

posted on 2020-03-08 22:13  Cloud%  阅读(1133)  评论(0编辑  收藏  举报