2分鐘上手、3小時學會無代碼軟件開發-HTML使用

TML是標簽語言，瀏覽器識別網絡傳遞的最基本的信息就是HTML標簽和標簽包含的內容，所有網頁信息都是這種類型的，開發者用標簽來標記信息內容傳給瀏覽器，瀏覽器識別并解釋標簽要求的種顏色、樣式來展示內容，這種內容一般叫超文本或富文本

無代碼元件的TAG屬性就是為了定義是什么樣的HTML標簽

默認的標簽可以在需要時修改，上圖中就是開發區選中一個Pane元件，下部屬性中顯示其為div標簽對象，所以我們一般其稱為顯示塊元件

以上示例是一個表格元件，默認的表格中行元件標簽是tr
WWW規范中，表格行元件tr中必須是td元件，不能是div或其他，所以如果我們需要放一個顯示塊元件時，需改顯示塊元件的TAG為td
同理，可以查看表格中默認放的日期、數字TAG都是td

用第三方工具合成自定義的HTML內容

上例是用百度UEditor在線進行一個表格富文本生成的演示
注意生成的HTML富文本正常是有換行處理，但在輸入到HTML Display富文本（也叫超文本）顯示元件中時，需刪除換行符號
 · 刪除方式為，將富文本放入一個文本編輯查看工具中，如Notepad++
 · 用查找替換方式，查到\r\n，替換為空格，將超文本轉為一行字符串
HTML富文本可以用Create From Template模板生成字符串元件來動態生成可變內容
 · 如果動態生成富文本，需將固定寫入的a b ... 改為變量${a} $ ... 然后作為模板進行處理
自定義的HTML富文本在開發中，會常用到，作為高級技能的一部分，建議按以上方式掌握
 · 可以用以生成打印內容，Lodop打印的HTML內容可以用HTML富文本傳入，參考“第三方插件接入”中“Lodop專業打印”一節內容
 · 第三方圖表中的代碼，也是由富文本生成并處理的，參考“第三方插件接入”中“Echarts數據可視化”一節內容

建議在線使用Ueditor等專業工具處理富文本
· 請參考：https://ueditor.baidu.com/website/onlinedemo.html

用無代碼HTML富文本顯示元件展示要顯示的內容

拖放一個HTML富文本顯示元件
拖入一個字符串常量元件，F2打開后，字符串常量值輸入我們用第三方或自寫的的富文本

*****

本文為TERSUS無代碼開發手冊文章，供參考學習使用，在有需要詳細了解對應內容時細看學習，敬請關注并轉發文章

參考我們手冊第一個文章中的2分鐘的計算器功能的拖放連線開發演示，可學會無代碼開發是如何開發軟件的

想學無代碼軟件開發的學員請先學習3小時免費教學視頻，3小時內可學會開發并開發出一套管理軟件系統，然后看手冊及其他視頻來進階提高快速成為高級開發人員

lt;marquee>...</marquee>普通卷動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預設卷動

<marquee behavior=alternate>...</marquee>來回卷動

<marquee direction=down>...</marquee>向下卷動

<marquee direction=up>...</marquee>向上卷動

<marquee direction=right></marquee>向右卷動

<marquee direction=left></marquee>向左卷動

<marquee loop=2>...</marquee>卷動次數

<marquee width=180>...</marquee>設定寬度

<marquee height=30>...</marquee>設定高度

<marquee bgcolor=FF0000>...</marquee>設定背景顏色

<marquee scrollamount=30>...</marquee>設定卷動距離

<marquee scrolldelay=300>...</marquee>設定卷動時間

<!>字體效果

<h1>...</h1>標題字(最大)

<h6>...</h6>標題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強調)

<i>...</i>斜體字

<em>...</em>斜體字(強調)

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執行標記符號)

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style =font-size:100 px>...</font>無限增大

<!>區斷標記

<hr>水平線

<hr size=9>水平線(設定大小)

<hr width=80%>水平線(設定寬度)

<hr color=ff0000>水平線(設定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結格式

<base href=位址>(預設好連結路徑)

<a href=位址></a>外部連結

<a href=位址 target=_blank></a>外部連結(另開新視窗)

<a href=位址 target=_top></a>外部連結(全視窗連結)

<a href=位址 target=頁框名></a>外部連結(在指定頁框連結)

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width=180>設定圖片寬度

<img src=圖片位址 height=30>設定圖片高度

<img src=圖片位址 alt=提示文字>設定圖片提示文字

<img src=圖片位址 border=1>設定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設定

<!>表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址

<table border=邊框大小>...</table>設定表格邊框大小(使用數字)

<table bgcolor=顏色碼>...</table>設定表格的背景顏色

<table borderclor=顏色碼>...</table>設定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色

<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)

