HTML5大前端学习过程第一周(Day01)
2020年2月11日
第一次写博客,以前也听说过,但没有看过,也没有写过,今天老师说这是一个非常好的复习方法,所以从今天开始就尝试每天把所学的记录下来,方便自己复习查看,希望可以坚持下来。
一. 本节课学习目标。
- 了解互联网行业的发展。
- 了解HTML5的发展史。
- 了解HTML5的应用场景以及市场前景。
- 掌握HTML5的概念。 ★重点
- 掌握HbuilderX开发工具的使用。 ★重点
- 掌握网页开发基本结构。 ★重点
二. 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简介。
- H5是什么?
狭义上的解释:HTML5就是HTML的第5个版本。
广义上的解释:HTML5 = HTML + CSS + JavaScript + API + 框架。
HTML:决定的是网页的结构。 (内容)
CSS:决定的是网页的样式。 (美观)
JavaScript(JS):决定的是网页的行为。 (功能)
JavaScript和Java有什么关系?
就像雷锋和雷峰塔的关系是一样。 没有半毛钱关系的。 - 什么是HTML?
HTML(Hyper Text Markup Language): 超文本标记语言。
超文本:超出文字的范畴,网页中可以显示多样化内容,比如:文字,图片,音频,视频,gif等等。
标记: 用来标记内容,给浏览器识别的。
HTML标记: 通过一对标签的形式来标记内容。 格式:<开始标签> 内容 <结束标签>
例子: <dog_name> 志远 </dog_name>
语言: - 编译语言: 逻辑性,Java,C,C++等等。
- 脚本语言: 逻辑性,JS,php,python等等。
- 标记语言:HTML, 没有逻辑性,只是一堆标签,只需要知道每一个标签标识什么内容即可。
四. HTML5应用场景。
- 网页开发: PC端网站开发,移动端网站开发。
- 微信:微信小程序,微信公众号,微信小游戏,朋友圈H5的页面。
- App: 天猫,淘宝(混合式开发)
- 快应用:操作系统(手机厂商一块定制的标准)。
- 小程序:支付宝小程序,百度小程序,今日头条小程序等等。
- 后台:NodeJS。
小程序:微信,支付宝。 单独的岗位。
网站开发:单独岗位。
App:单独岗位。
五. HbuilderX工具使用。
- 工具结构。
- 如何创建一个项目。
2.1 点击创建项目按钮。
a. 左边的项目管理器,右击,然后选择项目。
b. 工具栏最左侧的创建按钮,点击,然后选择项目。
c. 左边的项目管理器,快捷键ctrl+N, 然后选择项目。
2.2 填写创建项目内容。
项目名称:驼峰命名法,名称由多个英文单词组成,每个单词的首字母大写,比如:HelloWorld。
HTML模板:选择基本HTML项目模板,生成基本的HTML项目工程目录。 - 工程目录结构。
HelloWorld: 项目名称,管理项目中所有的内容。
Css文件夹:用来存放当前项目中所有的css文件。
Js文件夹:用来存放当前项目中所有的js文件。
Img文件夹:用来存放当前项目中所有的图片素材。
Index.html: 网站首页文件,.html结尾的都是网页,一个.html文件就对应一个网页。
六. 网页的基本结构。
-
网页的浏览器结构。
如何运行一个网页:点击工具栏的运行按钮,选择对应的浏览器,即可使用浏览器打开当前网页。
注意点:
a. Chrome谷歌浏览器电脑上一定要安装。
b. 网页运行之前,当前网页一定要保存 !!!。 保存快捷键:ctrl + S。 -
Html网页的文档结构。
-
注释。
格式: <!— 注释内容 --> 前面是两个-
作用: 对代码进行解释说明,但是不属于代码的一部分,不会显示在网页中。
七. 基本概念。
- 什么是标签?
用一对尖括号括起来的就叫标签。 <内容>
2.什么是元素?什么是节点?
由一对标签(或者单标签)组成的就叫一个元素。
Html元素,head元素,body元素,title元素,meta元素。
Html节点,head节点,body节点,title节点,meta节点。
3.元素嵌套。
Html元素中嵌套head元素和body元素,所以html元素叫做head元素和body元素的父元素,head元素和body元素叫做html元素的子元素。 父子关系。
Head元素和body元素是平级关系,兄弟元素。