#yyds干货盘点# 1.2 Web前端开发相关技术

Posted 2022-03-05 江下下啊

一、html

HTML概述

HTML是超文本标记语言（HyperText Markup Language，HTML），是网页的骨骼，是为“网页创建和其他在网页浏览器中看到的信息”设计的一种置标语言。HTML被用来结构化信息——例如标题、段落和列表等，也可用来在一定程度上描述文档的外观和语义。由蒂姆·伯纳斯-李给出原始定义，由IETF用简化的SGML（标准通用置标语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网（W3C）维护。

HTML最新版是HTML5，它是HTML当前的一个主要修订版本，现在仍处于发展阶段。目标是取代1999年所订的HTML4.01和XHML1.0标准，以期望能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及  HTML5时，实际值的是包括HTML、CSS和javascript在内的一套技术组合。

HTML的发展历程

HTML在Web飞速发展的过程中起到了非常重要的作用。

​​版本​​	​​发布日期​​	​​说明​​
​HTML 第一版​	​1993年6月​	​作为互联网工程小组（IETF）工作草案发布（非标准）​
​HTML2.0​	​1995年11月​	​作为RFC1866发布​
​HTML3.2​	​1996年1月​	​W3C（万维网）推荐标准​
​HTML4.0​	​1997年12月​	​W3C推荐标准​
​ISO HTML​	​2000年5月​	​基于严格的HTML4.01语法，是国际化标准组织和国际委员会的标准​
​XHTML1.0​	​2000年1月​	​W3C推荐标准，后来经过修订于2001年8月重新发布​
​XHTML1.1​	​2001年5月​	​较1.0有微小改进​
​XHTML2.0 草案​	​没有发布​	​2009年，W3C停止了XHTML2.0工作组的工作​
​HTML5 草案​	​2008年1月​	​目前的HTML5规范是草案发布的​
​HTML5​	​2014年10月​	​W3C推荐标准​

其中值得一提的是从HTML4开始页面的结构和表现分离两种语言：一种用于实现结构的HTML；一种用于表现的CSS。

二、CSS

CSS概述

CSS（Casading Style Sheets，层叠样式表）是一种用来表现HTML或XML（标准通用标签语言的一个子集）等文件样式的计算机语言。

通过对CSS的学习，你将学会如何为文本和背景添加样式，实现多栏布局，建立起适应各种设备（从手机到台式计算机甚至更大屏幕的设备）的布局等。

CSS的属性

CSS样式表不过是一种文本文件，其中包含一个或多个（通过属性和值）决定网页某特定元素如何显示的规则。

• CSS里有控制基本格式的属性（如font-size和color）
• 有控制布局的属性（如position和float）
• 还有决定访问者打印时在哪里换页的打印控制元素
• CSS还有很多控制项目显示或消失的动态属性，可以用于创建下拉列表和其他交互性组件

CSS3是目前最新的版本，它提供了大量设计人员和开发人员长期期待的功能。这些功能包括圆角、阴影效果、文字阴影、自定义字体、旋转文本、半透明背景颜色、多图像背景、渐变以及其他很多功能。而且目前主流最新版本的浏览器已经实现了很多CSS3的组件（且即将实现更多），因此从现在起就可以很好的使用它们了。

CSS值得重视的一点在于，开发人员可以在HTML页面之外创建CSS文件，再将它应用于网站上所有的页面。这在构建网页之初随后对其进行修改时都极大地简化了样式设置工作。一段时间后，如需重新设计网站，而内容和结构保持不变，就可以在HTML不发生变动的情况下，为网页提供一套全新的外观。

三、JavaScript

JavaScript概述

JavaScript是世界上最流行的脚本语言之一，因为你在PC、手机、平板电脑上浏览的所有网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。简单地说，Java是一种运行在浏览器中的解释型的编程语言，它能够跨平台、跨浏览器驱动网页，与用户交互。

HTML定义网页的内容，CSS定义网页的表现，JavaScript则定义特殊的行为。

JavaScript的特性都是用于增强访问者的体验的——它们在由HTML和CSS构建的核心体验的基础上加强。

建立网站不可能脱离HTML

如果要让网站看起来很吸引人，则离不开CSS

但JavaScript并不是必须的

JavaScript的用途

通过编写简单的JavaScript程序，可以显示和隐藏内容；通过编写一些复杂的程序可以加载数据并动态地更新页面。可以操作定制的HTML5 audio和video元素控件，使用HTML5的canvas元素创建游戏。可以利用地理定位，根据访问者所在的位置定制其体验。

因此将HTML、CSS、和JavaScript三种技术的结合起来进行Web开发，可以编写出界面既美观功能又强大的网站。

四、Web前端开发工具

NotePad

Notepad,指代码编辑器或Window中的“记事本”程序。在Windows下主要用于文本编辑。一款开源、小巧、免费的纯文本编辑器。建议初学者使用NotePad进行编写，这样可以加强代码的编写体验，增强对代码的理解和记忆。

Textpad

TextPad是一个强大的替代Windows记事本Notepd的文本编辑器，编辑文件的大小只受虚拟内存大小的限制，支持拖放编辑，可以把它作为一个简单的网页编辑器使用。普通用户也可以不安装模板而只使用单独的应用程序，支持Unicode编码。可以编译、运行简单的Java程序。

下载地址：​​http://www.textpad.com/download/​​

WebStorm

WebStorm中文译名“网络风暴”，是Jetbrains公司旗下一款JavaScript开发工具。被广大JS开发者誉为“Web前端开发神器”“最强大的HTML5编译器”“最智能的JavaScript IDE”等。

官方下载地址：​​http://www.jetbrains.com/webstorm/​​

Dreamweaver

虽然前面已经介绍了三款非常简单的文本编辑器来编写网页，但是编写效率相对较低，对于语法错误及格式都没有提示，因此，可以使用专门编写HTML网页的工具来弥补这种缺陷。Adobe Dreamweaver,简称“DW”，中文名称“梦想编织者”，是美国Adobe公司开发的集网页制作和管理网站于一身的、所见及所得的网页编辑器，DW是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和浏览器限制的充满动感的网页。

Dreamweaver的网站地图功能可以快速制作网站雏形、设计、更新和重组网页。