<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)

<table cols=參數>...</table>指定表格的欄數

<table frame=參數>...</table>設定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數字)

<table height=高度>...</table>指定表格的高度大小(使用數字)

<td colspan=參數>...</td>指定儲存格合并欄的欄數(使用數字)

<td rowspan=參數>...</td>指定儲存格合并列的列數(使用數字)

<!>分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整

<frameset cols="20%,*">分割左右兩個框架

<frameset cols="20%,*,20%">分割左中右三個框架

<分割上下兩個框架

<frameset rows="20%,*,20%">分割上中下三個框架

<! - - ... - -> 注解

<a href target> 指定超連結的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結

<a href> 指定超連結

<a name=錨的名稱> 被連結點的名稱

<address>....</address> 用來顯示電子郵箱地址

<b> 粗體字

<base target> 指定超連結的分割視窗

<basefont size> 更改預設字形大小

<bgsound src> 加入背景音樂

<big> 顯示大字體

<blink> 閃爍的文字

<body text link vlink> 設定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設定表格標題位置

<caption>...</caption> 為表格加上標題

<center> 向中對齊

<cite>...<cite> 用於引經據典的文字

<code>...</code> 用於列出一段程式碼

<comment>...</comment> 加上注解

<dd> 設定定義列表的項目解說

<dfn>...</dfn> 顯示"定義"文字

<dir>...</dir> 列表文字標簽

<dl>...</dl> 設定定義列表的標簽

<dt> 設定定義列表的項目

<em> 強調之用

<font face> 任意指定所用的字形

<font size> 設定字體大小

<form action> 設定戶動式表單的處理方式

<form method> 設定戶動式表單之資料傳送方式

<frame marginheight> 設定視窗的上下邊界

<frame marginwidth> 設定視窗的左右邊界

<frame name> 為分割視窗命名

<frame noresize> 鎖住分割視窗的大小

<frame scrolling> 設定分割視窗的卷軸

<frame src> 將html檔加入視窗

<frameset cols> 將視窗分割成左右的子視窗

<frameset rows> 將視窗分割成上下的子視窗

<frameset>...</frameset> 劃分分割視窗

<h1>~<h6> 設定文字大小

<head> 標示文件資訊

<hr> 加上分格線

<html> 文件的開始與結束

<i> 斜體字

<img align> 調整圖形影像的位置

<img alt> 為你的圖形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入圖片并預設圖形大小

<img hspace> 插入圖片并預設圖形的左右邊界

<img lowsrc> 預載圖片功能

<img src border> 設定圖片邊界

<img src> 插入圖片

<img vspace> 插入圖片并預設圖形的上下邊界

<input type name value> 在表單中加入輸入欄位

<isindex> 定義查詢用表單

<kbd>...</kbd> 表示使用者輸入文字

<li type>...</li> 列表的項目 ( 可指定符號 )

<marquee> 跑馬燈效果

<menu>...</menu> 條列文字標簽

<multiple> 可同時選擇多項的列表欄

<noframe> 定義不出現分割視窗的文字

<ol>...</ol> 有序號的列表

<option> 定義表單中列表欄的項目

<p align> 設定對齊方向

<p> 分段

<person>...</person> 顯示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表單中定義列表欄

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強語氣

<sub> 下標字

<sup> 上標字

<table border=n> 調整表格的寬線高度

<table cellpadding> 調整資料欄位之邊界

<table cellspacing> 調整表格線的寬度

<table height> 調整表格的高度

<table width> 調整表格的寬度

<table>...</table> 產生表格的標簽

<td align> 調整表格欄位之左右對齊

<td bgcolor> 設定表格欄位之背景顏色

<td colspan rowspan> 表格欄位的合并

<td nowrap> 設定表格欄位不換行

<td valign> 調整表格欄位之上下對齊

<td width> 調整表格欄位寬度

<td>...</td> 定義表格的資料欄位

<textarea name rows cols> 表單中加入多少列的文字輸入欄

<textarea wrap> 決定文字輸入欄是自動否換行

<th>...</th> 定義表格的標頭欄位

<title> 文件標題

<tr>...</tr> 定義表格美一行

<tt> 打字機字體

<u> 文字加底線

<ul type>...</ul> 無序號的列表 ( 可指定符號 )

<var>...</var> 用於顯示變數

你太美。

雖然第一個html代碼寫的非常隨意，就四個字：雞你太美。但是用瀏覽器打開之后確實是能看到是以網頁的形式所展現的。這個現象就有點奇怪了，為什么？講道理，只要是一種語言，必定有自己的語法格式，得按它的套路去寫才能認為代碼寫的是對的，然后才能去正常的運行。

