目录
HTML是什么？
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如[CSS]），或功能与行为（如 [JavaScript]）。
HTML有什么作用？
设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
- 用户体验，例如title、alt用于解释名词或解释图片信息、label标签的活用;
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
- 便于团队开发和维护，语义化更具有可读性，下一步把网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
HTML的特点！
HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，其主要特点如下：
- 简易性，HTML版本升级采用超集方式，从而更加灵活方便。
- 可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。
- 平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上。
HTML编写工具
- Vs code
- HBuilder
- Adobe Dreamweaver CS
- SublimeText
- Notepad
最常用的工具就是Vs code和HBuilder，一款是国外的编辑器，微软开发的，而HBuilder是我们国产的开发工具，比较专注于前端开发和小程序App等开发
HTML主框架
<!DOCTYPE html>
<html lang="Zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
head标签的作用
标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
说白了就是将没有实际用处（看不见）的标签放在head里面，比如CSS效果，JavaScript效果，SEO关键词等等。
下面这些标签可用在 head 部分：
<base>, <link>, <meta>, <script>, <style>, 以及 <title>
title 标签是用于定义网页的标题，它是 head 部分中唯一必需的元素。 比如这个图片箭头指向的文字标题就是 title 标签的作用：
其他标签在后面会陆续讲到！
body标签的作用
我们的body标签是网页内容的主体部分，跟head相反的是，body里面都是放我们网页可以显示的内容，也就是用户可以看见的内容。
也就是说body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
浏览器支持
我们知道，我们访问一个网页是需要浏览器的，而浏览器是用来将HTML语言解析成我们所看见的内容。
我们的HTML中有各式各样的标签，每个浏览器对于不同的HTML标签有不同的支持，不支持的话就不能解析（运行）我们的标签，就会损失标签效果。
我会在每个标签的讲解中说明哪些浏览器支持和哪些不支持
比如我们上面的 head 标签和 body 标签，还有 title 标签，我们的所有浏览器都支持，因为这几个是最基本的，支持情况如下：
标签、属性以及属性值
我们的HTML是由标签组成，标签里面可以存放属性，一个标签可以存在多个属性，属性有对应的属性值，一般来说，属性值只有一个！
举个例子，看下面这个标签，我们来分析分析
<meta charset="UTF-8">
<meta name=”keywords” content="XXX博客,XXX,XXX">
这里有两句代码，我们这里 meta 就是一个HTML标签，第一句代码的meta标签里面有一个charset属性，属性值为UTF-8，这句代码就是告诉浏览器，你的编码是UTF-8编码
然后看看第二句代码，这个标签里面有第一个属性 name 属性的值为 "keywords" 第二个属性是 content 这个属性的属性值可以自定义，这句代码的意思就是告诉浏览器你的网页叫什么，然后经过收录提交搜索引擎后或者SEO优化后，在搜索引擎中搜索你的网站关键词，就会出现你的网站。
content 里面的属性就是你自定义的网站搜索关键词，keywords 这个属性值是定死的，后面会讲到。
SEO有兴趣可以去浏览器搜索一下。
meta标签
我们的 head 标签中的开头就使用了 meta 标签，那这个 meta 标签有什么用呢？
我们先前就说了，我们 head 标签里面是放用户看不见的内容，也就是说，这个 meta 标签是给我们浏览器和搜索引擎看的！
注：搜索引擎是什么？比如我们的百度、搜狗、bing、谷歌浏览、火狐都是一个搜索引擎
通常所说的META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。
META标签的内容设计对于搜索引擎营销来说是至关重要的一个因素（说白了就是SEO），合理利用META标签的Description和Keywords属性，加入网站的关键字或者网页的关键字，可使网站更加贴近用户体验。
META并不是独立存在的，而是要在后面连接其他的属性，如Description、Keywords、http-equiv等。
name属性
我们的 mete 标签里面有几个常用属性，我一个个来讲一下，每个属性的作用！
- 第一个属性：name
我们的name属性有几个属性值是固定的，分别对应几个不同的属性效果
1、<meta name="Generator" contect="">
2、<meta name="KEYWords" contect="">
3、<meta name="DEscription" contect="">
4、<meta name="Author" contect="">
5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
我们需要使用 name 属性指定一个属性值，每个属性值对应不同的作用，分别是:
- Generator属性值：用以说明生成工具（如Microsoft FrontPage 4.0）等；
- KEYWords属性值：用以向搜索引擎说明你的网页的关键词；
- DEscription属性值：用以告诉搜索引擎你的站点的主要内容；
- Author属性值：告诉搜索引擎你的站点的制作的作者；
- Robots属性值：这个属性值也是用于限制搜索引擎收录与爬取的，可以看到我这段代码里面有几个固定属性，用|分割开了，而上面的 contect 属性却没有填属性值，这是为什么呢？
我们的name指的的属性值需要配合contect属性才可以发生出完整的信息给浏览器与搜索引擎，所有看看我们的contect属性的作用吧！
contect属性
我们上面四句代码分别使用name指定了四个不同属性，但是他只是告诉浏览器和搜索引擎你这句代码是干什么的！而你的内容需要使用 contect 属性来指的内容才行！对于上面前四句代码，这个 contect 属性值的内容是可以自定义的，而我们的最后一句的 name 指定的值是 Robots，这个 Robots 是给搜索引擎的爬虫看的，所以它的 contect 属性的值是固定的，所以我们的 contect 属性有以下属性值：
-
- 自定义属性值，比如网站的关键词、描述信息、作者等等
-
- 其他属性值：当 name 属性的值为 Robots 时，contect 属性存在以下值：
- 设定为all：文件将被检索，且页面上的链接可以被查询；
- 设定为none：文件将不被检索，且页面上的链接不可以被查询；
- 设定为index：文件将被检索；
- 设定为follow：页面上的链接可以被查询；
- 设定为noindex：文件将不被检索，但页面上的链接可以被查询；
- 设定为nofollow：文件将不被检索，页面上的链接可以被查询。
http-equiv属性
除了 name 属性和 contect 属性，我们还有个属性———— http-equiv 属性
这个属性不用说，既然是 meta 标签里面，那就是给浏览器和搜索引擎看的，我们看看他用什么作用：
1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">
和 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言；
又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；
2、<meta http-equiv="Refresh" contect="n;url=https://blog.janyork.com ">定时让网页在指定的时间n内，跳转到页面https://blog.janyork.com；
3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；
4、<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；
5、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；
6、<meta http-equiv="Pics-label" contect="">网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；
7、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；
8、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">
和
<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)">
设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。
mete 标签这里不是特别重要，了解一下即可，补充一句，我们网页尽量要指的编码，在指的编码时尽量使用 UTF-8 编码，因为他兼容所有语言，因此它也被称为万国码！
title标签
我们上面已经讲过了，title 标签是用来指的网页标题的，比如：
<title>小简博客</title>
head中的其他标签
除了我们上面讲到的两个标签外，head中还可以存在下面四个常用标签
<base>, <link>, <script>, <style>
但是我们现在还不必了解，后文会继续为我们介绍