頁設計是把顏色、圖片和字體等等要素進行組合調整，達到網頁頁面美化的目的，在給用戶帶來完美的視覺體驗的同時，也為用戶提供更好的使用體驗。因此，網頁設計需要考慮的設計因素有很多，絕不僅僅只是為了美觀。本文千鋒武漢Web前端培訓小編將推薦十款好用的HTML生成工具，幫助大家更高效率的完成網頁設計。

1、Bootstrap Studio

這是一款桌面應用程序，旨在幫助web開發人員和設計人員創建一個相應迅速的網頁。一般是用Bootstrap Studio來架構、設計頁面效果圖和最初的修飾，然后幾乎不用導出功能，而是直接在單元上右鍵，復制html。可以說Bootstrap Studio是在Chrome瀏覽器代碼和 Node.js 基礎之上重組和整理出的一套很規范的基于Bootstrap框架的網頁前端設計工具。

2、Template Stash

這款軟件幾乎集合了所有類型網頁的模板，你可以通過關鍵詞檢索來找到你想要的主題風格。可以說Template Stash 是一個提供高品質，完全免費的響應式網頁模板，幫助設計師們找到完美的響應式網站主題或模版，根據網站分類來提高不同的模版樣式，所有的模版都是來源于Kickstart項目。

3、Carrd

這款軟件是免費的，可以幫助初學者制作一個簡單、響應快捷的網頁，只要幾個簡單步驟就能快速設計出美觀特色的響應式網站。

4、Bubble

Bubble的優勢在于使用者不用掌握任何編程技巧就可以制作網頁，它獨特的拖拉界面可以讓使用者在網頁上添加視頻、地圖、音頻等等功能。

5、Tilda Publishing

這款軟件可以幫助使用者制作一個內容導向型的網頁，這款軟件非常適合那些喜歡設計博客頁面的人。Tilda Publishing的最大優勢在于可以會將不同內容形態切割成blocks，如果把網站想象成堆積木，內容就好比一塊塊不同花色的積木，利用拖拽方式進行排列組合，網站設計更加獨特，操作上也更加簡單。

6、XPRS

如果你曾經因為設計網頁太過復雜和繁瑣而感到沮喪，那么這款軟件無疑是你的福音。這款軟件會提供一個非常簡單的編輯環境，讓網頁設計變得非常簡單，因此對于新手小白來講嗎，是一款十分好用的HTML生成工具。

7、Hype 3.0

這款軟件可以幫助你讓網頁的內容“動”起來，使用者可以設計每一幀動畫并且進行排序，也可以手動添加或者刪除動畫效果，如果你想讓自己的網頁更加生動，那么這款軟件絕對是你的首選。這是一款強大的Mac OS平臺HTML5創作工具，它可以在網頁上做出賞心悅目的動畫效果，無需 Flash 插件。更重要的是這款強的html5開發工具竟然還有中文版！現在你幾乎不需要任何的編碼知識，只需要簡單的拖拽就可以制作出好玩的動畫，基于時間軸的制作方式非常的方便，最新的3.0版本具有全新的 UI和24 種全新的定時功能等新功能，非常強大！

8、OnePager

Onepager 是一個提供使用者建置小型網站網站的網絡服務，透過視覺化的操作介面，無須下載、安裝任何軟體，也不用苦苦尋找虛擬主機，只要申請帳戶，就能夠快速建立自己公司的網站。作為一款好用的HTML生成工具，它可以幫助使用者快速編輯所有類型的網頁。使用者可以輕松建立一個響應迅速的網站，這款軟件內置的預設系統使得網頁的一切都是可定制的，使用者甚至可以自己設計網頁的主題風格。總之，Onepaper 讓制作網頁變得非常簡單。內建多種佈景主題可以切換、使用，你甚至不用具備網頁設計的知識，直接透過線上工具就能變更設計。

9、Grav

Grav是一個簡單可擴展的CMS平臺。因為是純文件系統，所以它無需安裝，并且它有著完善的后臺界面和完整的官方文檔。又因為可擴展型號，可以通過有插件控制幾乎每個環節。不過這也是一款較為復雜的HTML生成工具，需要使用者掌握一些編程的技巧。

10、HTML to WordPress

這個軟件可以將靜態的HTML網站轉換成WordPress，如果你想轉換你的網站格式，這款軟件將幫助你節省大量的時間，因此推薦大家使用。

