什么是HTML?
我们可以在浏览器里打开任意一个网站页面，它就是一个HTML，当然你所见到的网页都离不开HTML，作为专业的前端工程师，HTML是必学的技能之一，那么我先来认识一下它。
HTML指的是超文本标记语言 (Hyper Text Markup Language)
语言: 人们用于交流的工具。
超文本：就是指页面内可以包含图片、链接，甚至音乐、视频等非文字元素；
标记：一种标记符，可以告诉浏览器如何显示其中的内容；
比如：<b>我很粗</b> ，<b></b>就是一种标记符
注意事项:
HTML不是一种编程语言（因为HTML中没有变量，流程控制等），它是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)，例如：<b>我很粗</b><i>我很歪</i>
HTML使用标记标签来描述网页内容。
为什么要使用HTML？
因为HTML是一种标记语言，主要用于描述网页内容，告诉浏览器跟据我们的标记符的类型，显示相应的内容。HTML就像是我们的饭碗一 样，如果吃饭这个只少也要算个标配吧！当然，对于我们的网站，HTML就是整个网站的骨架，如果不用HTML，我们很难想像网站长什么 样子。所以这些基础知识我们必需撑握。
在哪里使用HTML？
HTML使用的地方非常的广泛，基于浏览器端所有能看到的网站都用到它。
动态网页与静态网页
静态网页，html代码和内容书写完毕后，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。注意：不要将动态网页和页面内容是否有动画效果混为一谈，比如网页中幻灯片效果，文字滚动效果，如果内容本身没有变化，那么也属于静态网页。
HTML的发展历程
超文本标记语言（第一版 HTML1.0）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
HTML 2.0——1995年11月发布，于2000年6月发布之后被宣布已经过时;
HTML 3.2——1997年1月14日，W3C推荐标准;
HTML 4.0——1997年12月18日，W3C推荐标准;
HTML 4.01——1999年12月24日，W3C推荐标准
XHTML1.0——发布于2000年1月26日，是W3C推荐标准，推出的目的是为了更好的规范HTML语法，与HTML4.01几乎一模一样。(让HTML语法更严谨)
XHTML 1.1，于2001年5月31日发布，W3C推荐标准。
XHTML 2.0，W3C工作草案，然后就没有然后了。
HTML 5——2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。保留HTML4所有功能，增加很多新的功能。
总结：
HTML5是最新的HTML版本，最前沿，新开发的网站几乎都是采用此版本。
W3C：万维网联盟，是Web技术领域最具权威和影响力的国际中立性技术标准机构，该组织制定Web技术标准。
HTML的开发工具
Dreamwear：Adobe的一款可视化开发网页的软件
HBuilder：强力的前端开发工具
EditPLUS：简单便捷的轻型编辑软件
NotePad++：轻量级多国语言编辑器
Sublime：提示功能比较强大(轻，小，需要安装插件)
Vscode：强大的提示和高亮及emmet语法,让写代码更快捷
Webstorm：被誉为“Web前端开发神器”、“最智能的JavaScript IDE”
HTML入门
如何编写一个最简单的HTML文件
新建一个文本文档；将后缀名改为.html（.htm）；就可以在里面开始写HTML代码了；点击文件，使用浏览器打开查看效果。
<b>好好学习</b>
<h1>好好学习</h1>
HTML文件格式
一般我们写的代码需要存储在文件中，HTML代码一般保存在后缀名为 .html 或.htm 文件中。比如index.html或者 index.htm，所以为了让大家知道你文件中是什么内容，我们编写一个HTML网页时文件名的后缀为html或htm，建议使用 .html。
注意：如果你的电脑没有显示扩展名
Win7操作：打开任意一个盘符，找到工具－－>选项－－>查看－－>高级选项－－>已知隐藏文件类型扩展名前面的√去掉
Win10操作：打开任意一个盘符，查看－－>把文件扩展名勾选上
HTML标签格式
什么是HTML 标签？
HTML标记标签也称为HTML标签(HTML tag)，由开始标签和结束标签组成，用于表现结构化的内容，将内容构造成为一个完整的网页。
开始标签是被尖括号包围的元素名。
结束标签是被尖括号包围的斜杠和元素名。比如：<h1>文本内容</h1> <b></b>
<元素名>内容< /元素名>
通常情况下，在我们的HTML中，标签分为两大类：
双标签：是指由开始标签和结束标签组成，比如：<b>哈哈</b>
单标签：是指没有结束标签的标签，由一个标签构成即为开始也是结束；
但根据XHTML的规范，标签一定要有结束，于是写上自结束符号： / ，比如：<hr /> <br />
注意：有些HTML 元素没有结束标签，比如 <br />
HTML标签属性
定义：属性主要用于设置标签的更多细节信息
比如字体标签<font>，如果需要设置字体大小，我们就需要使用size属性；
基本语法：
< 标签名 属性名="属性值"属性名="属性值" .... >
<font size="7">大不大</font> < !-- 设置字体的标签 -- >
注意事项：
属性一般写在开始标签上；属性总是以名称/值对的形式存在（简称：名值对）；属性的值建议大家使用双引号（可以加双引号，也可以加单引号，也可以不加引号；千万不要在一个值又加单引号又加双引）
通用属性
HTML 标签拥有通用属性，也就是每个标签都有属性（有个别例外）。Base，head，html，meta，script，style，title标签不提供下面的属性：
属性 值 描述
class class_rule 元素的类(class)
id id_name 元素的某个特定id
style 样式定义 内联样式定义
HTML基本结构
<!DOCTYPE html><html> <head></head> <body></body></html>
<!--
DOCTYPE: 文档声明
html: 标签告知浏览器其自身是一个 HTML 文档
head: 标签用于定义文档的头部（文档的描述信息）
body: 标签用于定义文档的主体（文档的主体内容）
-->
HTML注释
语法：<!-- 注释内容 -->
含义：注释标签用来在源文档中插入注释。注释会被浏览器忽略。您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的理解。
注意：注释不能嵌套
HTML编码问题
常见的编码格式有：
UTF-8 国际通用编码字符集，UNICODE的灵活版
GBK/GB2312 中文编码字符集
BIG5 中文繁体字符集
UNICODE 大字符集，包含了地球上所有语言的编码
HTML的编码声明为： <meta charset="utf-8"/>
文件编码是指HTML文件保存到硬盘中的编码格式，一般在保存的时候设置，常见的开发工具都可在编辑的时候设置。
注意：文件编码+HTML编码声明必须保持一致
HTML的规范
HTML标签都必需使用尖括号包裹起来，比如 <html>
HTML标签通常是成对出现的，双标签必需要有开始标签和结束标签，比如<b>和</b>
HTML标签不区分大小写(建议都使用小写，可读性更高)
HTML双标签都可以是进行嵌套，但是不允许交叉嵌套
HTML基本标签
hn标签：不是一个标签，而是一组标签的缩写：h1 h2 h3 h4 h5 h6
定义和用法 : <h1>-<h6> 标签可定义标题。定义最大的标题。<h6> 定义最小的标题。
<h1>这是标题 1</h1>
<h2>这是标题 2</h2> ...
p标签
定义和用法:p标签定义段落。
p元素会自动在其前后创建一些空白（段间距）。浏览器会自动添加这些空间，您也可以在样式表中规定。
<p>p元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
br标签
定义和用法:<br>可插入一个简单的换行符。
<br>标签是单标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中规定单标签也需要结束，把结束标签放在开始标签中，也就是<br />。<br>标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。而br 则不会。
hr标签
定义和用法:<hr> 标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
被水平线分隔的标题和段落：
<h1>This is header 1</h1>
<hr />
<p>This is some text</p>
HTML文本标签
b标签和 strong标签
定义和用法:<b> <strong> 标签呈现粗体文本效果。
<b> 标签是基于内容的样式标签 <strong> 的物理版本，但它没有后者的扩展意义。<b> 标签明确地将包括在它和其结束标签之间的字符或者文本变成粗体。如果某种加粗的字体不可用， 浏览器将使用一些其他的表现方法，例如反相显示或者加下划线等。
注意：HTML5中建议使用 <strong>而不使用 <b>
i标签和 em 标签
定义和用法:<i> <em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
在文本中加入强调也需要有技巧。如果强调太多，有些重要的短语就会被漏掉；如果强调太少，就无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强调。
注意：HTML5中建议使用 <em>而不使用 <i>
small标签
定义和用法:<small> 标签呈现小号字体效果。
<small> 标签和它所对应的 <big> 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。与<big> 标签类似，<small> 标签也可以嵌套，从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号，直到达到下限的一号字。
big标签
<big> 标签呈现大号字体效果。
HTML布局标签
布局标签在我们网页中的使用非常的广泛，一般用在盒子模型当中，做一些结构类的分区，比如说：这个区域,一个个div小盒子排列。如图:
span标签
定义和用法：<span> 标签被用来组合文档中的行内元素。
注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
div标签
定义和用法：<div> 可定义文档中的分区或节。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
注意：
div span两个标签没有特殊的功能，只是作为一个内容容器，但使用频率很高，主要与CSS配合使用。
Div：块标签(它会独占一行，主要用于布局)
Span:行内标签(不会独占一行，用于勾选需要CSS修饰的内容)
块标签与行内标签的区别：
块标签独占一行，宽度默认为100%；
行内标签多个并排一行，宽高为内容大小。
特殊符号
显示需要在网页中输出“<JavaScript权威指南>”？ 浏览器会把“<>”解析为标记，不会出现我们想要的效果；
原因：在html中有一些特殊意义的符号，它会被解析为标签，从而不能正常显示
在HTML中有一些特殊意义的东西，使用一个符号来进行表示：语法格式：&符号名;
空格(小空格)
&emsp； 空格(大空格，占一个中文位置)
>； 大于>
<； 小于<
©； ©
其他特殊符号，在HTML中没有特殊意义，但是很难输入的符号，可以使用输入法直接插入，也可以查手册翻符号名和编号
