你绝对不知道的head标签
先来梳理一下本文的目录结构
现在我将详解head标签和它六个子标签的属性和作用,请耐心看完,会有很大的收获哦!
一、head标签
可选属性:
属性 | 值 | 描述 |
---|---|---|
profile | URL | 一个由空格分隔的 URL 列表,这些 URL 包含着有关页面的元数据信息。 |
说明:
·文档的头部经常会包含一些 meta 标签,用来告诉浏览器关于文档的附加信息。在将来,创作者可能会利用预先定义好的标准文档的元数据配置文件(metadata profile),以便更好地描述它们的文档。profile 属性提供了与当前文档相关联的配置文件的 URL。
·配置文件的格式以及浏览器使用它们的方式都还没有进行定义,这个属性主要是为将来的开发而保留的占位符。
二、title标签
可选属性
属性 | 值 | 描述 |
---|---|---|
dir |
|
规定元素中内容的文本方向。 |
lang | language_code | 规定元素中内容的语言代码。 |
xml:lang | language_code | 规定 XHTML 文档中元素内容的语言代码。 |
说明:
·用于定义浏览器工具栏的标题
·用于提供页面被添加到收藏夹时显示的标题
·用于显示在搜索引擎结果中的页面标题
·title 标签是 head 标签中唯一要求包含的东西。
三、base标签
该标签为页面上的所有链接规定默认地址或默认目标
必选属性:
属性 | 值 | 描述 |
---|---|---|
href |
URL | 规定页面中所有相对链接的基准 URL。 |
可选属性:
属性 | 值 | 描述 |
---|---|---|
target |
|
在何处打开页面中所有的链接。 |
说明:
·base标签只能在head标签中使用;
·base标签全局地址(href指定的地址)是针对相对链接的a、img、link、form 标签起作用;
·base标签全局属性(target属性)是针对所有没有设置该属性(target属性)的a标签起作用;
·base标签全局地址(href指定的地址)也可以是相对地址;
·在 HTML 中,base 标签没有结束标签;在 XHTML 中,base 标签必须被正确地关闭。
四、link标签
定义文档与外部资源的关系,最常见的用途是链接样式表。
必选属性:
属性 | 值 | 描述 |
---|---|---|
href |
URL | 规定被链接文档的位置 |
可选属性:
属性 | 值 | 描述 |
---|---|---|
href |
URL | 规定被链接文档的位置。 |
hreflang |
language_code | 规定被链接文档中文本的语言。 |
media |
media_query | 规定被链接文档将被显示在什么设备上。 |
rel |
|
规定当前文档与被链接文档之间的关系。 |
sizes |
|
规定被链接资源的尺寸。仅适用于 rel="icon"。 |
type |
MIME_type | 规定被链接文档的 MIME 类型。 |
说明:
·该标签只能存在于 head 部分,不过它可出现任何次数。
·在 HTML 中,<link> 标签没有结束标签
五、style标签
该标签用于为 HTML 文档定义样式信息。
必选属性:
属性 | 值 | 描述 |
---|---|---|
type |
text/css | 规定样式表的 MIME 类型。 |
可选属性:
属性 | 值 | 描述 |
---|---|---|
media |
|
为样式表规定不同的媒介类型。 |
六、meta标签
该标签http-equiv属性和name属性还有很多有用且好玩的值,持续关注我,后面将出这两个属性更多的值详解。
必选属性:
属性 | 值 | 描述 |
---|---|---|
content |
some_text | 定义与 http-equiv 或 name 属性相关的元信息 |
必选属性:
属性 | 值 | 描述 |
---|---|---|
http-equiv |
|
把 content 属性关联到 HTTP 头部。 |
name |
|
把 content 属性关联到一个名称。 |
scheme |
some_text | 定义用于翻译 content 属性值的格式。 |
说明:
http-equiv属性:相当于http的头部,它向浏览器传回一些信息 ,用来帮助正确的显示网页内容。
1、content-type(显示字符集的设定)
说明:设定页面使用的字符集。
用法:
<meta http-equiv="content-Type" content="text/html; charset=gb2312">
2、expires(期限)
说明:可以用于设定网页 到期时间,一旦网页到期,必须到服务器上重新传输。
实例:
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">
注意:必须使用gmt的时间格式
3、refresh(刷新)
说明:自动刷新并指向新的页面,常用于网站域名搬迁,搬迁后老域名会在一段时间内指向新域名,以减少流量的丢失。或者设置时隔多少刷新页面,设置刷新页面不用指定URL
实例
<meta http-equiv="Refresh" content="2;URL=http://www.uaoie.top/">
4、set-ookie(设定cookie)
说明:如果网页过期就删除cookie
实例:
<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">
注意:必须使用gmt的时间格式
name属性:用来帮助别人阅读源文档的一些信息,也可以用来优化搜索引擎对文档的分类
1、author
说明:用来表示改文档的作者
2、description
说明:用来描述该文档
3、keywords
说明:可以帮助搜索引擎对文档进行分类
实例:
<meta name="keywords" content="HTML,ASP,PHP,SQL">
4、generator
说明:编辑此代码的软件
实例:
<Meta name="Generator" Content="PCDATA|FrontPage|">
5、revised
说明:定义页面最新版本
实例:
<meta name="revised" content="bu, 2016/5/10/" />
scheme属性: 用于指定要用来翻译属性值的方案。此方案应该在由 head 标签的 profile 属性指定的概况文件中进行了定义。
七、script标签
标签用于定义客户端脚本,比如 JavaScript。
必选属性
属性 | 值 | 描述 |
---|---|---|
type |
MIME-type(一般就是"text/javascript") | 指示脚本的 MIME 类型。 |
可选属性
属性 | 值 | 描述 |
---|---|---|
async |
async | 规定异步执行脚本(仅适用于外部脚本,也就是使用src时候)。 |
charset |
charset | 规定在外部脚本文件中使用的字符编码。 |
defer |
defer | 规定是否对脚本执行进行延迟,直到页面加载为止。 |
src> |
URL | 规定外部脚本文件的 URL。 |
xml:space | preserve | 规定是否保留代码中的空白。 |
说明:
1、async
·如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
·如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
·如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
2、charset
·charset 属性规定在外部脚本文件中使用的字符编码。
·如果外部文件中的字符编码与主文件中的编码方式不同,就要用到 charset 属性。
·默认的字符编码是 ISO-8859-1。
字符集参考手册
3、defer
·defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。
·有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。
·如果您的脚本不会改变文档的内容,可将 defer 属性加入到 script 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。
·只有 Internet Explorer 支持 defer 属性。
4、src
·src 属性规定外部脚本文件的 URL。
·有时,我们需要在网站的多个页面中运行 JavaScript。不需要重复编写相同的脚本,只需在单独的文件中创建 JavaScript,并以 .js 为后缀保存,然后使用 script 标签中的 src 属性引用该文件即可。
·外部文件不能包含 script 标签!
八、彩蛋
<!DOCTYPE>
·<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 html 标签之前。
·<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
·在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
·HTML5 不基于 SGML,所以不需要引用 DTD。
·在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种
·<!DOCTYPE> 声明对大小写不敏感。
·<!DOCTYPE> 声明没有结束标签。
SGML是一种在Web发明之前就早已存在的用标记来描述文档资料的通用语言。但SGML十分庞大且难于学习和使用。鉴于此,人们提出了HTML语言。但近年来,随着Web应用的不断深入,HTML在需求广泛的应用中已显得捉襟见肘,有人建议直接使用SGML作为Web语言。但SGML太庞大了,学用两难尚且不说,就是全面实现SGML的浏览器也非常困难。于是Web标准化组织W3C建议使用一种精简的SGML版本——XML。XML与SGML一样,是一个用来定义其他语言的元语言。与SGML相比,XML规范不到SGML规范的1/10,简单易懂,是一门既无标签集也无语法的新一代标记语言。
html 5
<!DOCTYPE html>
转载于:https://www.cnblogs.com/Juaoie/p/11443312.html
你绝对不知道的head标签相关推荐
- 你所不知道的noscript标签
<noscript>标签就是在当JavaScript被禁用或者不被支持时提供的一种代替方式,即 noscrip 标签中的内容会在此时被浏览器解析,作为 javascript 不可用时的备选 ...
- 前端工程师所不知道的meta标签用法
http-equiv META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). ★HTTP-EQUIV HTTP-EQUIV类似于HTTP的头部协议 ...
- html h1标签字体颜色css,你可能不知道的h1标签美化技巧
一看这个标题,相信大家会有这样一种感觉:美化h1标签不就是改变标题文本字体.字号或者颜色吗,还需要什么技巧?其实技巧还是有的,下面小编就为大家简单介绍一下. 美化h1标签可不仅仅局限于改变文本的字体. ...
- servlet后台如何接受multpartfile_Servlet进阶教程(你不得不知道的Servlet知识点)
" 人生的游戏不在于拿了一副好牌,而在于怎样去打好坏牌,世上没有常胜将军,勇于超越自我者才能得到最后的奖杯." 你好,我是梦阳辰!快和我一起学习吧! 精彩回放: Servlet入门 ...
- 14个你可能不知道的JavaScript调试技巧
以更快的速度和更高的效率来调试JavaScript 熟悉工具可以让工具在工作中发挥出更大的作用.尽管江湖传言 JavaScript 很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug ...
- 七大你可能不知道的 Chrome 使用技巧
随着Chromium/Chrome以及其衍生的浏览器用户越来越多,掌握一些技巧可以让你更加快速熟练的使用Chrome,让事情变得更简单. 微 软 IE 一手遮天的时代已经一去不复返了,而在当下浏览器的 ...
- Windows2003 SQL2005解决系统Administrator密码不知道的问题
Windows2003 SQL2005解决系统Administrator密码不知道的问题 今天上班的时候,有个同事说不知道谁设置了开机密码,那台电脑一直没有开机密码的他现在进不了桌面 那台电脑没有光驱 ...
- 互联网人群画像和你所不知道的真相
作为新时代互联网营销的关键部分,人群画像引起了诸多兴趣,近年颇为风靡.几乎所有的互联网广告供应商都不约而同的强调,他们有足够精确的人群画像数据,确保能够找到广告主真正的受众.但是事情果真如此吗?人群画 ...
- Vue.js 父子组件通信的十种方式;告诉世界前端也能做 AI;你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
最新文章
- java注解的执行顺序_深入理解Spring的@Order注解和Ordered接口
- Linux redis安装教程,Linux 下redis5.0.0安装教程详解
- 昆兰士科技大学计算机排名,昆士兰科技大学QS排名第几?2019年综合揭晓
- 精神独立,才是一个人最大的底气
- C语言socket发送json,C++实现Socket传输json封装的Mat
- 记录 PHP 缓存区ob
- 【MTSP】基于matlab蚁群和粒子群算法求解多旅行商问题【含Matlab code 1156期】
- Extjs基础入门视频教程
- MAC使用RZ SZ指令实现本地与远程服务器之间文件上传与下载
- Halcon的一维码和二维码解码步骤和技巧
- cass简码大全_南方cass简码完整版
- 阿丹学理财之资产配置
- time库:Python的时间时钟处理
- matlab求矩阵的非,matlab矩阵非零个数 Matlab如何提取非零元素
- 根据一个包含汉字的字符串返回一个汉字拼音首字母的字符串
- 工业镜头和民用镜头的特点和区别
- Matlab_回归分析_逐步回归
- java实验报告:实验一 基于控制台的购书系统
- 第七章——数据挖掘(2)
- scrapy rule follow的理解和应用