HTML5:理解head

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

HTML文档的head部分,通常包括指定页面标题,为搜索引擎提供关于页面本身的信息,加载样式表,以及加载JavaScript文件(出于性能考虑,多数时候放在页面底部</body>标签结束前加载JavaScript)。除了title,head里的内容对页面访问者来说都是不可见的。

下面是HTML文档head部分的一个例子:

[html]  view plain copy
  1. <head>  
  2.     <meta charset="utf-8" />  
  3.     <meta name="author" content="Adam Freeman"/>  
  4.     <title>Your page title</title>  
  5.     <base href="http://titan/listings/" target="_blank"/>  
  6.     <style type="text/css">  
  7.         a{  
  8.             background-color: grey;  
  9.             color: white;  
  10.             padding: 0.5em;  
  11.         }  
  12.     </style>  
  13. </head>  

title元素

head元素中必须包含一个title元素,该元素内容会出现在浏览器的标签页中或者出现在浏览器窗口的顶部,作为网页标题,和浏览器相关。

base元素

base元素用来设置一个基准URL,让HTML文档中的相对链接在此基础上进行解析。如未指定,则使用当前加载文档的URL。base元素还能设定链接在用户点击时的打开方式,以及提交表单时浏览器如何反应。
[html]  view plain copy
  1. <base href="http://titan/listings/" target="_blank"/>  
1)href即为指定的基准URL。
2)target属性规定在何处打开页面上的所有链接,包括值:
1)_blank:在新窗口中打开被连接文档;
2)_self:默认,在相同的框架中打开被链接文档;
3)_parent:在父框架打开被链接文档;
4)_top:在整个窗口中打开被链接文档;
5)framename:在指定框架中打开被链接文档。

meta元素

meta元素用来定义文档的各种元数据,meta元素可以有多种用途,但每个meta元素只能用于一种用途,如果需要使用不止一种,就需要在head元素中添加多个meta元素。

指定名/值元数据对

[html]  view plain copy
  1. <meta name="author" content="Adam Freeman"/>  
name属性用来表示元数据的类型,content属性提供值。name属性包含以下值:
1)application name:当前页所属Web应用系统的名称;
2)author:当前页的作者名;
3)description:当前页的说明;
4)generator:用来生成HTML的软件名称;
5)keywords:描述页面的内容。
除了以上5个预定义的元数据名称,还可以使用元数据扩展,这里(http://wiki.whatwg.org/wiki/MetaExtensions)有这些扩展的一份时常更新的清单。有些扩展用的比较多,例如robots元数据,HTML文档的作者可以用它告诉搜索引擎该如何对待该文档:
[html]  view plain copy
  1. <meta name="robots" content="noindex"/>  
该属性有三个大多数搜索引擎都认识的值:
1)noindex:不要索引本页;
2)noarchive:不要将本页存档或缓存;
3)nofollow:不要顺着本页中的链接继续搜索下去。
大多数搜索引擎都提供了优化网页或整个网站的指南,可以查看相应搜索引擎提供的网页或网站优化指南。

声明字符编码

[html]  view plain copy
  1. <meta charset="utf-8" />  
head元素中的meta元素声明文档的字符编码为UTF-8(默认)。

模拟HTTP标头字段

meta元素可以用来模拟或替换三种HTTP标头字段的值。
[html]  view plain copy
  1. <meta http-equiv="refresh" content="5"/>  
http-equiv属性的用途是指定所要模拟的标头字段名称,字段值在content属性中指定。http-equiv属性的可选值如下:
1)refresh:以秒为单位指定一个时间间隔,在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个URL让浏览器载入,如:
[html]  view plain copy
  1. <meta http-equiv="refresh" content="5;http://www.apress.com"/>  
2)default-style:指定页面优先使用的样式表,content属性的值必须是同一文档中某个style元素或link元素的title属性值;
3)content-type:另一种声明HTML页面所用字符编码的方法,如:
[html]  view plain copy
  1. <meta http-equiv="content-type" content="text/html charset=UTF-8"/>  

style元素

定义HTML文档内嵌的CSS样式。
[html]  view plain copy
  1. <style type="text/css">  
  2.     a{  
  3.         background-color: grey;  
  4.         color: white;  
  5.         padding: 0.5em;  
  6.     }  
  7. </style>  
