01.HTML简介

一、前端技术简介

1、网页制作到前端开发

1）Web1.0时代网页制作

05年之前，当时的网页主要是静态网页（跟服务器没有数据交互的页面，主要用来给用户查看或展示用的）；
网页三剑客：Firework(效果图)、Dreamweaver（转代码）、Flash（动画）

2）Web2.0时代前端开发

05年之后，动态页面开始兴起（可以让用户和服务器进行大量的交互，实现更加强大的功能）；
传统的网页三剑客不能满足web2.0时代网页制作的需求了；
由此诞生了更强大的前端新技术，比如使用一个简单的标签就能创建一个视频播放器。

<video src="/mv.mp4" controls="controls"></video> 

3）前端核心技术

前端开发新三剑客：HTML(超文本标记语言)、css(层叠样式表)、JavaScript(浏览器脚本语言)

三个核心技术的作用是什么？

• HTML:网页结构
• CSS：网页外观
• JavaScript：网页行为
  

4）深入理解前端开发

HTML css js被称为前端开发技术的原因？要解答这个问题，我们需要探讨以下两个问题：

• 什么是上网？
• 打开一个网站我们为什么能够看见上面的内容？
  
• 第一步：地址栏输入网址
• 第二步：按回车键打开网址
• 第三步：浏览器会根据网址找到这个网站对应的服务器
• 第四步：浏览器找到服务器后，会从这个服务器上，把相应的页面下载下来
• 第五步：浏览器解析下载的页面内容展示给用户。

因为我们所用技术(HTML+CSS+JS)是从服务器下载到本地电脑客户端(浏览器)上运行的，可直观显示在用户眼前。

5）前端开发其他技术

2、前端开发到后端开发

随着网络技术的发展，应用复杂度的提升，以及越来越多的后台程序员转入前端，为本来简单的前端工作带来了新的工作模式和内容。以至于对现在的前端工程师的要求也越来越高，在企业中的前端程序员不止要会用前端技术，还要熟悉后台技术以及业务中的相关逻辑。

1）简单认识后端开发

称为后端开发的原因？

• 因为后端开发所用的语言或技术不能在用户客户端（浏览器）上运行；
• 只能在我们看不到的服务器上运行，进行数据或其他业务的处理。

2）后端开发常用语言

• 3P：PHP/JSP/ASP
• node：前面提到的基于js的node也可以进行后端开发

3、前端技术学习路线

主线：HTML==>CSS==》JavaScript==》jQuery==》CSS3+HTML5==>vue.js
辅助：webpack==》gulp==》babel==》nodejs==》express

二、什么是HTML

1、HTML的概念及组成

1）什么是HTML

HTML全称是Hyper Text Markup Language(超文本标记语言)，他是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。

2）HTML文档的组成

一个HTML文档是由标记或文本两部分组成的。

2、什么是HTML标记

1）认识HTML标记

• 带有<>符号的元素被称为HTML标记
• 也称为HTML标签或HTML元素
• 例如：<h1></h1>/<h2></h2>/<p></p>…都是HTML标记
• 标记的作用是将普通的文本标记为（描述为）浏览器能够识别的具有特殊意义或样式的文本。

2）HTML标记的分类及语法

• 双标记：指由开始和结束两个标记符组成的标记。

开始标记的作用：表示该标记作用范围的开始
结束标记的作用：表示该标记作用范围的结束
<标记名>内容</标记名>

• 单标记：指的是用一个标记符号即可完整地描述某个功能的标记。

<标记名/>

• 注意：在HTML中，要养成关闭标记的好习惯，这方面的粗心很可能会引起错误。

<h1>我是一级标题
<p>我是段落</p>

由于浏览器有纠错功能会自动补全h1标签，但是会把p标签包含进去。

3）HTML标记的属性

用来对标记进行一系列的设置，包括字体/字号/位置/颜色等外观或者其他的一些功能进行设置。

• 双标记：

<标记名 属性1="属性值" 属性2="属性值">内容</标记名>

• 单标记：

<标记名 属性1="属性值" 属性2="属性值"/>

双标记的属性要写在开始标记上，单标记要写在自身；
属性是由属性名和属性值组成的，以等号连接的，属性值要以英文的双引号进行包裹；
属性前后要有空格，并且属性之间的顺序是无关的；

4）HTML标签是可以嵌套的

<p align="center">
    <font color="#979797" size="2">
        更新时间：2013年09月28日14时08分 来源：
        <font color="blue">前端开发</font>
    </font>
</p>

注意：在嵌套结构中，HTML元素的样式总是遵循“就近原则”

标记的嵌套是需要遵循相应的原则的：

• 在标记嵌套的过程中，需要先结束最靠近内容的标记；
• 再按照由内及外的顺序依次关闭标记。

<p> <strong> <em>我们正在学习标记的嵌套。</strong> </em> </p> 

