html5网页开发,html5 开发

HTML5开发需要学习哪些内容

首先不建议自学，慢，有问题不知道如何解决，很快就会失去耐心和信心

其次软件开发是有很多分类的，如果你偏重应用软件，不需要从最基础的东西学起。比如什么编译原理、计算机原理等等都不用学

再次软件开发属于多学科整合，需要相关知识。比如做游戏开发起码要会打游戏，知道一般应该怎么操作才好开发。比如做财务软件，应该有基本的财务知识，不然只做个收入减支出，不能真正实用。

最后搞软件开发是有捷径的。先看下书，对照开发工具有个最基本概念。然后找本有实例的书，边学边练，第三步从网上找别人编好的源代码，分析学习，加深概念。很快就能初步掌握开发技巧，然后边实践边学习，就改变了枯燥的背语法、背函数的学习方式。

相关问答

Q1: 使用 html5 怎么开发一个动态网站？

使用 html5 开发一个动态网站方法：

工具/原料

HBuilder6.6

MUI2.5

方法/步骤

为了演示HTML5 APP页面是如何做到动态调整布局。

1、首先，我们创建一个移动APP项目，然后，添加一个index.html页面。代码里，添加一个图标，以及添加引入一个JS文件，该文件的作用在于：请求后台JS文件。

2、接下来，我们看看service.js文件是如何请求后台JS文件的。编写该service.js文件的重点是：A、如何异步请求后台JS文件；B、请求回来的后台文件，如何动态添加到页面的Head里。

3、紧接着，我们对APP项目进行打包操作：选择需要的打包类型，然后，填写相应的证书信息。如果选择IOS打包，请在打包证书里，添加需要安装的苹果手机UDID（未提供UDID，则不能安装APP)。

4、打包完成后，便可以下载安装APP。先用苹果手机连接电脑，然后通过工具安装APP。当然，这种连接数据线安装的方式，只能适合个人测试使用。如果想给别人批量安装测试，请参考《HTML5 APP开发之APP测试》经验。

1HTML5 APP开发之APP测试

5、APP安装完成后，我们看看打开APP现有的效果是怎样的。我们看到APP页面的左上角，显示了一个联系人的图标。

6、由于菜果手机不同系列的屏幕大小不一样，而且屏幕的分辨率也不一样【安桌手机的也一样】。导致同一个页面布局，在不同的手机上，显示的位置有时偏差比较大，有时也好。当然，这也加大了开发和测试的难度。不可能因一些位置问题，就重新发布APP。下面是苹果手机不同系列的屏幕大小分辨率说明：

7、所以，才有了动态调试页面布局的想法。回到第二步，我们是有请求后台JS文件的（showJSPage.js）。下面看看showJSPage.js，是如何编写的：A、首先判断手机操作系统类型；B、判断屏幕大小。

8、添加了showJSPage.js代码后，启动后台服务。然后，关闭原来打开的APP软件，再重新打开APP软件，便可查看修改后的效果。

9、整个方案的理解重点在于：熟悉JS执行的先后顺序，以及对手机屏幕大小与屏幕分辨率的关系。才能灵活运用，达到自己想要的目的。

Q2: 如何快速开发html5响应式网页

步骤1 创建空白的HTML 5模版

首先，我们创建一个空白的模版，代码很简单，如下所示：

复制代码

步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：

复制代码

读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码

1）首先往标题中增加如下代码：

　Simple HTML5 Template

复制代码

2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：

Home About Parent Page Child

One Child Two with child Child One Child

Two Child Three Child Three

Contact

复制代码

3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：

This is a title for post

Richard KS 20th March 2013 Tutorials HTML5, CSS3

and Responsive 10 Comments Lorem

Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the

1500s

复制代码

4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，元素有两种使用方法：

被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

代码如下：

Categories Category 1 Category 2

Parent Category Child One Child Two

Grandchild One Grandchild Two Grandchild Three

Child Three Category 3

Text Lorem Ipsum is simply dummy

text of the printing and typesetting industry.

复制代码

5）加上最后的标签，代码为：

Copyright@ 2013 HTML5.com Privacy Policy - About Us

复制代码

步骤4 增加CSS样式

首先创建一个空白的样式，如下：

