工作首先要善用其器，越想从事网页设计(现已发展为前端工程师)，越熟悉其所需的技术是必然的。
网页设计的三剑客是指HTML、CSS、JavaScript，现在是这样说的。
1.html----网页的基本结构
把网页比作人，网页的基本结构就像人的身体，具有眼睛、鼻子、嘴、手、脚等基本要素。 html是用来制作网页“身体”的。
)1) html是超文本标记语言的缩写，严格来说，html不是语言。 为了理解这门语言，我们需要了解历史。
标记语言最早用于出版行业。 出版社在印刷出版物时对印刷作品的排版有严格的要求。 另外，出版物的作者、负责出版的编辑和印刷业者之间需要交流字体的风格和尺寸。 为了提高作者、编辑和印刷商之间印刷排版的交流和工作效率，在原稿的边缘加上几个符号指示印刷要求。 这是标记语言的第一个应用。
通用标记语言(简称GML )是由IBM公司创建的。 为了将文件结构化为标准格式，GML将这些描述标记为章节、重要小节、下一重要小节(按标题级别区分)、段落、列表、表格等。 GML对文档作者很有用，因为它不需要在打印机字体规格、行距和页面设计要求上花费过多的精力。 可见通用标记语言是规范的一个标准。 (这与古代八股文不同，为了规范文章结构，科举考试中考生的文章必须按一定的格式书写。
超文本标记语言是标准通用标记语言下的APP应用程序，也是用标记符号标记出现在网页上的各个部分的标准。 web文件本身是文本文件，通过在文本文件中添加标签，可以向浏览器传达文字的处理方法、画面的配置方法、图像的显示方法等其内容。 浏览器依次读取web文件，并根据标记解释和显示该标记的内容。 对于书写错误的标记，不指出其错误，也不停止其解释的执行过程。 作者只能通过显示效果分析错误的原因和错误之处。 由于对同一标签的解释因浏览器而异，因此显示效果可能不同。 (W3C联盟是一个解决web APP应用平台不兼容、标准化问题的组织。
)2) html特征： html文件是包含标签的文本文件； 浏览器根据html的标签显示页面； html文件必须具有htm或html扩展名。 可以使用文本编辑器创建html文件。
)3) html文档主要由标签构成，标签也称为html元素。 html的元素有很多，但元素的组成是一定的。 人的身体就像由细胞组成一样，细胞种类很多，但每个细胞都是由细胞膜、细胞质、细胞核组成的。
html元素主要由标签、元素名称和属性组成。开始标记)也称为“打开标签”)、结束标记)也称为“关闭标签”(/)，它们用于定义网页中的每个单元元素名称必须在开始标记中，不能有空格； 属性用于进一步增强信息，以“属性名称='属性值'”的形式给出。
具体格式如下。 元素名称属性名称1='属性值1 '属性名称2='属性值2 ' .元素主体/元素名称
注：一些元素没有结束标记，一些元素的结束标记可以省略。 (关于是否需要关闭标签的讨论，请参阅笔者的其他博客。
)4) html元素为“http://www.Sina.com/(blocklevelelement )”、“http://www.Sina.com/”在线电子元件，3http://www.Sina
块级元素的特征：页面从左到右显示得很满，并且在触摸页面边缘时自动换行。 也就是说，块级元素在浏览器中显示时，通常以新行开始或结束。 例如div、h1、p、ul、li、table、dl、dt标签。
行级元素(行内元素)的特点是可以在同一行中显示而不改变html文档结构)，这意味着行级元素通常在浏览器中显示时不会以新行开始或结束。 例如span、b、td、a、img、strong、input、a标签。
可变元素：根据上下文确定是块级元素还是行级元素。 例如，button、script。
块级元素与行级元素的区别：行级元素的宽度和高度取决于内容的多少。 也就是说，行级别的要素设定width和height无效，但不能设定line-height； 行级元素转换为块级元素。 显示： block。 转换后，可以设置行级元素的宽度和高度。 块级元素可以包含行级元素，但行级元素不能包含行级元素。
块级元素详细分析块级元素、行级元素和可变元素
请待看笔者的另一篇博客。要学习更多标签元素及其属性见点击打开链接。
2.CSS---网页的外观
一个人如果只有身体显然是不够的，还必须穿不同的衣服，佩戴各色的装饰品。CSS就是用来创造网页外观的，即用来对html中的元素进行精雕细刻的修饰，如字体大小、文本的颜色和背景、元素之间的距离等等，CSS所体现的就是网页的“外在美”。
CSS是cascading style sheets(层叠样式表)的缩写，它是一种使网页表现和内容分离的标记性语言。使用CSS可以使网页更加美观，它控制的是网页的外观表现。
CSS的特点：CSS是一种标记语言，无需编译，直接由浏览器执行；CSS文件的后缀名必须是css；通过简单的更改CSS文件就可以改变网页的整体表现形式，从而减少工作量。
CSS的基本语法格式：选择器{属性1:属性值a 属性值b 属性值c;属性2:属性值;}
选择器的种类可以分为3种：标签名选择器、类选择器、id选择器。
标签选择器：每一种html标签都可以作为标签选择器，用来说明该标签的CSS样式。
类选择器：先自己定义一个类选择器，定义格式：.类名{属性:属性值}，然后在html文件中通过元素的class="类名"属性的方式来引用。类选择器适用于所有的html标签，一个类选择器可以在页面中多次被使用。
id选择器：先自己定义一个id选择器，定义格式：#id名{属性:属性值}，然后在html文件中通过元素的id="id名"的方式来引用。每个id在页面上只能使用一次，具有唯一性。
除了以上三种基本选择器以外，还有一些扩展选择器，如：通用选择器、多元素的组合选择器、属性选择器、伪元素和伪类选择器。由于种类比较多而且比较重要，所以单独详细写在另一篇博客中。
常用CSS属性列表：
取值描述color设置文字或元素的颜色background-color 设置背景颜色bancground-image 设置背景图像font-family设置字体font-size设置文字大小list设置列表的样式cursor设置鼠标的样式boeder设置边框的样式padding设置元素的内边距margin设置元素的外边距
引用CSS样式的方法有：内联样式、嵌入样式、外部样式、导入样式。
内联样式表：通过style属性直接套进html中去，例如：
<h2 style="color:red">text</h1>
这会使指定的标题变成红色。
嵌入样式表：只应用于当前页面，将所有的样式集中定义在一起放在样式标签<style>中，<style>标签放在<head>中。
外部样式表：这种方式实现了html和css代码的完全分离。将所有的样式定义保存成css文件，网页要使用该文件时，必须在<head>标签中使用<link>标签，例如：
<html><head><title>外部样式表</title><link herf="style.css" rel="stylesheet" type="text/css"/></head>...... 导入样式表：当浏览器不能很好的支持CSS时，使用导入样式表则浏览器会对CSS部分不做处理，这样html虽然不带任何样式，但是能正常显示内容。使用格式：<html><head><title>导入样式表</title><style><!--@import url(style.css)--></style></head>...这四种样式表的优先级：就近原则（谁离标签近，谁的优先级就高）。
说到CSS就不得不提盒子模型，盒子模型是网页布局的基石。
这个盒子的属性由四部分组成：边框border、外边距margin、内边距padding、盒子中的内容content。
盒子有四个方向：上top、右right、下bottom、左left。
设置盒子属性值的方式有两种：分别设置和同时设置(分别设置比较简单，这里介绍一下同时设置)。
同时设置：当一个属性的属性值有四个值时，则四个值分别是：top-->right-->bottom-->left方向的值；当有三个属性值时，则三个值分别是：top-->left、right-->bottom方向的值（左右方向的值相同）；当有两个属性值时，则两个值分别是：top、bottom-->left、right方向的值（上下、左右方向的值分别相同）；当有一个属性值时，则四个方向的属性值是相同的。
盒子的3D模型，从上往下看盒子分为5层，上面的层盖住了下面的层，第一次~第五次分别是：border、content+padding、background-image(背景图像)、background-color(背景颜色)、margin。
CSS的定位机制有三种：标准文档流、浮动布局、绝对定位。其中浮动布局设计的初衷仅仅是实现文字环绕图片的效果。其中涉及到的浮动属性和清除浮动的方法将在另一篇博客中专门研究。
3.JavaScript---网页的特效
一个人如果只是穿戴好了精美的服饰，那他的身材和服饰起到作用仅仅是给人留下表面印象而已。他真正的灵魂应该是他的言谈举止、内涵、修养和思想，这些东西是别人通过接触和交互才会了解的，这也是真正吸引他人的魅力所在。JavaScript在网页中所起到的作用就是增加网页的“内在美”，提高交互体验。
JavaScript是一种由 Netscape的livescript技术发展而来的脚步语言，主要是为了解决服务器端处理速度慢而推出的语言。JavaScript可以被嵌入到html文件中显示特定的效果。JavaScript可以做到不使用第三方网络媒体而回应使用者的需求事件。
JavaScript的主要特定：使网页增加互动性；能够使有规律、重复的html文本简化，减少下载时间；能及时响应用户的操作，对提交的表达做及时的检查，无需浪费时间交由CGI验证。
JavaScript共有7类运算符：赋值运算符、算术运算符、比较运算符、逻辑运算符、条件运算符、位操作运算符、字符串运算符。
四类表达式：赋值表达式、算术表达式、布尔表达式、字符串表达式。
基本编程语句：赋值语句、switch选择语句、while循环语句、for循环语句、do while循环语句、break循环中止语言、continue循环中断语句。
对象：例如要设置网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，document.bgcolor="blue"表示设置的背景颜色为蓝色。
事件：用户与网页交互时产生的操作称为事件。绝大部分的事件是由用户的动作所引发，；例如，用户用鼠标点击按钮，就产生onclick事件，若鼠标在连接上移动，就产生onmouseover事件等。在JavaScript中事件往往与事件处理程序配套使用。
关于JavaScript更加详细的研究学习请待见小编的另一篇博客。