但是這里就四個字：雞你太美，它就能把這個東西給顯示出來，這是為什么？其實很簡單。

·可以看一下，按一下F12，把瀏覽器的開發者工具給打開。

·然后選中elements標簽頁，如果是中文版，這里就應該是元素。

·這里有4行文本，這4行文本里面有沒有一個比較熟悉的東西？雞你太美這四個字是不是HTML代碼里面寫的東西？如果把這個東西改了，雞你太美baby。

·然后就不再打開HTML文件了，直接按刷新。這里變成了雞你太美baby，這里是不是也變成了雞你太美baby。

·再比如加點東西，保存刷新，有沒有發現什么規律？這里寫什么，這一段就是什么，但其他地方是沒變的。

所以有理由相信這份代碼的完全體應該是什么？應該就是這個。所以先來把它復刻一下，尖括號。要注意，尖括號得是英文輸入法下的尖括號。html，有個had，后面又有一個head，只不過head前面加了一個斜杠。至于這些東西到底是什么意思，等一下再說。

先把代碼搞完，雞左邊有個body，后面有個body，下面又有一個斜杠。html好保存，然后刷新，效果和之前的閹割版是一樣的。

然后來看一下這些尖括號到底是什么意思，其實還是挺簡單的。首先在html里面，像這種用尖括號括起來的東西稱之為元素。在國內有的人喜歡把它稱為標簽，其實都是一個意思，就是元素的意思。所以在這里有幾種元素，很明顯是三種，一種是html，一種是head，還有一種是body。

這個時候有的小白可能會問了，為什么有的前面是加了個斜杠的？其實是這樣子的，在html里面有些元素是有包裹區間的，就比如body元素，body元素里面的數據或者叫內容是從哪到哪？很明顯這個是開頭，這個是結尾，然后掐頭去尾，內容就在這，懂了吧？開頭結尾。

所以head元素的數據在哪？就在這，什么都沒有。head元素的數據在哪？很明顯就是這個。知道元素的概念之后，接下來再看一下這幾種元素都是什么意思。

·首先html元素是告訴瀏覽器，接下來是html代碼。

·然后head還有body是什么意思？其實可以把HTML代碼想象成是一個人，一個人有自己的頭，還有身體，而且人家的腦袋里面此時此刻在想什么是看不出來的。所以head元素里面的內容一般都是去寫一些對于頁面的一些設置，或者在這個區域里面所看不到的一些東西。

就比如里面可以再加個元素，比如說叫title，title我相信大家應該都知道，就是標題的意思，這個也是一樣的，起止。然后中間這里寫什么？選項卡的這里名字就是什么？就比如坤坤牛逼，保存，然后刷新，是不是變成了坤坤牛逼？當然，想把這個東西放到別的地方也行，比如說放到body里面，然后保存，一刷新，你看也是坤坤牛逼，對吧？但是一般來說按照規范，一般是放到這種head元素里面去，這是head元素。

·然后接下來是body，body就是人的身體，人家長得什么樣子，身材好不好，到底前凸不凸，后翹不翹，一眼就能看得出來，多看一眼都會爆炸的那種。所以在body元素里面，一般都是寫一些在這個區域里面能看到的東西，就比如說一些文字或者說一些圖片等等，所以這個才是html代碼最基本的結構。

·然后回過頭來再看一下最初的問題，什么？就是一開始代碼不是這個樣子的嗎？沒有，那些head、html、body卻依然能在瀏覽器上正確的顯示出來。其實很簡單，就是因為雖然就寫了這個東西，但是瀏覽器會讀取代碼文件里面所寫的內容，寫了什么就能讀到什么。

如果代碼不夠規范，瀏覽器就會自動的幫你把這些元素給補齊，補齊完之后才是真正的HTML代碼。有了正確的代碼之后，瀏覽器才會根據這份代碼來進行渲染，也就是現在所看到的樣子。

所以代碼千萬條，規范第一條，因為永遠都不會想知道瀏覽器到底會對不規范的代碼進行什么樣的修改，把它改成什么樣子。所以html代碼的最基本的格式就是html、head、body。修改后的結果:雞你太美。

在線咨詢

上一篇：能使用HTML、Css解決的問題就不要使用JS
下一篇：HTML5語言優勢是什么？零基礎如何學習html5？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

2分鐘上手、3小時學會無代碼軟件開發-HTML使用

無代碼元件的TAG屬性就是為了定義是什么樣的HTML標簽

用第三方工具合成自定義的HTML內容

用無代碼HTML富文本顯示元件展示要顯示的內容

您的項目需求