上面为a元素设计了一个新样式。style元素可以出现在HTML文档中的各个部分,一个文档可以包含多个style元素,该元素可以用于为模板定义的样式(link元素导入)提供补充。
可以为style元素指定样式适用的媒体:
[html]  view plain copy
  1. <style media="screen AND (min-width:500px)" type="text/css">  
  2.     ......   
  3. </style>  
media属性中的screen是设备类型,可选值的范围包括:
1)all:将样式用于所有设备(默认值);
2)aural:将样式用于语音合成器;
3)braille:将样式用于忙问设备;
4)handheld:将样式用于手持设备;
5)projection:将样式用于投影机;
6)print:将样式用于打印预览和打印页面时;
7)screen:将样式用于计算机显示器屏幕;
8)tty:将样式用于电传打字机之类的等宽设备;
9)tv:将样式用于电视机。
media属性中的(min-width:500px)指定特性,包括:
1)width height:指定浏览器窗口的宽度和高度,单位px,例如:width:200px
2)device-width device-height:指定整个设备(而不仅仅是浏览器窗口)的宽度和高度,单位px,例如:min-device-height:200px
3)resolution:指定设备的像素密度,单位dpi(点/英寸)或dpcm(点/厘米),例如:max-resolution:600dpi
4)orientation:指定设备的较长边朝向,可选值为portrait和landscape
5)aspect-ratio device-aspect-ratio:指定浏览器窗口或整个设备的像素宽高比,例如:min-aspect-ratio:16/9
6)color monochrome:指定彩色或黑白设备上每个像素占用的二进制位数,例如:min-monochrome:2
7)color-index:指定设备所能显示的颜色数目,例如:max-color-index:256
8)scan:指定电视的扫描模式,包括值progressive和interlace
9)grid:指定设备的类型,支持的值为0和1(1代表网格型设备,使用固定的网格显示内容)

link元素

用来在HTML文档和外部资源(如CSS样式表)之间建立联系。link元素包含6个局部属性,如下:
1)href:指定link元素指向的资源的URL;
2)hreflang:说明所关联资源使用的语言;
3)media:说明所关联的内容用于哪种设备,同style中的media属性;
4)rel:说明文档与所关联资源的关系类型,值的范围如下:
---alternate:链接到文档的替代版本,比如另一种语言的译本;
---author:链接到文档的作者;
---help:连接到当前文档的说明文档;
---icon:指定图标资源;
---license:链接到当前文档的相关许可证;
---pingback:指定一个回探(pingback)服务器,从其他网站链接到博客的时候它能自动得到通知;
---prefetch:预先获取一个资源;
---stylesheet:载入外部样式表。
5)sizes:指定图标的大小;
6)type:指定所关联资源的MIME类型,如text/css、image/x-icon。

载入外部样式表

[html]  view plain copy
  1. <link rel="stylesheet" type="text/css" href="styles.css"/>  
可以使用多个link元素载入多个外部资源。

为页面定义网站标志

[html]  view plain copy
  1. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />  
浏览器载入HTML页面时,会加载并显示网站标志。
注:如果网站标志文件位于/favicon.ico(即Web服务器的根目录),那就不必用到link元素,大多数浏览器在载入页面时都会自动请求这个文件,就算没有link元素也是如此。

预先获取资源

可以要求浏览器预先获取预计很快就要用到的资源。
[html]  view plain copy
  1. <link rel="prefetch" href="/page2.html"/>  
注:目前不是所有浏览器都支持该功能。

script元素

用于在页面中加入脚本,可以直接在文档中定义脚本和引用外部文件中的脚本。该元素支持的局部属性如下:
1)type:表示所引用或定义的脚本的类型,对于JavaScript脚本这个属性可以省略
2)src:指定外部脚本文件的URL
3)defer async(HTML5新增):设定脚本的执行方式,这两个属性只能与src属性一同使用
4)charset:说明外部脚本文件所用字符编码,该属性只能与src属性一同使用

定义文档内嵌脚本

[html]  view plain copy
  1. <script>  
  2.     document.write("This is from the script");  
  3. </script>  
默认情况下,浏览器在页面中一遇到脚本就会执行。

载入外部脚本库

可以将脚本放到单独的文件中,然后用script元素载入HTML文档。
[html]  view plain copy
  1. <script src="simple.js"></script>  

