H5（HTML5）页面策划技巧

喽大家好，我是作者“未来”，本期分享的内容是新媒体运营课程系列，本系列总共10个阶段（51章），每天坚持学习一章，2个月蜕变为新媒体运营高手哦！

第八章第四章 H5页面策划技巧

绍

H5-Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。h5-Dooring让H5制作，更方便！

Github

https://github.com/MrXujiang/h5-Dooring

产品特点

简单方便

任何人只需要傻瓜式拖拽或进行简单编辑即可生成精美的H5页面

插拔式体验

产品完全开源，可植入任何系统，并支持二次开发

持续迭代，无限可能

目前正在持续迭代中，后续可根据需求开发功能更强大的可视化系统.

有关技术栈

React 前端主流框架(react,vue,angular)之一,更适合开发灵活度高且复杂的应用
dva 主流的react应用状态管理工具，基于redux
less css预编译语言，轻松编写结构化分明的css
umi 基于react的前端集成解决方案
antd 地球人都知道的react组件库
axios 强大的前端请求库
react-dnd 基于react的拖拽组件解决方案，具有优秀的设计哲学
qrcode.react 基于react的二维码生成插件
zarm 基于react的移动端ui库，轻松实现美观的H5应用
koa 基于nodejs的上一代开发框架，轻松实现基于nodejs的后端开发
@koa/router 基于koa2的服务端路由中间件
ramda 优秀的函数式js工具库

在线下载

用到了之前文章中介绍到的FileSaver.js

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

后端部分

后端部分由于涉及的知识点比较多, 不是本文考虑的重点, 所以这里大致提几个点, 大家可以用完全不同的技术来实现后台服务, 比如说PHP, Java, Python或者Egg. 笔者这里采用的是koa. 主要实现功能如下:

保存模板
真机原理的数据源存储
用户相关功能
H5图床和静态文件托管

快速开始

推荐使用yarn替代npm，具体还得看个人喜好

下载代码

git clone https://github.com/MrXujiang/h5-Dooring.git

cd ./h5-Dooring

安装依赖包

yarn install

Usage

启动应用

yarn run start

目前已具备的功能

组件库拖拽和显示
组件库动态编辑
H5页面预览功能
保存H5页面配置文件
保存为模版
移动端跨端适配
媒体组件
在线下载网站代码功能
添加typescript支持
表单设计器/自定义表单组件
可视化组件Chart实现
在线编程模块(Mini Web IDE)
新增图表组件面积图，折线图，饼图

后续更新

升级模版库
丰富组件库组件，添加可视化组件如折线图, 饼图, 面积图等
添加配置交互功能
组件细分和代码优化
单元测试

预览截图

官网有视频介绍和操作教程，感兴趣的小伙伴可以去看看

总结

市面上很多H5制作工具，但是像h5-dooring这样开源且免费的是不多见的，如果你觉得h5-dooring是你的菜，可以多多支持它的开发者，这样h5-dooring也能更好的得到发展，更加方便大家使用！

、什么是HTML

HTML简介

HTML是用来描述网页的一种语言，它是一种超文本标记语言，由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

发展史

HTML：Hyper Text Markup Language超文本标记语言

超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）

HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。

HTML3.2—1996年1月14日，W3C推荐标准

HTML4.0—1997年12月18日，W3C推荐标准

HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准

XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布

XHTML1.1—2001年5月31日发布

XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。

目前最新的版本为HTML5，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5规范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度

HTML的优势

各大浏览器厂商对H5的支持
市场的需求
跨平台

二、HTML的基本结构

<html>......</html> HTML文档的开始和结束标记。
<head>……</head> 头控制标记，不在界面上进行展示，子标签可设置SEO优化的一些内容以及设置网页的编码。
<title>……</title>：设置浏览器的窗口上标题。
<body>……</body>：页面可见内容。

三、HTML的基本标签

标题标签

h1~h6

源代码

<!DOCTYPE html>

<head>

</head>

<body>

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

<h7>这是七级标题</h7>效果怎么显示不出来呢？？？

<h1>这是一级标题</h1>

</body>

</html>

浏览器预览效果

段落标签和换行标签

p标签为段落标签，br标签为换行标签

源代码

<!DOCTYPE html>

<head>

<title>段落和换行标签</title>

</head>

<body>

<h1>北京欢迎你</h1>

<p>北京欢迎你，<br>为你开天辟地</p>

<p>北京欢迎你，<br/>有有勇气就会有奇迹</p>

</body>

</html>

浏览器预览效果图

水平线标签

hr标签为水平线标签

源代码

<!DOCTYPE html>

<head>

<title>水平线标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了半年的积蓄，<br>漂洋过海来看你</p>

<hr/>

</body>

</html>

浏览器预览效果图

字体样式标签

em为斜体标签，strong为字体加粗标签

源代码

<!DOCTYPE html>

<head>

<title>字体样式标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了<em>2017</em>半年的<strong><em>积蓄</em></strong>，<br>

<em><strong>漂洋过海</strong></em>来看你

</p>

<hr/>

</body>

</html>

浏览器预览效果图

注释和特殊符号

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

源代码

<!DOCTYPE html>

<head>

<title>注释和特殊符号</title>

</head>

<body>

<pre>

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

</pre>

5<10>6 <br>

"我是被双引号引起来的内容"<br>

©自由职业开发者公司<br>

我是测试空格的

</body>

</html>

浏览器预览效果图

以上就是HTML的简单入门，后续带大家更深入的了解HTML

在线咨询

上一篇：Spring Boot 集成 socket.io 后端实现消息实时通信
下一篇：JavaScript 鼠标拖拽

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

H5（HTML5​）页面策划技巧

第八章 第四章 H5页面策划技巧

绍

Github

产品特点

有关技术栈

在线下载

后端部分

快速开始

目前已具备的功能

后续更新

预览截图

总结

、什么是HTML

二、HTML的基本结构

三、HTML的基本标签

您的项目需求

H5（HTML5）页面策划技巧

第八章第四章 H5页面策划技巧