如何制作HTML页面

1、首先我们需要在桌面上，新建一张记事本

2、然后我们需要打开记事本，编写代码

3、然后我们需要把记事本修改后缀名为.html

4、然后我们需要在桌面上就会有一张网页，这一点很重要。

5、最后我们需要需要在浏览器上运行该网页

H5，是HTML5的简称，它就是一种高级网页技术。相比H4，H5有更多的交互和功能，最大的优点之一是在移动设备上支持多媒体。平时看到那些邀请函、幻灯片、小游戏??都是H5网页，它跟平时上网看到的那些网页本质上没有任何区别。

HTML 5 的第一份正式草案于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

扩展资料：

特性

1.语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

2.本地存储特性（Class: OFFLINE &STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。

3.设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。

HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

4.连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。

HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

参考资料：百度百科——html5

重构

最近公司的一个项目，其实已经完成了任务的70%吧，这个70%是表面上做出来的页面的完成度。但是我发现在某一天以后，这个任务居然进度极端异常的缓慢。我感到诧异，因为已经允许不套入Wordpress制作皮肤，而直接制作一个只包含丰富JS特效的静态站点。

进一步深入了解，发现两个前端工程师，竟然在SVN上分了两个目录在进行这个项目，而且被告知最正式的版本，是测试服务器上的。

然后我尝试了解，他们是如何进行分工合作的，虽然两人没有明确彼此进行指责，但是，彼此推诿有时候是比指责更严厉的态度。从他们对彼此的推诿，我发现，他们将各自擅长的领域（一个擅长制作页面，一个擅长整理JS）作为他们彼此对立的一个矛盾点。具体的表现如，页面的CSS制作出来以后，JS为了写特效，又把页面推翻了，制作自己引入了一些js，可是又没有和大家做一个介绍和说明。我意识到，他们之间缺乏必要的沟通，也缺乏基本的信任，也许对于中国人（看国足和乒乓球的差异）对于团队之间的信任，总是做的十分保守、有限。

我获取了代码，审视了他们的工作成果，我才真正的发现，问题已经远不止于缺乏沟通和信任的问题了，而是浮躁。大家都急于将这个任务尽快的完成，于是采用的做法就是CSS和HTML，又一个页面做一个页面的样式，JS有一个特效做一个特效。正如前言所言，诚然，这就是一个很显然的高效做法。可是这里带来了很多问题：

1、一个页面一套CSS（一套相应的id和class命名），这种做法将来的维护成本会很高，因为他忽略了整个网站可被重用，代表这个网站的通用性特征，如果要对某个特征进行修改，可能需要对同一个位置的样式进行多次重复的修改。

2、问题1往往会引伸出该问题，就是，在检查制作结果的时候，往往那些在一个页面制作达到要求的地方，为什么在第二个相似的设计结构的页面会有差异？而且甚至存在这种差异第三种、第四种版本。这个问题，如果站在设计的角度，会是一个十分严重的问题。

3、每个页面即兴的写一堆脚本，东一块西一块的，也许今天我为了项目的进度，可以认为这个特效是完成了的。但是他日真的套入到程序中，可能会让程序员碰个一鼻子灰，因为程序员也许有耐心看你的代码，但我多数时候愿意认为，他们不懂，就算他们懂，也没有义务去帮你做些什么。结果往往是，比如A君负责写JS，为此工作了3天，完成了，可是在程序开发的时候，发现不对劲，又要求A君来进行配合工作，开发进行了5天，A君陪了5天。为什么A君要在之后的5天内还要继续参与呢？那么就是他前面的3天工作没有完成了。当然，现实中，我们多数不会这样去看待这个问题，而是尽量让A君还是在后面的5天去参与进去，也不会有人去追究他前面3天究竟都做了哪些不合理的事情。而后由于后面5天人员参与数量增加，我们会希望压缩项目的开发时间云云。

重构，即时重构，就以现在既有的这些代码，其实我已经很早就放下心中的目标：一个完美代码构成的网站，我需要他们每个人都明白，怎么样能让自己更加高效准确的工作。

抽象

对于前端制作，提抽象，可能有些过分，然而我这么多年来的经验告诉自己，只有剥离了表面现象，才能洞察需求的实际。

