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,一经查实,立即删除!

相关文章

Android之什么场景该使用单例模式总结

1、什么是单例模式 单例模式意味着只有一个对象,至于单例模式如何实现就不这里就不多说了,有很多种实现办法。 2、什么时候该使用单例模式?如果不使用单例模式会出现什么问题? 先举2个例子 例子1 当我们做得到最新的短信和最新的通话记录的时候,我们一般采…

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中的规则表达式兼…

《SAS编程与数据挖掘商业案例》学习笔记之十九

继续《SAS编程与数据挖掘商业案例》学习笔记&#xff0c;本文侧重数据处理实践&#xff0c;包括&#xff1a;HASH对象、自定义format、以及功能强大的正则表达式 一&#xff1a;HASH对象 Hash对象又称散列表&#xff0c;是根据关键码值而直接进行访问的数据结构&#xff0c;是根…

do { ....} while(0) 在宏里冗余的意义

do { ....} while(0) 在宏里冗余的意义 cocos2d-x提供了许多宏模板&#xff0c;如&#xff1a;CC_SAFE_RETAIN(p),CC_SAFE_DELETE(p) 等等 查看一下CC_SAFE_RETAIN的源码&#xff1a; #define CC_SAFE_RETAIN(p) do { if(p) { (p)->retain(); } } while(0) 为什么…

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

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

网关和路由的区别

网关&#xff1a;网关实质上是一个网络通向其他网络的IP地址。比如有网络A和网络B&#xff0c;网络A的IP地址范围为“192.168.1.1~192. 168.1.254”&#xff0c;子网掩码为255.255.255.0&#xff1b;网络B的IP地址范围为“192.168.2.1~192.168.2.254”&#xff0c;子网掩码为25…

Java里阻塞线程的三种实现方法

在日常开发中&#xff0c;我们有时会遇到遇到多线程处理任务的情况&#xff0c;JDK里提供了便利的 ThreadPoolExecutor以及其包装的工具类Executors。但是我们知道 ExecutorService.excute(Runnable r)是异步的&#xff0c;超过线程池处理能力的线程会被加入到执行队列里。有时…

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

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

mysql-5.5.31主从复制

给数据库用户配置groupadd mysqluseradd -g mysql mysql -s /sbin/nologinrm -rf /home/mysqlmkdir -p /opt/mysqlchmod -R 755 /opt/mysqlchown -R mysql:mysql /opt/mysql准备工作&#xff1a;安装基本依赖包&#xff0c;先用yum安装cmake、automake 、autoconf &#xff0c;…

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

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

OSI各层相关的协议

<pre id"best-content-639348667" class"best-text mb-10" name"code" style"white-space: pre-wrap; word-wrap: break-word;">一、<strong>OSI各层</strong> 物理层&#xff1a;EIA/TIA-232, EIA/TIA-499, V.35, …

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

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

java轻量级Http Server

lighttpd 官方主页&#xff1a;www.lighttpd.netLighttpd是一个德国人领导的开源软件&#xff0c;其根本的目的是提供一个专门针对高性能网站&#xff0c;安全、快速、兼容性好并且灵活的web server环境。具有非常低的内存开销&#xff0c;cpu占用率低&#xff0c;效能好&#…

使用CDN引用jQuery

CDN (Content Delivery Network) 内容分发网络。 Google 为一系列 JavaScript 库提供了免费的 CDN&#xff0c;包括&#xff1a; jQueryPrototypeMooToolsDojoYahoo! YUI如需在您的网页中使用 JavaScript 框架库&#xff0c;只需在 <script> 标签中引用该库即可&#xff…

13 个 C# 10 特性

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

nodejs安装express框架

安装express框架npm install express -gd-g代表安装到NODE_PATH的lib里面&#xff0c;而-d代表把相依性套件也一起安装。如果沒有-g的话会安装目前所在的目录(会建立一个node_modules的文件夹)&#xff0c;express –help 查看帮助cd /data/wwwroot/express –ejs –sessions m…

学习总结之数据挖掘三大类六分项

Data Mining可分为三大类六分项来说明&#xff1a; Classification和Clustering属于分类区隔类&#xff1b; Regression和Time-series属于推算预测类&#xff1b; Association和Sequence则属于序列规则类。 Classification是根据一些变量的数值做计算&#xff0c;再依照结果作分…