上一篇聊了一些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=http://www.baidu.com">(注意后面的引号，分别在秒数的前面和网址的后面):其中的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=""> <!-- 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="https://blog.csdn.net/u011863822/article/details/121775164" target="_blank">
<title>我的文档标题</title>
</head>
<body>
<!--暂时不用理解a标签，先看效果.后面会讲解这个标签-->
<!--a标签就是超链接标签-->
<a href="https://www.baidu.com/">百度</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>里。