HTML5网页制作案例(html网页制作例子)
如何用HTML5制作网页
现在以HBuilder工具编写为例：
1. 打开此工具，在项目管理器中右键单击创建一个web 项目
2.右键单击项目名称，新建一个HTML文件----form01.html
!DOCTYPE html
!--
?? ?作者：offline
?? ?时间：2017-01-06
?? ?描述：form表单
?? ?
?? ?在form标签中，有两个经常使用的属性
?? ?action：表单提交服务器地址
?? ?method: 表单提交的方法/方式----get/post
?? ???????????????? 其他提交方式---put delete
?? ???????? 提交方式----get（默认的提交方式）
?? ???????? 1.请求的参数放到地址栏中
?? ???????? 2.不安全
?? ???????? 3.存在缓存
?? ???????? 4.传输数据的大小收到限制
?? ???????? 提交方式----post
?? ???????? 1.请求的参数放到http协议中
?? ???????? 2.相对安全---账号密码等信息不会放到地址栏中
?? ???????? 3.没有缓存
?? ???????? 4.传输数据的大小限制较小
?? ????????????? 修改成post之后，可能会出现错误信息。
?? ?input标签：定义输入字段，用户可在其中输入数据。
?? ??????? 属性：
?? ??????? type 指示 input标签的类型，默认的是text
?? ???????????????????????? 按钮类型： 普通按钮 button 重置按钮 Reset? 提交按钮 submit
?? ??????? value 定义要显示的文本。
--
html
?? ?head
?? ??? ?meta charset="utf-8"
?? ??? ?titleform表单1/title
?? ?/head
?? ?body
?? ??? ? form action="" method="post"
?? ??? ? ?? ?input type="text" name="username" value="zhangsan" /
?? ??? ? ?? ?input type="submit" value="提交" /
?? ??? ? /form
?? ?/body
/html
3.查看此网页是不是HTML5，主要看表头
4.HTML5新增了很多新内容，具体可以查看API，例如：在网页中嵌套音频/视频文件的格式
html5怎么制作一个响应式网页？
HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例，讲述如何制作响应式网页。
1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。
2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。
具体代码：
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
HTML5怎么制作响应式网页
1.调整视口
代码实例：
!DOCTYPE?html
head
????meta?charset="UTF-8"?/
????title布局之路-移动端开发实例/title
????meta?name="viewport"?content="width=device-width,user-scalable?=?no"?/
????link?rel="stylesheet"?type="text/css"?href="css/reset.css"?/
/head
body
????div?class="wrap"/div
/body
/html
代码解析：由于使用不同设备打开网页时，宽度均有所不同，所以不能讲视口设置为固定值，应当为width=device-width,即将视口设置为当前设备的宽度。
2.确定设计图的最小字体
浏览器（部分）能够显示的最小字体未12px，当移动端页面宽度为320px时，要保证最小字体为12px，那么在1080px的设计图中，最小字体应当为42px。
代码实例：
????style?type="text/css"
????????html?{
????????????font-size:?42px;
????????}
????/style
3.浮动布局
各个区块都是浮动的，不是固定不变的。为了能自适应各个窗口。
代码实例：
.main?{
??float:?left;
??width:?70%;
}
.box?{
????float:?left;
????width:?60.93%;
????font-size:?1.71rem;
????text-align:?center;
????line-height:?4.64rem;
}
float浮动的好处就是，如果宽度不够放置下这个元素，元素会自动滚动到下方。
4.通过媒介查询，为不同设备加载相应样式
有条件应用样式：
?style
????@media?all?and(min-width:500px){?...?}
????@media?(orientation){?...?}
/style
代码解析：
第一行媒体查询代码指的是：为宽度大于等于500px的设备设置样式。
第二行媒体查询代码指的是：为纵屏状态（可见区域大于或等于宽度）下的移动端设备设置样式。
有条件的加载样式表：
head
????link?rel="stylesheet"?href="wide.css"?media="screen?and(min-width:1024)"?/
????link?rel="stylesheet"?href="mobile.css"?media="screen?and(max-width:320)"?/
/head
代码解析：
第一行媒体查询代码指的是：为宽度大于等于1024px的设备，加载wide.css文件。
第二行媒体查询代码指的是：为宽度小于等于320px的设备，加载mobile.css文件。
5.使用百分比和rem替换px
除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
代码效果对比：
/*使用固定像素*/
.box?{
????float:?left;
????width:?658px;
????font-size:?72px;
????text-align:?center;
????line-height:?195px;
}
/*使用百分比和rem*/
.box?{
????float:?left;
????width:?60.93%;
????font-size:?1.71rem;
????text-align:?center;
????line-height:?4.64rem;
}
代码解析：
水平方向的值，将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。
例如，父级宽度为1080px， 子级元素为197px，那么子元素转换为百分比为：197/1080*100%=18.24%。需要注意的是百分比根据父级计算，当标签结构级别不同时，计算公式中的“分母”也有所不同，在开发时这个地方很容易出现问题，请务必注意。
垂直方向的值，将具体像素调整为rem，与水平方向相比，垂直方向的计算就比较简单。例如，行高为195px，HTML标签当前的字体大小为42px，将行高转换为rem单位，即195/42= 4. 64rem。
H5页面怎么制作？？
可以挑选专业的h5制作工具来制作h5页面。
不同于简单替换图片文字，专业的h5页面制作工具有丰富的交互功能可供使用，制作出来的h5页面更酷炫和丰富，使用户印象深刻，比较知名的工具有：epub360等。
通常我们所说的H5就是H5广告，大多是在微信上宣传营销使用的，而HTML5是第五代HTML的标准，可以说，H5都是基于 HTML5 实现的，包括目前我们看到的大部分网页，基本上所有H5都遵循HTML5这个规范，不然就会出现问题。
它是一种基于互联网的网页编程语言，而手机端广告只不过是其中的一个点。2007年W3C（万维网联盟）立项HTML5，直至2014年10月底，在经历了各种被实验，被抛弃，被甩，被各家大佬当皮球踢来踢去之后，html5的规范终于正式定稿了！
