目录
HTML and HTML5
html ：HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
html标签：HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
html5：html的一个版本，HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
html5 新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
html框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>html头部元素（head内）
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
- title：定义文档标题
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 防止乱码 -->
<meta charset="utf-8">
<title>定义文档标题</title>
</head>
<body>
</body>
</html>
- base：定义页面上所有链接的默认地址或默认目标
定义和用法
<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>定义文档标题</title>
<base href="https://www.baidu.com/img/"/>
<base target="_blank">
</head>
<body>
<!-- 通过相对路径查找文件，默认从base指定路径文件夹内寻找
即：https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png -->
<img src="xinshouye_353af22a7f305e1fb6cfa259394dea9b.png" /><br />
</body>
</html>
- target:规定在何处打开页面上的所有链接。
- link：定义文档与外部资源（外链样式表等）之间的关系
- link 元素是空元素，它仅包含属性。
- 此元素只能存在于 head 部分，不过它可出现任何次数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>定义文档标题</title> <base href="https://www.baidu.com/img/"/> <base target="_self"> <!-- 外联样式表 --> <link rel="stylesheet" type="text/css" href="style.css" /> <!-- ⽂档tag图标 --> <link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" /> <!-- 比shortcut icon 多支持gif，推荐一般时候使用shortcut icon --> <link rel="icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" /> </head> <body> </body> </html>
- style：定义文档的样式信息（内联样式表）
<style> 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>定义文档标题</title>
<html>
<style type="text/css">
P{
color: blue;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1>hello style</h1>
<p>hello h5</p>
</body>
</html>
- meta：定义关于html文档的元数据
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
注：
- <meta> 标签永远位于 head 元素内部。
- 元数据总是以名称/值的形式被成对传递的。
<!DOCTYPE html>
<html lang="en">
<head>
<title>定义文档标题</title>
<!-- 字符编码，防止网页乱码 -->
<meta charset="utf-8">
<!-- 编写发送浏览器的头部信息 -->
<!-- content-type: text/html;charset=utf-8 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- charset:iso-8859-1 -->
<meta http-equiv="charset" content="iso-8859-1">
<!-- expires:31 Dec 2008 -->
<meta http-equiv="expires" content="31 Dec 2008">
<!-- SEO -->
<!-- keyords 常用于搜索引擎可进行模糊搜索到该网站的关键字 -->
<meta name="keywords" content="8-12个以英⽂逗号隔开的单词或词语">
<!-- description 是网站的相关介绍 -->
<meta name="description" content="80字以内的⼀段话，与⽹站内容相关">
<!-- viewport 进行移动界面自适配，并且禁止用户进行修改适配大小 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
</body>
</html>
- content属性
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。
- name属性
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：
<meta name="keywords" content="HTML,ASP,PHP,SQL">如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
- http-equiv属性
http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：
<meta http-equiv="charset" content="iso-8859-1"> <meta http-equiv="expires" content="31 Dec 2008">这样发送到浏览器的头部就应该包含：
content-type: text/html charset:iso-8859-1 expires:31 Dec 2008当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
- scheme属性
scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。
- scirpt：定义客户端脚本（插入JS）
<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
注意：
- 假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行。<frameset> 标签之后的脚本会被忽略。
<!DOCTYPE html> <html lang="en"> <head> <title>定义文档标题</title> <!-- 字符编码，防止网页乱码 --> <meta charset="utf-8"> <!-- 可以放在head内也可以放在body内和外，通常放在body下，html内 --> <script type="text/javascript"></script> </head> <body> <script type="text/javascript"> <!-- js代码块 --> document.write("<h1>Hello World!</h1>") </script> </body> <script type="text/javascript"></script> </html>