<p> <em> <strong>我们正在学习标记的嵌套。</strong> </em> </p>

三、知识扩展

1、浏览器简介

1）常见浏览器

• IE浏览器：
  • 全称是Internet Explorer，由微软公司推出，直接绑定在windows操作系统中，无需下载安装。
  • IE有6.0、7.0、8.0、9.0、10.0等版本，目前最新的是Edge。
• 火狐浏览器
  • 全称是Mozilla Firefox，是一个开源网页浏览器，使用Gecko引擎（非ie内核）。
  • Firebug是火狐浏览器下的一款开发插件，它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发HTML、CSS、JavaScript等的得力助手。
• 谷歌浏览器
  • 全称是Google Chrome，是由Google（谷歌）公司开发的开放原始码网页浏览器。
  • 该浏览器基于其它开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单有效的使用界面。
• 其他的还有：Safari浏览器、欧朋浏览器。

一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。

2）浏览器大战

① 浏览器萌芽期

（1991年-1994年）：

• 1990年Tim Berners-Lee发布了首个网页浏览器World Wide Web,功能非常简单，后改名为Nexus；
• 1993年美国国家超级计算应用中心（NCSA）发布Mosaic浏览器，最大特色就是具有方便易用的图形界面，将Web带向了大众；
• 1994年Marc Andreessen带领Mosaic的程序员成立了Netscape（网景）公司，并发布了第一款商业浏览器Netscape Navigator；
• Netscape Navigator占据主导地位，这一时期浏览器技术还比较简单，很多浏览器都停留在文字和图形处理上，没有太多的新技术；

② 第一次浏览器大战

（1995年-2002年）：微软IE浏览器打败网景Netscape，统霸了浏览器天下

• IE的逆袭之路：
• 1995年微软IE1.0发布（Netscape Navigator2.0），作为Windows 95 插件的形式出现，大小只有1 MB；
• 1995年微软IE2.0发布（Netscape Navigator2.0），同时支持 Windows 和 Mac；
• 1996年微软IE3.0发布（Netscape Navigator3.0），正式捆绑在 Windows 95 OSR2系统中，浏览器之战爆发；
• 1997年微软IE4.0发布（Netscape Navigator4.0），比NN更好的遵循了互联网标准，还提供了播放MP3诸如此类的功能，震惊全球；
• 1998年微软IE5.0发布，微软凭借捆绑销售和巨大的财力，击败Netscape（网景）公司；
• 2001年微软IE6.0发布，进一步完善浏览器，修补漏洞；
• 2002年微软全面胜利，开始主导浏览器市场，市场份额达到95%。
• 网景的垂死挣扎：
• 1998年网景全面溃败，以48亿美元的价格出售给了美国在线（AOL）公司，成为了AOL旗下子公司，Netscape Navigator5.0搁浅；
• 2000年美国在线跳过了 5.x 直接发布了 Netscape 6.0，因速度慢和不稳定饱受批评；
• 2007年美国在线宣布将不再开发和支持 Netscape，自此Netscape浏览器一代霸主走向了坟墓。
• 网景的星星之火：
• 1998年网景公开了它的浏览器源码，并重新命名为Mozilla，全部程序进行了重写；
• 2002年发布了第一个版本；
• 2004年基于Mozilla源码的Firefox首次登台，拉开了第二次浏览器大战的序幕；
• 2004年2月份，由于Firefox的强烈市场攻势，微软的浏览器份额已经从最高点的96%下降到了85%；
• 2006年10月份，为了与火狐狸（Firefox）抗衡，微软提前发布了IE7.0；
• 第一次浏览器世界大战最大的特色是微软通过操作系统捆绑销售模式实现了对Netscape浏览器的完胜。
  这时期浏览器技术特色主要是实现对JavaScript、 Java applets、 CSS、SSL 以及其他一些标准协议支持。

③ 第二次浏览器大战

（2003年-2011年）：浏览器市场百家争鸣，IE浏览器霸主地位动摇

• 苹果Safari浏览器：
  • 2003年1月7日苹果公司发布了Safari公开测试版，并推出自己的Webkit引擎；
  • 2007年苹果公司发布了Safari 3.0，并推出 Windows 版本，Windows 版本评价一般；
  • 2013年苹果公司决定停止开发 Windows 版；
• 火狐Firefox浏览器：挑起了浏览器第二次战争
  • 2004年11月Firefox1.0发布，当年年底Firefox已经赢得7.4%的市场份额；
  • 2005年Firefox1.5发布，Mozilla宣布将 Firefox 开源，当时Firefox在 Windows 平台的市场占有率是 10%；
  • 2008年6月，Firefox 3.0发布，创下了 24 小时内下载次数最多的吉尼斯世界记录。
• 谷歌Chrome浏览器：
  • 2008年9月谷歌公司在超过100个国家发布“Google Chrome”的测试版，特点：轻量、快、异常的稳固；
