HTML的文档首行需要标注文档定义声明,随后就是定义整个HTML文档的 <html> 标签,在 <html> 标签中包括了 <head> 和 <body> 两个元素。<body> 元素定义了HTML文档的主体,页面中所有的可见内容都是通过 <body> 中的其他元素来表现。<head> 中的内容对于用户来说并不总是可见,head主要用于定义文档的信息,便于其他的程序、爬虫等访问获取。
头部具体的信息需要一些特殊的标签来描述:
- title
这里的title指的是 <title></title> 标签,最直观的是用于定义网页的标题,也就是显示的名称。如图:
实质上title标签中的内容会应用于浏览器工具栏的标题(如上)、网页添加收藏加后显示的标题 以及 显示在搜索引擎结果页面的标题。
严格规定的HTML文档必须包含有title,但是如果不写的话,浏览器将会显示html文件完整的文件名。
- base
base标签描述了基本的链接地址也就是说页面中所有请求的资源(表单、图片、脚本、CSS等)都会默认访问base标签中定义的地址。使用base标签必须配置href属性,target属性为可选属性。
<base href="www.luanqibazao.com/test/" target="_blank">
- meta
meta标签提供了一些基本的元数据(也就是描述数据信息的数据),元数据不会显示在页面上,但能够被浏览器解析。meta标签主要用于指定网页的描述,每条信息都必须使用单独的一条meta标签来表示,关键字,文件最后的修改时间,作者等。关于meta标签最眼熟的用法应该是:
<meta charset="UTF-8"> // 规定html文档的字符编码
但实际上,在旧版本中字符编码的表达方式为:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> //等同于上面的代码
meta标签的属性包括:必需的 content ,可选的 name、http-equiv 和 scheme。content为name和http-equiv属性的详细元信息,具体用法如下。
http-equiv 的属性值可以为:content-type、expires、refresh、set-cookie等,该属性的作用是将content属性关联到 HTTP 头部。
content-type 设定页面使用的字符集。如上所示。
expires设定网页的到期时间,网页到期就必须到服务器上重新传输(使用GTM时间格式)。
<meta http-equiv="expires" content="Tue, 20 Feb 2018 18:18:18 GMT">
pragma设定后可以禁止浏览器从本地计算机的缓存中访问页面内容。
<meta http-equiv="pragma" content="no-cache"> // 禁止
refresh自动刷新并跳转页面,需要标明等待时间和跳转地址。
<meta http-equiv="refresh" content="2;URL=http://www.luanqibazao.com"> //2秒后页面自动跳转到URL对应的地址
set-cookie用于设置cookie,可以设置cookie的保存时间。
<meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Tue, 20 Feb 2018 18:18:18 GMT; path=/"> //分别设置cookie的内容,保存时间和路径
window-target强制页面在当前的窗口以独立的页面显示,可以用于阻止他人在框架内调用本页面。
<meta http-equiv="window-target" content="_top">
pics-label为网页的等级评定。
page-enter 和 page-exit 用来设定进入和离开页面时的特殊效果。
<meta http-equiv="page-enter" content="revealTrans(duration=1.0,transtion=0)"> <meta http-equiv="page-exit" content="revealTrans(duration=1.0,transtion=0)">
其中 duration 表示网页动态效果的过渡时间,transition就是过渡的效果,其值为0-23,分别代表:
当然与 http 头部相关的设置还有许多,就不在一一例举。
name也是meta常用到的属性,其属性值有author、description、keywords、generater、revised、others。这些属性对应的内容写在content中,并且根据需求自定义,如 keywords 属性对应的相关内容,就能够被搜索引擎抓取。
<meta name="keywords" content="html, css, javascript">
scheme要与head标签中profile属性对应设置,指定翻译属性值的方案。
- link
该标签定义了文档与外部资源的关系,比如通常应用于外部样式表:
<link rel="stylesheet" href="./main.css">
主要属性就为rel 和 href 。rel 指定了两个联系文档之间的关系,常用值就是stylesheet,表示样式表,而 href 属性指定关联文件的地址。
- style
定义HTML内部样式,属性有 type, 属性值为 text/css 。通过设置media规定媒体类型。
<style type="text/css" media="screen"> //media的值还可以为print,tv 等 </style>
- script
该标签用于定义脚本,如JavaScript,内容可以通过src指向外部,也可写在标签内。虽然该标签可写在head中,但是更加习惯的写法是将脚本在body 的结束标签之前引入。
type的值可以有 text/javascript、application/ecmascript、text/vbscript等
<script type="text/javascript"> </script>
- noscript
noscript是在设备不支持脚本的时候可以显示的文本。将noscript标签写在注释中,如果 script 中的脚本无法执行,就算注释也会执行 noscript 中的文本。
<noscript>Your browser does not support JavaScript!</noscript>
来源:https://www.cnblogs.com/zzmiaow/p/8455980.html