TML 基础

非常简单的HTML文档

HTML 标题

HTML 段落

HTML 链接

HTML 图片

实例解析

HTML 标题

HTML 标题

在html源码中插入注释

插入水平线

实例解析

HTML 段落

HTML 段落

更多段落

本例演示在 HTML 文档中折行的使用。

HTML 格式化的某些问题。

实例解析

HTML 文本格式化

文本格式化

此例演示如何使用 pre 标签对空行和空格进行控制。

此例演示不同的"计算机输出"标签的显示效果。

此例演示如何在 HTML 文件中写地址。

此例演示如何实现缩写或首字母缩写。

此例演示如何改变文字的方向。

此例演示如何实现长短不一的引用语。

文本下划线与删除线

实例解析

HTML 样式

HTML Style 元素

背景色样式

字体样式，颜色，大小

文本对齐样式

设置文本字体

设置文本字体大小

设置文本字体颜色

设置文本字体，字体大小，字体颜色

HTML使用不同样式

没有下划线的链接

链接到一个外部样式表

实例解析

HTML 链接

创建超级链接

将图像作为链接

在新的浏览器窗口打开链接

链接到同一个页面的不同位置

跳出框架

创建电子邮件链接

创建电子邮件链接 2

实例解析

HTML 图像

插入图像

从不同的位置插入图片

排列图片

本例演示如何使图片浮动至段落的左边或右边。

制作图像链接

创建图像映射

实例解析

HTML 表格

简单的表格

没有边框的表格

表格中的表头

带有标题的表格

跨行或跨列的表格单元格

表格内的标签

单元格边距(Cell padding)

单元格间距(Cell spacing)

实例解析

HTML 列表

无序列表

有序列表

不同类型的有序列表

不同类型的无序列表

嵌套列表

嵌套列表 2

定义列表

实例解析

HTML Forms 和 Input

创建文本域(Text fields)

创建密码域

复选框

单选按钮

简单的下拉列表

预选下拉列表

本例演示如何创建一个文本域（多行文本输入控件）。

创建一个按钮

本例演示如何在数据周围绘制一个带标题的框。

带有文本域与输入域的表单

带有复选框与提交按钮的form表单

带有单选框与提交按钮的表单

发送邮件表单

实例解析

HTML iframe

内联框架 (HTML页面中插入框架)

实例解析

HTML 头部元素

描述了文档标题

HTML页面中默认的URL链接

提供文档元数据

实例解析

HTML 脚本

插入一个脚本

使用 <noscript> 标签

实例解析

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML 表格实例:

在线实例

表格

这个例子演示如何在 HTML 文档中创建表格。

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在浏览器显示如下：:

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在浏览器显示如下：

更多实例

没有边框的表格

本例演示一个没有边框的表格。

表格中的表头(Heading)

本例演示如何显示表格表头。

带有标题的表格

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

本例演示如何显示在不同的元素内显示元素。

单元格边距(Cell padding)

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用 Cell spacing 增加单元格之间的距离。

HTML 表格标签

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

• 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小时内可学会开发并开发出一套管理软件系统，然后看手册及其他视频来进阶提高快速成为高级开发人员