我就不谈那些有的没有的空把式了，对于页面制作和特效定制，一个最行之有效的抽象方式就是：不要急于动手实现，而是多看设计图，找出：

1、排除设计元素差异（颜色、icon），找出页面结构之间的共同特性，其中需要着重注意以下几个特点：

* PSD是怎么做辅助线的，PSD辅助线是帮助你理解设计意图的最佳切入点，有些设计会认真的做栅格辅助线，这种PSD基本上一上手，HTML要怎么写，已经很明确。

*实际内容外宽度 <->内部常见布局分布（左右比例，布局模式是左中右，还是上下通栏）

*正文内容默认字体，h1 - h6的字体

*全局a标签默认样式，字体，颜色，hover style等

*form元素的样式风格

2、排除设计细节的差异（文字大小、margin、padding、height、line-height等），找出可被重用的模块（Box）模型，而这种模型，往往是以一个如下基础模型为基础的：

这种模型从功能上区分，往往有以下几种：

*列表块，列表头为标题块，列表为内容块

*正文块，正文标题为标题块，正文为内容块

*列表块还可以细分，列表内容中每一个：内容标题为标题块，描述内容为内容块（摘要等）

这种模型，可以通过以下的特征来做出区分：

*所在的页面，比如用于首页每个栏目的最新内容的列表，还是某个栏目首页的内容列表等

*出现在页面的位置，比如Ajaxd出层，DropDown Menu，侧边栏，正文栏等

*用于什么用途、表现侧重点是什么，比如博客列表页，会提供内容摘要，便于用户选择阅读，而门户型网站内容列表，会仅仅显示标题，因为信息量大，相册的列表页，总是会做得更加sexy，便于能吸引用户的眼球等。

*和页面其他部位的关联，这个需要因应各个的设计的不同，就不具体举例了。

3、排除实现的复杂度，找出特效展现的共同特性，并尽可能的想象其实现的一些细节。这部分工作是尤其重要的，因为他决定了一个页面的工作重点所在，通过对这部分重点的细节想象，你会发现如下问题：

*现在有什么，还缺什么？

*合理程度，这是用户体验基础，不合理的体验，是不会被认可使用的

*用户如何 *** 作的，页面的元素如何变化，既能做到惊叹，而又在用户的可理解可被认知范围内，而后最大程度的缓冲系统与用户之间的惊诧点

*合理性，合理性，合理性

当你确信，在找到上述3个问题的答案后，并且做出足够的思考与预估后，我们可以开始动手制作了。

什么优先？什么其次？

优先要做的，永远都是通用性、共用性方面的东西，他会伴随在你整个制作过程中。当然，大多数公司，这种通用性存在共识，基础的CSS、基础的JS Framework。然而，对于项目和任务本身来说，你需要做更多这个项目自身的共用性的工作。其实说白了，就是上面的三个问题。

1、问题一所对应的

*body 字体，颜色，背景色，背景图，a标签的通用样式

*页面布局模式，常用宽度定义等

*h1 - h6的样式控制

*input、select样式

2、问题二所对应的

*制作多个和设计元素、设计细节无关的通用性的box模型（甚至不包括宽度的细节），仅仅描述一个模型的骨架性特征。

3、问题三对应的

*为需要实现特效的部位做足够的兼容性准备。

问题1，往往不存在太多的问题，可是大家看看自己写过的CSS，有多少句在页面里定义了字体、字体大小、颜色的，这些部分的代码也都是可以被再次抽象，而再减少对设计细节进行描述的。

问题2，是从根本上提高CSS编码质量的一条解决之道。初步了解CSS特性的人，往往会患上重度描述的症状，他们寄望于通过编写大量、甚至是成瘾性的定义样式特性，为求实现设计。确实，这种Hash结构让我们了解到了描述的快感。然而，正式因为这种重度描述，令CSS文件的修改，成为一个令人头疼的所在，密密麻麻的样式声明，不断重复又重复的特性描述，整个样式被定义的面目全非。

局部特征描述法，是一个很好的治疗的模式，通过对仅有的若干个特征进行描述，而后进行组合使用，能让我们的HTML和CSS获得解放（代码量），同时带来更多的灵活性（我不再需要对权重过度紧张等）。

---