以上就是千鋒武漢Web前端培訓小編推薦的十款好用的HTML生成工具，大家都用過了嗎？如果你現在還在尋找一款HTML生成工具，不妨試試以上的推薦工具，相信總有一款適合你。關注“武漢千鋒”微信公眾號，會定期為大家分享最新Web前端發展趨勢、學習資料，助力大家學好Web前端。

者 | 單雨

責編 | 胡巍巍

出品 | CSDN（ID：CSDNnews）

前言

為了實現模板封裝和復用，提高HTML界面調試便捷性以及前后端解耦等目標，Django定義了自己的網絡模板語言。

當前介紹模板語言的官方文檔已經非常完備，幾乎涵蓋了開發中需要用到的知識點和需要注意的問題，但同時官方文檔也存在一些問題：

• 翻譯不夠完善，帶來閱讀的困難；

• 一些知識點的介紹過于簡短，存在大量的頁內鏈接，閱讀時需要跳轉到不同的頁面，閱讀不連貫。

本文基于官方文檔系統介紹了Django模板語言的基礎知識點，方便快速了解Django模板語言。

模板系統設計哲學

Django的模板系統不是簡單的把Python嵌入到HTML中。

它的設計宗旨是：模板系統旨在展示內容, 而不是程序邏輯，因此不在HTML頁面中嵌入Python。

簡單的說，模板只負責渲染數據，大多數邏輯應該交給視圖（view）進行處理。

模板簡介

模板是一個簡單的文本文件。它可以生成任何基于文本的格式（如 HTML,XML,CSV等）。除了基本的HTML標簽外，模板還包含兩種額外的元素——變量和標簽。

模板中包含的變量可以被替換為變量的值，標簽則被替換為相應的模板控制邏輯。示例：

django
{% extends "base_generic.html" %}
{% block title %}{{ section.title }}{% endblock %}
{% block content %}
<h1>{{ section.title }}</h1>
{% for story in story_list %}
<h2>
<a href="{{ story.get_absolute_url }}">
{{ story.headline|upper }}
</a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}

`{{ section.title }}`在模板渲染時將會被變量的值替換，for標簽可以實現模板的循環渲染。

基礎語法

變量

變量實現從模板上下文字典（返回HTTP響應時傳遞過來的字典）中輸出一個值，這是一個類似于dict的對象，包含鍵值對。當模板引擎遇到一個變量時，它會計算該變量，并用結果替換它。

變量名由字母、數字字符和下劃線("_")組成，但不能以下劃線開頭。點(".")也出現在變量中，代表屬性調用，變量名中不能有空格或標點符號。

示例：

django
My first name is {{ first_name }}. My last name is {{ last_name }}.

當傳入一個上下文字典`{'first_name': 'John', 'last_name': 'Doe'}`時，將會渲染得到：

django
My first name is John. My last name is Doe.

模板中的變量被字典中的值替換了。

變量還可以使用點表示法實現字典查找、屬性查找和列表索引查找等操作：

django
{{ my_dict.key }}
{{ my_object.attribute }}
{{ my_list.0 }}

點表示法底層原理

當模板系統遇到一個點,它會按順序嘗試下面的動作：

1. 字典查詢

2. 屬性或方法查找

3. 數字索引查詢

如果結果值是可調用的，則調用該值時將不帶參數，調用的結果成為新的模板值。

當進行能覆蓋字典查找的操作時，這種查找順序可能會造成一些意想不到的行為。例如：如果試圖循環一個collection .defaultdict字典對象：

django
{% for k, v in defaultdict.items %}
{其他操作}
{% endfor %}

因為字典查找是首先發生的，所以這個行為會先提供一個默認值，而不是使用預期的.items方法。在這種情況下，應該首先考慮使用字典查找，而不是使用字典的屬性調用。

注意

屬性通常被解釋為一個文本字符串，防止和同名的變量沖突。例如{{foo.bar}}中的屬性“bar”將被解釋為一個文本字符串，如果模板上下文中存在變量“bar”，則不會使用該變量的值。

以下劃線開頭的變量屬性可能不能訪問，因為它們通常被認為是私有的。

如果引用不存在的變量，模板系統將插入string_if_invalid選項的值，該選項默認設置為“”(空字符串)。

標簽

標簽在模板渲染過程中提供任意邏輯。標簽可以輸出內容，作為控制結構，例如“if”語句或“for”循環，從數據庫獲取內容，甚至允許訪問其他模板標簽。

（1）標簽聲明

標簽的一般形式為：

django
{% tag %}

示例：

django
{% csrf_token %}

（2）傳入參數

django
{% cycle 'odd' 'even' %}

（3）成對使用的標簽

有些標簽需要開始和結束標簽：

