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