HTML基础之head标签以及其下的标签和属性
上⼀篇聊了⼀些HTML的发展历史，以及HTML的规范，现在聊⼀些基本的标签，以及标签的意义。
其实HTML有标签的同时，还有⼀些标签上的属性，其也会让标签的形式的变得多种多样。两者再下⾯代码演⽰的时候会同时说，这样更好的理解。
⼀直说html标签时HTML的根节点，其上⾯也有属性。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
⽹页内容
</body>
</html>
上⾯的lang="en"就是对html标签的属性设置，如果看页⾯显⽰，似乎不设置，页⾯演⽰的内容没有不同，但是为什么还要写呢？
其实这个是对浏览器友好的⼀种⽅式，提⽰浏览器页⾯的内容主要是⽤英语还是汉字显⽰⽽已。
常见的⼀些语⾔代码：
语⾔缩写
汉字简体zh-CH甚⾄可以设置台湾zh-TW,⾹港zh-HK
英语en
这个时候⾸先我们说⼀下head标签下⾯的⼀些常⽤的标签，以及属性。
其实在标签html下有两个分两个部分⼀个<head>和<body>
head下标签
<head>元素包含了所有的头部标签元素。在<head>元素中你可以插⼊脚本（scripts）, 样式⽂件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
下⾯就演⽰⼀下这些标签，以及标签中的属性。
title
其定义不同⽂档的标题，在HTML⽂档中是必须的。
定义了有什么意义：
定义浏览器⼯具栏的标题
当⽹页添加到收藏夹时，显⽰在收藏夹中的标题
显⽰在搜索引擎的结果页⾯的效果
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>我的⽂档标题</title>
</head>
<body>
⽂档内容......
</body>
</html>
其实可以看⼀下其它⽹站中title标签下的内容：
可以看出标签的⼀些特征，同样⼤家可以多打开⼏个⽹页，看其主要站title，⽂章⽹页的title以及商品⽹站的单个商品的title。可以看出
主页：⽹站名称以及主要的关键字或者关键词的描述
详情页：详情的名称以及⽹站名称和简介
列表页：分页名称以及关键字和⽹站名称
⽂章页：标签以及分类和⽹站名称（截图中演⽰的可以看出）
meta
meta标签描述了⼀些基本的元数据，其提供的元数据，不显⽰在页⾯上，但会被浏览器解析。其通常⽤来⽹页的描述，关键词，⽂件的最后修改时间，作者，和其他元数据。其
可以使⽤于浏览器（如何显⽰内容或重新加载页⾯），搜索引擎（关键词），或其他Web服务。
其很多时候也是为浏览器引擎服务。
属性作⽤
name name属性主要⽤于描述⽹页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器⼈查信息和分类信息⽤的。
http-equiv http-equiv顾名思义，相当于http的⽂件头作⽤，它可以向浏览器传回⼀些有⽤的信息，以帮助正确和精确地显⽰⽹页内容，与之对应的属性值
为content，content中的内容其实就是各个参数的变量值。
charset告诉浏览器这个页⾯是什么编码格式，⽐如UTF-8等
name下的参数
参数作⽤例⼦
Keywords keywords⽤来告诉搜索引擎你⽹页的关键字是什么。<meta name="keywords" content="关键字内容"> description description⽤来告诉搜索引擎你的⽹站主要内容。<meta name="description" content="主要内容"> robots robots⽤来告诉搜索机器⼈哪些页⾯需要索引，哪些页⾯不需要索引。<meta name="robots" content="none"> author标注⽹页的作者<meta name="author"content="作者名"> http-equiv下的参数
参数作⽤例⼦
Expires(期限)可以⽤
于设定
⽹页的
到期时
间。⼀
旦⽹页
过期，
必须到
服务器
上重新
传输。
<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">
Pragma(cache
模式)禁⽌浏
览器从
本地计
算机的
缓存中
访问页
⾯内容
<meta http-equiv="Pragma" content="no-cache">：这样设定，访问者将⽆法脱机浏览
Refresh(刷新)<meta http-equiv="Refresh" content="2;URL=www.baidu">(注意后⾯的引号，分别在秒数的前⾯和⽹址的后⾯)：其
中的2是指停留2秒钟后⾃动刷新到URL⽹址。
Set-Cookie(cookie
设定)如果⽹
页过
期，那
么存盘
的
cookie
将被删
除
<metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">：必须使⽤
GMT的时间格式。
content-Type(显⽰字符集的设定)设定页
⾯使⽤
的字符
集
<metahttp-equiv="content-Type"content="text/html;charset=gb2312">
content-Language 显⽰语
⾔的设
定
<metahttp-equiv="Content-Language"content="zh-cn"/>
Window-target(显⽰窗⼝的设定)强制页
⾯在当
前窗⼝
以独⽴
页⾯显
⽰。
<metahttp-equiv="Window-target"content="_top">:⽤来防⽌别⼈在框架⾥调⽤⾃⼰的页⾯。
Cache-Control 指定请
求和响
应遵循
的缓存
机制
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另⼀个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下 Public指⽰响应可被任何缓存区缓存Private指⽰对于单个⽤户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当⽤户的部分响应消息，此响应消息对于其他⽤户的请求⽆效;no-cache指⽰请求或响应消息不能缓存 ;no-store⽤于防⽌重要的信息被⽆意的发布。在请求消息中发送将使得请求和响应消息都不使⽤缓存。,max-age指⽰客户机可以接收⽣存期不⼤于指定时间（以秒为单位）的响应;min-fresh指⽰客户机可以接收响应时间⼩于当前时间加上指定时间的响应;max-stale指⽰客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客
户机可以接收超出超时期指定值之内的响应消息。
为搜索引擎定义关键词
<meta name="keywords" content="">
html主页<!--
keywords 其content ⼀般其长度不会超过100个字符。
主要内容包含⽹站名称，分类等
-->
为⽹页定义描述内容:
<meta name="description" content="">
<!--
description 其content描述信息⼀般长度为80-120汉字
主要内容为综合的title的内容以及keywords中信息的简单描述
-->
补充：搜索引擎认知的优先级：title>description>kewords
每30秒钟刷新当前页⾯
<meta http-equiv="refresh" content="30">
页⾯字符编码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>我的⽂档标题</title>
</head>
<body>
⽂档内容......
</body>
</html>
编码格式有：UTF-8（万国码⼏乎有全世界上所有语⾔⽂字）,GBK2312(中国信息处理国家标准码定义的简体中⽂编码),GBK（汉字扩展规范，包含了更多的汉字，以及繁体少数民族等）
base
标签描述了基本的链接地址/链接⽬标，该标签作为HTML⽂档中所有的链接标签的默认链接
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<base href="blog.csdn/u011863822/article/details/121775164" target="_blank">
<title>我的⽂档标题</title>
</head>
<body>
<!--暂时不⽤理解a标签，先看效果.后⾯会讲解这个标签-->
<!--a标签就是超链接标签-->
<a href="www.baidu/">百度</a>
<br />
<a href="">base的默认的链家</a>
</body>
</html>
link
标签定义了⽂档与外部资源之间的关系。这个标签通常⽤于链接到样式表:
<head>
<!-- CSS 这个后⾯单独在聊⼀篇吧，⼤家暂时记住有这个即可 -->
<link rel="stylesheet" type="text/css" href="CSS格式.css">
</head>
style
标签定义了HTML⽂档的样式⽂件引⽤地址.在<style> 元素中你也可以直接添加样式来渲染 HTML ⽂档，这个有点<script>标签的格式的感觉
<head>
<!-- CSS 这个后⾯单独在聊⼀篇吧，⼤家暂时记住有这个即可 -->
<style type="text/css">
body{background-color:yellow}
p{color:blue}
</style>
</head>
script
这个是HTML中写JavaScript逻辑以及导⼊js⽂件的标签。
标签⽤于定义客户端脚本，⽐如 JavaScript。
元素既可包含脚本语句，也可以通过 “src” 属性指向外部脚本⽂件。
<script>
document.write("Hello World!")
</script>
因为HTML的语⾔⼀般是由上⽽下执⾏的，如果将脚本会调⽤body中的元素时候，就会报错。
补充
那就问⼀个神奇的问题，既然JavaScript可以放在head和body两个标签下⾯，那他们的区别是什么呢？
不同位置的JavaScript的效果
JavaScript写在<body></body>中
当浏览器载⼊⽹页Body部分的时候，就执⾏其中的JavaScript语句，执⾏之后输出的内容就显⽰在⽹页中。因为HTML是⼀般是从上⽽下执⾏，JavaScript也遵守这个原则，所以⼀般放在body标签中最后⾯，不然会报错。
为什么放在最下⾯：
⾸先与 js 的加载有关。js 不同于图⽚与 css 资源，它是阻塞式的加载。在浏览器加载 js 时，其它资源都不可以并⾏加载。并且 js 的下载和执⾏都属于加载，只有 js 执⾏完成，其它资源才开始加载。 其次，js 引擎线程与 GUI 渲染线程是互斥的，js 在解析执⾏过程中 GUI 渲染线程会被挂起（渲染的当前状态会被保存）。当 js 执⾏结束后，渲染线程才会继续。 因此，如果 js 放到 body 中间，会使界⾯的显⽰不连贯。
JavaScript写在<head></head>中
有时候并不需要⼀载⼊HTML就运⾏JavaScript，⽽是⽤户点击了HTML中的某个对象，触发了⼀个事件，才需要调⽤JavaScript。这时候，通常将这样的JavaScript放在HTML的<head></head>⾥。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。