• 国内浏览器：
  • 2008年4月奇虎360推出360安全浏览器，该浏览器是一款基于IE和Chrome双内核的浏览器；
  • 2009年，搜狗公司推出了搜狗浏览器，该浏览器基于谷歌chromium内核；
  • 2010年07月，腾讯推出了QQ浏览器，该浏览器基于chromium内核开发；
  • 2011年7月18日，百度推出PC浏览器。
• 第二次浏览器世界大战最大的特点是微软IE绝对垄断局面被打破，大型互联网公司都纷纷加入了这场浏览器战争；各大互联网公司推出本企业浏览器，这些浏览器最大特色是嵌入了其他各种互联网服务；互联网企业力图通过互联网入口浏览器将互联网用户和流量导向本企业服务。
  技术进步：
  提高用户体验（优化对视频、图片等访问模式、采用JavaScript技术提高用户访问的流畅性等等）；
  保障用户访问安全（沙箱访问模型、SSL、https）；

④ 第三次浏览器大战

（2012年-至今）：移动终端快速发展，传统浏览器厂商纷纷推出移动版本浏览器。

• 另外一些互联网公司也参与了移动浏览器大战，如：
  • 2013年6月金山网络推出了猎豹移动浏览器；
  • 2014年6月阿里全资收购UC优视，将UC浏览器纳入囊中。
• 这一时期浏览器大战的主要特点是：
  谷歌、苹果等拥有移动智能终端操作系统的互联网公司依靠自己庞大的智能终端市场份额实现了本企业浏览器的快速推广；
  • 谷歌将Chrome浏览器内嵌到了Android操作系统;
  • 苹果将Safari浏览器内嵌到了iOS操作系统。
  • 其他拥有浏览器的互联网公司则纷纷和手机制造商加强合作;
  • 将本企业浏览器内嵌到出厂智能手机中，以期提高本企业浏览器用户使用频率。
• 各浏览器市场份额统计网站：http://gs.statcounter.com/

2、W3C WEB标准简介

1）制定W3C WEB标准原因

• 各大浏览器之间存在竞争关系，为了彰显自己的与众不同，纷纷扩展了一些自己的标签和语法
• 造成为了实现同样的页面效果：
  • 开发者需要针对不同的浏览器学习不同的代码，并写多套页面，增加了学习和开发成本
  • 企业开发一个网站需要针对不同浏览器请多个程序员，增加了用人成本
  • 用户需要下载多个浏览器来查看同一个页面
• 结果适得其反，为解决兼容问题，各大浏览器公司委托W3C组织制定一套中立于平台的统一网页制作标准。

2）什么是W3C WEB标准

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。 包含我们所熟悉的HTML、CSS、Javascript等等。
例如：html标签要正确闭合/大小写要正确/嵌套不能乱用等等…

3）W3C WEB标准优点

• 使网站更易于维护
• 提高页面浏览速度
• 让Web的发展前景更广阔
• 内容能被更广泛的设备访问
• 更容易被搜寻引擎搜索
• 降低网站流量费用

4）W3C WEB标准构成

• 结构标准：用于对网页元素进行创建和整理，通常指的是HTML。
• 表现标准：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
• 行为标准：用于网页特效及交互的编写，通常指的是JavaScript。

3、HTML发展史

1）第一阶段HTML4

• 超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）
• HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时
• HTML3.2—1996年1月14日，W3C推荐标准
• HTML4.0—1997年12月18日，W3C推荐标准
• HTML4.01（微小改进）—1999年12月24日，W3C推荐标准
• HTML4.01—2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准
• 优点：HTML4.01写法随意，容错性强
• 缺点：HTML4.01写法凌乱、编码不规范导致浏览器的各种古怪行为

2）第二阶段XHTML

• XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布
• XHTML1.1—2001年5月31日发布
• XHTML2.0是W3C的工作草案，由于改动过大，学习成本过高而最终胎死腹中（09年），因此，现在最常用的还是XHTML1.0标准。
• 优点：XHTML1.0实现更加严格并且统一的编码规范，放弃HTML的凌乱写法，降低了浏览器的解析难度，方便移植到更多平台，得到极大用户
• 缺点：XHTML1.0更加严格，要求代码绝对正确，不能有丁点错误，导致开发者难度加大，数亿页面无法显示

3）第三阶段HTML5

• 2004年HTML5被提出
• 2007年被W3C接纳并成立新的HTML工作团队，
• 2008年1月22日公布HTML5第一份正式草案，
• 2012年12月17日HTML5规范正式定稿，
• 2013年5月6日，HTML5.1正式草案公布。
• HTML5作为最新版本，和XHTML2.0不同，它不以改正之前HTML版本的毛病为目的，采用的依然是比较随意的写法；而是补全Web开发者急需的各种功能，如CSS3、表单验证、音频视频、本地存储、地理定位、绘画、Web通信。