django
{% if user.is_authenticated %}Hello, {{ user.username }}.{% endif %}

（4）常用標簽

for：循環數組中的每個元素. 比如, 顯示列表 `athlete_list` 中每個元素的 `name` 屬性。

django
<ul>
{% for athlete in athlete_list %}
<li>{{ athlete.name }}</li>
{% endfor %}
</ul>

if 、elif和else：在上面，如果athlete_list不為空，則{{athlete_list|length}}變量將顯示運動員的數量。

否則，如果athlete_in_locker_room_list不為空，則會顯示“Athletes should be out…”消息。如果兩個列表都為空，則顯示“No athletes”。

也可以在if標簽里使用過濾器和各種操作符：

django
{% if athlete_list|length > 1 %}
Team: {% for athlete in athlete_list %} ... {% endfor %}
{% else %}
Athlete: {{ athlete_list.0.name }}
{% endif %}

注意

雖然上面的示例可以工作，但是要注意，大多數模板過濾器都返回字符串，因此使用過濾器進行數學比較通常不會正常工作，而長度是個例外。

（5）更多

Django有很多內置標簽，更多關于內置標簽的信息請參考官方文檔：

https://docs.djangoproject.com/zh-hans/2.2/ref/templates/builtins/ref-templates-builtins-tags

如果需要編寫自定義標簽，請參考官方文檔

https://docs.djangoproject.com/zh-hans/2.2/howto/custom-template-tags/howto-writing-custom-template-tags

如果需要對使用的標簽和自定義的標簽做一份說明文檔，可以使用Django提供的文檔工具，詳情請參考：

https://docs.djangoproject.com/zh-hans/2.2/ref/contrib/admin/admindocs/

過濾器

簡介

過濾器可以對變量做一些操作，例如給變量賦值，改變變量的值等。

修改變量顯示

過濾器可以修改變量的顯示。例如：

django
{{ name|lower }} 

通過過濾器lower變量{{ name }}變為了小寫字符，通過管道符(|)間隔變量和過濾器來使用過濾器。

鏈式調用過濾器

一個過濾器的輸出可以作為下一個過濾器的輸入。

{{ text|escape|linebreaks }}是一種常用的轉換方式, 在這之后換行符被替換為了 <p> 標簽。

轉換變量和標簽參數

過濾器轉換變量和標簽參數的值。示例：

django
{{ django|title }}

傳入`{'django': 'the web framework for perfecalist With deadline '}`上下文字典時，該模板呈現為：

django
The Web Framework For Perfectionists With Deadlines

傳入參數給過濾器

示例1：

django
{{ my_date|date:"Y-m-d" }}

my_date將會被替換為當前日期。

示例2：

django 
{{ bio|truncatewords:30 }}

將會會顯示 `bio` 變量的前30個字符

注意

過濾器參數中如果包含空格和標點符號，必須使用引號“”括起來，例如，要用逗號和空格連接列表，可以使用{{list|join:"， "}}。

Django提供了大約60個內置模板過濾器，請參考官方文檔：

https://docs.djangoproject.com/zh-hans/2.2/ref/templates/builtins/ref-templates-builtins-filters，

下面列舉一些常用的過濾器：

default

如果變量為false或空，則使用給定的默認值。否則，使用變量的值。例如：

django
{{ value|default:"nothing" }}

如果 `value` 沒有提供或者為空，那么將它顯示為 "`nothing`" 。

length

返回值的長度。這對字符串和列表都適用。例如：

django
{{ value|length }}

如果 `value` 為 `['a', 'b', 'c', 'd']`, 那么他將被顯示為 `4`。

filesizeformat

將值格式化為“人類可讀的”文件大小(即“13kb”、“4.1 MB”、“102字節”等)。例如：

django
{{ value|filesizeformat }}

如果值為123456789，則輸出為117.7 MB。

如果需要自定義過濾器，請參考請官方文檔：

https://docs.djangoproject.com/zh-hans/2.2/howto/custom-template-tags/

注釋

示例：

單行注釋

django
{ this won't be rendered }

多行注釋：{% comment %} 和{% endcomment %}

django
<p>Rendered text with {{ pub_date|date:"c" }}</p>
{% comment "Optional note" %}
<p>Commented out text with {{ create_date|date:"c" }}</p>
{% endcomment %}

注意：Comment標簽不能嵌套使用。

作者簡介：單雨，90后工科男，偽文藝青年。目前就讀于北京理工大學宇航系，喜歡研究AI，網絡爬蟲，微信小程序以及機器人，癡迷于Coding，睡前必擼碼。

【END】