⑴ 怎么制作html5网站页面让它适应电脑和手机的尺寸
用以下代码开头:
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
使用百分比定义宽度,,
CSS代码可以适当使用:
@media only screen and (max-width:449px){
}
自动根据屏幕像素 调用不同的CSS代码。
⑵ h5是什么呀,怎么做的呢
h5,全称为html5,是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。
(2)html5网站怎么做扩展阅读:
html5前端各种需求迭代非常频繁、工作强度大,而且直面用户很重要,这是H5前端人才需求旺盛的基础前提。HTML5如果颠覆了原生APP,不会是简单的Web App崛起,而是意味着“大生态”系统的构建,包括新的操作系统、新的玩家、新的商业模式、新的产品逻辑等等。
HTML5正在快速融入iOS与Android主导的原生生态系统,原生APP内嵌入webview访问web页面已经成为通行做法,用HTML5开发原生APP也早不是新鲜事。并且HTML5技术的进一步发展解决了原生APP生态的一些痼疾。
⑶ 新手怎么做html5网站
HTML5网站包含HTML、CSS、JavaScript等各种技术
HTML表示结构,CSS表示样式,JavaScript表示行为
在做html5网站的时候,首先要掌握HTML与CSS的知识,完成网站的布局以及样式处理,可以借助《HTML5布局之路》等书籍进行学习,掌握基本的知识,并按照行业开发标准进行网页开发
之后,在完成结构样式之后,借助《Head First JavaScript程序设计》学习JS语言,进一步为网站添砖加瓦
⑷ 响应式HTML5网站怎么做
你可以使用成熟的框架例如 bootstrap + 媒体查询;
这是业界主流的开发模式。
⑸ 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 mmy text of the printing and typesetting instry.
Lorem Ipsum has been the instry's standard mmy 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 mmy
text of the printing and typesetting instry.
复制代码
5)加上最后的标签,代码为:
Copyright@ 2013 HTML5.com Privacy Policy - About Us
复制代码
步骤4 增加CSS样式
首先创建一个空白的样式,如下:
[/code] 然后在http://necolas.github.com/normalize.css/中下载这个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库放在标签前,代码如下:
0
复制代码
⑹ html5 网站制作
可以不用啊!
html5只是一个新的html标准。
使用html5制作的网站和普通网站其实没有多大的区别,区别就在于html5增加了很多标签,例如对视频方面有很好的支持,不用使用播放器就可以调用视频,一些很酷的网站都是使用html5+css3实现的。因为用专用标签代替了原来的通用的div,优化方面上更具优势!使搜索引擎更能易读懂并理解你的网页。
HTML5 是未来趋势。低版本的浏览器不支持htm5。对于低版本的 IE浏览器,ie6等。也就是不支持 HTML5 新的标签的浏览器,你可以在网页中嵌入 html5shiv.js。
如果你的网站想在手机或平板上显示,建议你使用html5。
如果你只是想做一个普通的网站,没有额外的功能需求,html就能满足你的需求。如果你是新手,可以从直接html5学起。
⑺ H5页面怎么制作
可以挑选专业的h5制作工具来制作h5页面。
不同于简单替换图片文字,专业的h5页面制作工具有丰富的交互功能可供使用,制作出来的h5页面更酷炫和丰富,使用户印象深刻,比较知名的工具有:epub360等。
通常我们所说的H5就是H5广告,大多是在微信上宣传营销使用的,而HTML5是第五代HTML的标准,可以说,H5都是基于 HTML5 实现的,包括目前我们看到的大部分网页,基本上所有H5都遵循HTML5这个规范,不然就会出现问题。
它是一种基于互联网的网页编程语言,而手机端广告只不过是其中的一个点。2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,在经历了各种被实验,被抛弃,被甩,被各家大佬当皮球踢来踢去之后,html5的规范终于正式定稿了!
⑻ 类似这种html5网页怎么做出来的
现在很多很炫的网页,如果是电脑端的话,基本上现阶段使用html+jS、jquery的比较多,而手机的端的话,基本上还是使用html5,这种响应式的设计;
JS的简介:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能;
jquery:jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
html5的话其实也就是一种html的升级,光靠这样一种语言是无法实现酷炫的网页效果,基本都是多种前端语言的结合。
⑼ 使用 html5 怎么开发一个动态网站
使用 html5 开发一个动态网站方法:
⑽ html5如何制作网站并使用自己的服务器
这个问题太笼统了,使用 html5可以开发静态网站,其实你这里的 html5 指的是 html5 + css3+ javascript ,当然很多人以为 h5 是一种技术,其实 h5 就是 html5 + css3+javascript .
h5本来是不存在的,由于使用html5+css3+javascript可以写出那些炫酷的效果,而培训机构太多,很多业务员直接就用h5来说,导致出现的新名词。
其实主要使用的是html5的 canvas 结合css3的 2d, 3d,和javascript 等技术来实现的。
至于怎么开发网站,这个还真的不是三言两语能说得完的。使用服务器,服务器也分两种,一种是需要备案的,一种是不需要备案的,单有服务器也还不行,还要域名,先将域名解析到服务器,然后通过 ftp上传代码到服务器的指定位置,就可以通过域名来打开你的网站了。