在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
HTML文档的head部分,通常包括指定页面标题,为搜索引擎提供关于页面本身的信息,加载样式表,以及加载JavaScript文件(出于性能考虑,多数时候放在页面底部</body>标签结束前加载JavaScript)。除了title,head里的内容对页面访问者来说都是不可见的. 下面是HTML文档head部分的一个例子: <head> <meta charset="utf-8" /> <meta name="author" content="Adam Freeman"/> <title>Your page title</title> <base href="http://titan/listings/" target="_blank"/> <style type="text/css"> a{ background-color: grey; color: white; padding: 0.5em; } </style> </head> title元素 head元素中必须包含一个title元素,该元素内容会出现在浏览器的标签页中或者出现在浏览器窗口的顶部,作为网页标题,和浏览器相关。 base元素 base元素用来设置一个基准URL,让HTML文档中的相对链接在此基础上进行解析。如未指定,则使用当前加载文档的URL。base元素还能设定链接在用户点击时的打开方式,以及提交表单时浏览器如何反应。 <base href="http://bjpowernode/listings/" target="_blank"/> 1)href即为指定的基准URL。 2)target属性规定在何处打开页面上的所有链接,包括值: 1)_blank:在新窗口中打开被连接文档; meta元素 meta元素用来定义文档的各种元数据,meta元素可以有多种用途,但每个meta元素只能用于一种用途,如果需要使用不止一种,就需要在head元素中添加多个meta元素。 指定名/值元数据对 <meta name="author" content="Adam Freeman"/> name属性用来表示元数据的类型,content属性提供值。name属性包含以下值: 1)application name:当前页所属Web应用系统的名称; 除了以上5个预定义的元数据名称,还可以使用元数据扩展,这里(http://wiki.whatwg.org/wiki/MetaExtensions)有这些扩展的一份时常更新的清单。有些扩展用的比较多,例如robots元数据,HTML文档的作者可以用它告诉搜索引擎该如何对待该文档: <meta name="robots" content="noindex"/> 该属性有三个大多数搜索引擎都认识的值: 1)noindex:不要索引本页; 大多数搜索引擎都提供了优化网页或整个网站的指南,可以查看相应搜索引擎提供的网页或网站优化指南。 声明字符编码 <meta charset="utf-8" /> head元素中的meta元素声明文档的字符编码为UTF-8(默认)。 模拟HTTP标头字段 meta元素可以用来模拟或替换三种HTTP标头字段的值。 <meta http-equiv="refresh" content="5"/> http-equiv属性的用途是指定所要模拟的标头字段名称,字段值在content属性中指定。http-equiv属性的可选值如下: 1)refresh:以秒为单位指定一个时间间隔,在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个URL让浏览器载入,如: <meta http-equiv="refresh" content="5;http://www.apress.com"/> 2)default-style:指定页面优先使用的样式表,content属性的值必须是同一文档中某个style元素或link元素的title属性值; 3)content-type:另一种声明HTML页面所用字符编码的方法,如: <meta http-equiv="content-type" content="text/html charset=UTF-8"/> style元素 定义HTML文档内嵌的CSS样式。 <style type="text/css"> a{ background-color: grey; color: white; padding: 0.5em; } </style> 上面为a元素设计了一个新样式。style元素可以出现在HTML文档中的各个部分,一个文档可以包含多个style元素,该元素可以用于为模板定义的样式(link元素导入)提供补充。 可以为style元素指定样式适用的媒体: <style media="screen AND (min-width:500px)" type="text/css"> ...... </style> media属性中的screen是设备类型,可选值的范围包括: 1)all:将样式用于所有设备(默认值); media属性中的(min-width:500px)指定特性,包括: 1)width height:指定浏览器窗口的宽度和高度,单位px,例如:width:200px link元素 用来在HTML文档和外部资源(如CSS样式表)之间建立联系。link元素包含6个局部属性,如下: 1)href:指定link元素指向的资源的URL; 载入外部样式表 <link rel="stylesheet" type="text/css" href="styles.css"/> 可以使用多个link元素载入多个外部资源。 为页面定义网站标志 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 浏览器载入HTML页面时,会加载并显示网站标志。 注:如果网站标志文件位于/favicon.ico(即Web服务器的根目录),那就不必用到link元素,大多数浏览器在载入页面时都会自动请求这个文件,就算没有link元素也是如此。 可以要求浏览器预先获取预计很快就要用到的资源。 <link rel="prefetch" href="/page2.html"/> 注:目前不是所有浏览器都支持该功能。 script元素 用于在页面中加入脚本,可以直接在文档中定义脚本和引用外部文件中的脚本。该元素支持的局部属性如下: 1)type:表示所引用或定义的脚本的类型,对于JavaScript脚本这个属性可以省略 定义文档内嵌脚本 <script> document.write("This is from the script"); </script> 默认情况下,浏览器在页面中一遇到脚本就会执行。 载入外部脚本库 可以将脚本放到单独的文件中,然后用script元素载入HTML文档。 <script src="simple.js"></script> 推迟脚本的执行 使用async和defer属性可以对脚本的执行方式加以控制,defer属性告诉浏览器要等页面载入和解析完成后才能执行脚本: <script defer src="simple2.js"></script> 由于html遇到脚本就会执行,如果你的脚本需要使用到html脚本中的内容,通常你需要将脚本放到相应的html脚本后,但在html5中,使用defer属性就能达到同样的目的。 浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面,各个script元素依次同步执行。async属性可以在浏览器解析HTML文档时异步加载和执行脚本,如果运用得当,可以大大提高整体加载性能。 <script async src="simple2.js"></script> noscript元素 noscript元素用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。 <noscript> <h1>JavaScript is required!</h1> <p>You cannot use this page without JavaScript</p> </noscript> 还有一种选择是在浏览器不支持JavaScript时将其引至另一个URL。 <noscript> <meta http-equiv="refresh" content="0;http://www.apress.com"/> </noscript>
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论