[/code] 然后在中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {

font-family: arial, sans-serif;

font-size: 100%; /* best for all browser using em */

padding:0;

margin:0;

}

*, html { line-height: 1.6em; }

article img { width:auto; max-width:100%; height:auto; }

.sidebar a, article a, header a, footer a { color: #C30; }

header a { text-decoration: none; }

#wrapper {

font-size: 0.8em; /* 13px from 100% global font-size */

max-width: 960px; /* standard 1024px wide */

margin: 0 auto;

}

/* css for */

header { padding: 1em 0; margin: 0px; float: left; width: 100%;

}

header hgroup { width: 100%; font-weight:normal; }

/* css for */

nav

{ display: block; margin: 0 0 2em; padding: 0px;

float: left; width: 100%; background-color: #181919;

}

nav ul ul {display: none;}

nav ul li:hover ul {display: block;}

nav

ul { padding: 0; list-style: none; position:

relative; display: inline-table; z-index: 9999;

margin: 0px; float: left; width: 100%;

}

nav ul:after {content: ""; clear: both; display: block;}

nav ul li {float: left;}

nav ul li:hover a {color: #fff;}

nav

ul li a { display: block; padding: 1em; font-size:

1.125em; color: #ccc; text-decoration: none;

margin: 0px; background-color: #000; border-right: 1px

solid #333;

}

nav ul li:last-of-type a {border-right: 1px solid transparent !important;}

nav

ul ul { background: #5f6975; border-radius: 0px;

padding: 0; position: absolute; top: 100%; width:

auto; float: none;

}

nav ul li:hover { background: #5f6975; color: #FFF;

}

nav ul ul li a:hover { background-color: #4b545f;

}

nav ul ul li {

float: none;

border-bottom: 1px solid #444240;

position: relative;

}

nav ul ul li a {

padding: 0.5em 1em;

font-size: 1em;

width:10em;

color: #fff;

}

nav ul ul ul {

position: absolute; left: 100%; top:0;

}

/* css for */

section.content { width: 70%; float:left; }

.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }

article .entry { clear:both; padding: 0 0 1em; }

h1.post-title { font-size: 1.8em; margin:0; padding:0;}

.entry.post-meta { color: #888; }

.entry.post-meta span { padding: 0 1em 0 0; }

.entry.post-content { font-size: 1.125em; margin:0; padding:0;}

/* css for */

aside.sidebar { width: 25%; float:right; }

aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;

}

aside.sidebar

ul li { width:100%; margin: 0px 0px 2em; padding:

0px; float: left; list-style: none;

}

aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;

}

aside.sidebar

ul li ul li ul li { margin: 0px; padding: 0px 0px 0px

1em; width: 90%; font-size: 0.9em;

}

aside.sidebar

ul li h3.widget-title { width:100%; margin: 0px;

padding: 0px; float: left; font-size: 1.45em;

}

/* css for */

footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;

}

footer .footer-left { width: 45%; float:left; text-align:left; }

footer .footer-right { width: 45%; float:right; text-align:right; }

复制代码

步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：

/* ipad 768px */

@media only screen and (min-width:470px) and (max-width:770px){

body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }

section.content, aside.sidebar { width:100%; }

}

/* iphone 468px */

@media only screen and (min-width:270px) and (max-width:470px){

body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }

section.content, aside.sidebar { width:100%; }

}

复制代码

步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，代码如下：

复制代码

Q3: HTML5是什么？具体是干嘛的？

HTML的全称是超文本标记语言，是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。HTML是由HTML命令组成的描述性文本，可以解释文字、图形、动画、声音、表格、链接等。Html是一种用来描述网页的语言。它被称为超文本标记语言，它是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。

Q4: 请问h5开发是做什么？

简单来说就是做网页的。做UI美工的人把图片设计好后发给他，然后他按照效果图做出来网页，他这岗位标准说法叫前端。做IT的无论后端前端，都是比较繁杂的工作，前端更需要细心耐心，一般来说这样的工作加班都比较多的。

拓展：h5是HTML5的简称，H是表示HTML的意思，是一系列网页文本标签，来显示网页的，5是表示版本，前面有HTML4、HTML3等，数字越高表示这个HTML语言发展的历程，每次数字增加都带来一些新的特性，比如增加标签内容以及新的属性css，语法结构功能扩展等。