关于HTML与CSS的讲法，我们采取的是随讲随练的方式，每节课程之后都为各位设计了能够实现的“小功能”。换句话说，我们在课程中以“实现页面开发”为目的，一步一步的进行实现，在其中一些相关的“细节”知识点我们暂时先忽略掉，先完成主干的学习。在一个阶段的主干知识学习完成之后，我们再回头详细分析“细节”。这样更有利于大家的吸收和理解，不容易陷入到一些不必要的问题当中。
本文内容概要：1网站开发的流程划分网站开发的各个流程介绍创建第一个HTML文件4前端页面制作-HTML基本标签一、网站开发的流程划分一个网站的制作过程，通常需要经历5个阶段。前端开发在整个开发过程中主要是在网站设计阶段、网站改进阶段进行参与，主要负责其中的三个部分，分别是“前台页面制作”、“网站测试”、“修改”。在整个开发流程当中，不同职位的人都类似于一颗颗螺丝钉，只有整体良好的运行，才能够打造一个优秀的产品/项目。对于前端（HTML5）开发工程师来说，要做的不仅仅是了解自己的工作，还要了解与自己相关工作的职位，也要对流程有一定的了解，这样对于当前的工作以及未来的发展都是有帮助的。
二、网站开发的各个流程介绍先上图，之后我们再详细解释：1网站需求调查阶段需求调查阶段通常是在客户提出建设一个网站的要求之后开始的，这时候最需要做的东西就是对这个网站做需求分析。
到底什么是需求分析呢？其实理解起来是很简单的，所谓的需求分析就是分析客户要的是什么，需求的东西是什么。试想如果我们投入大量的人力、物力、财力，开发出的网站却没人要，那所有的投入就都是徒劳。需求分析之所以重要，就是因为它具有目的性、方向性、决策性，它在网站开发过程中具有举足轻重的地位，所以提醒大家一定要对网站的需求分析具有足够的重视。在一个大型商业网站的开发中，它的作用要远远大于直接设计或编码。简言之，需求分析的任务就是解决“做什么”的问题，就是要全面地理解客户的各项要求，并且能够准确、清晰地表达给参与项目开发的所有成员，保证开发过程按照客户的需求去做，而不是为技术而迁就需求。因此，网站前期的需求分析是相当重要的。
而在这个阶段中，与客户做沟通的通常就是我们的产品经理了，他需要了解各种各样的需求之后，通过市场调研，与客户协商，明确好每一个需求，并书写出网站功能描述书。
网站技术分析阶段拿到网站功能描述书，明确网站的细致需求之后，我们就可以开始着手制作网站了，不过在这之前我们还有一点是要考虑的。那就是面对这么多需求，我们的技术能否可以进行实现，所以作为项目经理的存在，在这个阶段就要根据需求描述进行网站的前后台技术分析，分析各个功能是否通过当前的技术手段，或者使用什么样的新技术能够更好更快的进行实现。最后就是给你的下属留下你分析完之后书写出来的网站技术解决方案了。
网站页面策划阶段在确定了整个网站的需求以及搞定所需要的技术之后，就要迎来网站真正的开发阶段了。此时第一个登场的是我们的设计师，他们需要把握的是这个网站到底如何来进行设计。而一个网站应该具备什么样的功能，采取什么样的表现形式，并没有一个统一的模式。因为不同形式的网站其内容也是千差万别。因此，网站中的内容应该根据客户的需求，企业的背景来进行确定，对于网站的表现形式，也应根据网站的设计风格来确定。
在这个阶段，对网站的策划尤显重要。设计师或UI（UserInterface（用户界面））设计人员将需求分析的结果加以适当的分析，然后设计一个用户可以直接感知的原始美工图，也就是要做网站的静态图片版。它能够方便客户与开发人员就网站建设的背景、设计风格、网站内容达成共识，并建立需求变更制度与流程，方便后期的制作与完善。
4网站设计阶段经过上述的阶段之后，我们就可以正式的开始制作网站了，此时就是我们前端开发工程师与后台开发工程师为主导的阶段了。
对于前端开发工程师来说，网站的制作主要包括页面重构、首页制作、制作模板、书写样式表。所谓的页面重构就是我们依照设计师给的原始PSD图来使用代码实现静态页面。首页是一个网站的门面，是一个网站的灵魂，因此，首页制作的好坏是一个网站成功的关键所在。制作模板便于设计出具有统一风格的网站，并且模板的运用能为网站的更新和维护带来极大的方便，为开发出优秀的网站奠定了基础。样式表是一个很神奇的东西，它能把网页制作得更加绚丽多彩，使网页呈现不同的外观。当网站有多个页面时，修改页面链接的样式表文件即可同时修改多个页面的外观，从而大大地提高工作效率，减少工作量。
在前端开发工程师完成他的工作的时候，我们的后台人员也一样在对网站的功能进行实现。最后在设计阶段，前端与后台都完成之后将进入我们的网站测试阶段了。
5网站改进阶段所谓的网站改进阶段其实就是我们的网站测试阶段，这时候包括了我们的网站测试，网站发布与推广，以及后期的修改与维护。而这些工作通常也是我们前端与推广域运营专员共同完成的工作职责。
在最后，我们再回过头来，你会发现作为前端开发工程师的我们，在网站制作的这5个大步骤中，其实一直都是很重要的一个存在（当然这里面的所有人员配置与工作职责都是很重要的）。
三、创建第一个HTML文件
先了解一下HTML的基本规则
1后缀名为html——这种文件用于书写结构-即HTML代码
标签通常是成对出现的，一开一关，如：标签名字内容区/标签名字
也有几种不成对出现的标签：meta
4使用Tab键进行缩进-缩进原则为：每一个级别在当前状态下缩进一次
5网页文档的读取顺序是由上到下meta（字符设置）放置于title之上
然后，跟我一起动手，创建你的第一个HTML文件吧
在Sublime当中新建一个文件，存储为“HTML5学堂-demo.html”(此处“HTML学堂-demo”是一个文件名，而后面的.html是文件名的后缀)，务必注意：需要将文件保存成.html后缀。即：文件名.html。
之后在页面当中敲入如下内容：
!doctypehtml
html
head
metacharset=utf-8
titleHTML5学堂/title
/head
bodyHTML5学堂-h5course/body
/html
代码解读：
!doctypehtml
本句代码表示文档声明，用于声明这个文件是一个HTML文件，注意!采用的是英文状态下的。
html
head/head
bodyHTML5学堂-h5course/body
/html
本句代码中html中包括两种，一种是头部，用head来表示，另一种是身体，用body来表示。head标签中的内容在网页当中是不会显示在浏览器区域的，而body中的内容就是我们在网页中显示出来的东西（此处网页中的内容是：HTML5学堂-h5course）。
head
metacharset=utf-8
titleHTML5学堂/title
/head
本部分当中，meta用于表示元信息[用于描述这个网页文档的信息]（日后我们会对meta进行详细的讲解），此处的meta定义了这个文件的编码格式，即utf-8。每个文件有其自己的编码格式，如果编码格式错乱，中文就变成了一堆乱码。因此这句话是为了保证页面中的内容能够正常呈现而存在的。
title标签用于表示这个文件的标题，当你双击，使用浏览器打开这个html文件时，你会在网页选项卡的位置上看到你书写的内容。
四、前端页面制作-HTML基本标签
针对于我们前端来说，真正的网站开发又是怎么样的？这时候作为前端的我们就需要熟悉一些前端开发所要用的HTML标签，那下面我们来学习一些常用的HTML标签，把它分为块、行两大类。
文档声明以及基本的HTML结构：h1~h6:作为标题使用，并且依据重要性递减；h1是最高的等级；
块元素标签：h1~h6:作为标题使用，并且依据重要性递减；h1是最高的等级；
div：无语义标签，主要用于布局；
p:定义段落；
ol:定义有序列表；
ul:定义无序列表；
dl:定义自定义列表；
dt:定义列表中的项目（如图片、文字等）；
dd:描述列表中的项目。
行元素标签：span：无语义标签，类似div；
strong：定义强调文本，表示加粗；
em：定义强调文本，表示倾斜；
b：定义修饰文本，表示加粗；
i：定义修饰文本，表示倾斜；
img：定义图片，用于在页面中显示图片；
a：定义链接。
我们罗列出来了HTML常用标签，不禁会去想一个问题，我该怎么用呢？不急，我们看下面的这个例子就能够明白了。
实例代码：
!DOCTYPEhtml
html
head
metacharset=UTF-8
titleHTML5学堂-H5course/title
/head
body
divclass=wrap
!--文章的最大标题使用h1标签，a标签表示可以链接的页面地址--
h1ahref=