【云驻共创】-如何开发H5页面
什么是H5
H5是HTML5的简称，HTML5是定义HTML标准的最新的版本。这个术语表示两个不同的概念：
1、 一个新版本的HTML语言，具有新的元素，属性和行为
2、 有更大的技术集，允许更多样化和强大的网站和应用程序，
3、 HTML5 ≈HTML+CSS+JS
相较于H4，H5最主要的变化还是在于它的语义化标签，在H5之前，对于页面的开发，开发人员经常使用类似与“id=‘footer’”来标记一些特定的页面内容，比如页面头部、章节、页脚等等。即一个‘div’打天下，但这样存在的一个明显的不好的地方就是，这些div没有实际的意义。而在H5中，引入的大量的语义化标签，明显的提升了网页的质量与语义，比如、、等，在平时的开发过程中，应尽量使用这些语义化的标签，来提升我们编写的网页。
H5有什么优势？
H5开发主要有以下优势：
1、 跨平台：唯一一个通吃各个主流平台（PC\MAC\安卓、苹果等）的跨平台语言
2、 快速的迭代能力
3、 降低成本
4、 导流入口多
5、 分发效率高
开发页面中用到的主要知识点有哪些？
知识点1：HTML+CSS+JS三大件各自的作用
在开发H5页面中，常用到的基本就是HTML+CSS+JS这三大件，如果把开发一个整体的页面比作生产一辆汽车的话，那么HTML可以抽象的理解成搭建汽车的框架，就是把车大体的样子搭建出来，这个时候的"车子"或者页面会很粗糙，一眼看去可能就是一堆铁盒子按照某个艺术生的构想随意的摆放在哪里，搭建成了一个想想中的作品。CSS 则可以看成是把这辆汽车进行了细致的雕琢，让其有了华丽的外观，满足了用户的审美需求。但现在的"汽车"充其量就是一辆车模，静静的摆放在那里。JS 的加入，则是给这辆汽车加入的动力系统，使车辆有了动态的美，满足了功能性的需求。概括成一句话就是：HTML搭建页面框架，CSS美化页面呈现（CSS也可以完成动态效果），JS是页面加入动态效果。
知识点2：拼接技术（CSS知识点）
拼接技术哪家强，。。。。。这里说的拼接技术，主要指的是页面元素的布局。我们经常看到的页面都是由多种元素按照特定的顺序，固定到页面的某个位置。这里的技术点主要涉及到的知识点就是"定位"，在不使用框架的情况下，"定位"这个知识点我个人认为是搭建页面时候的最重要的知识点，没有之一。
谈及定位，主要分为：浮动、相对定位和绝对定位。
浮动：元素脱离文档流
相对定位：元素"影分身"，在元素原来的位置存在元素的占位影子，本身则可以根据left，right，top,bottom 来进行定位。参照物则是元素本身原来存在的位置。
绝对定位：元素脱离文档流，本身根据left，right，top,bottom 来进行定位。这里需要注意的是绝对定位的元素的参照物是以开启定位的最近的父元素为参照的。
知识点3：清除浮动
为什么要清除浮动？
这里所说的清除浮动，指的是清除浮动与浮动之间的影响。清除浮动主要为了解决父元素没有设置高度，子元素在开启浮动后无法正常的撑开父元素，造成高度塌陷。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
}
li{
float: left;
width: 100px;
height: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>生命壹号1</li>
<li>生命壹号2</li>
</ul>
</div>
<div class="box2">
<ul>
<li>许嵩1</li>
<li>许嵩2</li>
</ul>
</div>
</body>
</html>我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。
清除浮动
（1）overflow: hidden
（2）.clearfix 清除浮动写在爸爸身上
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 兼容 IE */
.clearfix {
zoom: 1;
}另外的圣杯布局和双飞翼布局也需要深刻的了解，了解其原理思想，可以进一步提升对定位的理解。可以先了解双飞翼布局，在了解圣杯布局。
知识点3：JS知识点
JS 的知识点很多，这里只提一个，轮播图。
轮播图使用的很广泛，华为、京东、小米等官网都会见到，如何独立的写出一个轮播图是H5开发需要必备的技能，当然后期接触到框架后可能会简单些，但是JS源生来写轮播图，对于前期学习JS的知识点是很有帮助的。也可以加深一些开发思想的理解，比如元素的转绑。
如何用H5开发页面呢？
怎么开发H5页面，我个人的开发建议如下：
1、 整体处着眼。H5页面的开发，通常会有一个设计稿，拿到设计稿后，我们首先需要确定的就是页面的版心，即这个页面的宽、高各是多少。明确了版心，我们后面开发的时候，就有了整体的参照。
2、 划分页面。根据页面将页面拆分划分不同的模块。一般划分为：头部、内容、顶部三大块。有的页面可能还有侧边栏、浮动栏等。然后在对每个模块进行再次的划分，例如头部模块（以下图华为的classroom为例）通常可以划分为：logo（下图左侧绿框）、导航栏（下图中间绿框）、用户信息（下图右侧绿框）等。
3、 模块化开发。搭建框架，定位内容。以上图头部模块为例，整个头部模块又划分了3个区域，在开发的时候，可以使用外部元素包裹三个独立的元素，这样来搭建一个大体的框架。实例代码：
<!-- 整体的头部模块-->
<div id="header">
<!-- 左侧图标区域-->
<div class="icon">
</div>
<!-- 中间导航区域-->
<div class="nav">
</div>
<!-- 右侧用户信息区域-->
<div class="info">
</div>
</div>其它区域的搭建基本上同头部区域搭建的思路一致。都是对特定的模块，划分不同的区域，单独搭建，最后在通过把各个模块整体的组合起来，这样就整体的搭建好了一个页面。
以上是对于前端H5开发的知识点，只是讲到了华为云课堂课程的冰上一角，鉴于文章的篇幅，这里不再过度的展开，如果你正在学习前端，有了一些基础，没有一个练手的项目或者想要对自己学的知识点没有串成线，欢迎来华为云课堂来看看，也许这里的课程正是你想要的。课程地址：[地址链接]
本文整理自华为云社区内容共创活动+【内容共创系列】科普教程内容输出：前端移动开发——HTML5——签约作者征集令，推荐/参与活动有奖
- 点赞
- 收藏
- 关注作者
评论（0）