1.1 HTML概述
1.1.1 什么是HTML
HTML（Hyper Text Markup Language，超 文本 标记 语言）是纯文本类型的语言，它是Internet上用于编写网页的主要语言，使用HTML编写的网页文件也是标准的纯文本类型的文件。
查看网页源代码的方式
- F12键或鼠标右键-"查看网页源代码"
1.1.2 HTML发展历程
- 1993 年HTML首次以因特网草案形式发布
- 2.0
- 3.0（20世纪90年代见证了HTML大幅发展）
- 1999 年 4.0.1
此时，业界普遍认为HTML已经“无路可走”了，Web焦点转移至XML和XHTML上。
- 2004年WHATWG（Web Hypertext Application Technology Working Group，Web超文本应用技术工作组）成立，创立HTML5规范并开发新功能。Web2.0时代到来！
至此，旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站。HTML5能解决实际问题，目前已经成为了HTML新一代标准！
1.2 HTML文件基本结构
一个HTML文件由一系列的元素和标记组成。元素是HTML文件中重要组成部分，HTML5用标记来规定元素的属性和它在文件中的位置。
1.2.1 HTML的基本结构
1. 标记
- 单独标记
格式：<元素名称>或<元素名称/>推荐使用后者 如:
1 <br/> 此处为：单独标记
- 成对标记
格式：<元素名称>要控制的元素</元素名称> 大多数标记都是成对出现的，由首标记和尾标记组成或者成为开始标记和结束标记（开始标签和结束标签）如：
1 <title>天晴天朗,IT爱好者</title> 此处为：成对标记
在HTML文件中某个元素的完整定义语法如下：
1 <元素名称 属性1="值1" 属性2="值2" ... 属性N="值N">元素资料</元素名称> HTML的完成定义语法
2. 元素
用一组HTML标签将一段文字包含其中，这段文字与标签组合在一起称之为“一个元素”。
1 <title>天晴天朗,IT爱好者</title> 此处的整体，称之为“一个元素”
3. HTML文件结构
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>此处是网页页签的标题</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
- 其中，<html>与</html>分别是指“文件开始”和“文件结束”
- <head>与</head>之间的部分是HTML文件的“文件头”——用于说明文件的标题和整个文件的一些公共属性
- <body>与</body>之间的部分是HTML的“文件主体”
如果不加以说明，均是指嵌套在<body>与</body>这一“成对标签”中。
1.2.2 HTML基本标记
1. 文件开始标记<html></html>
用于表示该文件是用“超文本标记语言”（HTML）编写的。<html>和</html>成对出现，分别位于文件的“最前面”和“最后面”。
2. 文件头部标记 <head></head>
文件头部用来规定该文件的标题和文件的一些属性。标题出现在Web浏览器窗口的标题栏中。如：“京东(JD.COM)-正品低价..”字样，就是该文件的标题。
3. 文件标题标记<title></title>
每个HTML文件都需要一个文件名称，网页的名称写在<title>和</title>之间，嵌套在<head>和</head>之间。
1 <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
4. 元信息标记 <meta>
meta元素提供的信息是用户不可见的，一般用来定义页面信息的名称、关键字、作者等，一个HTML头页面中可以有多个meta元素。
1 <meta charset="UTF-8"> 2 3 <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> 4 5 <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"> 6 7 <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
5. 页面的主体标记 <body></body>
<body>和</body>分别表示网页“主体部分”的开始和结束。常见属性如下：
1 text 设定页面文字的颜色
2 bgcolor 设定页面背景的颜色
3 background 设定页面背景的图像
4 bgproperties 设定页面背景图像为固定状态，不随页面滚动
5 link 设定页面默认的链接颜色
6 alink 设定鼠标正在单击时的链接颜色
7 vlink 设定访问过后的链接颜色
8 topmargin 设定页面的上边距
9 leftmargin 设定页面的左边距
6. 页面注释
- 给代码加注释，是一种很好的编程习惯，习惯成就人生！
- 尊重自己的劳动成果，尊重他人的阅读感受！
- 适当的注释可以帮助用户更好地了解网页中各个模块的划分，锻炼自己换位思考的能力！
在HTML文档中，注释分为3类：
- <html></html>中的注释
- CSS层叠样式表
- JavaScript
注释说明 单行注释： <!--注意哦，此处是<html></html>中的“单行注释”哦！--> /*注意哦，此处是CSS层叠样式表中的“单行注释”哦！*/ //注意哦，此处是JavaScript中的“单行注释”哦！ 多行注释： /* 注意哦，此处是JavaScript中“多行注释”哦！ 注意哦，此处是JavaScript中“多行注释”哦！ 注意哦，此处是JavaScript中“多行注释”哦！ */
错误注释举例：
1 <!--这里可以添加注释吗？！--> 错误001 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <--指定页面编码格式--> 错误002 6 <meta charset="UTF-8"> 7 <title><!--天晴天朗的博客地址：https://home.cnblogs.com/u/tqtl911/--></title>错误003 8 </head> 9 <body> 10 <h1>欢迎来到我的博客！cnblogs</h1> /*给cnblogs添加一个注释*/ 错误004 11 </body> 12 </html> 13 错误001：<!DOCTYPE html>之前不可以添加注释的哦！ 14 错误002：注释标记不完整，<---->前面缺少一个"英文感叹号！"注意哦，是英文的哦！ 15 错误003：<title></title>>标签内部不可以添加注释的哦！ 16 错误004：注释符号使用错误！HTML中应该使用<!--这里是注释哦-->，而/*这里是注释哦*/是CSS层叠样式表中的注释符号。
1.3 编写第一个HTML文件
1.3.1 HTML文件的编写方法
- 手工直接编写
- 使用可视化软件
- 由Web服务器一方实时动态生成
1、由于HTML语言编写的文件是标准的ASCII文本文件，可使用任何编辑器进行打开。如Windows自带记事本工具或者使用Notepadd++等工具进行编辑。
2、Webstorm、Pycharm、Hbuilder、Sublime等IDE工具，大大提高编写速度。
3、通过后端的网页编程实现，如JSP、ASP、PHP，一般情况下需要数据库配置完成。
1 <!DOCTYPE html><!--注意，这里的上方是不可以添加注释的哦！--> 2 <html lang="en"> 3 <head> 4 <!--指定页面的编码格式，统一用万国码，UTF—8--> 5 <meta charset="UTF-8"> 6 <!--注意哦，此处用了"我们"而不是"我"，大家一起共同成长！--> 7 <title>我们的第一个HTML文件，体验进入"Web前端"的世界！</title> 8 </head> 9 <body text="#663399"><!--设置文字的颜色，body的属性之一哦！--> 10 <h2 align="center">HTML5真的很简单哦！</h2><!--添加一个标题，给自己鼓劲儿吧！--> 11 <hr width="50%"/><!--看到这里是注释，在此处添加一条横线，宽度占比50%！--> 12 <p>希望我的博客能祝你学到前端的知识，一起共同努力吧！</p> 13 <p> 14 谨记：编程，让你的人生不受限！<br/> 15 编程改变人生，代码改变世界！<br/> 16 让我们一起喝下这碗"纯粹的"心灵鸡汤吧！ 17 </p> 18 </body> 19 </html>
“终身”学习，生活充满诗意！