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} ${b} ... 然后作为模板进行处理
自定义的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富文本显示元件展示要显示的内容

您的项目需求