推迟脚本的执行

使用async和defer属性可以对脚本的执行方式加以控制,defer属性告诉浏览器要等页面载入和解析完成后才能执行脚本:
[html]  view plain copy
  1. <script defer src="simple2.js"></script>  
由于html遇到脚本就会执行,如果你的脚本需要使用到html脚本中的内容,通常你需要将脚本放到相应的html脚本后,但在html5中,使用defer属性就能达到同样的目的。
浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面,各个script元素依次同步执行。async属性可以在浏览器解析HTML文档时异步加载和执行脚本,如果运用得当,可以大大提高整体加载性能。
[html]  view plain copy
  1. <script async src="simple2.js"></script>  

noscript元素

noscript元素用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。
[html]  view plain copy
  1. <noscript>  
  2.     <h1>JavaScript is required!</h1>  
  3.     <p>You cannot use this page without JavaScript</p>  
  4. </noscript>  
还有一种选择是在浏览器不支持JavaScript时将其引至另一个URL。
[html]  view plain copy
  1. <noscript>  
  2.     <meta http-equiv="refresh" content="0;http://www.apress.com"/>  
  3. </noscript>  

转载于:https://my.oschina.net/zhanghaiyang/blog/725776

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/293439.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Dapr项目应用探索

背景介绍前面文章对Dapr的基本信息进行了学习&#xff0c;接下来尝试将Dapr应用相关应用中。接下来一步步实现应用dapr功能。一、预期效果如上图应用Dapr点包含&#xff1a;a) 报表服务绑定统一数据源服务&#xff1a;接受更新通知  b) 业务系统调用报表操作:采用Dapr方式二、…

为什么当代人越来越不快乐?

全世界只有3.14 % 的人关注了爆炸吧知识小时候哭着哭着就笑了&#xff0c;长大后笑着笑着就哭了。生活不易&#xff0c;成年人叹气&#xff0c;房租水费&#xff0c;学习压力、工作不如意...各种无形的压力&#xff0c;压得人喘不过气。如果一绷得太紧&#xff0c;再坚韧的弦也…

解读C#正则表达式

为什么80%的码农都做不了架构师&#xff1f;>>> 多少年来&#xff0c;许多的编程语言和工具都包含对正则表达式的支持&#xff0c;.NET基础类库中包含有一个名字空间和一系列可以充分发挥规则表达式威力的类&#xff0c;而且它们也都与未来的Perl 5中的规则表达式兼…

iphone换机数据迁移_iPhone迁移数据到Android(相册与短信)

2020年09月20日前言&#xff1a;卖掉iPhone7暂时回到Android手机&#xff0c;然后需要将iPhone内的资料迁移到新手机中。我尽量不使用第三方工具实现迁移工作。一般新手机都会有迁移助手&#xff0c;但是都不完美&#xff0c;毕竟是两个不同手机系统&#xff0c;很多东西还是需…

使用 dotnet-outdated 维护项目 nuget 包版本

使用 dotnet-outdated 维护项目 nuget 包版本Intro我们项目中或多或少都会有一些 NuGet 包&#xff0c;使用到 NuGet 包时&#xff0c;如何保证我们的 NuGet 包不会太旧呢&#xff1f;我们可以借助 dotnet-outdated 来检查项目中的 NuGet 包是否有更新Sample首先我们需要执行 d…

被一帮小姐姐围着是什么感觉?

1 阿姨&#xff1a;我靠灵魂呼吸...▼2 医学院护理班男生的日常▼3 嫌自己活太久了&#xff1f;▼4 看来还是作业太少了▼5 小孟老师&#xff0c;您妈&#xff01;▼6 哈哈哈哈哈&#xff0c;不行了...▼7 他今天是不会跟你走的&#xff01;&#xff01;&#xff01;▼8 …

仓库处理中 无法修改_上海电商仓储物流公司,冷链仓库-上海玖日仓储

首页 > 新闻列表 > 浏览文章发布时间&#xff1a;2020-10-21 15:03:33 浏览量&#xff1a; 4导读&#xff1a;上海玖日仓储为您提供上海电商仓储物流公司,冷链仓库的相关知识与详情&#xff1a; 货物出入库扫描功能&#xff0c;同时记录扫描时间&#xff1b;完善订单与仓…

