H5（HTML5?）頁面策劃技巧

嘍大家好，我是作者“未來”，本期分享的內(nèi)容是新媒體運營課程系列，本系列總共10個階段（51章），每天堅持學習一章，2個月蛻變?yōu)樾旅襟w運營高手哦！

第八章第四章 H5頁面策劃技巧

紹

H5-Dooring是一款功能強大，開源免費的H5可視化頁面配置解決方案，致力于提供一套簡單方便、專業(yè)可靠、無限可能的H5落地頁最佳實踐。h5-Dooring讓H5制作，更方便！

Github

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

產(chǎn)品特點

簡單方便

任何人只需要傻瓜式拖拽或進行簡單編輯即可生成精美的H5頁面

插拔式體驗

產(chǎn)品完全開源，可植入任何系統(tǒng)，并支持二次開發(fā)

持續(xù)迭代，無限可能

目前正在持續(xù)迭代中，后續(xù)可根據(jù)需求開發(fā)功能更強大的可視化系統(tǒng).

有關技術(shù)棧

React 前端主流框架(react,vue,angular)之一,更適合開發(fā)靈活度高且復雜的應用
dva 主流的react應用狀態(tài)管理工具，基于redux
less css預編譯語言，輕松編寫結(jié)構(gòu)化分明的css
umi 基于react的前端集成解決方案
antd 地球人都知道的react組件庫
axios 強大的前端請求庫
react-dnd 基于react的拖拽組件解決方案，具有優(yōu)秀的設計哲學
qrcode.react 基于react的二維碼生成插件
zarm 基于react的移動端ui庫，輕松實現(xiàn)美觀的H5應用
koa 基于nodejs的上一代開發(fā)框架，輕松實現(xiàn)基于nodejs的后端開發(fā)
@koa/router 基于koa2的服務端路由中間件
ramda 優(yōu)秀的函數(shù)式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");

后端部分

后端部分由于涉及的知識點比較多, 不是本文考慮的重點, 所以這里大致提幾個點, 大家可以用完全不同的技術(shù)來實現(xiàn)后臺服務, 比如說PHP, Java, Python或者Egg. 筆者這里采用的是koa. 主要實現(xiàn)功能如下:

保存模板
真機原理的數(shù)據(jù)源存儲
用戶相關功能
H5圖床和靜態(tài)文件托管

快速開始

推薦使用yarn替代npm，具體還得看個人喜好

下載代碼

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

cd ./h5-Dooring

安裝依賴包

yarn install

Usage

啟動應用

yarn run start

目前已具備的功能

組件庫拖拽和顯示
組件庫動態(tài)編輯
H5頁面預覽功能
保存H5頁面配置文件
保存為模版
移動端跨端適配
媒體組件
在線下載網(wǎng)站代碼功能
添加typescript支持
表單設計器/自定義表單組件
可視化組件Chart實現(xiàn)
在線編程模塊(Mini Web IDE)
新增圖表組件面積圖，折線圖，餅圖

后續(xù)更新

升級模版庫
豐富組件庫組件，添加可視化組件如折線圖, 餅圖, 面積圖等
添加配置交互功能
組件細分和代碼優(yōu)化
單元測試

預覽截圖

官網(wǎng)有視頻介紹和操作教程，感興趣的小伙伴可以去看看

總結(jié)

市面上很多H5制作工具，但是像h5-dooring這樣開源且免費的是不多見的，如果你覺得h5-dooring是你的菜，可以多多支持它的開發(fā)者，這樣h5-dooring也能更好的得到發(fā)展，更加方便大家使用！

、什么是HTML

HTML簡介

HTML是用來描述網(wǎng)頁的一種語言，它是一種超文本標記語言，由一套標記標簽組成，在制作網(wǎng)頁時，HTML使用標記標簽來描述網(wǎng)頁。

發(fā)展史

HTML：Hyper Text Markup Language超文本標記語言

超文本標記語言—在1993年6月互聯(lián)網(wǎng)工程工作小組工作案發(fā)布（并非標準）

HTML2.0—1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布過時。

HTML3.2—1996年1月14日，W3C推薦標準

HTML4.0—1997年12月18日，W3C推薦標準

HTML4.01（微小改進）—1999年12月24日，W3C推薦標準，2000年5月15日發(fā)布基本嚴格的HTML4.01語法，是國標標準化組織和國際電工委員會的標準

XHTML1.0—發(fā)布于2000年1月26日，是W3C推薦標準，后來經(jīng)過修訂于2002年8月1日重新發(fā)布

XHTML1.1—2001年5月31日發(fā)布

XHTML2.0是W3C的工作草案，由于改動過大，學習這個新技術(shù)的成本過高而最終胎死腹中，因此，現(xiàn)在最常用的還是XHTML1.0標準。

目前最新的版本為HTML5，它是2004年被提出，2007年被W3C接納并成立新的HTML工作團隊，

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

2012年12月17日HTML5規(guī)范正式定稿，

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

HTML 5作為最新版本，提供了一些新的元素和一些有趣的新特性，同時也建立了一些新的規(guī)則。這些元素、特性和規(guī)則的建立，提供了許多新的網(wǎng)頁功能，如使用網(wǎng)頁實現(xiàn)動態(tài)渲染圖形、圖表、圖像和動畫，以及不需要安裝任何插件直接使用網(wǎng)頁播放視頻等。目前企業(yè)開發(fā)中也在增大使用HTML5的力度

HTML的優(yōu)勢

各大瀏覽器廠商對H5的支持
市場的需求
跨平臺

二、HTML的基本結(jié)構(gòu)

<html>......</html> HTML文檔的開始和結(jié)束標記。
<head>……</head> 頭控制標記，不在界面上進行展示，子標簽可設置SEO優(yōu)化的一些內(nèi)容以及設置網(wǎng)頁的編碼。
<title>……</title>：設置瀏覽器的窗口上標題。
<body>……</body>：頁面可見內(nèi)容。

三、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的縮寫

雙引號：""

版權(quán)符號：©

空格：

源代碼

<!DOCTYPE html>

<head>

<title>注釋和特殊符號</title>

</head>

<body>

<pre>

注釋使用：

大于號：> great than的縮寫

小于號：< less than的縮寫

雙引號：""

版權(quán)符號：©

空格：

</pre>

5<10>6 <br>

"我是被雙引號引起來的內(nèi)容"<br>

我是測試空格的

</body>

</html>

瀏覽器預覽效果圖

以上就是HTML的簡單入門，后續(xù)帶大家更深入的了解HTML

在線咨詢

上一篇：Spring Boot 集成 socket.io 后端實現(xiàn)消息實時通信
下一篇：JavaScript 鼠標拖拽

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

H5（HTML5?）頁面策劃技巧

第八章 第四章 H5頁面策劃技巧

紹

Github

產(chǎn)品特點

有關技術(shù)棧

在線下載

后端部分

快速開始

目前已具備的功能

后續(xù)更新

預覽截圖

總結(jié)

、什么是HTML

二、HTML的基本結(jié)構(gòu)

三、HTML的基本標簽

您的項目需求

第八章第四章 H5頁面策劃技巧