HTML5大前端学习过程第一周（Day01）

2020年2月11日
第一次写博客，以前也听说过，但没有看过，也没有写过，今天老师说这是一个非常好的复习方法，所以从今天开始就尝试每天把所学的记录下来，方便自己复习查看，希望可以坚持下来。

一. 本节课学习目标。

1. 了解互联网行业的发展。
2. 了解HTML5的发展史。
3. 了解HTML5的应用场景以及市场前景。
4. 掌握HTML5的概念。 ★重点
5. 掌握HbuilderX开发工具的使用。 ★重点
6. 掌握网页开发基本结构。 ★重点

二. HTML5发展史。
1993年：HTML1.0发布，1993IETF发布草案。
1994年：Tim Berners-Lee创建了非盈利性的W3C组织，致力于定制更加标准化的协议。
1995年：HTML2.0发布。
1996年：HTML3.2发布。
1997年：HTML4.0发布， W3C推荐标准。
1999年：HTML4.01发布，同年，W3C对未来做了展望，认为HTML存在一些缺陷，前途不是很光明，于是W3C转向语言更加规范的XML，为了更好的实现HTML到XML的过渡，推出了XHTML。
2000年：XHTML1.0发布。 规定了所有元素，属性必须使用小写字母，属性值必须加引号，规定每个标签都必须有与之对应的结束标签。
2001年：XHTML1.1发布。
2002年：XHTML2.0发布。 同年开发人员，浏览器厂商也渐渐的放弃了XML。
2004年：各大浏览器厂商脱离了W3C，成立了WHATWG，开始对HTML进行修缮，走向HTML5之路。
2007年：W3C工作组重建，在WHATWG的基础上继续研究，规范也交由WHATWG来制定。
2009年：W3C宣布停止XHTML2的研究工作。
2014年10月29日，HTML5的标准规范最终定稿。
2015年，H5的春天来了，微信，微信公众号。

三. HTML5简介。

1. H5是什么？
   狭义上的解释：HTML5就是HTML的第5个版本。
   广义上的解释：HTML5 = HTML + CSS + JavaScript + API + 框架。
   HTML：决定的是网页的结构。 （内容）
   CSS：决定的是网页的样式。 （美观）
   JavaScript（JS）：决定的是网页的行为。 （功能）
   JavaScript和Java有什么关系？
   就像雷锋和雷峰塔的关系是一样。 没有半毛钱关系的。
2. 什么是HTML？
   HTML（Hyper Text Markup Language）: 超文本标记语言。
   超文本：超出文字的范畴，网页中可以显示多样化内容，比如：文字，图片，音频，视频，gif等等。
   标记： 用来标记内容，给浏览器识别的。
   HTML标记： 通过一对标签的形式来标记内容。 格式：<开始标签> 内容 <结束标签>
   例子： <dog_name> 志远 </dog_name>
   语言：
3. 编译语言： 逻辑性，Java，C，C++等等。
4. 脚本语言： 逻辑性，JS，php，python等等。
5. 标记语言：HTML， 没有逻辑性，只是一堆标签，只需要知道每一个标签标识什么内容即可。

四. HTML5应用场景。

1. 网页开发： PC端网站开发，移动端网站开发。
2. 微信：微信小程序，微信公众号，微信小游戏，朋友圈H5的页面。
3. App： 天猫，淘宝（混合式开发）
4. 快应用：操作系统（手机厂商一块定制的标准）。
5. 小程序：支付宝小程序，百度小程序，今日头条小程序等等。
6. 后台：NodeJS。
   小程序：微信，支付宝。 单独的岗位。
   网站开发：单独岗位。
   App：单独岗位。

五. HbuilderX工具使用。

1. 工具结构。
   
2. 如何创建一个项目。
   2.1 点击创建项目按钮。
   a. 左边的项目管理器，右击，然后选择项目。
   b. 工具栏最左侧的创建按钮，点击，然后选择项目。
   c. 左边的项目管理器，快捷键ctrl+N, 然后选择项目。
   2.2 填写创建项目内容。
   
   项目名称：驼峰命名法，名称由多个英文单词组成，每个单词的首字母大写，比如：HelloWorld。
   HTML模板：选择基本HTML项目模板，生成基本的HTML项目工程目录。
3. 工程目录结构。
   
   HelloWorld: 项目名称，管理项目中所有的内容。
   Css文件夹：用来存放当前项目中所有的css文件。
   Js文件夹：用来存放当前项目中所有的js文件。
   Img文件夹：用来存放当前项目中所有的图片素材。
   Index.html: 网站首页文件，.html结尾的都是网页，一个.html文件就对应一个网页。

六. 网页的基本结构。

1. 网页的浏览器结构。
   
   如何运行一个网页：点击工具栏的运行按钮，选择对应的浏览器，即可使用浏览器打开当前网页。
   
   注意点：
   a. Chrome谷歌浏览器电脑上一定要安装。
   b. 网页运行之前，当前网页一定要保存 ！！！。 保存快捷键：ctrl + S。

2. Html网页的文档结构。
   

3. 注释。
   格式： <!— 注释内容 --> 前面是两个-
   作用： 对代码进行解释说明，但是不属于代码的一部分，不会显示在网页中。

七. 基本概念。

1. 什么是标签？
   用一对尖括号括起来的就叫标签。 <内容>
   2.什么是元素？什么是节点？
   由一对标签（或者单标签）组成的就叫一个元素。
   Html元素，head元素，body元素，title元素，meta元素。
   Html节点，head节点，body节点，title节点，meta节点。
   3.元素嵌套。
   Html元素中嵌套head元素和body元素，所以html元素叫做head元素和body元素的父元素，head元素和body元素叫做html元素的子元素。 父子关系。
   Head元素和body元素是平级关系，兄弟元素。