13 个 C# 10 特性

常量的内插字符串C# 10 允许使用在常量字符串初始化中使用插值, 如下const string name "Oleg"; const string greeting $"Hello, {name}.";Console.WriteLine(greeting); // Output: Hello, Oleg.扩展属性模式从 C# 10 开始&#xff0c;您可以在适当的模…

android studio button位置_免费的Android开发环境

Android Studio for mac是一个全面的Android开发环境&#xff0c;Android Studio帮助您设计&#xff0c;构建&#xff0c;测试和调试Android应用程序&#xff0c;利用Android Studio所有特色工具并开发出令人惊叹的应用程序。Android Studio是一个为Android平台开发程序的集成开…

TCP握手/挥手的过程分析

TCP连接建立 在TCP/IP协议中&#xff0c;TCP协议提供可靠的连接服务&#xff0c;采用三次握手建立一个连接。 服务器必须准备好接受外来的连接。这通过调用socket、 bind和listen函数来完成&#xff0c;称为被动打开(passive open)。 第一次握手&#xff1a;客户通过调用connec…

Android数据库Realm实践

Android开发中常用的数据库有5个&#xff1a; 1. OrmLite OrmLite 不是 Android 平台专用的ORM框架&#xff0c;它是Java ORM。支持JDBC连接&#xff0c;Spring以及Android平台。语法中广泛使用了注解&#xff08;Annotation&#xff09;。 2. SugarORM SugarORM 是 Android …

TCP协议中的三次握手和四次挥手(图解)

建立TCP需要三次握手才能建立&#xff0c;而断开连接则需要四次握手。整个过程如下图所示&#xff1a; 先来看看如何建立连接的。 首先Client端发送连接请求报文&#xff0c;Server段接受连接后回复ACK报文&#xff0c;并为这次连接分配资源。Client端接收到ACK报文后也向Serv…

java 矩阵题目_java练习本(原每日一练)(20190517)

名人名言昨日翻译“You will face many defeats in life, but never let yourself be defeated.”——Maya Angelou“你将在生活中面临许多失败&#xff0c;但决不让自己被打败。”——玛雅安吉罗今日名言“May you live all the days of your life.”——Jonathan Swift2019.0…

(转)直接拿来用!最火的iOS开源项目(一)

2019独角兽企业重金招聘Python工程师标准>>> 1. AFNetworking 在众多iOS开源项目中&#xff0c;AFNetworking可以称得上是最受开发者欢迎的库项目。AFNetworking是一个轻量级的iOS、Mac OS X网络通信类库&#xff0c;现在是GitHub上第三大Objective-C库。它建立在N…

.NET+Sqlite如何支持加密

点击上方蓝字关注我们.NETSqlite如何支持加密SqliteSQLite 来源于公共领域 SQLite Is Public Domain、确保代码不会受到任何专有或许可内容的污染&#xff0c;没有任何来自互联网上的未知来源复制。即全是原创的。虽然是免费的&#xff0c;无需许可证&#xff0c;可用于任何目的…

linux之scp命令

svn 删除所有的 .svn文件 find . -name .svn -type d -exec rm -fr {} \; linux之cp/scp命令&#xff0b;scp命令详解 名称&#xff1a;cp 使用权限&#xff1a;所有使用者 使用方式&#xff1a; cp [options] source dest cp [options] source... directory 说明&#xff1a…

裸奔、抽烟、凡尔赛,原来数学家玩得这么野……

全世界只有3.14 % 的人关注了爆炸吧知识六个数学家一部数学史假如宇宙真的由神明设计那他一定是个数学家数学就是他描绘自然的语言数学的重要性已经不用多说但是很多人仍觉得数学是高冷的女神其实数学神奇却并不神秘高贵却并不高冷因为有一群智者早就用他们的智慧和精力将那些晦…

foreach循环符合就不往下走了_柴油发电机组冷却液循环故障解决方法

点击上方蓝字了解更多精彩柴油发电机组冷却液循环故障是发电机组的常见故障之一&#xff01;下面给大家介绍一下针对循环故障做出的排查解决。1、柴油发电机组水泵故障。首先我们要先检查水泵作用是否良好&#xff0c;要是发现水泵传动齿轴磨损过限时&#xff0c;说明水泵已失去…